浏览器端css和js的性能优化

先说清楚两个概念:

重绘Repaint重排Reflow

浏览器下载完毕所有的页面组件–包括html标记,js,css,图片后,会解析并生成两个内部的数据结构:

DOM树都很熟悉了,而渲染树就是DOM树中每一个节点所对应的frame或者box所组成的(不包括隐藏的DOM元素)。DOM的变化影响了元素的几何属性的时候,比如大小宽高,从而影响了其他元素的几何属性和位置,这个时候浏览器就需要重新构造渲染树,这个过程就叫做重排,完成重排以后,浏览器再重新绘制受影响的部分到屏幕中,这个就叫做重绘。有的的变化不会影响几何属性的,比如改变背景色,就只会发生重绘,而不需要重排,因为元素的布局并没有发生改变,但这两种操作都是代价昂贵的,虽然浏览器本身会进行优化,但是在编写代码的时候仍然需要最少的去进行这样的操作。

因为详细说性能优化的足够可以写一本书了,所以本文只是在前文基础之上总结一些常见的方法:

小结: