现在的位置:首页>网站SEO>正文

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

2016年08月31日 ⁄ 共 1817字 评论 7 条

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

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

 

 

合并外部JavaScript的实例

html代码:

  1. <html>   
  2.   <head>   
  3.     <title>combine_javascript example</title>   
  4.     <script src="js1.js"></script>   
  5.     <script src="js2.js"></script>   
  6.   </head>   
  7.   <body>   
  8.     Hello, PageSpeed!   
  9.   </body>   
  10. </html>  

js1.js代码为:

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

js2.js代码为:

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

合并后的html代码:

  1. <html>   
  2.   <head>   
  3.     <title>combine_javascript example</title>   
  4.     <script src="js1-js2.js"></script>   
  5.     <script>eval(mod1);</script>  <!-- 这里使用了eval()函数 //-->   
  6.     <script>eval(mod2);</script> <!-- 这里使用了eval()函数 //-->   
  7.   </head>   
  8.   <body>   
  9.     Hello, PageSpeed!   
  10.   </body>   
  11. </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代码进行合并一下.

评论 7 条 评论内容很精采,有内幕,而且绝对有干货

  1. 李明 2016年09月01日 21:44  @回复  Δ-49楼 回复

    减小代码加载一定会提高速度的。

    • 管理员 2016年09月01日 22:11  @回复  ∇地下1层 回复

      这个主要是减少调用次数.

  2. 我爱动感单车网 2016年09月03日 10:59  @回复  Δ-48楼 回复

    具体怎么操作不会,很期待博主的实战分享:“会第一时间将百度联盟的广告,和百度分享的js代码进行合并一下”。

    • 管理员 2016年09月03日 11:09  @回复  ∇地下1层 回复

      现在还在优化手上这个新换的主题,怕是要等一段时间了.

      • 我爱动感单车网 2016年09月03日 12:15  @回复  ∇地下2层 回复

        不急,急也急不来。是发现博主新换了主题后,还有很多细节需要调整,页面的不少地方还不是很美观,至于SEO层面上的优化咱就实在不懂了。

        • 管理员 2016年09月03日 13:09  @回复  ∇地下3层 回复

          我的页面基本就这个样了,主要是速度上优化!

  3. 趣头条 2016年09月06日 15:54  @回复  Δ-47楼 回复

    支持下。

给我留言