前端性能优化分析

摘 要：高性能的网页响应非常快，如果网页加载时间过长，页面卡顿，会流失很多用户，高性能的页面还可大量减少用户CPU与内存的占用率。因而本文将从浏览器渲染原理探讨如何进行性能提升

关键词：性能优化;web前端;浏览器渲染;DOM树

一、页面渲染过程

首先浏览器拿到HTTP报文时会解析出HTML文档，页面上各个DOM节点的内容将根据文档的各标记转化成“内容树”。然后当文档在head部分遇到link标记会去解析该CSS文件以及style标记中的样式数据，形成CSSOM。最后浏览器会将DMO与CSSOM进行合并同时生成渲染树，页面在根据渲染树进行布局绘制。

浏览器主要渲染过程为根据获取的HTML文档解析形成DOM树，处理CSS标记形成CSSOM（CSS Object Model）树，在结合DOM和CSSOM合并为渲染树（代表将要被渲染的对象），在将渲染树的每个节点绘制在屏幕上。

DOM树、CSSOM树以及渲染树的生成非常快，布局的生成以及将节点绘制绘制在屏幕上非常耗时，这两个过程合称为“渲染”。

二、重排和重绘

重绘（Repaint）是渲染树的一个重要属性，而这些属性决定了页面元素的外观风格，他不会影响页面布局，如color属性发生变化，则页面页面字体color的颜色也就发生了变化。但是元素字体大小并没有变。重排（Reflow）是指页面元素发生了几何尺寸的改变，浏览器需要根据该属性重新计算生成新的渲染树，重排会使得页面一部分或全部属性发生改变。

重绘与重排十分消耗网页性能，在网页初次加载时会至少渲染一次。当用户浏览操作页面时还会不断重新渲染，此过程会造成浏览器耗费大量的开销在进行页面的计算

修改DOM、修改样式表、用户事件（比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等）都会导致网页重新渲染。

重绘和重排的区别是，重绘不一定需要重排，比如改变某个网页元素的颜色，仅仅是重绘，不会重排，因为布局没有改变。但是，重排一定会重绘，比如改变一个网页元素的位置，浏览器会需要重新构造渲染树进行重排，重排后在屏幕上进行重绘，所以就会同时出现重排和重绘。

三、性能优化

根据互联网八秒定律网站的性能将直接影用户的访问量。影响网页性能主要有网络、服务器性能、DNS解析时效、页面渲染速度等。其中页面渲染涉及到的重排和重绘所需时间占比较大，而又不可避免，所以要提高网页性能，就要降低重排和重绘的发生。

（1）浏览器会将所有的变动集中在一起，排成一个队列，然后一次性执行，尽量避免多次重新渲染。

（2）减少对渲染树的操作，批量修改DOM和CSSOM。减少对style样式的请求，或者可以直接改变元素的className。通过让该元素脱离文档流、对其进行多重改变、将元素带回文档中可以减少重绘和重排的次数。

（3）尽量使用离线DOM，而不是真实的网面DOM，先将元素设为display：none;然后对这个节点进行100次操作;最后再设置为display：block，这样仅能引发两次重绘和重排。另外，visibility：hidden的元素只对重绘有影响，不影响重排。

（4）不要经常访问浏览器的flush队列属性;如果一定要访问，可以利用缓存。将访问的值存储起来，接下来使用就不会再引发回流。

（5）position属性;将元素position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响到其他元素。

（6）不要使用table布局，因为table中某个元素旦触发了reflow，那么整个table的元素都会触发reflow。那么在不得已使用table的场合，可以设置table-layout：auto;或者是table-layout：fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。

（7）使用虚拟DOM的脚本库，比如React、Vue等。

四、結语

应用程序变得越来越大和越来越复杂，性能优化对于Web开发来说正在变得越来越重要。在做出任何值得的时间和潜在的未来成本的优化尝试时，有针对性的改进都是必不可少的。

作者简介：李广宏（1986-），男，汉族，辽宁人，本科，实验室，研究方向：信息化、系统运维、网站开发。