一 : Javascript在网页页面加载时的执行顺序

一、在HTML中嵌入Javasript的方法

1、直接在Javascript代码放在标记对<script>和</script>之间

2、由<script />标记的src属性制定外部的js文件

3、放在事件处理程序中，比如：<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p>

4、作为URL的主体，这个URL使用特殊的Javascript：协议，比如：<a href="javascript:alert('我是
由javascript:协议执行的javascript')">点击我</a>

5、利用javascript本身的document.write()方法写入新的javascript代码

6、利用Ajax异步获取javascript代码，然后执行

第3种和第4种方法写入的Javascript需要触发才能执行，所以除非特别设置，否则页面加载时不会执行。

二、Javascript在页面的执行顺序

1、页面上的Javascript代码是HTML文档的一部分，所以Javascript在页面装载时执行的顺序就是其引入标记<script />的出现顺序， <script />标记里面的或者通过src引入的外部JS，都是按照其语句出现的顺序执行，而且执行过程是文档装载的一部分。

2、每个脚本定义的全局变量和函数，都可以被后面执行的脚本所调用。

3、变量的调用，必须是前面已经声明，否则获取的变量值是undefined。

<script type="text/javscrpt">//<![CDATA[
alert(tmp);  //输出 undefined
var tmp = 1;
alert(tmp);  //输出 1
//]]></script>

4、同一段脚本，函数定义可以出现在函数调用的后面，但是如果是分别在两段代码，且函数调用在第一段代码中，则会报函数未定义错误。

<script type="text/javscrpt">//<![CDATA[
aa();            //浏览器报错
//]]></script>
<script type="text/javscrpt">//<![CDATA[
aa();   //输出 1
function aa(){alert(1);}
//]]></script>

5、document.write()会把输出写入到脚本文档所在的位置，浏览器解析完documemt.write()所在文档内容后，继续解析document.write()输出的内容，然后在继续解析HTML文档。

<script type="text/javascript">//<![CDATA[
    document.write('<script type="text/javascript" src="test.js"></script>');
    document.write('<script type="text/javascript">');
    document.write('alert(2);')
    document.write('alert("我是" + tmpStr);');
    document.write('</script>');
    //]]></script>
  <script type="text/javascript">//<![CDATA[
    alert(3);
    //]]></script>
test.js的内容是：

var tmpStr = 1;
    alert(tmpStr);

在Firefox和Opera中的弹出值的顺序是：1、2、我是1、3

在IE中弹出值的顺序是：2、1、3，同时浏览器报错：tmpStr未定义

原因可能是IE在document.write时，并未等待加载SRC中的Javascript代码完毕后，才执行下一行，所以导致2先弹出，并且执行到document.write(’document.write("我是" + tmpStr)’)调用tmpStr时，tmpStr并未定义，从而报错。

解决这个问题，可以利用HTML解析是解析完一个HTML标签，再执行下一个的原理，把代码拆分来实现：

<script type="text/javascript">//<![CDATA[
    document.write('<script type="text/javascript" src="test.js"></script>');
    //]]></script>
  <script type="text/javascript">//<![CDATA[
    document.write('<script type="text/javascript">');
    document.write('alert(2);')
    document.write('alert("我是" + tmpStr);');
    document.write('</script>');
    //]]></script>
  <script type="text/javascript">//<![CDATA[
    alert(3);
    //]]></script>

这样IE下和其他浏览器输出值的顺序都是一直的了：1、2、我是1、3。

三、如何改变Javascript在页面的执行顺序

1、利用onload

<script type="text/javascript">//<![CDATA[
window.onload = f;
function f(){alert(1);}
alert(2);
//]]></script>

输出值顺序是 2、1。

需要注意的是，如果存在多个winodws.onload的话，只有最有一个生效，解决这个办法是：

window.onload = function(){f();f1();f2();.....}

利用2级DOM事件类型

if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
}else{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
...
}

2、IE中可以利用deferdefer作用是把代码加载下来，并不立即执行，等文档装载完毕之后再执行，有点类似onload，但是没有onload那样的局限性，可以重复使用，但是只在IE中有效，所以上面的例子可以修改成为

<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript" defer="defer">');
document.write('alert(2);')
document.write('alert("我是" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
alert(3);
//]]></script>

这样IE就不报错了，输出值的顺序变成：1、3、2、我是1

3、利用Ajax。

因为xmlhttpRequest能判断外部文档加载的状态，所以能够改变代码的加载顺序。

二 : Facebook奇特的页面加载技术

没事使用代理上了下facebook，注册进入个人首页后，习惯性的查看源代码，发现了1个很有意思的现象，首页内容不少，但源代码中HTML的代码却很少，但去多出了很多段的javascript代码，这些js代码都是用于动态生成html的，facebook为什么需要这样做了？出于职业习惯，研究研究：

一、html代码

先看看首页查看的源代码，因为源代码比较大，所以把图片压缩了下，可能看不太清楚，只需要注意图中红色是html代码，其余黑压压一片的就全部是JS代码：

查看大图

二、JS代码

看到黑压压的JS代码是不是被吓一跳，下面就截取一段JS来分析（其余段的JS都是类似的），facebook源代码中充斥了类似于下面的JS代码：

<script> big_pipe.onPageletArrive({ "id":"pagelet_welcome_box","phase":1,"is_last":false,"append":false,"bootloadable":[], "css":["lDRwi","eon+N"], "js":["F+B8D","IdQlc"], "resource_map":[],"requires":[],"provides":[], "onload":["window.__UIControllerRegistry["c4c13a3ed2dd1e0e349b72"] = new UIPagelet("c4c13a3ed2dd1e0e349b72", "/pagelet/generic.php/WelcomeBoxPagelet/", {}, {});; ;"], "onafterload":[],"onpagecache":[],"onafterpagecache":[],"refresh_pagelets":[],"invalidate_cache":[], "content":{ "pagelet_welcome_box":"<div id="c4c13a3ed2dd1e0e349b72"><div class="UIImageBlock clearfix fbxWelcomeBox"> ...这里省略N多HTML" }, "page_cache":true }); </script>

让我们再看看big_pipe.onPageletArrive函数到底做了什么了？我们只关注参数中的id，js，css，content4个参数，可以看出js和css都是进行过编码，下面是解码后我们关注的代码：

<script> big_pipe.onPageletArrive({ "id":"pagelet_welcome_box", "css":{ name: "css/c5mv8gd5gwoc4kk0.pkg.css" permanent: true src: "http://static.ak.fbcdn.net/rsrc.php/zBP3B/hash/abee68r4.css" type: "css" }, "js":{ name: "js/19khsprwvtvokwow.pkg.js" permanent: false src: "http://static.ak.fbcdn.net/rsrc.php/zAVXU/hash/e8mwcqsi.js" type: "js" }, "content":{ "pagelet_welcome_box":"<div id="c4c13a3ed2dd1e0e349b72"><div class="UIImageBlock clearfix fbxWelcomeBox"> ...这里省略N多HTML" } }); </script>

看到还原后的JS，你应该猜出onPageletArrive函数是干嘛的吧，其实onPageletArrive最主要实现就是把“content”中的html内容插入到对应id（上面的“pagelet_welcome_box”）的html元素中，并下载对应的css和JS。

三、chunk、flush

看到上面的分析后，大家一定奇怪，facebook为什么要生成那么多段JS，再用js去动态插入html代码，这不是脱了裤子放屁，多此一举吗？还不如直接生成html代码了。facebook当然不会那么笨了，让我们先监控下facebook的http请求，监控图如下：

查看大图

注意上图中红色部分，原来facebook使用了chunk对页面进行分块输出。这就比较容易理解了，facebook首页的js代码段不是1次就全部输出的，而是一段一段进行输出的。

什么是chunk和如何使用chunk，请参考我的另1篇博文：flush让页面分块，逐步呈现

总结

facebook使用chunk技术让页面分块输出成很多JS段，这样做的好处就是服务器和客户端可以并行进行处理，不用等服务器全部处理完毕，客户端才进行处理。

举个博客园首页的列子，博客园首页分为下面几块（“推荐博客排行”，“首页随笔列表”，“最新新闻”。..），

我们一般对该http请求处理如下：

1. 浏览器发送http请求

2. 服务器处理请求（从缓存读取前50个推荐博客，从数据库读取“首页随笔列表”，从数据库读取“最新新闻”），生成首页的html代码。

3. 服务器发送html代码给客户端

4、浏览器接收到响应，处理html（下载css，js，image，执行js等等）

可以看出传统的http请求4个过程中，每个过程都必须等待前1个过程完成后才能执行，这样就存在很大的资源浪费。

facebook的对该http请求的处理如下：

1. 浏览器发送http请求

2. 服务器处理请求（从缓存读取前50个推荐博客，生成“推荐博客”的js代码段，flush输出该代码段，

服务器继续读取“首页随笔列表”，并生成输入js代码段。

服务器继续读取“最新新闻”，并生成输入js代码段。

3. 浏览器接收到js代码段，下载该代码段所需的js和css。插入html代码。

在这个处理流程中，最大的特点就是2，3是并行进行处理的，服务器处理完一部分数据就把已经处理好的数据交给浏览器进行呈现处理，自己再继续处理其他的数据。

本文标题：页面加载完成后执行js-Javascript在网页页面加载时的执行顺序
本文地址： http://www.61k.com/1078658.html