这都是一些看过的相关文章链接和概述,自己整理一下以后回顾。
现在移动互联网的发展势头已经超过互联网,这对普通web网站也有很多影响。因为手机分辨率高但是屏幕小,而且内存普遍不够用,手机上浏览器Reflow的代价很大,所以性能问题是很影响体验的。
首先得配合DOM写CSS的选择器,然后还有一些细节方面的问题
- CSS压缩、合写CSS、去掉冗余效果;总之是减少字节数
- 将公共样式独立出来,有利于浏览器缓存
- 不用CSS表达式
- 避免适用通配符或隐式通配符
- 避免层级或过度限制的CSS
增加、删除、修改 DOM 结点时,会导致 Reflow 或 Repaint;移动 DOM 的位置,或是搞个动画的时候;修该某些(大多数)CSS 样式的时候;Resize 窗口的时候(移动端没有这个问题),或是滚动的时候;修改网页的默认字体时都会触发Reflow。
通常来说,如果在滚屏的时候,我们的页面上的所有的像素都会跟着滚动,那么性能上没什么问题,因为我们的显卡对于这种把全屏像素往上往下移的算法是很快。但是如果你有一个 fixed 的背景图,或是有些 Element 不跟着滚动,有些 Elment 是动画,那么这个滚动的动作对于浏览器来说会是相当相当痛苦的一个过程。你可以看到很多这样的网页在滚动的时候性能有多差。因为滚屏也有可能会造成 reflow。
一般来说,浏览器会把这样的操作积攒一批,然后做一次 reflow,这又叫异步 reflow 或增量异步 reflow。但是有些情况浏览器是不会这么做的,比如:resize 窗口,改变了页面默认的字体,等。对于这些操作,浏览器会马上进行 reflow。