前端性能优化

目录

定义：

方法：

减少整体的加载时间

使网站尽快可用

平滑和交互性

感知表现

 新能测定

---

定义：

    web性能是网站或应用程序的客观度量和可感知的用户体验。

方法：

减少整体的加载时间

- 减小文件的体积·

- 减少http请求

- 使用预加载

使网站尽快可用

- 仅加载首屏内容

- 按需懒加载

平滑和交互性

- 使用css替代js动画

- 减少重排，重绘：

  1.浏览器下载完页面所有的资源后，就要开始构建DOM树，于此同时还会构建渲染树(Render Tree)。（其实在构建渲染树之前，和DOM树同期会构建Style Tree。DOM树与Style Tree合并为渲染树）

  2.一旦渲染树构建完成，就要开始绘制（paint）页面元素了。当DOM的变化引发了元素几何属性的变化，比如改变元素的宽高，元素的位置，导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树，这个过程称为“重排”。完成重排后，要将重新构建的渲染树渲染到屏幕上，这个过程就是“重绘”。简单的说，重排负责元素的几何属性更新，重绘负责元素的样式更新。而且，重排必然带来重绘，但是重绘未必带来重排。比如，改变某个元素的背景，这个就不涉及元素的几何属性，所以只发生重绘

  3.重排触发机制

  上面已经提到了，重排发生的根本原理就是元素的几何属性发生了改变，那么我们就从能够改变元素几何属性的角度入手

  添加或删除可见的DOM元素

  元素位置改变

  元素本身的尺寸发生改变

  内容改变

  页面渲染器初始化

  浏览器窗口大小发生改变

  4.如何减少重排重绘

    隐藏元素，进行修改后，然后再显示该元素

  let ul = document.querySelector('#mylist');

  ul.style.display = 'none';

  appendNode(ul, data);

  ul.style.display = 'block';

  使用文档片段创建一个子树，然后再拷贝到文档中

   let fragment = document.createDocumentFragment();

  appendNode(fragment, data);

  ul.appendChild(fragment);

  将原始元素拷贝到一个独立的节点中，操作这个节点，然后覆盖原始元素

  let old = document.querySelector('#mylist');

  let clone = old.cloneNode(true);

  appendNode(clone, data);

  old.parentNode.replaceChild(clone, old);

感知表现

- 页面可能不快，都是你可以让用户感觉很快，耗时操作给用户反

  例如：

    添加加载动画，进度条，骨架屏等提示信息。

 新能测定

- 性能指标测试

- 性能测试

- 性能监控持续优化