美文网首页
DOM加载顺序

DOM加载顺序

作者: d34skip | 来源:发表于2019-01-29 10:53 被阅读0次

1,解析HTML结构。
2,加载外部脚本和样式表文件。
3,解析并执行脚本代码。
4,构造HTML DOM模型。
5,加载图片等外部文件。
6,页面加载完毕。

<html>
<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 → 加载脚本 → 解析脚本 → 执行脚本 → 加载外部图像文件 → 页面初始化完毕

相关文章

  • DOM加载顺序

    1,解析HTML结构。2,加载外部脚本和样式表文件。3,解析并执行脚本代码。4,构造HTML DOM模型。5,加载...

  • Dom 加载顺序 和延时加载

    1 浏览器解释html文件中的所有内容是从上到下加载的!浏览器解释html文件中的所有内容是从上到下加载的!浏览器...

  • Dom加载解析

    加载顺序 解析HTML结构; 加载外部脚本和样式表文件; 解析并执行脚本代码; 构造HTML DOM模型; 加载图...

  • jquery

    jQuery基础 引入jQuery 使用 jquery当整个dom树结构绘制完毕就会加载,加载时顺序执行的 获取元...

  • 前端如何进行页面优化

    html 语义化 加载顺序:css放head里面(用户看到顺畅页面),js放尾部(会阻塞dom渲染,且dom树没搭...

  • 【JavaScript】js动态添加dom,如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定...

  • 事件

    DOM0 事件和DOM2级在事件监听使用方式上有什么区别?区别:DOM0是html内联形式的,1、其存在加载顺序的...

  • script/link标签上常用的几个属性

    默认加载顺序图 script标签上的属性 defer 脚本下载与页面的解析是并行,下载的过程不会阻塞 DOM 的构...

  • DOM0 DOM2添加事件

    兼容性 DOM2级事件 为同一个元素添加事件时,按照加载顺序依次进行。 IE: 与DOM0区别: 作用于不用,DO...

  • CSS样式表的加载对于DOM解析,渲染,JS执行的阻塞问题

    CSS加载问题 css加载会不会阻塞DOM树的解析? css加载会不会阻塞DOM树的渲染? css加载会不会阻塞后...

网友评论

      本文标题:DOM加载顺序

      本文链接:https://www.haomeiwen.com/subject/cjatsqtx.html