$(document).ready(function()和 window.onload()执行顺序_(function(),$(document).ready(function() , $(windo-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39751320/article/details/106466648

这篇博客详细介绍了DOM加载的过程，并对比了$(document).ready(function()和window.onload事件的执行顺序。$(document).ready在DOM结构加载完成后执行，而window.onload需等待所有资源（包括图片）加载完毕。总结中强调了DOM一旦加载完成，后续的$(function() {})总会执行，且它先于window.onload执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://blog.youkuaiyun.com/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>
    执行顺序1，2，5，7，3，6，8，4
    $(document).ready(function() {}和$(function(){}） 是 一摸一样的，
    谁在前面谁在先执行，还有多个闭包函数时 按成次 一级一级运行的。
</body>
</html>