前端性能优化从css说起

       我们都知道性能对于一个网站来说相当重要,以至于很多公司都会专门招聘人员优化网站性能,网上关于探讨网站性能优化的文章也非常多。性能是什么呢?简单来说,就是用户打开网站到网页完全呈现在用户面前所耗费的时间,研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页。
       影响网站的性能有多重因素,我们就着重从前端方面来进行探讨,首先我们先了解一下网页的解析过程。

主要过程有:1.解析HTML构建DOM树 ;2.解析css构建CSSOM树 ;3.根据DOM树和CSSOM来构造 Rendering Tree(渲染树);4.Layout页面位置计算布局; 5.Paint绘制;css的加载不会阻塞DOM树的解析,但是会阻塞DOM树的渲染和后面js语句的执行,所以说才有了优化css的必要性,针对这一问题,我们可以从以下方面进行考虑优化。

1.结合构建工具(webpack,gulp...),对css文件进行打包压缩,抽离公共样式,删除多余的样式、空格、注释。
2.减少样式选择器的层级,减少样式匹配时间。        
3.尽量使用class选择器,增强样式的复用;

       css中还有两个重要的知识点repaint(重绘)和reflow(回流),repaint主要是针对某一个DOM元素进行的重绘,reflow则是回流,针对整个页面的重排,我们都知道这两个特性都会消耗网页性能,他们的触发场景也是不同的。不涉及任何DOM元素排版问题的变动为repaint,例如元素的color/text-align/text-decoration等等属性的变动,除上面所提到的DOM元素style修改基本为reflow,例如元素的任何涉及长、宽、行高、边框、display等style的修改。很多时候我们是无法避免引起repaint和reflow,但是我们还是要尽量通过各种方法来减少引起这两个特性,我们可以从以下方面进行考虑优化。

1.尽可能在DOM末梢通过改变class来修改元素的style属性:尽可能的减少受影响的DOM元素。
2.避免设置多项内联样式:使用常用的class的方式进行设置样式,以避免设置样式时访问DOM的低效率。
3.设置动画元素position属性为fixed或者absolute:由于当前元素从DOM流中独立出来,因此受影响的只有当前元素,元素repaint。
4.牺牲平滑度满足性能:动画精度太强,会造成更多次的repaint/reflow,牺牲精度,能满足性能的损耗,获取性能和平滑度的平衡。
5.避免使用table进行布局:table的每个元素的大小以及内容的改动,都会导致整个table进行重新计算,造成大幅度的repaint或者reflow。改用div则可以进行针对性的repaint和避免不必要的reflow。
6.避免在CSS中使用运算式:expression、calc、等等,可能会造成多次repaint和reflow。
7.css放在head中,减少引起repaint和reflow;

       接下来我们再来讨论一下base64图片与CssSprites(雪碧图或css精灵),在网页中我们会用到很多图标,如果每一个图标是单独的一张图片,那网页加载的时候,就会有多个请求去请求图片,显而易见会影响网页性能,所以要采取方法对网页中图标使用进行优化处理。
       Css Sprites(雪碧图):将许多的小图片整合到一张大图片中,利用css中的background-image属性,background-position属性定位某个图片位置,来达到在大图片中引用某个部位的小图片的效果。优点:减少网页的http请求,提升网页加载速度;合并多张小图片,减少资源体积。缺点:前期需要处理图片,增加工程量;不利于改动和维护。
       base64编码:base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,要求把每三个8Bit的字节转换为四个6Bit的字节,Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,通俗点来讲就是将资源原本二进制形式转成以64个字符基本单位,所组成的一串字符串。优点:减少http请求;图片可以避免跨域问题。缺点:低版本IE不兼容;过多使用base64图片会使得css过大,不利于css加载和解析;
       在网页开发中我们经常会在引入图片,也会使用到上面两种方法来优化处理网页,他们有各自不同的使用场景。Css Sprites 主要针对一些不需要经常变动的小图片,如表情,标志等,base64主要适用于小于几k的图片,图片太大的话反而得不偿失。
       洋洋洒洒写了一些关于css优化的东西,当然也汲取了前辈们的智慧,算是总结一下吧,我相信关于css的优化知识还有很多,不断学习吧!!

你可能感兴趣的:(css,javascript,html5,sass,less)