现dom和css是同时进行加载,然后组成dom树的渲染,就是说,如果css没加载完,dom树肯定也是不能被渲染的。
然后,由于js是要操作dom和css,所以但凡这俩有一个没加载完,都会影响js的操作,也就是会阻塞js。
一、class
优点 1、能够缓存于浏览器
2、能够复用
3、便于更改样式库
缺点 1、过多样式文件会阻塞(dom树,js)
二、style
优点 1、渲染快,不用加载样式表
缺点 1、仅能供一个dom使用
2、不能缓存于浏览器,每次都要重新渲染,增加服务器的负荷
三、提升css渲染
1、使用CDN(因为CDN会根据你的网络状况,替你挑选最近的一个具有缓存内容的节点为你提供资源,因此可以减少加载时间)
2、对css进行压缩(可以用很多打包工具,比如webpack,gulp等,也可以通过开启gzip压缩)
3、合理的使用缓存(设置cache-control,expires,以及E-tag都是不错的,不过要注意一个问题,就是文件更新后,你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号)
4、减少http请求数,将多个css文件合并,或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)
四、gzip配置 compression-webpack-plugin
注意:需要在nginx实现(nginx.conf)
在http模块内配置“gzip_static on”即可。
http {
gzip_static on;
}