文档中心 >Google PageSpeed

合并外部JavaScript

概览

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

详细说明

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

建议

划分文件的最佳方法

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

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

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

合并JavaScript实例

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

 example:合并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