合并外部JavaScript

文档中心 >Google PageSpeed

概览

合并JavaScript是通过把多个不同的JavaScript文件用一个来代替，从而减少HTTP请求数，以及减少下载其他资源的延迟时间。

详细说明

良好的前端开发人员会构建模块化的、可重用组件的Web应用程序。而把代码划分为模块化软件组件是一个良好的工程实践，通过导入模块到一个HTML页面，可以大大提高网页的加载时间。首先，对于空缓存的客户，浏览器必须为每个资源发出HTTP请求，从而产生相关的往返时间。其次，大多数浏览器在JavaScript文件被下载并进行解析时会阻止页面的其余部分加载。

建议

划分文件的最佳方法

下面是合并JavaScript文件的一些规则：

把JavaScript分为两个文件：一个包含渲染网页时启动所需要的最少代码，另一个包含的代码直到网页加载完成才需要。
在<head>里放置尽可能少的JavaScript文件，同时保持这些文件的体积最小化。
很少使用的JavaScript放到一个文件里，只有当有需要时才使用这个文件。
对于不能缓存的小JavaScript代码，考虑把它们嵌入到网页里。
在head里代码的位置要正确。

不管是外部的还是内嵌的代码，以正确的顺序放置都是有好处的，使其他元素可以最大限度地并行下载。

合并JavaScript实例

先看看网页上的显示效果，合并前和合并后都不变：

example:合并JavaScript

代码如下，合并前

html代码

<html>
  <head>
    <title>combine_javascript example</title>
    <script src="js1.js"></script>
    <script src="js2.js"></script>
  </head>
  <body>
    Hello, PageSpeed!
  </body>
</html>

js1.js代码为：

function logText(message) {
  document.body.appendChild(document.createTextNode(message));
  document.body.appendChild(document.createElement("br"));
}

js2.js代码为：

window.onload = function() {
  logText("Application started.");
  logText("Library operation confirmed.");
}

合并后

html代码

<html>
  <head>
    <title>combine_javascript example</title>
    <script src="js1-js2.js"></script>
    <script>eval(mod1);</script>  <!-- 这里使用了eval()函数 //-->
    <script>eval(mod2);</script> <!-- 这里使用了eval()函数 //-->
  </head>
  <body>
    Hello, PageSpeed!
  </body>
</html>

合并文件js1-js2.js的代码为：

var mod1 = "function logText(message){document.body.appendChild(document.createTextNode(message));document.body.appendChild(document.createElement(\"br\"));}";
var mod2 = "window.onload=function(){logText(\"Application started.\");logText(\"Library operation confirmed.\");}";

合并原理很简单，就是把前面几个js的代码分别赋给一个变量，然后在网页里用eval()这个函数执行。

重要：合并后js文件不宜太大，一般来说，合并后的js文件不要大于92160(90KB)。

本页面中的内容已获得知识共享署名3.0许可，并且代码示例已获得Apache 2.0许可；另有说明的情况除外。

文章源地址：https://developers.google.com/speed/pagespeed/module/filter-js-combine