这篇文章主要给大家介绍CSS 的加载及加载顺序以及遇到的问题思路解析,文中还给大家补充介绍了关于html,css,js三者的加载顺序问题,需要的朋友参考下吧
前言
关于前端css性能优化,网上很多类似文章,我之前也写过,《 网站前端性能优化之javascript和css 》,感兴趣的可以去看下。今天我们旧事重提,再来谈谈css的加载,及加载顺序。
通常的css加载顺序
一般情况下,我们css样式表是放在头部,同时为了减少请求,我们通常对css进行一个合并压缩。 目前我们css一般是如下加载的:
…content…
这样可以,但是有几个性能问题,我们可以继续优化:
问题:
所有的css都合并压缩成一个文件,放在页面头部加载。可能首屏我们仅仅用到一点点css,却在头部加载了所有的css,造成资源的不合理加载和浪费。假如css很大,严重影响网页加载速度和首屏显示速度。
换个思路
假如不合并,单个css压缩引用,文件大小是小了,但是请求数量多了一些。 权衡二者,并且进行性能测试对比,发现如下写法确实比我们所有css放在头部一次性加载,首屏显示速度要快些:
… … … …
但是还是有性能可以优化的地方!
例如:
我们首屏仅仅显示了头部和文章,其他模块首屏不显示。那么,其他模块的css我们可以完全异步来加载。如何异步加载呢?
请看下面
loadCSS 及 Preload
关于preload,推进2篇文章给大家看下:
1、通过rel="preload"进行内容预加载: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content
2、preload 的w3文档: https://www.w3.org/TR/preload/
对于一些不是首屏加载的css,我们可以如下写法:
防止浏览器禁止js,保险起见,也可以如下:
为了避免有些浏览器会重新调用处理程序rel='stylesheet'这个属性,我们一般推荐如下写法:
为了更好的兼容rel=preload,可以使用loadCSS ,github地址: https://github.com/filamentgroup/loadCSS
因此, 不考虑浏览器兼容问题的情况下 (考虑兼容问题,可以使用loadCss,这里不多演示),我们对上面代码再次进行优化:
… … … …
PS:下面看下关于html,css,js三者的加载顺序问题