{"code":1,"message":"","data":{"id":128099,"article":{"id":30948,"publicAccount":{"id":458,"name":"前端大全","weixin":"FrontDev","intro":"","body":"","image":"http://ss.csdn.net/p?http://wx.qlogo.cn/mmhead/Q3auHgzwzM5qjQiaudDrho224UU1BI7Uu4pqUWWX9dI7FKibUrsdzqZQ/0","href":null,"biz":"MzAxODE2MjM1MA==","category":{"id":7,"keyName":"web","displayName":"前端","createdAt":1487578438000,"updatedAt":1487578438000,"status":1},"createdAt":1496221296000,"updatedAt":1496221296000,"status":1,"recommend":0,"qrcode":"http://mp.weixin.qq.com/mp/qrcode?scene=10000001&size=120&__biz=MzAxODE2MjM1MA==&mid=2651552225&idx=1&sn=ed5473f61fada06eef274a1ee0d71747","articleCount":0,"viewCount":0},"category":{"id":7,"keyName":"web","displayName":"前端","createdAt":1487578438000,"updatedAt":1487578438000,"status":1},"biz":"MzAxODE2MjM1MA==","mid":"2651552107","idx":1,"sn":"7ea1a6d4b3cf1c8a99b50f703e4c41f1","author":"伯乐专栏/coco","content":"","contentUrl":"http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651552107&idx=1&sn=7ea1a6d4b3cf1c8a99b50f703e4c41f1&chksm=8025aeaab75227bc3bae46270d175bd1444f4983c9472eb93de5fc9c19951416e239dcc4860f&scene=27#wechat_redirect","cover":"http://mmbiz.qpic.cn/mmbiz/zPh0erYjkib3AcoGyCLGJ8vboxM4jY7HY8cgic2IR4nBsJd3x2WB64Nj4laS20L0qNicHOGm4l5wkwn2fbWib5eyTA/0?wx_fmt=jpeg","digest":"最近在研究页面渲染及web动画的性能问题，以及拜读《CSS SECRET》（CSS揭秘）这本大作。本文主要想谈谈页面优化之滚动优化。","isMulti":1,"sourceUrl":"http://web.jobbole.com/86158/","title":"高性能滚动 scroll 及页面渲染优化","description":"最近在研究页面渲染及web动画的性能问题，以及拜读《CSS SECRET》（CSS揭秘）这本大作。本文主要想谈谈页面优化之滚动优化。","datetime":1492605799000,"status":1,"viewCount":49,"praiseCount":0,"commentCount":0,"createdAt":1496221331000,"updatedAt":1496221331000,"origin":"proxy","recommend":0},"url":"http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651552107&idx=1&sn=7ea1a6d4b3cf1c8a99b50f703e4c41f1&chksm=8025aeaab75227bc3bae46270d175bd1444f4983c9472eb93de5fc9c19951416e239dcc4860f&scene=27#wechat_redirect","title":"高性能滚动 scroll 及页面渲染优化","source":"<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; line-height: 25.6px; white-space: pre-wrap; text-align: center; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; color: rgb(255, 41, 65); font-size: 14px; line-height: 22.4px; box-sizing: border-box !important; word-wrap: break-word !important;\">（点击</span><span style=\"max-width: 100%; font-size: 14px; line-height: 22.4px; color: rgb(0, 128, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">上方公众号</span><span style=\"max-width: 100%; color: rgb(255, 41, 65); font-size: 14px; line-height: 22.4px; box-sizing: border-box !important; word-wrap: break-word !important;\">，可快速关注）</span></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; line-height: 25.6px; white-space: pre-wrap; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<blockquote style=\"max-width: 100%; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; line-height: 25.6px; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"> \n <p style=\"max-width: 100%; min-height: 1em; white-space: pre-wrap; line-height: 25.6px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 14px; line-height: 25.6px; box-sizing: border-box !important; word-wrap: break-word !important;\">作者：伯乐在线专栏作者 - chokcoco</span></p> \n <p style=\"max-width: 100%; min-height: 1em; line-height: 25.6px; white-space: pre-wrap; font-size: 16.1905px; box-sizing: border-box !important; word-wrap: break-word !important;\"><a href=\"http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&amp;mid=402764500&amp;idx=1&amp;sn=cfcc178c7718d548b7cdc04758502bd9&amp;scene=21#wechat_redirect\" target=\"_blank\" data_ue_src=\"http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&amp;mid=402764500&amp;idx=1&amp;sn=cfcc178c7718d548b7cdc04758502bd9&amp;scene=21#wechat_redirect\" style=\"font-size: 14px; color: rgb(0, 128, 255); text-decoration: underline; white-space: normal; max-width: 100%; line-height: 25.6px; box-sizing: border-box !important; word-wrap: break-word !important;\">如果好文章投稿，点击 → 了解详情</a><br></p> \n</blockquote> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); line-height: 25.6px; box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">最近在研究页面渲染及web动画的性能问题，以及拜读《CSS SECRET》（CSS揭秘）这本大作。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">本文主要想谈谈页面优化之滚动优化。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。因为本文涉及了很多很多基础，可以对照上面的知识点，选择性跳到相应地方阅读。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; color: rgb(255, 0, 0); box-sizing: border-box !important; word-wrap: break-word !important;\"><strong style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\">滚动优化的由来</strong></span></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">滚动优化其实也不仅仅指滚动（scroll 事件），还包括了例如 resize 这类会频繁触发的事件。简单的看看：</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<blockquote style=\"max-width: 100%; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">var i = 0;</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">window.addEventListener('scroll',function(){</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>console.log(i++);</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">},false);</span></p> \n</blockquote> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">输出如下：</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); text-align: center; box-sizing: border-box !important; word-wrap: break-word !important;\"><img class=\"__bg_gif\" data-ratio=\"0.7220447284345048\" data-src=\"http://mmbiz.qpic.cn/mmbiz/zPh0erYjkib3u2w3hvWqm1kaobWCPV3mYGv8KCILAicibSbVgesZONO9gkT2Ik3EKPxJ3ic4QDUvbDdnMzDvNW3nxw/0?wx_fmt=gif\" data-type=\"gif\" data-w=\"626\" style=\"box-sizing: border-box !important; word-wrap: break-word !important; width: auto !important; visibility: visible !important;\" src=\"http://ss.csdn.net/p?http://mmbiz.qpic.cn/mmbiz/zPh0erYjkib3u2w3hvWqm1kaobWCPV3mYGv8KCILAicibSbVgesZONO9gkT2Ik3EKPxJ3ic4QDUvbDdnMzDvNW3nxw/640?wx_fmt=gif\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间隔很近。如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成，就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的，就会持续触发 scroll 事件导致掉帧扩大、浏览器 CPU 使用率增加、用户体验受到影响。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">在滚动事件中绑定回调应用场景也非常多，在图片的懒加载、下滑自动加载数据、侧边浮动导航栏等中有着广泛的应用。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">当用户浏览网页时，拥有平滑滚动经常是被忽视但却是用户体验中至关重要的部分。当滚动表现正常时，用户就会感觉应用十分流畅，令人愉悦，反之，笨重不自然卡顿的滚动，则会给用户带来极大不舒爽的感觉。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; color: rgb(255, 0, 0); box-sizing: border-box !important; word-wrap: break-word !important;\"><strong style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\">滚动与页面渲染的关系</strong></span></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">为什么滚动事件需要去优化？因为它影响了性能。那它影响了什么性能呢？额……这个就要从页面性能问题由什么决定说起。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">我觉得搞技术一定要追本溯源，不要看到别人一篇文章说滚动事件会导致卡顿并说了一堆解决方案优化技巧就如获至宝奉为圭臬，我们需要的不是拿来主义而是批判主义，多去源头看看。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">从问题出发，一步一步寻找到最后，就很容易找到问题的症结所在，只有这样得出的解决方法才容易记住。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">说教了一堆废话，不喜欢的直接忽略哈，回到正题，要找到优化的入口就要知道问题出在哪里，对于页面优化而言，那么我们就要知道页面的渲染原理：</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">浏览器渲染原理我在我上一篇文章里也要详细的讲到，不过更多的是从动画渲染的角度去讲的：《<a href=\"http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&amp;mid=2651550799&amp;idx=1&amp;sn=ac47fa43bcc3d0507658ad9ded698b83&amp;scene=21#wechat_redirect\" target=\"_blank\" data_ue_src=\"http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&amp;mid=2651550799&amp;idx=1&amp;sn=ac47fa43bcc3d0507658ad9ded698b83&amp;scene=21#wechat_redirect\" style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\">【Web动画】CSS3 3D 行星运转 &amp;&amp; 浏览器渲染原理</a>》 。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">想了想，还是再简单的描述下，我发现每次 review 这些知识点都有新的收获，这次换一张图，以 chrome 为例子，一个 Web 页面的展示，简单来说可以认为经历了以下下几个步骤：</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); text-align: center; box-sizing: border-box !important; word-wrap: break-word !important;\"><img class=\"\" data-type=\"jpeg\" data-ratio=\"0.1527777777777778\" data-w=\"720\" data-src=\"http://mmbiz.qpic.cn/mmbiz/zPh0erYjkib3u2w3hvWqm1kaobWCPV3mYmXDibiaS6wSbHIWwibqJFe3wtygtjtx5cjc1dA2bq0KzWksSMy7LFeGqQ/0?\" style=\"height: 102.428px !important; box-sizing: border-box !important; word-wrap: break-word !important; width: 670px !important;\" src=\"http://ss.csdn.net/p?http://mmbiz.qpic.cn/mmbiz/zPh0erYjkib3u2w3hvWqm1kaobWCPV3mYmXDibiaS6wSbHIWwibqJFe3wtygtjtx5cjc1dA2bq0KzWksSMy7LFeGqQ/640?\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<ul class=\" list-paddingleft-2\" style=\"max-width: 100%; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"> \n <li><p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\">JavaScript：一般来说，我们会使用 JavaScript 来实现一些视觉变化的效果。比如做一个动画或者往页面里添加一些 DOM 元素等。</p></li> \n <li><p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\">Style：计算样式，这个过程是根据 CSS 选择器，对每个 DOM 元素匹配对应的 CSS 样式。这一步结束之后，就确定了每个 DOM 元素上该应用什么 CSS 样式规则。</p></li> \n <li><p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\">Layout：布局，上一步确定了每个 DOM 元素的样式规则，这一步就是具体计算每个 DOM 元素最终在屏幕上显示的大小和位置。web 页面中元素的布局是相对的，因此一个元素的布局发生变化，会联动地引发其他元素的布局发生变化。比如， 元素的宽度的变化会影响其子元素的宽度，其子元素宽度的变化也会继续对其孙子元素产生影响。因此对于浏览器来说，布局过程是经常发生的。</p></li> \n <li><p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\">Paint：绘制，本质上就是填充像素的过程。包括绘制文字、颜色、图像、边框和阴影等，也就是一个 DOM 元素所有的可视效果。一般来说，这个绘制过程是在多个层上完成的。</p></li> \n <li><p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\">Composite：渲染层合并，由上一步可知，对页面中 DOM 元素的绘制是在多个层上进行的。在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上。对于有位置重叠的元素的页面，这个过程尤其重要，因为一旦图层的合并顺序出错，将会导致元素显示异常。</p></li> \n</ul> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">这里又涉及了层（GraphicsLayer）的概念，GraphicsLayer 层是作为纹理(texture)上传给 GPU 的，现在经常能看到说 GPU 硬件加速，就和所谓的层的概念密切相关。但是和本文的滚动优化相关性不大，有兴趣深入了解的可以自行 google 更多。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">简单来说，网页生成的时候，至少会渲染（Layout+Paint）一次。用户访问的过程中，还会不断重新的重排（reflow）和重绘（repaint）。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">其中，用户 scroll 和 resize 行为（即是滑动页面和改变窗口大小）会导致页面不断的重新渲染。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">当你滚动页面时，浏览器可能会需要绘制这些层(有时也被称为合成层)里的一些像素。通过元素分组，当某个层的内容改变时，我们只需要更新该层的结构，并仅仅重绘和栅格化渲染层结构里变化的那一部分，而无需完全重绘。显然，如果当你滚动时，像视差网站(戳我看看)这样有东西在移动时，有可能在多层导致大面积的内容调整，这会导致大量的绘制工作。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; color: rgb(255, 0, 0); box-sizing: border-box !important; word-wrap: break-word !important;\"><strong style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\">防抖（Debouncing）和节流（Throttling）</strong></span></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">scroll 事件本身会触发页面的重新渲染，同时 scroll 事件的 handler 又会被高频度的触发, 因此事件的 handler 内部不应该有复杂操作，例如 DOM 操作就不应该放在事件处理中。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">针对此类高频度触发事件问题（例如页面 scroll ，屏幕 resize，监听用户输入等），下面介绍两种常用的解决方法，防抖和节流。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><strong style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\">防抖（Debouncing）</strong></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">防抖技术即是可以把多个顺序地调用合并成一次，也就是在一定时间内，规定事件被触发的次数。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">通俗一点来说，看看下面这个简化的例子：</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<blockquote style=\"max-width: 100%; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">// 简单的防抖动函数</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">function debounce(func, wait, immediate) {</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>// 定时器变量</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>var timeout;</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>return function() {</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>// 每次触发 scroll handler 时先清除定时器</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>clearTimeout(timeout);</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>// 指定 xx ms 后触发真正想进行的操作 handler</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>timeout = setTimeout(func, wait);</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>};</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">};</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">&nbsp;</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">// 实际想绑定在 scroll 事件上的 handler</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">function realFunc(){</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>console.log(\"Success\");</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">}</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">&nbsp;</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">// 采用了防抖动</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">window.addEventListener('scroll',debounce(realFunc,500));</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">// 没采用防抖动</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">window.addEventListener('scroll',realFunc);</span></p> \n</blockquote> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">上面简单的防抖的例子可以拿到浏览器下试一下，大概功能就是如果 500ms 内没有连续触发两次 scroll 事件，那么才会触发我们真正想在 scroll 事件中触发的函数。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">上面的示例可以更好的封装一下：</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<blockquote style=\"max-width: 100%; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">// 防抖动函数</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">function debounce(func, wait, immediate) {</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>var timeout;</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>return function() {</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>var context = this, args = arguments;</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>var later = function() {</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>timeout = null;</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>if (!immediate) func.apply(context, args);</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>};</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>var callNow = immediate &amp; !timeout;</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>clearTimeout(timeout);</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>timeout = setTimeout(later, wait);</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>if (callNow) func.apply(context, args);</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>};</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">};</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">&nbsp;</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">var myEfficientFn = debounce(function() {</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>// 滚动中的真正的操作</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">}, 250);</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">&nbsp;</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">// 绑定监听</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">window.addEventListener('resize', myEfficientFn);</span></p> \n</blockquote> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><strong style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\">节流（Throttling）</strong></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">防抖函数确实不错，但是也存在问题，譬如图片的懒加载，我希望在下滑过程中图片不断的被加载出来，而不是只有当我停止下滑时候，图片才被加载出来。又或者下滑时候的数据的 ajax 请求加载也是同理。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">这个时候，我们希望即使页面在不断被滚动，但是滚动 handler 也可以以一定的频率被触发（譬如 250ms 触发一次），这类场景，就要用到另一种技巧，称为节流函数（throttling）。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">节流函数，只允许一个函数在 X 毫秒内执行一次。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">与防抖相比，节流函数最主要的不同在于它保证在 X 毫秒内至少执行一次我们希望触发的事件 handler。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">与防抖相比，节流函数多了一个 mustRun 属性，代表 mustRun 毫秒内，必然会触发一次 handler ，同样是利用定时器，看看简单的示例：</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<blockquote style=\"max-width: 100%; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">// 简单的节流函数</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">function throttle(func, wait, mustRun) {</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>var timeout,</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>startTime = new Date();</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>return function() {</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>var context = this,</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>args = arguments,</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>curTime = new Date();</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>clearTimeout(timeout);</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>// 如果达到了规定的触发时间间隔，触发 handler</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>if(curTime - startTime &gt;= mustRun){</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>func.apply(context,args);</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>startTime = curTime;</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>// 没达到触发间隔，重新设定定时器</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>}else{</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>timeout = setTimeout(func, wait);</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>}</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>};</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">};</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">// 实际想绑定在 scroll 事件上的 handler</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">function realFunc(){</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>console.log(\"Success\");</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">}</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">// 采用了节流函数</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">window.addEventListener('scroll',throttle(realFunc,500,1000));</span></p> \n</blockquote> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">上面简单的节流函数的例子可以拿到浏览器下试一下，大概功能就是如果在一段时间内 scroll 触发的间隔一直短于 500ms ，那么能保证事件我们希望调用的 handler 至少在 1000ms 内会触发一次。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; color: rgb(255, 0, 0); box-sizing: border-box !important; word-wrap: break-word !important;\"><strong style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\">使用 rAF（requestAnimationFrame）触发滚动事件</strong></span></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">上面介绍的抖动与节流实现的方式都是借助了定时器 setTimeout ，但是如果页面只需要兼容高版本浏览器或应用在移动端，又或者页面需要追求高精度的效果，那么可以使用浏览器的原生方法 rAF（requestAnimationFrame）。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><strong style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\">requestAnimationFrame</strong></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">window.requestAnimationFrame() 这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数。这个方法接受一个函数为参，该函数会在重绘前调用。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">rAF 常用于 web 动画的制作，用于准确控制页面的帧刷新渲染，让动画效果更加流畅，当然它的作用不仅仅局限于动画制作，我们可以利用它的特性将它视为一个定时器。（当然它不是定时器）</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">通常来说，rAF 被调用的频率是每秒 60 次，也就是 1000/60 ，触发频率大概是 16.7ms 。（当执行复杂操作时，当它发现无法维持 60fps 的频率时，它会把频率降低到 30fps 来保持帧数的稳定。）</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">简单而言，使用 requestAnimationFrame 来触发滚动事件，相当于上面的：</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<blockquote style=\"max-width: 100%; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">throttle(func, xx, 1000/60) //xx 代表 xx ms内不会重复触发事件 handler</span></p> \n</blockquote> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">简单的示例如下：</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<blockquote style=\"max-width: 100%; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">var ticking = false; // rAF 触发锁</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">function onScroll(){</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">&nbsp; if(!ticking) {</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">&nbsp; &nbsp; requestAnimationFrame(realFunc);</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">&nbsp; &nbsp; ticking = true;</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">&nbsp; }</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">}</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">function realFunc(){</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>// do something...</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>console.log(\"Success\");</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span class=\"\" style=\"max-width: 100%; white-space: pre; box-sizing: border-box !important; word-wrap: break-word !important;\"> </span>ticking = false;</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">}</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">// 滚动事件监听</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">window.addEventListener('scroll', onScroll, false);</span></p> \n</blockquote> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">上面简单的使用 rAF 的例子可以拿到浏览器下试一下，大概功能就是在滚动的过程中，保持以 16.7ms 的频率触发事件 handler。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">使用 requestAnimationFrame 优缺点并存，首先我们不得不考虑它的兼容问题，其次因为它只能实现以 16.7ms 的频率来触发，代表它的可调节性十分差。但是相比 throttle(func, xx, 16.7) ，用于更复杂的场景时，rAF 可能效果更佳，性能更好。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">总结一下</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<ul class=\" list-paddingleft-2\" style=\"max-width: 100%; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"> \n <li><p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\">防抖动：防抖技术即是可以把多个顺序地调用合并成一次，也就是在一定时间内，规定事件被触发的次数。</p></li> \n <li><p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\">节流函数：只允许一个函数在 X 毫秒内执行一次，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。</p></li> \n <li><p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\">rAF：16.7ms 触发一次 handler，降低了可控性，但是提升了性能和精确度。</p></li> \n</ul> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; color: rgb(255, 0, 0); box-sizing: border-box !important; word-wrap: break-word !important;\"><strong style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\">简化 scroll 内的操作</strong></span></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">上面介绍的方法都是如何去优化 scroll 事件的触发，避免 scroll 事件过度消耗资源的。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">但是从本质上而言，我们应该尽量去精简 scroll 事件的 handler ，将一些变量的初始化、不依赖于滚动位置变化的计算等都应当在 scroll 事件外提前就绪。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">建议如下：</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">避免在scroll 事件中修改样式属性 / 将样式操作从 scroll 事件中剥离</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); text-align: center; box-sizing: border-box !important; word-wrap: break-word !important;\"><img class=\"\" data-ratio=\"0.4046875\" data-src=\"http://mmbiz.qpic.cn/mmbiz/zPh0erYjkib3u2w3hvWqm1kaobWCPV3mYof378YBdDYYpD5YnV5ibztNENHkLhn937qnrHAVTibImwKAJtVYnHUBg/640?wx_fmt=jpeg\" data-type=\"jpeg\" data-w=\"640\" style=\"box-sizing: border-box !important; word-wrap: break-word !important; width: auto !important; visibility: visible !important;\" src=\"http://ss.csdn.net/p?http://mmbiz.qpic.cn/mmbiz/zPh0erYjkib3u2w3hvWqm1kaobWCPV3mYof378YBdDYYpD5YnV5ibztNENHkLhn937qnrHAVTibImwKAJtVYnHUBg/640?wx_fmt=jpeg\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">输入事件处理函数，比如 scroll / touch 事件的处理，都会在 requestAnimationFrame 之前被调用执行。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">因此，如果你在 scroll 事件的处理函数中做了修改样式属性的操作，那么这些操作会被浏览器暂存起来。然后在调用 requestAnimationFrame 的时候，如果你在一开始做了读取样式属性的操作，那么这将会导致触发浏览器的强制同步布局。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; color: rgb(255, 0, 0); box-sizing: border-box !important; word-wrap: break-word !important;\"><strong style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\">滑动过程中尝试使用 pointer-events: none 禁止鼠标事件</strong></span></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">大部分人可能都不认识这个属性，嗯，那么它是干什么用的呢？</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">pointer-events 是一个 CSS 属性，可以有多个不同的值，属性的一部分值仅仅与 SVG 有关联，这里我们只关注 pointer-events: none 的情况，大概的意思就是禁止鼠标行为，应用了该属性后，譬如鼠标点击，hover 等功能都将失效，即是元素不会成为鼠标事件的 target。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">可以就近 F12 打开开发者工具面板，给 标签添加上 pointer-events: none 样式，然后在页面上感受下效果，发现所有鼠标事件都被禁止了。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">那么它有什么用呢？</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">pointer-events: none 可用来提高滚动时的帧频。的确，当滚动时，鼠标悬停在某些元素上，则触发其上的 hover 效果，然而这些影响通常不被用户注意，并多半导致滚动出现问题。对 body 元素应用 pointer-events: none ，禁用了包括 hover 在内的鼠标事件，从而提高滚动性能。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<blockquote style=\"max-width: 100%; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">.disable-hover {</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">&nbsp; &nbsp; pointer-events: none;</span></p> \n <p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 12px; box-sizing: border-box !important; word-wrap: break-word !important;\">}</span></p> \n</blockquote> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">大概的做法就是在页面滚动的时候, 给 添加上 .disable-hover 样式，那么在滚动停止之前, 所有鼠标事件都将被禁止。当滚动结束之后，再移除该属性。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">可以查看这个 demo （https://dl.dropboxusercontent.com/u/2272348/codez/expensivescroll/demo.html）页面。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">上面说 pointer-events: none 可用来提高滚动时的帧频 的这段话摘自 pointer-events-MDN ，还专门有文章讲解过这个技术：</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">使用pointer-events:none实现60fps滚动 。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">这就完了吗？没有，张鑫旭有一篇专门的文章，用来探讨 pointer-events: none 是否真的能够加速滚动性能，并提出了自己的质疑：</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">pointer-events:none提高页面滚动时候的绘制性能？</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">结论见仁见智，使用 pointer-events: none 的场合要依据业务本身来定夺，拒绝拿来主义，多去源头看看，动手实践一番再做定夺。</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">其他参考文献（都是好文章，值得一读）：</p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<ul class=\" list-paddingleft-2\" style=\"max-width: 100%; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"> \n <li><p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\">实例解析防抖动（Debouncing）和节流阀（Throttling）</p></li> \n <li><p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\">无线性能优化：Composite</p></li> \n <li><p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\">Javascript高性能动画与页面渲染</p></li> \n <li><p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\">Google Developers–渲染性能</p></li> \n <li><p style=\"max-width: 100%; min-height: 1em; box-sizing: border-box !important; word-wrap: break-word !important;\">Web高性能动画</p></li> \n</ul> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。</p> \n<p><br></p> \n<p><br></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); text-align: center; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 14px; color: rgb(255, 169, 0); box-sizing: border-box !important; word-wrap: break-word !important;\">觉得本文对你有帮助？请分享给更多人</span></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; line-height: 25.6px; text-align: center; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><strong style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; color: rgb(255, 169, 0); box-sizing: border-box !important; word-wrap: break-word !important;\">关注「前端大全」，提升前端技能</span></strong></p> \n<p style=\"max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; line-height: 25.6px; text-align: center; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><img class=\"\" data-ratio=\"0.9166666666666666\" data-src=\"http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib0lZCEKibSLcyLMVa3iaNzhWkSPnEBk28r5AAcL4fS03LQn1RWA5M58d7kvysRCibKpHibjs1szyRmnOQ/640?wx_fmt=png\" data-type=\"png\" data-w=\"600\" style=\"box-sizing: border-box !important; word-wrap: break-word !important; visibility: visible !important; width: auto !important;\" width=\"auto\" src=\"http://ss.csdn.net/p?http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib0lZCEKibSLcyLMVa3iaNzhWkSPnEBk28r5AAcL4fS03LQn1RWA5M58d7kvysRCibKpHibjs1szyRmnOQ/640?wx_fmt=png\"></p>","level":3,"createdAt":1496221331000,"updatedAt":1496221331000}}