前端性能优化从css说起

shiyang6017 发布于2019-08-23 14:31 / 1578人阅读

摘要：放在中减少引起和接下来我们再来讨论一下图片与雪碧图或精灵，在网页中我们会用到很多图标，如果每一个图标是多带带的一张图片，那网页加载的时候，就会有多个请求去请求图片，显而易见会影响网页性能，所以要采取方法对网页中图标使用进行优化处理。

我们都知道性能对于一个网站来说相当重要，以至于很多公司都会专门招聘人员优化网站性能，网上关于探讨网站性能优化的文章也非常多。性能是什么呢？简单来说，就是用户打开网站到网页完全呈现在用户面前所耗费的时间，研究表明：用户最满意的打开网页时间是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的优化知识还有很多，不断学习吧！！

专线服务 idc机房托管前端性能优化前端开发性能优化 css优化前端从入门到精通

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100730.html

前端性能优化从css说起

摘要：放在中减少引起和接下来我们再来讨论一下图片与雪碧图或精灵，在网页中我们会用到很多图标，如果每一个图标是单独的一张图片，那网页加载的时候，就会有多个请求去请求图片，显而易见会影响网页性能，所以要采取方法对网页中图标使用进行优化处理。我们都知道性能对于一个网站来说相当重要，以至于很多公司都会专门招聘人员优化网站性能，网上关于探讨网站性能优化的文章也非常多。性能是什么呢？简单...

KoreyLee 2019-08-30 15:55 评论0 收藏0
前端性能优化从css说起

摘要：放在中减少引起和接下来我们再来讨论一下图片与雪碧图或精灵，在网页中我们会用到很多图标，如果每一个图标是单独的一张图片，那网页加载的时候，就会有多个请求去请求图片，显而易见会影响网页性能，所以要采取方法对网页中图标使用进行优化处理。我们都知道性能对于一个网站来说相当重要，以至于很多公司都会专门招聘人员优化网站性能，网上关于探讨网站性能优化的文章也非常多。性能是什么呢？简单...

Juven 2019-08-05 15:56 评论0 收藏0
前端优化 - 收藏集 - 掘金

摘要：虽然有着各种各样的不同，但是相同的是，他们前端优化不完全指南前端掘金篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。如何提升页面渲染效率 - 前端 - 掘金Web页面的性能我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端...

VincentFF 2019-08-20 17:15 评论0 收藏0
用 Service Worker 实现前端性能优化

摘要：导入谷歌提供的库注册成功可以进行下一步的操作立即激活跳过等待下面用官网给出的几张图解释一下所提供的几种缓存策略而它们正好能满足上文我们自己用代码所实现的效果。接下来让我们使用去实现上文优化前端性能的缓存策略。前言 : 说起前端性能优化, 我们首先想到的可能就是用 Gulp 、Webpack 之类的自动化构建工具对 HTML、CSS 、JS 代码进行压缩，同时优化图片资源。再者就是使用...

yuanxin 2019-08-22 18:12 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

mikasa 2019-08-01 18:18 评论0 收藏0