合并外部JavaScript文件来提高网站加载速度

之前在很多的文章中提到过,合并js文件和CSS文件,是可以有效提高网站加载速度的,当然,尽量少用JS文件,或者减少不必要的插件,也是相当不错的.但如果是外部的JavaScript文件,可能很多朋友就无从下手了,其实也是可以很简单地将其合并为一个文件,然后通过eval()这个函数来引用执行.

外部JavaScript文件,一般比较常见的,就是广告了,另外还有一些都是分享之类的,或者作为其它功能来用的.相对来说,作为其它功能的话,一般都可以将其做成内部js文件来进行合并.

合并外部JavaScript的实例

html代码:

  1. <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代码为:

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

js2.js代码为:

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

合并后的html代码:

  1. <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的代码为:

  1. var mod1 = "function logText(message){document.body.appendChild(document.createTextNode(message));document.body.appendChild(document.createElement(\"br\"));}";   

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

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

另外,这里需要补充一下,合并后的js文件不要大于92160(90KB).

合并外部JavaScript文件的一些规则

把JavaScript分为两个文件:一个包含渲染网页时启动所需要的最少代码,另一个包含的代码直到网页加载完成才需要.

在里放置尽可能少的JavaScript文件,同时保持这些文件的体积最小化.

很少使用的JavaScript放到一个文件里,只有当有需要时才使用这个文件.

对于不能缓存的小JavaScript代码,考虑把它们嵌入到网页里.

在head里代码的位置要正确.

小结

看来是时候对网站里的外部JS来一次合并了.部落目前还没有进行测试,哪天有时间了,会第一时间将百度联盟的广告和百度分享的js代码进行合并一下.


合作伙伴

网站备案:豫ICP备15023476号-1 唯特科技