pointer-events:none提高页面滚动时候的绘制性能？
SheLaird
11年前
<h2>一、故事是这么发生的</h2> <p>很久很久以前……还没有 pointer-events , 因此故事不是发生在很久很久以前，而是就发生前前个月。那是个懒散的下午，温暖的阳光透过落地窗悠然地洒在办公桌上，就在这个惬意的时候，我瞅见了这么一条微博：</p> <p><img src="https://simg.open-open.com/show/29df95bcf0994275c9ce9593803ac8a3.png"></p> <p>哟，转发蹭蹭蹭上了3位数，不错哦！此tip源自thecssninja.com上 <a href="/misc/goto?guid=4959673558280154989" rel="nofollow,noindex">60fps scrolling using pointer-events: none</a> 一文。</p> <p>这种结论直接，通俗好记的奇淫技巧似乎颇受大家喜欢。知道即GET! 无需动脑，无需深入思考，自然大家都喜欢。还有国人翻译了这篇文章： <a href="/misc/goto?guid=4959673558373996869" rel="nofollow,noindex">[译]使用pointer-events:none实现60fps滚动</a> 。</p> <p>故事似乎挺美好，白雪公主和王子相遇，从此幸福地在一起！然后，众粉纷纷效仿采用，也希望得到幸福……</p> <p>如果故事就此happy ending结束，似乎皆大欢喜。但是，抱歉，只有童话故事才会这样。代码若江湖，血雨与腥风，活脱脱现实世界。因此，白雪公主和王子相遇之后的故事不能不提，比方说王子一直奇怪“为何自己子女都很矮”这样的场景。</p> <p>我希望那百来个转发的童鞋能看到本文，否则，就不会兴致勃勃以为新技能get，幸福生活coming呢！</p> <h2>二、怀疑与真理的探究</h2> <p>哈佛的校训简单而不简单： <strong>真理</strong> ！</p> <p>说简单是因为就一个单词，两个汉字。比背鲁迅的文章简单 <em>value</em> = PM2.5 倍。说不简单，是因为要做到很难。</p> <p>真理这东西是需要不断探究的，是要不断质疑与论证的。</p> <p>小学应该学过“两个铁球”的故事：超著名哲学家亚里士多德认为，10斤的铁球和1斤的铁球同时往下落，10斤的那个球速度要快10倍。结果伽利略在著名的比萨斜塔一实验，证实两个铁球同时落地，这就是真理的探究。</p> <p>首先，要敢于怀疑权威；其次要自己大胆试验认证；最后要勇于提出自己的观点。</p> <p>这有点类似于我们常说的“ <strong>科研精神</strong> ”！</p> <p>但是，人各有志。很多同学就想混口饭吃，很多同学希望的是来钱多，来钱快。“探求真理”这种看不到短期利益的事情着实不是他们喜欢的。</p> <p>哈佛校训20条——get it!</p> <p>反复煮沸的水不能喝——get it!</p> <p>维C不能和虾一起吃，会中毒——get it!</p> <p>pointer-events:none提高滚动绘制性能——get it!</p> <p>类似上面这些快餐式的论点，往往这些同学乐于接受，并甚至作为真理。当然，不影响正常的生存。不过似乎就是几十亿人口中那芸芸众生中的一个。在上帝看来，似乎没有什么特别的区分度，可有可无。不过，这些同学本身就是希望平平凡凡、默默无闻过一生，因此，我觉得挺好的。虽然，上面4条基本上都是假的！</p> <p>thecssninja那篇文章的视频真真切切显示了绘制性能提高了哈，貌似有同行亲自测试，那条微博Gif截图就能说明问题啊！这些都是活脱脱的证据啊，怎么可能“pointer-events:none提高滚动绘制性能”是假的呢！</p> <p>那我要反问下诸位了：</p> <p>1. 所有的测试似乎都是Chrome浏览器，FireFox浏览器测试了没，IE呢？移动设备呢？</p> <p>2. 所有测试都是较新版本的Chrome浏览器，旧版本的也是这样吗？</p> <p>3. 测试页面 box-shadow 盒阴影效果为主，如果是其他UI效果，也会是这个结果吗？</p> <p>4. pointer-events:none 样式应用本身就涉及重绘，这个性能影响有没有考虑进去？</p> <p>5. 该方法经过实际场景的验证了吗，能否应对各种应用场景？</p> <p>6. 有没有相关其他方法增强性能，例如覆盖一个div层？</p> <p>如果最后的结论是，只有最新PC版本的Chrome浏览器才有此性能提高，您还会如此兴奋，以为轻轻松松捡了个宝吗？</p> <h3>三、pointer-events:none知识快补</h3> <p>早在2011年的时候，我就着重介绍了 pointer-events:none 这个声明，可参考之前的文章“ <a href="/misc/goto?guid=4959673558459528350" rel="nofollow,noindex">CSS3 pointer-events:none应用举例及扩展</a> ”。其中不仅有实例应用，以及其他不支持浏览器的兼容方案。推荐看下。</p> <p>我个人将 pointer-events:none 理解为“幻影特性”。原话如下：</p> <p>pointer-events:none的作用是让元素实体“虚化”。例如一个应用pointer-events:none的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。一切都是幻影!</p> <p>我从维基上找到的解释是： <strong>用户发起的光标移动或对象选择等</strong></p> <p>如果我们在 body 标签上应用该CSS声明，则整个页面（如果内部没有其他 pointer-events 设置）就像是一个背景图片的存在。不能选不能点不能相应 hover ，幻影而已。</p> <h3>四、评论中的集体智慧</h3> <p>一个微博要想成为经典，必须要有神最右的支持。一个知识体系需要完善，也需要百家之言。</p> <p>新技能tip的出现，如果只看文章主体介绍，似乎又雾里看花水中望月之感。点评网为什么很多人去看，是因为商家的介绍吗？显然是因为出彩有价值的点评。</p> <p>thecssninja这篇文章显然也是如此。</p> <p>如果您单纯看文章的结论，那你可就错过了很多精彩的内容。</p> <p>我们从上往下（时间顺序）一条一条过一下（版式很考究，如果您发现布局shit一般，请访问原出处）：</p> <p><img src="https://simg.open-open.com/show/f839be371ba80ac5eb1c0b442c57cf43.jpg"> <em>Ekrem Buyukkaya</em> says:</p> <p>November 26, 2013 at 3:06 am</p> <p>Brilliant.</p> <p><img src="https://simg.open-open.com/show/c989e71e70aca36d815c28d9cf85c329.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Ekrem Buyukkaya</em> 说：</p> <p>2013-11-26 3:06</p> <p>聪明。</p> <p>//zxx: 酱油评论！</p> <p><img src="https://simg.open-open.com/show/281df7f2feff7930262825ce57cef97f.jpg"> <em>Chris</em> says:</p> <p>November 26, 2013 at 6:04 am</p> <p>Wonder if there are any side effects…BTW, the demo works nicely in IE11 too, Shows the same difference in the Performance tab in the new F12 Tools.</p> <p><img src="https://simg.open-open.com/show/b1a7476952e75ff6d016cc540097676e.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Chris</em> 说：</p> <p>2013-11-26 6:04</p> <p>不知道有没有其他副作用…顺便说一句，在IE11浏览器下，通过F12打开性能测试选项卡进行性能测试，出现了同样的差异。</p> <p>//zxx: 很赞的同行。第一句提出疑问，怀疑其副作用；第二句自己实践，在IE11浏览器下测试。亲自验证方法的可行性。完全符合我上面提到的对“真理的探究”。对比下自己，如果你遇到这样的状况，会怀疑吗？会自己测试吗？如果没有，可能需要反思下了。</p> <p>这里评论说IE11下测试结果一致，你是相信呢还是怀疑呢？你是直接接受了这个观点呢？还是会自己在IE11下测试一遍？是真是假，是对是错，咱接着往下看！</p> <p><img src="https://simg.open-open.com/show/9a98c06334f9c4be4be0c2c76d9125ed.jpg"> <em>Benz</em> says:</p> <p>November 26, 2013 at 6:54 am</p> <p>Jesuz so simple and so powerful – thx!</p> <p><img src="https://simg.open-open.com/show/64420447a8de24f5b4dc22b97ed49ea7.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Benz</em> 说：</p> <p>2013-11-26 6:54</p> <p>好简单好强大 – 多谢！</p> <p>//zxx: 典型的拿来主义者。快餐速食者。但至少人家还会评论以表示感谢。</p> <p><img src="https://simg.open-open.com/show/b7392efa570e3b004b17affdec92cf40.jpg"> <em>Tyler</em> says:</p> <p>November 26, 2013 at 8:01 am</p> <p>Just a note, this won’t work with fullscreen applications that rely on content panels using `overflow: auto`, as `pointer-events: none` on the body element won’t register the scroll events. It appears the pointer-events property needs to be applied to a container within the scrollable area.</p> <p><img src="https://simg.open-open.com/show/4d3ece8c472fbf8a11a1c856c2e341cf.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Tyler</em> 说：</p> <p>2013-11-26 8:01</p> <p>这里要注意下，这个对于内容面板需要使用 overflow: auto 全屏应用不适用，因为 pointer-events: none 应用在 body 元素上的时候不会注册滚动事件。似乎 pointer-events 属性需要应用在有滚动区域的容器上。</p> <p>//zxx: 这个算是一个补充tip. 哪个滚动哪个应用 pointer-events: none . 是不是应该自己测试下？没错，后面会展示我的测试结果。</p> <p><img src="https://simg.open-open.com/show/35e2f6b0a1bb4e9df4023825d51d0b07.jpg"> <em>Malte Ubl</em> says:</p> <p>November 26, 2013 at 9:14 am</p> <p>Simple, but doesn’t work as well as you think because this approach makes the document unclickable for up to 500ms after scrolling end. Here is an explanation how to fix it <a href="/misc/goto?guid=4959673558530029713" rel="nofollow,noindex">https://plus.google.com/+MalteUbl/posts/NsyYKenqYNP</a></p> <p><img src="https://simg.open-open.com/show/8db62afa27c4dda5b9fa43f4e2e47e3e.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Malte Ubl</em> 说：</p> <p>2013-11-26 9:14</p> <p>很明显，这厮不会如你所想那般工作。因此，它会让页面在滚动结束后500毫秒内没法点击。这显然会有问题，下面这个可以修复这个问题</p> <p><a href="/misc/goto?guid=4959673558530029713" rel="nofollow,noindex">https://plus.google.com/+MalteUbl/posts/NsyYKenqYNP</a> .</p> <p>//zxx: 该评论给出的链接似乎要爬梯子的干活。我司天然KX上网，于是截个图给大家看看：</p> <p><img src="https://simg.open-open.com/show/673e59376e46195a5504f90348c520ef.png"></p> <p>其解决问题的关键技术点与我11年关于 pointer-events 那篇文章给出的兼容解决方案的技术点一致。</p> <p><img src="https://simg.open-open.com/show/00729817beb2031f93d715c4c967aa8e.png"> <em>Chip</em> says:</p> <p>November 26, 2013 at 11:38 am</p> <p>Really nice – solves a specific issue we we’re having with hover events firing off while scrolling! The only issue I’m still seeing is the recalcute style (purple) event jumping to 30 fps each time the class is added to the body. I didn’t see the same thing in your video so I’m wondering if I’m doing something wrong.</p> <p>https://www.dropbox.com/s/jant444jwgo2jep/recalculate%20jump.png</p> <p><img src="https://simg.open-open.com/show/58338fe93904598e865ceb68090f8cf5.png" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Chip</em> 说：</p> <p>2013-11-26 11:38</p> <p>真的很赞！解决了我们滚动时候触发hover事件这个问题。现在我仍不解的唯一问题就是，每次往 body 添加类名的时候，计算样式(粉色那个)事件立马跳到30帧频。但是，我在你的视频上没有看到同样的现象。我在想是不是我哪里做错了。一张需要爬墙同时可能被删除的图片地址。</p> <p>//zxx: 哈，这一部分对话很精彩的，注意下面作者的回复~</p> <p><img src="https://simg.open-open.com/show/a191bb8e9fbf28a8ce9b6cebb111e1e3.jpg"> <em>Ryan Seddon</em> says:</p> <p>November 26, 2013 at 12:53 pm</p> <p>@Chip – Yep @derSchepp has said to set document.body.style directly rather than adding/removing a class to avoid a reflow. I’ll update the article real soon.Also I’d say it’s way less noticable in my video as my DOM structure is a lot simpler than your app you’re trying this in.</p> <p><img src="https://simg.open-open.com/show/51d54eb469f6fbdd633433017600dd4d.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Ryan Seddon</em> 说：</p> <p>2013-11-26 12:53</p> <p>@Chip – 嗯哪，根据@derSchepp的说法，直接在 document.body.style 上设置相比添加/删除类名可以避免回流。我待会就更新下文章。</p> <p>另外，您可能没注意到，我视频中DOM结构要比你尝试的app要简单多。</p> <p>//zxx: 继续精彩的对话~</p> <p><img src="https://simg.open-open.com/show/58338fe93904598e865ceb68090f8cf5.png" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Chip</em> says:</p> <p>November 26, 2013 at 2:20 pm</p> <p>I tested Malte’s idea of adding / removing a cover div and that is working the best for me. Changing the document.body.style still causing a 30fps recalculate, but simply adding / removing a cover div with the following css worked perfect and keeps us at 60fps:</p> <pre> .scroll-cover { top: 0; left: 0; bottom: 0; right: 0; position: fixed; pointer-events: auto !important; z-index: 10000; }</pre> <pre> var body = document.body, cover = document.createElement('div'); cover.setAttribute('class','scroll-cover'); window.addEventListener('scroll', function() { clearTimeout(timer); body.appendChild(cover); timer = setTimeout(function(){ body.removeChild(cover); },500); }, false);</pre> <p>I was able to change the setTimeout to 100 to make clicks more responsive and still keep perf</p> <p><img src="https://simg.open-open.com/show/58338fe93904598e865ceb68090f8cf5.png" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Chip</em> 说：</p> <p>2013-11-26 14:20</p> <p>我试验了Malte关于“添加/移除一个覆盖div”的想法，貌似效果最好。改变 document.body.style</p> <p>依旧会导致30fps的重计算，但是很单纯地“添加/移除一个覆盖div”同时使用下面的CSS效果完美，依然保持60fps.</p> <p>代码略…</p> <p>我把 setTimeout 时间改成 100 毫秒依然效果很赞哦。</p> <p>//zxx: 是不是又新技能get啦！到底是新技能还是新鸡肋？面对这个疑问我们该怎么办？很简单，按照上面的真理步骤，1. 怀疑； 2.自己试验。这个后面我们一起实践一番。</p> <p><img src="https://simg.open-open.com/show/b415a8da7f7aa0341147f6b7ae760e73.png"> <em>Matt Stuehler</em> says:</p> <p>November 26, 2013 at 3:17 pm</p> <p>How does this apply to mobile devices (iOS in particular)? Is it at all relevant?</p> <p>And if it is… what are the implications of using -webkit-overflow-scrolling: touch? That seems to complicate the issue of knowing when the scroll event begins and ends…</p> <p><img src="https://simg.open-open.com/show/ed63625f37c2f9e7755c8d64e2dc6fb2.png" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Matt Stuehler</em> 说：</p> <p>2013-11-26 15:17</p> <p>这个在移动设备上咋整啊（尤其iOS设备）？这个是一方通行的吗？</p> <p>如果……使用了 -webkit-overflow-scrolling: touch 又该如何实现？似乎当滚动事件开始于结束的时候，问题变得更复杂了……</p> <p>//zxx: iOS等移动设备上副作用开始有人提出……</p> <p><img src="https://simg.open-open.com/show/6b41c258aa25a0613eba93db0530ddd0.jpg"> <em>Peter</em> says:</p> <p>November 27, 2013 at 5:58 pm</p> <p>This looks great! However there’s one thing I don’t understand – you disable pointer events and immediately after show that the hover states still work, before scrolling down the page at 60fps. How did the hover states still work? Were you enabling the JS version not just applying the CSS class? Thanks!</p> <p><img src="https://simg.open-open.com/show/8e95b89e2cb6eae5933fd1313a714c0c.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Peter</em> 说：</p> <p>2013-11-27 17:58</p> <p>看上去很不错！但我有一事不明——你禁用了 pointer events 但 hover 状态在滚动结束后又立即显示出来了。怎么办到的？你是不是JS里面捣腾了葫芦药而不仅仅是应用CSS类名啊？多谢！</p> <p>//zxx: 没好好看文章的小白来问问题了。</p> <p><img src="https://simg.open-open.com/show/c0f61ca806a317173eb4f43c0856227a.jpg"> <em>sam</em> says:</p> <p>November 28, 2013 at 5:36 am</p> <p>Blown away. This is simply brilliant.</p> <p><img src="https://simg.open-open.com/show/c9dcdeb4c017d1ee00fb68385efcafcb.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>sam</em> 说：</p> <p>2013-11-28 5:36</p> <p>走起。简直超神了。</p> <p>//zxx: 马屁党。</p> <p><img src="https://simg.open-open.com/show/86eb0d0c2484a39927beeea49e0be2c6.png"> <em>Aurelien Foutoyet</em> says:</p> <p>November 28, 2013 at 8:33 am</p> <p>Really clever sir.Thanks for sharing !</p> <p><img src="https://simg.open-open.com/show/bce0639afebd07678100339c12a98c48.png" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Aurelien Foutoyet</em> 说：</p> <p>2013-11-28 8:33</p> <p>太聪明了。多谢分享！</p> <p>//zxx: 马屁党, again!</p> <p><img src="https://simg.open-open.com/show/51d54eb469f6fbdd633433017600dd4d.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Ryan Seddon</em> says:</p> <p>November 28, 2013 at 9:07 am</p> <p>@Peter –</p> <p>The hover effects are only disabled once you start to scroll so it won’t interfere with hover until then, so that’s why hover still works in the video after I click the disable button.</p> <p><img src="https://simg.open-open.com/show/51d54eb469f6fbdd633433017600dd4d.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Ryan Seddon</em> 说：</p> <p>2012-11-28 9:07</p> <p>@Peter –</p> <p>hover 效果只在开始滚动的时候禁用，所以此时没有 hover 相关交互，直到滚动停止。这就是为什么视频中我点击了禁用按钮， hover 效果仍然有效的原因。</p> <p>//zxx: 小白辅导中……</p> <p><img src="https://simg.open-open.com/show/51d54eb469f6fbdd633433017600dd4d.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Ryan Seddon</em> says:</p> <p>November 28, 2013 at 9:14 am</p> <p>@Matt – Hover on scroll isn’t really relevant to non mouse based devices as you can’t really trigger a hover. You should really avoid the use of :hover on touch based devices all together as it causes issues.</p> <p><img src="https://simg.open-open.com/show/51d54eb469f6fbdd633433017600dd4d.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Ryan Seddon</em> 说：</p> <p>2013-11-28 9:14</p> <p>@Matt – 对于无鼠标设备而言，scroll上面的hover实际没有关联的。因为你没法真正触发 hover . 如果这导致了某些问题，你应该试着避免在触摸式设备上使用 :hover .</p> <p>//zxx: 有推脱之嫌……</p> <p><img src="https://simg.open-open.com/show/00729817beb2031f93d715c4c967aa8e.png"> <em>Sam Jarvis</em> says:</p> <p>November 28, 2013 at 7:21 pm</p> <p>Amazing.</p> <p><img src="https://simg.open-open.com/show/58338fe93904598e865ceb68090f8cf5.png" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Sam Jarvis</em> 说：</p> <p>2013-11-28 19:21</p> <p>震精。</p> <p>//zxx: 马屁党，again’s again.</p> <p><img src="https://simg.open-open.com/show/c4f9f69f851ba6ebe08e19e2cf6f08b5.jpg"> <em>Manumanu</em> says:</p> <p>November 28, 2013 at 10:42 pm</p> <p>Great idea. Just wanted to say : IE11 naturally disable pointer events when scrolling. Dunno since which version, ’cause i wasn’t aware of this issue.</p> <p><img src="https://simg.open-open.com/show/bafb93e10d09eeb06ebc3c92a959a1fd.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Manumanu</em> 说：</p> <p>2013-11-28 22:42</p> <p>想法不错。我只想说：IE11在滚动的时候天然禁用 pointer events . 但不知道从哪个版本开始，因此这里的探讨的问题我一点也不在意。</p> <p>//zxx: 哟，注意啦！问题来了！前面有测试说IE11下结果跟Chrome是一样的，这位兄弟说IE11天然滚动禁用鼠标事件。孰对孰错？还得自己测试~~</p> <p><img src="https://simg.open-open.com/show/3ba10dd1db3486b6f55d5d5483256201.jpg"> <em>Ben Knight</em> says:</p> <p>November 29, 2013 at 2:57 pm</p> <p>Great minds think alike!</p> <p><a href="/misc/goto?guid=4959673558627328000" rel="nofollow,noindex">https://推ter.com/benjamin_knight/status/401829093055791104</a></p> <p><img src="https://simg.open-open.com/show/70b40afecf98e24bbfbcd630e7ab8825.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Ben Knight</em> 说：</p> <p>2013-11-29 14:57</p> <p>英雄所见略同！</p> <p><a href="/misc/goto?guid=4959673558627328000" rel="nofollow,noindex">https://推ter.com/benjamin_knight/status/401829093055791104</a></p> <p>//zxx: 有想法要通过更好的渠道呈现告知。否则，你就不是首创者。这位兄弟推ter发布于17号，见下图：</p> <p><img src="https://simg.open-open.com/show/c29d67c8ab4885389974ff433860df90.png"></p> <p><img src="https://simg.open-open.com/show/f1456bc96476619af219b76f71e4ce85.jpg"> <em>Mathias Bynens</em> says:</p> <p>November 29, 2013 at 6:09 pm</p> <p>Instead of document.body , consider applying this to the root element ( document.documentElement ). That way, it will still work if you use <html> and <body> as a free <div> — e.g. if you apply margin: 0 auto; max-width: 30em; box-shadow: …; to <body> .</p> <p><img src="https://simg.open-open.com/show/74554ccaec5dd6ffe0b9b1ea0ed8a60c.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Mathias Bynens</em> 说：</p> <p>2013-11-29 18:09</p> <p>可不可以应用在根元素上( document.documentElement )，而不是 document.body . 这样，即使你把 <html> 和 <body> 作为普通的 <div> 使唤也是可以的。——例如，应用 margin: 0 auto; max-width: 30em; box-shadow: …; 到 <body> 上。</p> <p>//zxx: 看上去又是一个不错的建议。是否OK，还需要我们的亲自测试，而不是别人说什么就信什么。</p> <p><img src="https://simg.open-open.com/show/00729817beb2031f93d715c4c967aa8e.png"> <em>newable</em> says:</p> <p>November 30, 2013 at 12:31 am</p> <p>Great!</p> <p><img src="https://simg.open-open.com/show/58338fe93904598e865ceb68090f8cf5.png" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>newable</em> 说：</p> <p>2013-11-30 0:31</p> <p>赞！</p> <p>//zxx: 又见马屁党！</p> <p><img src="https://simg.open-open.com/show/bcef8b79266813f9dfaf39eb0ef735a4.jpg"> <em>Richard Ayotte</em> says:</p> <p>November 30, 2013 at 1:30 am</p> <p>It would be nice if this behaviour was the default in browsers.</p> <p><img src="https://simg.open-open.com/show/8237d7e70624b7ac8adda2216cd6615b.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Richard Ayotte</em> 说：</p> <p>2013-11-30 1:30</p> <p>如果浏览器的默认行为就是这样那就帅气了。</p> <p>//zxx: 我说兄弟，你何来结论认为浏览器的默认行为不是如此？</p> <p><img src="https://simg.open-open.com/show/fc5710febb03e655fd9abb511a05539b.jpg"> <em>Thierry Koblentz</em> says:</p> <p>November 30, 2013 at 3:26 am</p> <p>Hey Ryan,In my opinion, this is something browsers should be smart enough to do themselves. So it would make sense to me if one already did; IE11 may be? As @Manumanu suggests.</p> <p><img src="https://simg.open-open.com/show/a81d6377d62b2d766db9fa366fe75424.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Thierry Koblentz</em> 说：</p> <p>2013-11-30 3:26</p> <p>那个，Ryan,在我看来，这种事情应该让浏览器自己解决。如果有那个浏览器已经做了这件事，对我而言是极好的；可能IE11? 正如@Manumanu提到的。</p> <p>//zxx: 好吧，其实我也是这个观点。后面的一些实验数据和现象会说明，浏览器不是傻子。</p> <p><img src="https://simg.open-open.com/show/16fa2ba1c788afd5c833ad1f856ec231.jpg"> <em>JosiahS</em> says:</p> <p>November 30, 2013 at 5:59 am</p> <p>Interesting idea, but it seems to have the side effect of disabling multi-touch page scrolling on Chrome in Windows 8. (I haven’t tested it anywhere else.)</p> <p><img src="https://simg.open-open.com/show/85d88adb626dcd227b6a0b8247138884.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>JosiahS</em> 说：</p> <p>2013-11-30 5:59</p> <p>很有意思的想法，但是貌似在Windows 8的Chrome浏览器中有副作用，页面的触屏滚动被禁用掉了（我还没有测试其他任何地方）。</p> <p>//zxx: 哦哦哦，出大篓子了，如果这个属实，此方法又中了一刀致命伤。</p> <p><img src="https://simg.open-open.com/show/46ce57f3bb4635e5a43c46ef8fc224be.jpg"> <em>Ron</em> says:</p> <p>November 30, 2013 at 7:54 am</p> <p>Any reason why this shouldn’t just be built into Chrome?</p> <p><img src="https://simg.open-open.com/show/132d3ccfad14b462f066cf0c37e7f507.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Ron</em> 说：</p> <p>2013-11-30 7:54</p> <p>有什么理由这不应该被内置到Chrome浏览器？</p> <p>//zxx: 我只想说，我们深受喜爱的Chrome浏览器不是傻子。</p> <p><img src="https://simg.open-open.com/show/00729817beb2031f93d715c4c967aa8e.png"> <em>RS</em> says:</p> <p>November 30, 2013 at 9:28 am</p> <p>Echoing poster above, yes brilliant indeed. I’ve got to say, one thing I personally find just annoying is hover effects on images–you know like those with an overlay and some icon–something, anything–showing that it’s a video post, or image post or whatever. But alas, every client wants this garbg! And of course when you’re scrolling down the page, and mouse pointer hits the images/elements then it can be a very unsatisfactory experience.</p> <p>Thanks for the post!</p> <p><img src="https://simg.open-open.com/show/58338fe93904598e865ceb68090f8cf5.png" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>RS</em> 说：</p> <p>2013-11-30 9:28</p> <p>我很赞同上面的文艺，确实很赞。我不得不说，关于 hover 效果，我一直有件事情耿耿于怀，那就是图片的 hover</p> <p>效果，你懂的，经常会出现一个覆盖层，上面有图标以及其他什么东西，告诉你这是个含视频的文章，或者含图片的文章等。但是不幸的是每个客户端都会触发之，试想下，当你向下滚动页面的时候，鼠标触碰了这些图片或元素，会是一个不好的体验。</p> <p>感谢这篇文章！</p> <p>//zxx: 怎么感觉是个脑残粉，或者专门调停的老好人。兄弟，你说的那出戏不是我们这场，好吧。你嫌弃鼠标 hover 晃瞎自己的研究，使用鼠标 hover 延迟技术啊，与这里提高绘制呈现性能不搭噶的，好吧。哪边凉快哪边待去~求你了，你那凌乱不通的语句让我很辛苦的~</p> <p><img src="https://simg.open-open.com/show/3d1f333084c45fddfe80d195852c9e81.jpg"> <em>Jake</em> says:</p> <p>December 1, 2013 at 7:55 am</p> <p>I tried this a while ago on a project and it does trigger a layout when pointer-events: none; is applied to the body (It does in your demo as well). I came up with a different solution but it was more complicated. It basically involves moving a 100x100px fixed position div under the mouse using translate3d() while scrolling, then moving it back out of the window when scrolling is done. That stops the hover effects and doesn’t trigger a layout. This was on a really complicated page, so that forced layout was more of an issue.</p> <p><img src="https://simg.open-open.com/show/71409be944954f051cf0e6d5f92a77b3.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Jake</em> 说：</p> <p>2013-12-1 7:55</p> <p>不久前在一个项目中我尝试了这个，当 pointer-events: none; 应用在 body 上的时候（正如demo做的那样）触发了布局。我就想了一个不同的解决方法，但是要更复杂些。我创建了一个 100x100px fixed 定位的元素，通过 translate3d() 让其在滚动的时候移动在鼠标的小面，当滚动停止的时候再移动到窗体外面。这下子阻止了 hover 效果同时不触发布局。因为这是一个非常复杂的页面，因此触发布局(layout)是个比较严重的问题。</p> <p>//zxx: 复杂页面的重布局确实可能会有明显的性能损耗。但是，这位同学的做法，我个人觉得是不是应该治本而不是治标。</p> <p><img src="https://simg.open-open.com/show/fa4a5bc6294db9c1631d087faa778c42.jpg"> <em>Greg</em> says:</p> <p>December 2, 2013 at 8:18 am</p> <p>Thank you!!!</p> <p>I used this technique to solve a different problem which should also be worth mentioning.</p> <p>On my site I am using the Google Maps API and when I scroll down the page (using the scroll-wheel) the page suddenly stops once my mouse hovers over the map. The scroll-wheel would then start to re-scale the map which was annoying, I could disable the scroll wheel in the API but that would disable it permanently.</p> <p>Using this method the user can now scroll past the map using the scroll wheel AND re-scale the map if they so desire using the scroll wheel. Two worlds in harmony <img src="https://simg.open-open.com/show/9ee646ffab71107d1a11407be52f33a5.gif"></p> <p><img src="https://simg.open-open.com/show/256d24b4badb5d17639ba9ca0fee7adf.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Greg</em> 说：</p> <p>2013-12-2 8:18</p> <p>多谢！！！</p> <p>我使用这个技术解决了另外一个问题，我觉得值得一提。</p> <p>我的站点上使用了Google地图API当我使用滚轮滚动页面的时候，当我鼠标经过这个地图的时候，滚动就会停止，变成地图大小的缩放了。我可以利用API禁止地图的滚轮缩放，但是这种禁用是永久的。</p> <p>使用这个方法用户就能够自如地从地图上面滚过去，同时不影响地图的缩放。两个世界都和谐了 <img src="https://simg.open-open.com/show/9ee646ffab71107d1a11407be52f33a5.gif" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="15" height="15"></p> <p>//zxx: 这倒是一个不错的应用场景。只是我疑惑的是，难道这位兄弟不要关心IE9, IE10浏览器吗？实际上，你使用一个小小 div 覆盖在地图上，也可以到达一样的效果。且兼容性更好。</p> <p><img src="https://simg.open-open.com/show/d0ee0f464595628f33aeaf868dca1095.png"> <em>d43m</em> says:</p> <p>December 3, 2013 at 7:11 pm</p> <p>Looks like it doesn’t change anything with firefox, at least on the demo site, the hover effect doesn’t trigger either way while scrolling.</p> <p>However, good tip for scrolling on the map Greg !</p> <p><img src="https://simg.open-open.com/show/cbf30a8c31f6d4b112218586eb65c809.png" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>d43m</em> 说：</p> <p>2013-12-03 19:11</p> <p>似乎firefox下没有任何改变，至少本文的demo页面如此，滚动时候不会触发任何hover效果。</p> <p>不过，Greg的那个地图处理技巧很赞！</p> <p>//zxx: 大家可以自己在FireFox浏览器下测试下，滚动的时候是不会有hover效果触发的，停下来才会有，也就是从肉眼所见来看，似乎FireFox天然对滚动与 hover 呈现做了优化处理。</p> <p><img src="https://simg.open-open.com/show/6510ac10436b9c32d9d221fcd4950a87.jpg"> <em>Schalk Neethling</em> says:</p> <p>December 3, 2013 at 11:02 pm</p> <p>Thanks for this awesome article! Here is how I ended up implementing it and it works great ~ <a href="/misc/goto?guid=4959673558706680928" rel="nofollow,noindex">https://gist.github.com/ossreleasefeed/7768761</a></p> <p><img src="https://simg.open-open.com/show/d0f7d9465a4325123f97b0d402766f79.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Schalk Neethling</em> 说：</p> <p>2013-12-03 23:02</p> <p>多谢分享如此精彩的文章。这里是我的实现，效果很赞~ <a href="/misc/goto?guid=4959673558706680928" rel="nofollow,noindex">https://gist.github.com/ossreleasefeed/7768761</a></p> <p>//zxx: 这就是上面一位兄弟提的 pointer-events:none 应用在 document.documentElement 上。</p> <pre> /** * Disable and enable event on scroll begin and scroll end. * @see http://www.thecssninja.com/javascript/pointer-events-60fps */ var root = document.documentElement; var timer; window.addEventListener('scroll', function() { // 用户滚动停止timeout clearTimeout(timer); // Pointer events 已被禁用 if (!root.style.pointerEvents) { root.style.pointerEvents = 'none'; } timer = setTimeout(function() { root.style.pointerEvents = ''; }, 500); }, false);</pre> <p><img src="https://simg.open-open.com/show/91be3e62fdd2397e126b82907d5d5600.png"> <em>egiova</em> says:</p> <p>December 4, 2013 at 2:48 am</p> <p>Excellent little trick to avoid “light pollution”. What about side effects on touch screens?However, it remains to be tested at large scale. But good clue to follow…</p> <p><img src="https://simg.open-open.com/show/e497a69d340ad369f6a4be9baea1270c.png" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>egiova</em> 说：</p> <p>2013-12-04 2:48</p> <p>避免“光污染”不错的小伎俩。触摸屏幕的副作用怎么办呢？显然，这还需要大规模的测试。但是值得跟进……</p> <p>//zxx: 有疑问，没有实践~</p> <p><img src="https://simg.open-open.com/show/0ddabe3462971a7edf221ab952d00399.jpg"> <em>Greg Whitworth</em> says:</p> <p>December 6, 2013 at 3:50 am</p> <p>@Manumanu @RyanSeddon He is somewhat correct in regards to how IE11 handles :hover on scroll. To keep the explanation simple (we may post a blog post for more detail on the matter), we turn off hit testing if the mouse isn’t moving so you won’t get any un-necessary paints, however, there are some caveats to this for compatibility reasons. Even when using your suggested CSS+JS trick you won’t get too much perf increase in IE11 due to the fact that we use independent rendering (we’re rendering on a separate thread from the UI thread) but it would free up some CPU cycles for any script you might be running. Hope that helps!</p> <p><img src="https://simg.open-open.com/show/257a83f4325911c26516b826275686c5.jpg" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Greg Whitworth</em> 说：</p> <p>2013-12-6 3:50</p> <p>@Manumanu @RyanSeddon 他对IE11的 :hover 在滚动上的认识或多或少是正确的。为了解释简单（关于此话题的细节我们可以发表一篇博文），我们可以简单理解为，如果鼠标不移动，我们关闭 hit testing , 这样就不会有无所谓的绘制，但考虑到兼容原因，还需要一些注意事项。即使使用你提出的CSS+JS技巧，在IE11中也不会得到很完美的性能提升。因为我们使用了独立渲染（使用分离的UI线程进度渲染），它会为你运行的任何脚本进行周期性的CPU释放。希望这个有所帮助！</p> <p>//zxx: “hit testing”在 <a href="/misc/goto?guid=4959673558810862342" rel="nofollow,noindex">维基上的解释</a> 是：在计算机图形编程中， hit-testing</p> <p>是一个确定用户的光标（如鼠标光标，接触点或触摸屏界面）是否与屏幕上绘制的给定图形对象（如形状，线和曲线）相交接的过程。Hit-testing可以在鼠标或其他指针设备移动或启动执行。</p> <p>在Web编程语言(如CSS, HTML, SVG)中，这是与 pointer-events （如用户发起的光标移动或对象选择）的概念相关联的。</p> <p>听口气，这位兄弟是在IE干活的吗？似乎总是把IE11称为我们~~不解~~</p> <p><img src="https://simg.open-open.com/show/f769904319fd6e592e8d346fd42a6397.png"> <em>Yuanyan</em> says:</p> <p>December 9, 2013 at 6:37 pm</p> <p>If u do it, it will make scrolling not work on mobile device.Test on mobile that “pointer-events: none” will disable the touch events. It’s seems not a good hack for mobile web.</p> <p><img src="https://simg.open-open.com/show/086f4e67c71762b5209441ef79fdaac9.png" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Yuanyan</em> 说：</p> <p>2013-12-9 18:37</p> <p>如果你砍了这一刀，移动设备的滚动直接毙命。经测试， pointer-events: none 会干掉 touch 事件。貌似此技巧对移动web不适用啊！</p> <p>//zxx: 貌似是国人啊，还貌似是我厂的同行。微博是@元彦，大家加粉的时候记得补上一刀，说是我推荐的，(*^__^*)</p> <p><img src="https://simg.open-open.com/show/6f0c5e873120db9b906ecfa0398d87be.png"> <em>Alex</em> says:</p> <p>December 9, 2013 at 8:17 pm</p> <p>Firefox also turns off hit testing while scrolling, and from a quick test of the test page this trick would probably slow it down (Changing the pointer-events causes it to repaint whatever the mouse was hovering over when the scroll started, which it doesn’t do otherwise)</p> <p><img src="https://simg.open-open.com/show/cefcd54d936e882c0556744a498d7eb7.png" alt="pointer-events:none提高页面滚动时候的绘制性能？" width="32" height="32"> <em>Alex</em> 说：</p> <p>2013-12-9 20:17</p> <p>Firefox滚动时候也会关闭 hit testing , 面对本文的测试页面的快速测试，这种处理可能会降低页面速度（但是，如果浏览器不这么做，那在滚动开始的时候改变 pointer-events 会导致无论鼠标移到哪里都会重绘）</p> <p>//zxx: 尼玛，我尽力了。我实在不知道这位兄弟要讲的是什么意思。不是他说的不懂，而是我被头像吓住了。欢迎大家帮忙纠正！</p> <h3>五、实践出真知</h3> <p>上面的评论为我们打开看很多天窗。</p> <p>我们看到了很多需要我们自己动手去试验的东西，比如IE11的绘制呈现帧测试， div 层覆盖测试，FireFox天然滚动体验，Chrome浏览器下亲自测试等。</p> <p>为了得到更广泛更具有价值的测试结果，我们使用自己设计的测试页面，含半透明，投影以及纹理背景。</p> <p>您可以狠狠地点击这里： <a href="/misc/goto?guid=4959673558889302642" rel="nofollow,noindex">滚动与hover绘制时间测试demo</a></p> <p>进度demo，会看到一排排张含韵的上面有如下图所示的几个按钮：</p> <p><img src="https://simg.open-open.com/show/8f2bfec8609d0671675cf7eeaa0e6115.png"></p> <p>点击第一个按钮会给 body 添加 pointer-events:none ；点击第二个按钮会有一个层覆盖在页面上。通过ESC键可以取消之前任意两个禁用 hit testing 操作。</p> <p>测试的方法是，鼠标位置不变（避免不必要的重绘），上下 快速滚动 鼠标。由于鼠标要去点击停止记录按钮，也会有重绘出现。因此，末尾的数据不可信，主要看截图的中间主体部分。关注fps等帧频信息。</p> <p>分别测试了如下三种状态： <strong>1. 默认滚动；</strong> <strong>2. pointer-events:none下的滚动;</strong> <strong>3. div fixed定位层覆盖后的滚动</strong></p> <p>以下数个测试截图都是按照这三个状态下拉的。</p> <p>1.下面三张图是自己在 <strong>最新版IE11浏览器下</strong> 的连续三个测试截图：</p> <p>默认滚动：</p> <p><img src="https://simg.open-open.com/show/d85257a49a5651999eee0187d137d621.png"></p> <p>pointer-events:none绘制：</p> <p><img src="https://simg.open-open.com/show/f6165d310d66d376ec5868c7c898c1c7.png"></p> <p>div元素覆盖绘制：</p> <p><img src="https://simg.open-open.com/show/91be3e62fdd2397e126b82907d5d5600.png"></p> <p>2.这是我 <strong>本机Chrome26测试的结果</strong> ：</p> <p>默认滚动：</p> <p><img src="https://simg.open-open.com/show/92b745715d33fb6b3a4ecbdadc80483a.png"></p> <p>pointer-events:none绘制：</p> <p><img src="https://simg.open-open.com/show/f949f2804119884c021df0809550693d.png"></p> <p>div元素覆盖绘制：</p> <p><img src="https://simg.open-open.com/show/c51d2f2156614572aca33319203053a3.png"></p> <p>3.下面三张图是 <strong>公司机Chrome31下测试结果</strong> ：</p> <p>默认滚动：</p> <p><img src="https://simg.open-open.com/show/ac619139fc51a1e29572114ec05e575d.png"></p> <p>pointer-events:none绘制：</p> <p><img src="https://simg.open-open.com/show/8a2ca007a0417efd9f48a9aa07982e19.png"></p> <p>div元素覆盖绘制：</p> <p><img src="https://simg.open-open.com/show/652d996712f8153c15698ae49093e111.png"></p> <p>都是纯手工的测试，因此，测试结果截图长得不是很整理，但是，足够说明一些问题了，我觉得是很有意思的一些问题，尤其结合众老外的一些精彩评论。</p> <ol> <li>首先，对比IE11, Chrome26以及Chrome31的测试结果，可以发现，div层覆盖的方法绝对是呈现性能最差的，基本上要奔30帧/秒的频率去了。但是，第8条评论中Chip对 div 覆盖方法赞不绝口，说是最佳实践， 60fps <p>.</p> <p>怎么回事？细细阅读会发现，其关注的是“重计算”，也就是 recalculate . 见下图高亮：</p> <img src="https://simg.open-open.com/show/f44bee5fd30d171a95e74edf463f1818.png"> <p>而不是我们这里着重探讨的呈现 – paint.</p> <p>至于 div 层覆盖法对fps的影响，根据我在Chrome26下不太专业的测试，似乎是相反的结论。精力原因，我就不深入测试，您有兴趣可以稍稍研究下，发个博文或者微博什么的。</p> </li> <li>IE11自身纵向对比。肉眼观察来看， pointer-events:none 似乎要比默认态滚动的呈现要快那么一点点，但是，真的并不明显。这似乎正如编号为30的评论所说，本文的CSS+JS技巧不会在IE11下得到完美的性能提升。因为IE11本身的渲染以及CPU回收等都有自己的 优化机制。</li> <li>再从Chrome26浏览器的纵向对比来看，似乎 pointer-events:none 有还是没有没什么区别啊。这个是不是出乎意料了！我拿老外的那个测试页面测试，发现，确实没有什么差异！</li> <li>我们再拿Chrome26横向对比Chrome31浏览器，会发现Chrome31浏览器下，浏览器的绘制呈现时间基本上就没有了！而 div 覆盖时间类似。说明差异不是系统造成的，只可能是，Chrome随着版本的升级，在渲染呈现性能上也有了提升。</li> <li>Chrome31默认状态和 pointer-events:none 状态对比，您会发现，似乎差别不大，默认态除了几个冒尖的柱状图，其他基本上和 pointer-events:none <p>类似。咋回事？</p> <p>Chrome31的这三张图实际上是最先测试的，并未注意到鼠标不能移动这一细节。我没估计错的话，冒尖的几个小绿柱子应该是鼠标移动造成的。如果我的这个推论正确的话，那岂不是如果鼠标不移动，单纯滚动的话， pointer-events:none 加与不加是没有任何区别的？！</p> <p>没错！我就是要告诉你们， pointer-events:none提高页面滚动时候的绘制性能 是不准确的 ！</p> <p>您可能会疑惑，哎呀，原作者视频都出来了，确实绘制柱状图差异明显啊！我自己去demo页面测试，也是如此啊！兄弟，实际上，原作者变了个魔术而已，一个近景魔术！</p> <p>你有没有想过这么一个问题：为何作者的定时器间隔要设置成 500 毫秒这么久？当滚动结束，我们想点击一个东西，只要速度一快，岂不是根本就没效果！如此大的可用性风险，为何不设置个 100 毫秒呢，正如评论(编号8)中某人说的一样？</p> <p>答案很简单。为了测试结果好看，数据对比明显，干扰条件减少！</p> <p>试想下，定时器间隔如果是 100 毫秒，如果滚动稍微慢一点，岂不是 body 就会发生状态变化，类名移除，页面重计算，测试数据变成默认态数据，数据污染，柱状图从平原变山峰。如果一不小心又滚快了， body 再变化，重计算与重绘就会交替出现。重计算干扰+状态不稳定，必然导致测试数据不好看。因此，小间隔时间定时器不合适。</p> <p>但这个原因其实不是主要原因。</p> <p>如果间隔时间是 100 毫秒，我们要想一直保持 pointer-events:none 状态，势必滚动的时候要速度比较快。问题来了，这滚动速度一块，你就会发现，默认状态的重绘时间也是60fps的，柱状条的高度与 pointer-events:none 类似。这不傻逼了吗？这魔术不久穿帮了吗？</p> <p>因此，保险起见，定时器间隔还是 500 毫秒的好！</p> <p>我在对一干评论的麻辣点评中多次提到：Chrome浏览器不是傻子，不会考虑hover重绘与滚动的性能优化？</p> <p>类似的优化在IE11以及FireFox浏览器中均有。其中，FireFox浏览器尤其明显。你现在用FireFox打开demo页面，鼠标位置放在任意图片上，不移动，单纯滚动鼠标轮子。当你鼠标停止，你会明显看到一定延迟时间后，hover效果才呈现。这不就是 pointer-events:none 要实现的状态吗？</p> <p>Chrome浏览器也是有的，但是，Chrome浏览器由于自身渲染性能出众，因此，这种延迟时间比较短。</p> <p>因此，如果你的页面滚动比较迅速，你是完全不要担心 hover 渲染问题的。如果你滚动比较慢，浏览器认为你希望查看 hover 态，这不挺好的。</p> <p>编号24评论吐槽鼠标经过hover效果闪啊闪的，体验不好。诸位，这完全是另外一码事了，就算你应用了这里的 pointer-events:none 方法，解决了滚动，那你鼠标经过该怎么处理呢，还不是闪啊闪？莫非再给 document 绑定 mousemove 事件，要是这样，你让 a 链接情何以堪。这种状况还是乖乖使用鼠标 hover 延时执行技术吧，与这里不是一码事。</p> </li> </ol> <p>简单总结下就是： div 覆盖法重绘损耗明显，直接枪毙；快速滚动下， pointer-events:none 并无或极少绘制性能提升；慢速滚动，提高重绘有没有意义。</p> <h3>六、我的综合结论</h3> <p>众家精彩评论中多次提到 pointer-events:none 影响触屏设备的滚动，如手机，windows 8等。这个严重的性能缺陷显然制约了此方法的普及。</p> <p>其次，原文也提到另外一个问题：子元素设置了 pointer-eventes: auto 会导致滚动的时候页面闪动。需要下面的代码修正：</p> <pre> .disable-hover, .disable-hover * { pointer-events: none !important; }</pre> <p>好麻烦，低效选择器，这下页面的估计重计算要到30fps了。</p> <p>最后，也是最最重要的。 几乎所有现代浏览器天然具有“快速滚动hover绘制的性能保护” 。何必多此一举吃力不讨好使用问题多多的 pointer-events:none ?</p> <p>因此，如果您单纯想要页面的绘制速度，没有任何理由使用 pointer-events:none 技术。如果您是希望禁用某些操作，例如26号评论中地图缩放的处理等，这个倒是作为参考技术。</p> <p>pointer-events:none 技术只有页面在慢滚动的时候，才会有重绘性能提高优势。不过话说话了，你页面如果是慢滚动，还需要碍事的 pointer-events:none 吗？</p> <p>再退一万步讲，当下Chrome浏览器SVG动画满天飞也照样跑得屁颠屁颠的， hover 所造成的重绘对用户而言根本不足以造成丝毫的影响。</p> <p>因此，所谓的提高 hover 绘制时间的技术，你就当路边走过的一个美女吧，看一下，心扑通一下，就让她过去吧，她不适合你的！</p> <h3>七、故事需要一个结尾</h3> <p>我老婆曾多次替我担忧：“你把技术都分享出去，别人都学会了你的技术，那你岂不是更有压力啦？”</p> <p>我表示我一点都不担心。</p> <p>之前知乎上看到 <a href="/misc/goto?guid=4959673558966898387" rel="nofollow,noindex">一个赞非常多的问题</a> ：“2013 年高考状元业余爱好广泛也看电视打网游，是我们素质教育开花结果了吗？”</p> <p><img src="https://simg.open-open.com/show/77962f7a94be1d29146b74f8b9734bf5.png"></p> <p>我不担心的原因类似：“ <strong>专注度差太多了！</strong> ”</p> <p>中国的环境好啊，大家浮躁啊，喜欢吃现成饭啊。类似文章读完就觉得，哦，灭了个boss，升级了。真的升级了吗？突然想起了句中国古话：是知其然不知其所以然。大家忙着赚钱啊，理财啊，娱乐啊各种事情，能抽时间出来学习已经不错了，你还让我要潜心修学，深入思考。啊，我自己想想也确实不容易的。</p> <p>如何能够到达超出常人的高度，有个便捷的方法，那就是站在巨人的肩上。但是，如何站在巨人肩上是个头疼的问题，对于我们最技术的人而言，在我看来，基本上就只有一步一步爬上去这条路，扎扎实实走自己的路。</p> <p>但是，很多人以为跟巨人照个面，打个招呼，握个手就get的巨人的身高。实际上，啥都没有。</p> <p>面对一个技术点，如果你没有追求“真理”的精神，单纯是欣然接受，没有自己的疑问，没有自己的佐证，没有自己的思考。最多只是捡了漏，技能最多照搬80%过去。因此，完全没有必要担心这类人会超越自己。但是，如果你敢于质疑与思考，有自己的试验、实践、思考与总结，发现未被关注的细节，完成更进一步的创新，恭喜你，你真真切切站在的巨人的肩上。</p> <p>如果人人都是如此，那我确实要担心不断被别人超越的事情。好在中国大环境普遍浮躁，势利，好大喜功，急功近利。因此，我依然高枕无忧地写着自己的小文章，分享着自己的所思所想。</p> <p>读到这里的你是希望站在巨人的肩上呢？还是继续捡捡巨人扔下的鸡骨头呢？</p> <p>如果你要做前者，你应该知道要怎么做的？很简单，“真理”三部曲： <strong>1. 质疑</strong> ； <strong>2. 试验实践</strong> ； <strong>3. 提出自己认为正确的观点</strong> 。</p> <p>欢迎质疑我在本文提出的技术观点，并提出你认为的真理！</p> <p>本文为原创文章，包含脚本行为，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。</p> <p>来自： <a href="/misc/goto?guid=4959673559040765341" rel="nofollow">http://www.zhangxinxu.com/wordpress/2014/01/pointer-events-none-avoiding-unnecessary-paints/</a></p> <p> </p>