class和style的区别&&提升css渲染

        现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;
}

猜你喜欢

转载自blog.csdn.net/qq_45838276/article/details/128823167
今日推荐