WEB学习进阶之路-之性能优化三

举报
sujrexia 发表于 2020/07/05 17:59:12 2020/07/05
【摘要】 本章主要介绍CSS的优化1.禁止使用@import主要原因是以下这几点:1). @import混合js文件时,在IE中引发资源文件的下载顺序被打乱,即 使排列在@import后面的js文件先于@import下载,并且打乱甚至破坏@import自身的并行下载2). link混合@import会破坏并行下载,这是一个很严重的问题,这会导致原本并行下载的样式变成一个一个的同步下载3). 而仅仅使用...

本章主要介绍CSS的优化

1.禁止使用@import

主要原因是以下这几点:

1). @import混合js文件时,在IE中引发资源文件的下载顺序被打乱,即 使排列在@import后面的js文件先于@import下载,并且打乱甚至破坏@import自身的并行下载

2). link混合@import会破坏并行下载,这是一个很严重的问题,这会导致原本并行下载的样式变成一个一个的同步下载

3). 而仅仅使用LINK 可确保样式在所有浏览器里面都能被并行下载,并且按照顺序被下载

2.style放在head中,不要放在body尾部

如果放在body尾部导致css后下载,body渲染完成后,css加载,不但给用户的体验不好,而且引起页面重绘回流导致性能损失。

3.合并css属性

比如合并border-style border-witdh border-color为border,不过这条不是强制性的,根据情况使用,他的优势就是减少文件大小,加快文件下载速度。

4.避免使用一些特殊的css样式

background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );

如expression,filter等,一则是因为都是个别浏览器支持,兼容性不好,另外一个则是因为他的效率实在太低下了。

5.利用css的继承机制

比如一些通用的css,可以统一书写,针对不同的属性在个性化设置,这样一来维护有好处,而且文件大小也会缩小。

6.理解css的匹配顺序

书写css选择时,都是从左至右,而浏览器的解析恰恰相反,它是从右至左的。

比如#id > li,首页浏览器查找所有的li标签,然后在过滤ID为id的标签。

7.移除无用的css

一个是减少文件大小,另外一个可以提高浏览器在匹配索引时查找的效率。

8.避免使用通配符或者正则选择器

常见的有*=, |=, ^=, $=, 和 ~=语法的属性选择器。

9.发布版本时,尽量压缩css,合并css

10.内联首屏关键CSS,不过要尽量css尽量小,不超过14.6KB

因为初始拥塞窗口3存在限制(TCP相关概念,通常是 14.6kB,压缩后大小),如果内联CSS后的文件超出了这一限制,系统就需要在服务器和浏览器之间进行更多次的往返,这样并不能提前页面渲染时间。

11.一些不太重要的css可以采用异步加载的方式延迟加载或者懒加载

let laycss = document.createElement("link");

laycss.rel = "stylesheet";

laycss.href = "mystyles.css";

document.head.insertBefore(laycss, document.head.childNodes[document.head.childNodes.length - 1].nextSibling);

12. 尽量降低使用能引起重绘或回流的css样式。

https://csstriggers.com/

引起重绘的常见属性

colorbackgroundbackground-positionoutlineoutline-width
border-styletext-decorationbackground-repeatoutline-stylebox-shadow
visibilitybackground-imageoutline-colorborder-radiusbackground-size

引起回流的常见属性

widthborderfont-weightclearoffsetHeightclientWidth
heighttopoverflowwhite-spacescrollTopclientHeight
paddingpositionleftbottomscrollLeft
marginfont-sizefont-familymin-heightscrollWidth
displayfloatline-heightoffsetTopscrollHeight
border-widthtext-alignvertical-alignoffsetLeftclientTop
getComputedStyle()overflow-yrightoffsetWidthclientLeft


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。