$(document).ready(function()和 window.onload()执行顺序

https://blog.csdn.net/qq_34802511/article/details/82589487

一、DOM加载过程

网页文档加载都是按顺序执行的。一般浏览器渲染操作顺序大致是一下几个步骤:
1.解析HTML结构
2.加载外部脚本和样式表文件
3.解析并执行脚本代码
4.构造HTML DOM模型
5.加载图片等外部文件
6.页面加载完毕

一、$(document).ready(function()

$ (function() {}) 是$(document).ready(function()的简写,两者效果一样。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/common/js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
           console.log("1");
        });
 
        $(function(){
            console.log("2");
            $(function(){
                console.log("3");
                $(function(){
                    console.log("4");
                });
            });
        });
 
        $(document).ready(function() {
            console.log("5");
            $(function(){
                console.log("6");
            });
        });
 
        $(function(){
            console.log("7");
            $(document).ready(function() {
                console.log("8");
            });
        });
    </script>
<body>
    执行顺序12573684
    $(document).ready(function() {}和$(function(){}) 是 一摸一样的,
    谁在前面谁在先执行,还有多个闭包函数时 按成次 一级一级运行的。
</body>
</html>

$(function() {}) 是什么时候执行的呢?

答案: DOM加载完毕之后执行。

DOM是什么?
DOM就是一个html页面的标签树,树,树。

$(document).ready(function()和 window.onload()执行顺序_第1张图片

那么什么时候,DOM加载完成了呢?即页面所有的html标签(包括图片等)都加载完了,即浏览器已经响应完了,加载完了,全部展现到浏览器界面上了。

三、window.onload

window.onload = function(){//执行脚本}

等页面加载完后在执行(包括js和dom),也可以理解为所有dom文档和所有文件都加载完后执行。

总结:

DOM在第一次页面加载完毕后,就在内存里了,无论后面怎么通过ajax的方式去局部修改html页面,都只是对内存中的DOM树进行修改,而DOM在第一次页面加载完毕后就已经加载完毕了。所以后面js文件(动态加载或者head中加载)再使用到$(function() {})函数肯定会执行的。

$(function() {})比window.onload先执行

参考

1.如何在DOM元素加载完毕后执行js代码以及DOM加载过程

2.$(document).ready(function()和 $(function()执行顺序

你可能感兴趣的:(JavaScript)