前端性能优化第四篇-为什么在head中引入CSS

前端性能优化第四篇-为什么在head中引入CSS

写在前面：有很长一段时间没有更新这个专栏，是因为在准备一些课程上的东西，不过这个专栏一定不会烂尾的~

写这篇文章的原因是因为从我初学前端开始，就一直有人告诉我：“样式表文件在head中通过link引入，script文件在body的末尾引入，这样页面加载速度更快。”那么着一切究竟是为什么呢，下面我们来看一下~

（如果真的不想看这些铺垫内容，不妨直接跳到最后的总结，嘤嘤嘤~）

曾经的错误尝试

下面这个例子摘自《高性能网站建设指南》第五章开头：
Yahoo！前端团队曾经为了优化门户网站的性能，调整了CSS的位置——由于一个div是在点击某个功能时才会弹出，所以工程师将与这个div有关的CSS在文档的末尾引入，希望以这种方式提高首页的渲染效率。
但是事实上，状况并不理想，甚至恰恰相反——将CSS在文档head引入反而更快。

错误原因：逐步呈现被阻止

逐步呈现

我们都希望页面的呈现过程是一个逐步呈现的过程，理想的效果是用户能够尽快看到页面上的内容，同时内容可以呈现一个柔滑的增加，毕竟不是所有的用户都有非常良好的网络环境。这样做有几个好处：

• 让用户感受到系统并没有崩溃，它正在有条不紊的运作
• 让用户知道自己大概还需等待多长时间
• 让用户对页面内容有一个概览，同时有内容可以看

注：上面列出的三点是由 Jakob Nielson 提出的可视化回馈的重要性

错误

为了增强用户体验，浏览器也采用了这样的方式来处理一个页面。
但是，为了避免当样式表改变时重绘页面中的内容，浏览器会在样式表加载好之前阻止内容呈现。