选择以什么方式把css加载到页面中,决定了浏览器显示页面的速度。
度量Web性能的一个重要指标就是网页内容实际显示在屏幕上需要多久。这个指标被称为“渲染时间”或“上屏时间”。
现代浏览器在屏幕上渲染内容之前至少需要两样东西:HTML 和 CSS。这就意味着让浏览器尽快下载HTML和全部CSS极为重要。
1.减少HTTP请求
在链接外部样式时,每个文件都需要单独发送一次HTTP请求。那么,每次从服务器请求文件都会花一定的时间下载,然后再应用到页面中。
线上网页最好把需要加载的CSS文件数量控制在1或2个。只用一个link元素加载CSS文件。
2.压缩和缓存内容
使用GZIP压缩线上资源也非常重要。一般CSS文件压缩后会减少70%~80%。这样显然可以减少带宽占用,从而为用户节省时间。多数Web服务器都会在浏览器支持的情况下启用自动压缩线上资源。
3.不让浏览器渲染阻塞JavaScript
尽量不要在head标签中加入
<!-- 最后加载JavaScript -->
<script scr="/js/test.js"></script>
</body>
比较现代的做法是在<head>中使用<script>,但需要添加**async** 或 **defer** 属性。
实现一个异步加载脚本的效果。两者区别:前者不阻塞HTML解析,但会在脚本加载完毕后立即执行时会阻断HTML解析。后者会在HTML解析完毕后再执行加载的脚本,不会阻断HTML的解析。
<head>
<!-- 异步加载,但下载后立即执行 -->
<script src="/js/test.js" **async**></script>
<!-- 异步加载,但在HTML解析后执行 -->
<script src="/js/test.js" **defer**></script>
</head>
注意:async 和 defer 属性是HTML5中定义的,IE10和更早版本的IE并不支持或完全不支持它们。