在一般情况下，许多人都是将<script>写在了<head>标签中，而许多浏览器都是使用单一的线程来加载js文件的，从上往下，从左往右。

若是加载过程出错，那么网页就会阻塞，就像许多网站用Google的CDN库，而我们在墙内访问一样。页面不会出来，一直加载这个js文件，直到浏览器放弃加载为止！

  1.  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
  2.  
  3.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  <html xmlns="http://www.w3.org/1999/xhtml">
  5.  <head id="head">
  6.      <title></title>
  7.      <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
  8.      <script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>
  9.      <script src="js/hello.js" type="text/javascript"></script>
  10.      <script src="js/world.js" type="text/javascript"></script>
  11.  </head>
  12.  <body>
  13.      <img src="1.jpg" width="200" height="300" />
  14.  </body>
  15.  </html>

在上面的例子中，分别加载了hello.js 和 word.js 以及jQuery。

从这张图中可以看出，三个js文件还有一个css样式表是同时加载的，这是在chrome浏览器下测试的，现代浏览器IE、Firefox还有chrome中都实现了并行的js加载，这节约了不少时间，同时，可以看见之后的图片是在js文件加载完毕之后触发的，这样，就阻塞了页面的加载速度。

开始优化

这里，将js文件放置于body前面，这样就可以解决页面空白问题。

现在可以看到js文件已经可以和页面元素基本上同时加载了。但是也还是能够看到，请求时间略微的向后延迟了一点儿。

说道这里，js文件在加载的时候都是发起了get请求的，凡是发起了请求，都是需要请求头的，所以这里耗费了不少时间。

想到这里，就有几种解决思路了！

1、合并js文件，减少请求次数

2、利用第三方的工具来减少请求次数，如PHP的Minify。

淘宝就用了方法二：

上图看出一个src 分别用逗号隔开了三个js文件的路径，这里就用第三方工具将其本来有的三次请求，减少到了一次请求。

好叻，说到这里，仔细看看chrome中的加载时间，发现加载时间比起最初的加载时间已经减少了不少了。

我们进一步优化！

上面的几种方法，不管是将<script>写在页尾、或者降低请求次数，页面始终还是“阻塞模式”，也就是说锁死了浏览器，现在的页面越来越复杂，交互越来越多，js文件相应的也越来越多，提高加载速度是必然的需求。

那么，相对的，我们寻找一种“无阻塞模式”，也就是在页面加载完成之后再加载交互的js文件，这里可以选择使用windows.onload=function(){}的方式来加载文件。

这里实现无序的追加加载：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head id="head">
  6.     <title></title>
  7.     <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
  8. </head>
  9. <body>
  10.     <img src="1.jpg" width="200" height="300" />
  11.     <script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>
  12.     <script type="text/javascript">
  13.         window.onload = function () {
  14.             $("#head").append("<script src='js/hello.js' type='text/javascript'><\/script>")
  15.             $("#head").append("<script src='js/world.js' type='text/javascript'><\/script>");
  16.         }
  17.     </script>
  18. </body>
  19. </html>

好叻，到了这里，看上图，可以发现js文件 hello.js、world.js 两个文件都是文档加载完成之后再加载的。

这样计算的话，页面的加载时间又将减去不少了。

然后再撸一个有序的：

  1.  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
  2.  
  3.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  <html xmlns="http://www.w3.org/1999/xhtml">
  5.  <head id="head">
  6.      <title></title>
  7.      <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
  8.  </head>
  9.  <body>
  10.      <img src="1.jpg" width="200" height="300" />
  11.      <script type="text/javascript">
  12.          function loadScript(url, callback) {
  13.              var script = document.createElement("script");
  14.              script.type = "text/javascript";
  15.  
  16.              //IE
  17.              if (script.readyState) {
  18.                  script.onreadystatechange = function () {
  19.                      if (script.readyState == "loaded" || script.readyState == "complete") {
  20.                          script.onreadystatechange = null;
  21.                          callback();
  22.                      }
  23.                  }
  24.              } else {
  25.                  //非IE
  26.                  script.onload = function () {
  27.                      callback();
  28.                  }
  29.              }
  30.              script.src = url;
  31.              document.getElementById("head").appendChild(script);
  32.          }
  33.          //第一步加载jquery类库
  34.          loadScript("jquery/jquery-1.4.1.js", function () {
  35.              //第二步加载hello.js
  36.              loadScript("js/hello.js", function () {
  37.                  //第三步加载world.js
  38.                  loadScript("js/world.js", function () {
  39.  
  40.                  });
  41.              });
  42.          });
  43.      </script>
  44.  </body>
  45.  </html>

