为什么样式表在顶部加载,脚本在底部加载

bike

为了用户体验,浏览器尽量快地显示内容,所以我们能看到比较大的网站的页面是逐步加载的。逐步加载的好处是,在加载过程中,它让用户知道系统没有崩溃,并告诉用户大概还要等多久,最后一点,它能给用户提供一些可以看的东西。

文档头部的样式表没加载完成时,会阻碍浏览器对内容的逐步呈现。因为当样式表没加载完时浏览器为了避免以后重新绘制页面中的元素,会停止内容的逐步呈现。

做个实验。在网页的头部用 <link>  标签加载一个样式表,样式表的地址是个 php 脚本,脚本中正常输出样式表内容前,调用 PHP 的 sleep()  函数,睡个几秒。刷新网页看效果,在样式表没加载好之前,网页一直是白屏。

白屏是一种非常不好的用户体验。如果将样式表放在网页底部,在 IE 较低版本中的一些情况下(新窗口下打开、重新加载、作为主页时被打开)就会造成白屏。白屏只是 IE 浏览器的行为,其他浏览器没这么处理。

那么,将样式表放在网页底部,在其他浏览器下、IE 的其他情况下的表现是怎样的?浏览器会选择逐步呈现内容,但是会出现 FOUC(Flash Of Unstyled Content,无样式内容的闪烁) 的问题。

当页面逐步加载时,文字首先显示,然后是图片。最后样式表正确地下载并解析时,已经呈现的文字和图片要用新的样式重绘了。页面在重绘时,颜色、大小等都可能发生变化,看上去就像在闪烁一样,体验也相当不好。上面那个实验,只要把 <link>  标签挪到页面底部就能看到效果。

白屏 和 FOUC 只是浏览器在尝试修复前端工程师所犯错误(将样式表放在文档比较靠后的位置)所做的处理方式的选择。选择 FOUC,在如果闪烁不严重,那用户体验就不会怎么差;选择白屏,根本没有获得好的体验的机会。

避免以上问题的方法就是:将样式表放在网页顶部加载。

下面是脚本的问题。

网页文档下载完成后,紧接着就开始下载网页中的组件了(图片、样式表文件、脚本),为了更快的显示网页内容,浏览器会并行下载这些组件。但是下载脚本时,并行下载是被禁用的,也就是说,下载脚本时,浏览器不会启动其他的下载。其中一个原因是,脚本可能使用 document.write  来修改页面的内容,因此浏览器会等待,以确保页面能正确的布局。

将脚本放在页面顶部,会有两种影响:脚本会阻塞它后面内容的呈现,脚本会阻塞它后面组件的下载。修改上面的实验,将加载样式表的地方改成加载脚本,如果脚本在顶部,页面就会出现白屏,而且其他组件还没开始下载。

所以,将脚本放在底部加载,即使请求时间较长,对页面的影响也很小。体验最佳。

 

参考自《High Performance Web Sites》,作者编写了很多实验放在他的网站上:http://stevesouders.com/hpws/

图片来自网络。网页也是组装出来的。

为什么样式表在顶部加载,脚本在底部加载》上有1条评论

  1. Pingback引用通告: 前端优化基础规则 | PHP工程师

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">