YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Optimize the order of styles and scripts

前端性能优化:Optimize the order of styles and scripts

今天介绍 PageSpeed 的前端性能优化规则是:Optimize the order of styles and scripts(优化样式表和脚本的排列顺序)。之前我们介绍过关于调用外部资源文件的规则《Put CSS at top》和《Put JavaScript at bottom》,今天要讲的是,如果JavaScript外部资源文件不得不放在头部的时候要如何优化它们之间的排列顺序。

Optimize the order of styles and scripts 规则简介

Correctly ordering external stylesheets and external and inline scripts enables better parallelization of downloads and speeds up browser rendering time.

译文:以正确顺序加载外部样式表和外部和内嵌脚本可以实现更好的并行下载和加快浏览器的渲染时间。

我们知道,有时候我们不得不把一些JavaScript外部文件的调用放在头部,但是我们在《Put JavaScript at bottom》规则中介绍过,JavaScript会阻断浏览器并行下载其他资源,所以这个时候我们就要注意合理调整CSSJavaScript文件建的调用顺序了。PageSpeed给出了一个例子:

<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
</head>

假设每个文件需要话100毫秒的时间下载,在空缓存的情况下,看看这个顺序加载外部文件的示例图吧:

waterfall1

上图的加载的瀑布图显示,浏览器首先会并行下载2个文件一个stylesheet1.css和scriptfile1.js,然后等到scriptfile1.js加载执行完毕,接下来就只下载了一个scriptfile2.js文件,等这个JavaScript文件加载完成后,才又一次采用并行下载的方式同时下载了stylesheet2.css和stylesheet3.css两个文件。这个耗时是100ms+100ms+100ms=300ms。可以明显看到,加载scriptfile2.js时,阻断了浏览器并行下载文件。我们试试换换文件的加载顺序,如下:

<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />
</head>

再来看看浏览器现在是怎么加载资源文件的:

waterfall2

我们现在可以节省100ms,我们看到现在浏览器可以同时并行下载4个文件,然后在单独加载scriptfile2.js。不同的加载顺序确实可以影响前端性能。当然,我们这里的处理也是符合《Put CSS at top》规则的,而实际上我们也应该坚持把CSS放在HTML文档的最考前的地方。

我们除了会在头部调用外部JavaScript文件外,我们也会在头部加载内联的JavaScript代码,如下所示:

<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<script type="text/javascript">
document.write("Hello world!");
</script>
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
<link rel="alternate" type="application/rss+xml" href="front.xml" title="Say hello" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>

测试地址:optimize-the-order-of-styles-and-scripts.html

上面这个排列顺序,出现了一个反向问题,首先是stylesheet1.css会阻断内嵌的JavaScript代码的执行,之后这段JavaScript代码又会阻断它后面的资源加载。我用Firebug分以了一下,看到更有趣的问题,看看下面是这段代码的HTML DOM树结构图:

dom-tree1

内嵌脚本后面的这些DOM节点(资源文件)都追加到了DOCUMENT节点下面,而不是HEAD。如果我们调整一下:

<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
<link rel="alternate" type="application/rss+xml" title="Say hello" href="front.xml" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript">
   document.write("Hello world!");
</script>
</head>

这样的加载顺序,我们不但可以更快的加载资源文件,而且DOM树的结构也正确了,如下图:

dom-tree2

Optimize the order of styles and scripts

PageSpeed 对于优化样式表和脚本的排列顺序有两点建议:

  • Put external scripts after external stylesheets if possible —— 如果可以,应该将外部JavaScript文件放在外部CSS文件后面。
  • Put inline scripts after other resources if possible —— 如果可以,将内嵌的JavaScript代码放在其它资源文件的后面。

好了,关于这个问题就讲到这里了,大家一定记得在自己的实际开发中做到优化样式表和脚本的排列顺序

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Optimize the order of styles and scripts

« »

发表评论

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

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

(Spamcheck Enabled)