本文摘自:
作者:顾家进
链接:https://juejin.im/post/5bbaa549e51d450e827b6b13
来源:掘金
一.浏览器解析渲染页面主要包括以下过程:
- 浏览器通过HTMLParser根据深度遍历的原则把HTML解析成DOM Tree。
- 将CSS解析成CSS Rule Tree(CSSOM Tree)。
- 根据DOM树和CSSOM树来构造render Tree。
- layout:根据得到的render tree来计算所有节点在屏幕的位置。
- paint:遍历render树,并调用硬件图形API来绘制每个节点。
二.前端性能优化
对于css:
-
优化选择器路径:健全的css选择器固然是能让开发看起来更清晰,然后对于css的解析来说却是个很大的性能问题,因此相比于 .a .b .c{} ,更倾向于大家写.c{}。
压缩文件:尽可能的压缩你的css文件大小,减少资源下载的负担。 -
选择器合并:把有共同的属性内容的一系列选择器组合到一起,能压缩空间和资源开销
-
精准样式:尽可能减少不必要的属性设置,比如你只要设置{padding-left:10px}的值,那就避免{padding:0 0 0 10px}这样的写法
-
雪碧图:在合理的地方把一些小的图标合并到一张图中,这样所有的图片只需要一次请求,然后通过定位的方式获取相应的图标,这样能避免一个图标一次请求的资源浪费。
-
避免通配符:.a .b {} 像这样的选择器,根据从右到左的解析顺序在解析过程中遇到通配符()回去遍历整个dom的,这样性能问题就大大的了。
-
少用Float:Float在渲染时计算量比较大,尽量减少使用。
-
0值去单位:对于为0的值,尽量不要加单位,增加兼容性
对于JavaScript:
-
尽可能把script标签放到body之后,避免页面需要等待js执行完成之后dom才能继续执行,最大程度保证页面尽快的展示出来。
-
尽可能合并script代码,
-
css能干的事情,尽量不要用JavaScript来干。毕竟JavaScript的解析执行过于直接和粗暴,而css效率更高。
-
尽可能压缩的js文件,减少资源下载的负担
-
尽可能避免在js中逐条操作dom样式,尽可能预定义好css样式,然后通过改变样式名来修改dom样式,这样集中式的操作能减少reflow或repaint的次数。
-
尽可能少的在js中创建dom,而是预先埋到HTML中用display:none来隐藏,在js中按需调用,减少js对dom的暴力操作。
对于HTML
-
避免再HTML中直接写css代码。
-
使用Viewport加速页面的渲染。
-
使用语义化标签,减少css的代码,增加可读性和SEO。
-
减少标签的使用,dom解析是一个大量遍历的过程,减少无必要的标签,能降低遍历的次数。
-
避免src、href等的值为空。
-
减少dns查询的次数。
-
img标签要设置高宽,同样这么做它也能减少页面重绘/重排,使用 WebP 格式图片