码迷,mamicode.com
首页 > 其他好文 > 详细

DOM加载顺序

时间:2015-12-02 20:43:30      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:

  1. 解析HTML结构。
  2. 加载外部脚本和样式表文件。
  3. 解析并执行脚本代码。
  4. 构造HTML DOM模型。
  5. 加载图片等外部文件。
  6. 页面加载完毕。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Title</title>
    <style type="text/css">
        body
        {
            font-sie: 12px;
        }
    </style>
    <link href="style.css" rel="stylesheet" type="text/css" media="all" />
    <script src="js.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <script type="text/javascript">
            function f1() { }
        </script>
        <img src="1.gif" />
    </div>
    <script type="text/javascript">
        function f2() { }
    </script>
</body>
</html>

 html → head → title → #text(网页标题) → style → 加载样式 → 解析样式 → link → 加载外部样式表文件 → 解析外部样式表 → script → 加载外部脚本文件 → 解析外部脚本文件 → 执行外部脚本 → body → div → script → 加载脚本 → 解析脚本 → 执行脚本 → img → script → 加载脚本 → 解析脚本 → 执行脚本 → 加载外部图像文件 → 页面初始化完毕

 

JS加载包含预编译和执行两个阶段。 编译阶段会对所有的var变量和function进行扫描,并将var变量初始化为undefined类型,而function则被初始化为函数值。

到了执行阶段,JS从上面往下面依顺序执行,遇到var变量便进行赋值(因此,在赋值之前进行调用的话会出现错误).遇到函数变量的话会从活动对象中寻找函数

 

javascript在html中的加载顺序 : http://www.cnblogs.com/CBDoctor/p/3745246.html

 

 

DOM加载顺序

标签:

原文地址:http://www.cnblogs.com/zhuiluoyu/p/5013875.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!