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

关于页面加载

时间:2017-09-16 19:07:06      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:query   bsp   推荐   ade   页面   jquery   nload   cti   time()   

DOMContentLoaded

执行次序

DOMContentLoaded  -> angular启动 ->  onload

  jQuery的 $(document).ready() 方法,就是对DOMContentLoaded事件的监听(其内部会通过模拟DOMContentLoaded事件和监听onload事件来提供降级方案)。通常推荐在DOMContentLoaded事件触发的时候为DOM元素注册事件。

动态插入script

假设首页页面代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function sleep(milliSeconds){
            let startTime = new Date().getTime();
            while(new Date().getTime() < startTime + milliSeconds){}
        }
        function log(msg){
            console.log(new Date().getSeconds() + "s - " + msg);
        }
        log("start")
    </script>
    <script src="1.js"></script>
    <script src="2.js"></script>
</head>
<body>
</body>
</html>

1.js

sleep(3000);

2.js

document.write(‘<script src="3.js"></script>‘);
window.addEventListener("DOMContentLoaded",function(){
    log("DOMContentLoaded");
});
window.onload = function(){
    log("onload");
};

3.js

log(‘3.js开始执行‘);
sleep(3000);

运行结果:

技术分享

生成的html如下:

技术分享

结论:

  DOMContentLoaded 会等待js脚本【包括scipt和动态加入的script标签】执行完后再触发事件回调

 

关于页面加载

标签:query   bsp   推荐   ade   页面   jquery   nload   cti   time()   

原文地址:http://www.cnblogs.com/hellohello/p/7531904.html

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