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

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

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

 <%@ 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" />
<script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/hello.js" type="text/javascript"></script>
<script src="js/world.js" type="text/javascript"></script>
</head>
<body>
<img src="1.jpg" width="200" height="300" />
</body>
</html>

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

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

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

开始优化

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

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

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

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

想到这里,就有几种解决思路了!

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

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

淘宝就用了方法二:

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

上图看出一个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='js/hello.js' type='text/javascript'><\/script>")
$("#head").append("<script src='js/world.js' type='text/javascript'><\/script>");
}
</script>
</body>
</html>

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

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

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

然后再撸一个有序的:

 <%@ 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 type="text/javascript">
function loadScript(url, callback) {
var script = document.createElement("script");
script.type = "text/javascript"; //IE
if (script.readyState) {
script.onreadystatechange = function () {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
}
} else {
//非IE
script.onload = function () {
callback();
}
}
script.src = url;
document.getElementById("head").appendChild(script);
}
//第一步加载jquery类库
loadScript("jquery/jquery-1.4.1.js", function () {
//第二步加载hello.js
loadScript("js/hello.js", function () {
//第三步加载world.js
loadScript("js/world.js", function () { });
});
});
</script>
</body>
</html>

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

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

相关内容:

转载 一线码农 大哥的文章

上一篇:转载:C++ vector 类学习笔记


下一篇:js文件加载执行顺序