CSS性能优化的一些小技巧

CSS是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体,颜色,位置等的语言,并且CSS样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果,发展至今,CSS不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。

实践型的4个优化技巧,先从首屏关键CSS开始。

<强> 1。内联首屏关键CSS(关键CSS)

性能优化中有一个重要的指标——<强>首次有效绘制(第一个有意义的油漆,简称FMP)即指页面的首要内容(主要内容)出现在屏幕上的时间。这一指标影响用户看到页面前所需等待的时间,而* *内联首屏关键CSS(即关键CSS,可以称之为首屏关键CSS) * *能减少这一时间。

大家应该都习惯于通过链接标签引用外部CSS文件。但需要知道的是,将CSS直接内联到HTML文档中能使CSS更快速地下载。而使用外部CSS文件时,需要在HTML文档下载完成后才知道所要引用CSS的文件,然后才下载它们。所以说,<强>内联CSS能够使浏览器开始页面渲染的时间提前强劲,因为在HTML下载完成之后就能渲染了。

既然内联CSS能够使页面渲染的开始时间提前,那么是否可以内联所有的CSS呢?答案显然是否定的,这种方式并不适用于内联较大的CSS文件。因为初始拥塞窗口3存在限制(TCP相关概念,通常是14.6 kb,压缩后大小),如果内联CSS后的文件超出了这一限制,系统就需要在服务器和浏览器之间进行更多次的往返,这样并不能提前页面渲染时间,因此,我们应当<强>只将渲染首屏内容所需的关键CSS内联到HTML中。

既然已经知道内联首屏关键CSS能够优化性能了,那下一步就是如何确定首屏关键CSS了。显然,我们不需要手动确定哪些内容是首屏关键CSS.Github上有一个项目关键CSS4,可以将属于首屏的关键样式提取出来,大家可以看一下该项目,结合自己的构建工具进行使用。当然为了保证正确,大家最好再亲自确认下提取出的内容是否有缺失。

不过内联CSS有一个缺点,内联之后的CSS不会进行缓存,每次都会重新下载。不过如上所说,如果我们将内联后的文件大小控制在了14.6 kb以内,这似乎并不是什么大问题。

如上,我们已经介绍了为什么要内联关键CSS以及如何内联,那么剩下的CSS我们怎么处理好呢?建议使用外部CSS引入剩余CSS,这样能够启用缓存,除此之外还可以异步加载它们。

<强> 2。异步加载CSS

CSS会阻塞渲染,在CSS文件请求,下载,解析完成之前,浏览器将不会渲染任何已处理的内容。有时,这种阻塞是必须的,因为我们并不希望在所需的CSS加载之前,浏览器就开始渲染页面。那么将首屏关键CSS内联后,剩余的CSS内容的阻塞渲染就不是必需的了,可以使用外部CSS,并且异步加载。

那么如何实现CSS的异步加载呢?有以下四种方式可以实现浏览器异步加载CSS
。
第一种方式是使用JavaScript动态创建样式表链接元素,并插入到DOM中。