性能优化

[TOC] ## 概述 - 提高网页性能，就是要降低"重排"和"重绘"的频率和成本，尽量少触发重新渲染 - 但是，浏览器已经很智能了，会尽量把所有的变动集中在一起，排成一个队列，然后一次性执行，尽量避免多次重新渲染 - 性能角度考虑，尽量不要把读操作和写操作 如 ``` // bad div.style.left = div.offsetLeft + 10 + "px"; div.style.top = div.offsetTop + 10 + "px"; // good var left = div.offsetLeft;2 var top = div.offsetTop; div.style.left = left + 10 + "px"; div.style.top = top + 10 + "px"; ``` ### 重排和重绘 以下三种情况，会导致网页重新渲染 1. 修改DOM 2. 修改样式表 3. 用户事件（比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等） - 重新渲染，就需要**重新生成布局**和**重新绘制**。前者叫做"**重排**"（reflow），后者叫做"**重绘**"（repaint）。 - **重绘"不一定需要"重排**(如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变) - **"重排"必然导致"重绘"**，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了 ## 技巧 ### 多读(或多写)放一块 DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。 ### 缓存结果 如果某个样式是通过重排得到的，那么最好缓存结果。避免下一次用到的时候，浏览器又要重排 ### 批量修改样式 不要一条条地改变样式，而要通过改变class，或者csstext属性，一次性地改变样式 ``` // bad var left = 10; var top = 10; el.style.left = left + "px"; el.style.top = top + "px"; // good el.className += " theclassname"; // good el.style.cssText += "; left: " + left + "px; top: " + top + "px;"; ``` ### 操作离线DOM - 尽量使用离线DOM，而不是真实的网面DOM，来改变元素样式,比如 - 操作Document Fragment对象，完成后再把这个对象加入DOM。 - 使用 cloneNode() 方法，在克隆的节点上进行操作，然后再用克隆的节点替换原始节点 ### 高频重回时可先隐藏在显示 先将元素设为display: none（需要1次重排和重绘），然后对这个节点进行100次操作，最后再恢复显示（需要1次重排和重绘）。这样一来，你就用两次重新渲染，取代了可能高达100次的重新渲染。 ### position的absolute或fixed,重回开销小 重排的开销会比较小，因为不用考虑它对其他元素的影响 ### 在必要时设置元素可见 只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，`visibility : hidden`的元素只对重绘有影响，不影响重排 ### 使用虚拟DOM的脚本库 比如React等 ## 提高性能的方法 有一些JavaScript方法可以调节重新渲染，大幅提高网页性能。 ### window.requestAnimationFrame() 加需要渲染的操作放到下一次重绘 bad ``` function doubleHeight(element) { var currentHeight = element.clientHeight; element.style.height = (currentHeight * 2) + 'px'; } elements.forEach(doubleHeight); ``` good ``` function doubleHeight(element) { var currentHeight = element.clientHeight; window.requestAnimationFrame(function () { element.style.height = (currentHeight * 2) + 'px'; }); } elements.forEach(doubleHeight); ``` 示例:页面滚动操作使用 windows.requestAnimationFrame() ``` $(window).on('scroll', function() { window.requestAnimationFrame(scrollHandler); }); ``` 示例:网页动画 下面是一个旋转动画的例子，元素每一帧旋转1度 刚好可以在每次重绘时,显示元素的 ``` var rAF = window.requestAnimationFrame; var degrees = 0; function update() { div.style.transform = "rotate(" + degrees + "deg)"; console.log('updated to degrees ' + degrees); degrees = degrees + 1; rAF(update); } rAF(update); ```` ### window.requestIdleCallback() - 它指定只有当一帧的末尾有空闲时间，才会执行回调函数 - 只有当前帧的运行时间小于16.66ms时，函数fn才会执行。否则，就推迟到下一帧，如果下一帧也没有空闲时间，就推迟到下下一帧，以此类推 ``` requestIdleCallback(fn); // 如果在指定时间内还是没有执行,在强制执行 requestIdleCallback(fn, 5000); ```