正文
js优化 ----js的有序加载
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
说到有序加载，我们先来说说js的无序加载：
<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>
为什么一定要有顺序要求这个概念呢？对于上面的那个动态追加的“两个js”文件，在IE系列中，你不能保证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>
大家也能看到，页面完全Load的时间其实也就310ms左右，大大提高了网页的下载呈现和友好型。
