前端性能优化第四篇-为什么在head中引入CSS
写在前面:有很长一段时间没有更新这个专栏,是因为在准备一些课程上的东西,不过这个专栏一定不会烂尾的~
写这篇文章的原因是因为从我初学前端开始,就一直有人告诉我:“样式表文件在head
中通过link
引入,script
文件在body
的末尾引入,这样页面加载速度更快。”那么着一切究竟是为什么呢,下面我们来看一下~
(如果真的不想看这些铺垫内容,不妨直接跳到最后的总结,嘤嘤嘤~)
曾经的错误尝试
下面这个例子摘自《高性能网站建设指南》第五章开头:
Yahoo!前端团队曾经为了优化门户网站的性能,调整了CSS的位置——由于一个div是在点击某个功能时才会弹出,所以工程师将与这个div有关的CSS在文档的末尾引入,希望以这种方式提高首页的渲染效率。
但是事实上,状况并不理想,甚至恰恰相反——将CSS在文档head引入反而更快。
错误原因:逐步呈现被阻止
逐步呈现
我们都希望页面的呈现过程是一个逐步呈现的过程,理想的效果是用户能够尽快看到页面上的内容,同时内容可以呈现一个柔滑的增加,毕竟不是所有的用户都有非常良好的网络环境。这样做有几个好处:
- 让用户感受到系统并没有崩溃,它正在有条不紊的运作
- 让用户知道自己大概还需等待多长时间
- 让用户对页面内容有一个概览ÿ