比来在研究页面衬着及web动画的机能问题，以及拜读《CSS SECRET》(CSS揭秘)这本大年夜作。
本文重要想谈谈页面优化之滚动优化。
重要内容包含了为何须要优化滚动事宜，滚动与页面衬着的关系，撙节与防抖，pointer-events:none 优化滚动。因为本文涉及了很多很多基本，可以对比膳绫擎的常识点，选择性跳到响应处所浏览。
滚动优化的由来
- var i = 0;
- window.addEventListener('scroll',function(){
- console.log(i++);
- },false);
输出如下：
在绑定 scroll 、resize 这类事宜时，当它产生时，它被触发的频次异常高，距离很近。如不雅事宜中涉及到大年夜量的地位计算、DOM 操作、元素重绘等工作且这些工作无法鄙人一? scroll 事宜触发前完成，就会造成浏览器掉落帧。加之用户鼠标滚动往往是持续的，就会持续触发 scroll 事宜导致掉落帧扩大年夜、浏览器 CPU 应用率增长、用户体验受到影响。
在滚动事宜中绑定回调应用处景也异常多，在图片的懒加载、下滑主动加载数据、侧边浮动导航栏等中有着广泛的应用。
滚动与页面衬着的关系
为什么滚动事宜须要却竽暌古化?因为它影响了机能。那它影响了什么机能呢?额……这个就要大年夜页面机能问题由什么决定说起。
我认为搞技巧必定要追本溯源，不要看到别人一篇文┞仿说滚动事宜会导致卡顿并说了一堆解决筹划优化技能就如获至宝奉为圭臬，我们须要的不是拿来主义而是批驳主义，多去泉源看看。
大年夜问题出发，一步一步寻找到最后，就很轻易找到问题的关键地点，只有如许得出的解决办法才轻易记住。
说教了一堆废话，不爱好的直接忽视哈，回到正题，要找到优化的人口就要知道问题出在哪里，对于页面优化而言，那么我们就要知道页面的衬着道理：
浏览器衬着道理我在我上一篇文┞仿里也要具体的讲到，不过更多的是大年夜动画衬着的角度去讲的：《【Web动画】CSS3 3D 行星运转 && 浏览器衬着道理》 。
想了想，照样再简单的描述下，我发明每次 review 这些常识点都有新的收成，此次换一张图，以 chrome 为例子，一个 Web 页面的┞饭示，简单来说可以认为经历了以下下几个步调：
requestAnimationFrame
- JavaScript：一般来说，我们会应用 JavaScript 来实现一些视觉变更的效不雅。比如做一个动画或者往页面里添加一些 DOM 元素等。
- Style：盘似揭捉?式，这个过程是根据 CSS 选择器，对每个 DOM 元素匹配对应的 CSS 样式。这一步停止之后，就肯定了每个 DOM 元素上该应用什么 CSS 样式规矩。
- Layout：构造，上一步肯定了每个 DOM 元素的样式规矩，这一步就是具体计算每个 DOM 元素最终在屏幕上显示的大年夜小和地位。web 页面中元素的构造是相对的，是以一个元素的构造产生变更，会联动地激发其他元素的构造产生变更。比如， 元素的宽度的变更会影响其子元素的宽度，其子元素宽度的变更也会持续对其孙子元素产生影响。是以对于浏览器来说，构造过程是经常产生的。
- Paint：绘制，本质上就是填充像素的过程。包含绘制文字、色彩、图像、边框和暗影等，也就是一个 DOM 元素所有的可视效不雅。一般来说，这个绘制过程是在多个层上完成的。
- Composite：衬着层归并，由上一步可知，对页面中 DOM 元素的绘制是在多个层长进行的。在每个层上完成绘制过程之后，浏览器会将所有层按照合理的次序归并成一个图层，然后显示在屏幕上。对于有地位重叠的元素的页面，这个过程尤其重要，因为一旦图层的归并次序掉足，将会导致元素显示异常。
这里又涉及了层(GraphicsLayer)的概念，GraphicsLayer 层是作为纹理(texture)上传给 GPU 的，如今经常能看到说 GPU 硬件加快，就和所谓的层的概念密切相干。然则和本文的滚动优化相干性不大年夜，有兴趣深刻懂得的可以自行 google 更多。
当用户浏览网页时，拥有腻滑滚动经常是被忽视但倒是用户体验中至关重要的部分。当滚动表示正常时，用户就会感到应用十分流畅，令人愉悦，反之，粗笨不天然卡顿的滚动，则会给用户带来极大年夜不舒爽的感到。
简单来说，网页生成的时刻，至少会衬着(Layout+Paint)一次。用户拜访的过程中，还会赓续从新的重排(reflow)和重绘(repaint)。
个中，用户 scroll 和 resize 行动(等于滑动页面和改变窗口大年夜小)会导致页面赓续的从新衬着。
防抖(Debouncing)和撙节(Throttling)
scroll 事宜本身会触发页面的从新衬着，同时 scroll 事宜的 handler 又会被高频度的触发, 是以事宜的 handler 内部不该该有复杂操作，例如 DOM 操作就不该该放在事宜处理中。
针对词攀类高频度触发事宜问题(例如页面 scroll ，屏幕 resize，监听用户输入等)，下面介绍两种常用的解决办法，防抖和撙节。
推荐阅读
智能化需求表如今两个方面跟着移动互联网的成长进入新的偏向，移动互联网中的智能化已经成为新的成长趋势和重要需求。智能化需求今朝重要表如今两个方面：一方面是促生新的智能化应用，如>>>详细阅读
本文标题：高性能滚动scroll及页面渲染优化
地址：http://www.17bianji.com/lsqh/34957.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示