优化样式表和脚本的排列

文档中心 >Google PageSpeed

概览

正确排序外部样式表、外部和内联脚本能够更好的并行下载和加快浏览器的渲染时间。

详细

因为JavaScript代码可以改变网页的内容和布局，所以浏览器会延迟渲染脚本标签之后的内容，直到该脚本被下载、解析和执行。然而，更重要的是往返时间，许多浏览器阻止文档中引用的在脚本后面的资源的下载，直到这些脚本下载并执行。另一方面，如果其他文件已经在下载的过程中，当一个JS文件被引用时，JS文件的会与它们并行下载。

建议

把外部脚本放在外部样式表之后

因为样式表和脚本是按照它们在文档中出现的先后顺序执行，如果JS代码对CSS文件没有依赖性，可以将CSS文件移到JS文件之前。如果JS代码依赖于包含在外部文件中的CSS - 例如，你用于写入文档的输出的JS代码需要样式表 - 这是不可能的。

例如，HTML开始是这样的

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/script.js" type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- content -- -->
</body>
</html>

重新排列后，变成这样

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="script/script.js" type="text/javascript"></script>
</head>
<body>
<!-- content -- -->
</body>
</html>

把内嵌脚本移到其他资源之后

把内嵌脚本移到其他所有其他资源之后，可以防止阻塞其他资源的下载，而且还能够逐步呈现。然而，如果这些“其他资源”是内嵌脚本依赖的外部JS文件，这也许是不可能的。在这种情况下，最好将内嵌脚本移到CSS文件之前。

例如，HTML开始是这样的

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"> 
<!--
    function a() {
        //--jscode--
    }  
//-->
</script>
<script src="script/script.js" type="text/javascript"></script>
</head>
<body>
<!-- content -- -->
</body>
</html>

重新排列后，变成这样

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="script/script.js" type="text/javascript"></script>
<script type="text/javascript"> 
<!--
    function a() {
        //--jscode--
    }  
//-->
</script>
</head>
<body>
<!-- content -- -->
</body>
</html>