WEB学习进阶之路-之性能优化三
本章主要介绍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/
引起重绘的常见属性
color | background | background-position | outline | outline-width |
border-style | text-decoration | background-repeat | outline-style | box-shadow |
visibility | background-image | outline-color | border-radius | background-size |
引起回流的常见属性
width | border | font-weight | clear | offsetHeight | clientWidth |
height | top | overflow | white-space | scrollTop | clientHeight |
padding | position | left | bottom | scrollLeft | |
margin | font-size | font-family | min-height | scrollWidth | |
display | float | line-height | offsetTop | scrollHeight | |
border-width | text-align | vertical-align | offsetLeft | clientTop | |
getComputedStyle() | overflow-y | right | offsetWidth | clientLeft |
- 点赞
- 收藏
- 关注作者
评论(0)