Optimize the order of styles and scripts优化样式和脚本的顺序
Overview
Correctly ordering external stylesheets and external and inline scripts enables better parallelization of downloads and speeds up browser rendering time.
正确设置外部样式和外部脚本及行内脚本的顺序能够优化并行下载，并且加速浏览器绘制。
Details
Because JavaScript code can alter the content and layout of a web page,
由于javascript脚本能够改变页面内容和布局，
the browser delays rendering any content that follows a script tag until that script has been downloaded, parsed and executed.
因此浏览器延时绘制 在script脚本标签后的任何内容，直到脚本下载完成、分析完成、执行完成。
However, more importantly for round-trip times, many browsers block the downloading of resources referenced in the document after scripts until those scripts are downloaded and executed.
更有甚者，许多浏览器阻塞下载那些在script标签后面的资源，直到脚本下载及执行完成。（应当指的是IE6，新浏览器会并行下载，仅仅阻塞绘制及执行）
On the other hand, if other files are already in the process of being downloaded when a JS file is referenced, the JS file is downloaded in parallel with them.
但是好的方面是，如果其他文件已经在下载过程中的时候，浏览器遇到一个js需要下载，那么这个js文件 会和其他 资源并行下载，通过这个方法解决js文件阻塞下载的问题。
For example, let's say you have 3 stylesheets and 2 scripts and you specify them in the following order in the document
下面是一个例子说明通过改变脚本及样式的顺序优化性能，有3个外部样式文件和2个脚本文件，
<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>
Assuming that each one takes exactly 100 milliseconds to download,
假设每个资源都需要100毫秒下载，
that the browser can maintain up to 6 concurrent connections for a single host (for more information about this, see Parallelize downloads across hostnames), and that the cache is empty, the download profile will look something like this:
假设浏览器一个域名下能够并行下载6个资源（新浏览器 IE6是并行2个），并且浏览器缓存为空，下载的情况将如下 ：
The second two stylesheets must wait until the JS files are finished downloading.
最后连个样式 文件必须等待js文件下载完成才能够开始下载。
The total download time equals the time it takes to download both JS files, plus the largest CSS file (in this case 100 ms + 100 ms + 100 ms = 300 ms). Merely changing the order of the resources to this:
总下载时间等于300毫秒，当我们将资源顺序修改为如下：
<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>
Will result in the following download profile:
100 ms is shaved off the total download time. For very large stylesheets that can take longer to download, the savings could be more.
我们就能够节省100毫秒的下载时间。当样式文件很大、需要更长下载时间的时候，这将节省更多的时间。
Therefore, since stylesheets should always be specified in the head of a document for better performance,
这就是我们说的为什么要将样式放在页面头部能够提升性能的原因。
it's important, where possible, that any external JS files that must be included in the head (such as those that write to the document) follow the stylesheets, to prevent delays in download time.
那些必须放置在头部的脚本（针对那些脚本中会写DOM元素的），建议将这些脚本放在样式表后面以提升性能。
Another, more subtle, issue is caused by the presence of an inline script following a stylesheet, such as the following:
更微妙的是样式表后面的行内脚本的情况
<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>
In this case, the reverse problem occurs: the first stylesheet actually blocks the inline script from being executed, which then in turn blocks other resources from being downloaded.
在这种情况下，第一个样式文件的下载会阻塞行内脚本的执行。根据前面的理论，没有执行完的脚本会阻塞后续资源的下载。
Again, the solution is to move the inline scripts to follow all other resources, if possible, like so:
为了解决这个问题，需要将行内脚本放在其他资源后面
<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>
Recommendations建议
-
Put external scripts after external stylesheets if possible.将外部脚本放置在外部样式表后面
-
Browsers execute stylesheets and scripts in the order in which they appear in the document.
-
浏览器执行样式文件和脚本文件时按照他们出现在文档中的顺序。
-
If the JS code has no dependencies on the CSS files, you can move the CSS files before the JS files.
-
如果js脚本不依赖css样式文件 ，能够将样式文件放置在脚本前面 。
-
If the JS code does depend on the CSS contained in an external file — for example, styles that are needed for output you are writing to the document in the JS code — this isn't possible.
如果脚本依赖样式文件，则无法进行这个优化
-
Putting inline scripts after all other resources prevents blocking of other downloads,
-
将行内脚本放在其他资源后面，防止其阻塞其他资源下载
-
and it also enables progressive rendering.
-
同时能够优化绘制时间。
-
However, if those "other resources" are external JS files on which the inline scripts depend, this might not be possible.
-
当行内脚本依赖外部js资源的时候，这个优化不可用。
-
In this case, it's best to move the inline scripts before the CSS files.
在这种情况下，将行内脚本放在CSS文件前面。
Put inline scripts after other resources if possible.将行内脚本放在其它资源后面
3805
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