这样就可以实现队列加载了，这种方式，腾讯网就是这么实现的了！

相关内容：

转载 一线码农 大哥的文章

前端设计中关于外部js文件加载的速度优化的更多相关文章

  1. win7,vs2010,asp.net项目中修改外部js文件，在调试时加载的还是旧文件

    win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件 我杀过 w3wp.exe和asp.net_state的进程,重启 iis admin的服务,都还是不行. 只是把 ...

  2. vue2项目中引用外部js文件

    vue2项目目录如下(utils文件夹是自己手工建的,然后在utils里新建js文件): 使用import导入文件时,注意路径,路径不对会报错: 导入之后使用外部js函数时,直接写导入时的名字加小括号 ...

  3. js文件加载优化

    在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. ...

  4. WTL中GDI+支持资源文件加载

    WTL中GDI+支持资源文件加载 分类: WTL WTL gdi+ gdi+2013-04-22 17:16 78人阅读 评论(0) 收藏 举报 WTLGDI+c++ 今天遇到一个小问题困扰了.就是G ...

  5. html中引入外部js文件，使用外部js文件里的方法

    外部js文件1: /** * 加了window.onload 后,直接引入js文件即可 * 页面资源全部加载完毕后会自动调用window.onload里的回调函数 */ window.addEvent ...

  6. 【转】html、css、js文件加载顺序及执行情况

    原链接:http://www.cnblogs.com/Walker-lyl/p/5262075.html 今天看书,看到html,css,js加载执行情况,发现自己并不是真正的了解,网上搜了半小时依然 ...

  7. html、css、js文件加载顺序及执行情况

      HTML页面加载和解析流程 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head& ...

  8. js文件加载太慢，JavaScript文件加载加速

    原文出自:https://blog.csdn.net/seesun2012 js脚本加载太慢,JavaScript脚本加载加速(亲测有效) 测试背景: JS文件大小:6.1kB 传统形式加载js文件: ...

  9. HTML中引用外部JS文件失效原因

    今天在练习中碰到“引用外部的一个js文件但是却失效”的情况,实在不懂,百度后才知是引用的位置不对,错误的代码如下: <head> <meta charset="UTF-8& ...

随机推荐

  1. 数据结构图文解析之：AVL树详解及C++模板实现

    0. 数据结构图文解析系列 数据结构系列文章 数据结构图文解析之:数组.单链表.双链表介绍及C++模板实现 数据结构图文解析之:栈的简介及C++模板实现 数据结构图文解析之:队列详解与C++模板实现 ...

  2. Bzoj1176 [Balkan2007]Mokia

    Time Limit: 30 Sec  Memory Limit: 162 MBSubmit: 2000  Solved: 890 Description 维护一个W*W的矩阵,初始值均为S.每次操作 ...

  3. Extjs 知识体系1-dom操作

    操作dom 主要是Ext.element,主要是简单的操作 Ext.dom.CompositeElement // 操作dom集合 ps:Extjs 使用字面量{} 形式,不支持链式操作 一.获取元素 ...

  4. Samba服务器配置

    Samba服务器配置流程: (1)安装samba服务器先用#rpm -ivh samba-列出与samba有关的rpm包然后选择第一个包,用tab键补齐文件名 (2)创建新用户和其密码#useradd ...

  5. 创建NetWorkDataset---FileGDB篇

    /// <summary> /// 创建NetWorkDataset /// </summary> /// <returns>INetworkDataset.< ...

  6. WebApplicationInitializer (spring 3.x.x以上版本)

    实现WebApplicationinitializer接口的类都可以在web应用程序启动时被加载. 那么来想一个问题:为什么实现了WebApplicationInitializer这个接口后,onSt ...

  7. [UML]UML系列——类图class的实现关系Realization

    系列文章 [UML]UML系列——用例图Use Case       [UML]UML系列——用例图中的各种关系(include.extend)       [UML]UML系列——类图Class   ...

  8. css之display:inline-block

    display:inline-block: 作用:将对象呈现为inline对象,但是对象的内容作为block对象呈现.之后的内联对象会被排列在同一行内.比如我们可以给一个link(a元素)inline ...

  9. Coursera系列-R Programming-Final Week-Assignment3 & 总结

    博客总目录,记录学习R与数据分析的一切:http://www.cnblogs.com/weibaar/p/4507801.html  ------- 经过周末一个半天的努力,终于把这次的Assignm ...

  10. Windows下，MySQL root用户忘记密码解决方案

    同时打开2个命令行窗口,并按如下操作: <1>.在第一个“命令行窗口”输入: cd  D:\Program Files\MySQL\MySQL Server 5.5\bin net sto ...