选择以什么方式把css加载到页面中，决定了浏览器显示页面的速度，度量Web性能的一个重要指标就是网页的实际渲染时间（这个也就是网页内容渲染到页面上需要多长时间）也被称之为"渲染时间"或是"上屏时间"。
不要把css放在body里面或是页面底部，浏览器只有拿到了全部的css，才能返回最佳的响应内容。
1、减少HTTP请求
在引入链接外部样式表时，保证链接的文件的数量是最少是非常重要的，因为每个文件都需要单独发送一次HTTP请求，相对应的，每次从服务器请求文件，浏览器需要花一定时间去下载，然后还要花时间去应用其中的样式内容，另外，额外的HTTP请求也意味着浏览器会向服务器发送多余的数据，比如：cookie或请求首部，服务器也必须针对每个请求返回响应首部，两个文件要比一个包含相同CSS内容的文件，此外，还要发送额外的请求取得所有导入的文件。
2、压缩或缓存内容
使用GZIP压缩线上的资源，css的压缩比率比较高，因为它的很多属性和值都是重复的，一般来说，css文件压缩后会减少70%~80%，这样显然可以减少带宽占用，从而为用户节省时间，多数的web服务器都会在浏览器支持的情况下启用自动压缩线上资源。
同样，让web服务器去设置一定的css文件缓存时间也比较重要，理想情况下，浏览器应只存在下载一次css文件，除非线上文件有变化，方法就是通过HTTP首部告诉浏览器，把文件缓存较长的一段时间，如果文件有修改，则通过文件名来清除缓存。
3、不让浏览器渲染阻塞javascript的执行
如果在html文档中的head元素中加了script标签，浏览器必须先把它链接的脚本下载下来，然后再向用户显示网页内容，换句话说，这种情况下的HTML和CSS解析完全被下载以及执行脚本阻塞了，也就是“渲染阻塞”，渲染阻塞会明显的拖慢网站的加载速度，为此，主流做法是在body底部加载javascript脚本。
还有一种做法，在head中使用script标签，但是添加async和defer属性，给script标签加上async属性，会异步的加载脚本，不会阻塞HTML文档的解析，但会在脚本加载完毕时阻断HTML解析，给script标签加上defer属性，同样的会异步加载脚本，不同的是会在HTML解析完毕后再执行加载的脚本
网友评论