首页 > 代码库 > 前端设计中关于外部js文件加载的速度优化
前端设计中关于外部js文件加载的速度优化
在一般情况下，许多人都是将<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(){}的方式来加载文件。
这里实现无序的追加加载：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="head"> <title></title> <link href="Styles/Site.css" rel="stylesheet" type="text/css" /></head><body> <img src="1.jpg" width="200" height="300" /> <script src="jquery/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> window.onload = function () { $("#head").append("<script src=http://www.mamicode.com/‘js/hello.js‘ type=‘text/javascript‘></script>") $("#head").append("<script src=http://www.mamicode.com/‘js/world.js‘ type=‘text/javascript‘></script>"); } </script></body></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 //IE17 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 //非IE26 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.js36 loadScript("js/hello.js", function () {37 //第三步加载world.js38 loadScript("js/world.js", function () {39 40 });41 });42 });43 </script>44 </body>45 </html>
这样就可以实现队列加载了，这种方式，腾讯网就是这么实现的了！
相关内容：
转载 一线码农 大哥的文章
前端设计中关于外部js文件加载的速度优化