前端性能优化以及解决方案

3.2 避免强迫性同步构造

在 JavaScript 中攫取到的构造信息都是上一帧的信息，如不雅在 JavaScript 中修改了页面的构造，比如给某个元素添加了一个类，然后再攫取构造信息。这个时刻为了获得真实的构造信息，浏览器须要强迫性对页面进行构造。是以应当避免如许做。

3.3 批量操作 DOM

在必须要进行频繁的 DOM 操作时，可以应用 fastdom 如许的对象，它的思路是将对页面的攫取和改写放进队列，在页面重绘的时刻批量履行，先辈行攫取后改写。因为如不雅将攫取与改写交错在一路可能引起多次页面的重排。而应用 fastdom 就可以避免如许的情况产生。

固然有了 fastdom 如许的对象，但有的时刻照样不克不及大年夜根本上解决问题，比如我比来碰到的一个情况，与页面简单的一次交互（轻轻滚动页面）就履行了几千次 DOM 操作，这个时刻核心要解决的是削减 DOM 操作的次数。这个时刻就要大年夜代码层面推敲，看看是否有不须要的攫取。

别的一些关于高效操作 DOM 的办法，可以拜见《高机能JavaScript》相干章节，也可以先参考一下我的读书标记《高机能JavaScript》（https://github.com/wy-ei/notebook/issues/34 ）

4 优化衬着机能

浏览器平日每秒更新页面 60 次，每一帧的时光就是 16.6ms，为了能让浏览器保持 60帧的帧率，为了让动画看起来流畅，须要包管帧率达到 60fps，是以每一帧的逻辑须要在 16.6ms 内完成。

每一帧实际上都包含下列步调：

是以，平日 JavaScript 的履行时光不克不及跨越 10ms。

JavaScript：改变元素样式，添加元素到 DOM 中等等
Style：元素的类或者style改变了，这个时刻须要从新计算元素的样式
Layout：须要从新计算元素的具体尺寸
Composite：归并多个图层

当然也不是说每一帧都邑进行这些操作。当你的 JavaScript 改变了某个 layout 属性，比如元素的 width 和height 或者 top 等等，浏览器就会从新计算构造，并半数个页面进行重排。

如不雅修改了 background、color 如许的仅仅会让页面重绘的属性，这不会影响页面的构造，浏览器会跳过计算构造（layout）的过程，只进行重绘（paint）。

如不雅修改了一个不须要计算构造也不须要重绘的属性，那就只会进行图层的归并，这是价值最小的修改。大年夜https://csstriggers.com/ 上你可以知道修改那些样式属性会触发（Layout，Paint，Composite）中的那些操作。

4.1 将渐变或者会动画元素放到零丁的绘制层中

绘制并非在一个零丁的画布长进行的，而是独裁。是以将那些会更改的元素晋升至零丁的图层，可以让他的改变影响到的元素更少。

应用 Chrome DevTools 来审查图层

在调试的时刻你可以在 Chrome DevTools 的 timeline 面板来不雅察绘制图层。当然也不是说图层越多越好，因为新增长一个图层可能会消费额外的内存。且新增长一个图层的目标是为了避免某个元素的更改影响其他元素。

4.2 降低绘制复杂度

大年夜多半人已经知道平日要把 JavaScript 放在文档底部，把 CSS 放在文档顶部。为什么呢？因为 JavaScript 会壅塞页面的解析，而外部样式表会壅塞页面的出现和 JavaScript 的履行。

7.1 CSS壅塞衬着

某些属性的重绘相对而言加倍复杂，比如 filter、box-shadow 等滤镜或渐变效不雅。是以不要滥用这类效不雅。

5 优化 JavaScript 的履行

下面提到的 JavaScript 优化，并不是说若何让 JavaScript 履行的更快，而是若何让 JavaScript 更高效地与 DOM 合营。

5.1 应用 requestAnimationFrame 来更新页面

应用 setTimeout 可能导致丢帧

requestAnimationFrame 会将义务安排在页面重绘之前，这包管动画能有足够的时光来履行 JavaScript 。

5.2 应用 Web Worker 来处理复杂的计算

JavaScript 是在单线程的，并且可能会一向如许，是以 JavaScript 在履行复杂计算的时刻很可能会壅塞线程，导致页面假逝世。但 Web Worker 的出现，以别的一种方法给了我们多线程的才能，可以将复杂计算放在 worker 中进行，当计算完成后，以 postMessage 的情势将结不雅传回来。

对于单个函数，因为 Web Worker 接收一个脚本的 url 作为参数，应用 URL.createObjectURL 办法，我们可以将一个函数的内容转换为 url，应用它创建一个 worker。

var workerContent = ` 
self.onmessage = function(evt){ 
    // ... 
    // 在这里进行复杂计算 
    	
			 2/4   首页 上一页 1 2 3 4 下一页 尾页	
			

　　推荐阅读
　　给Python小白看的10个使用案例，入门Python就在这里了
            
            今天给大年夜家分享十个Python入门级其余小案例。这十个案例的难度不高，然则对于常识的应用异常周全，很合适小白在进修的初期建立进修信念和增长闇练度。每个案例下都有或多或少的思路分>>>详细阅读


本文标题：前端性能优化以及解决方案
地址：http://www.17bianji.com/lsqh/36425.html
 1/2    1