当前位置：网站首页 > 技术文章 > 正文

了解 JS 的加载顺序和方式，实现 Ready 方法

myzbx 2025-09-09 07:24 17 浏览

页面加载 JS 顺序或方式不同，可能会导致功能失效、错误的产生或加载解析时间过长，拖慢整个页面展示。

了解 JS 的加载顺序

了解页面元素的加载顺序，找到 JS 执行失败原因。有时明明没有问的代码，可就获取不到元素值或信息，这可能是JS执行时间过早或过晚，而导致的 JS 执行失败。我们来看一幅图，了解defer、async属性对JS下载、执行顺序的影响

默认情况下，浏览器解析到JS文件就会立即下载文件，并执行文件，JS提前执行，获取不到页面元素，并导致页面解析中断，拖慢整个页面的加载。
添加async属性后，就会异步下载JS文件并执行，执行时间不可控，JS执行时间过早或过晚，而导致的 JS 执行错误或失败。
添加defer属性后，就会异步下载JS文件，等页面解析完成后再执行JS

Ready方法的实现

很多时候我们不把JS放在head中，而把JS放到body的最后面也就很好解释了？

首先，JS的下载和执行会中断页面的解析，拖慢整个页面展示，
然后，放在head中，页面元素还没有加载，JS方法就无法获取或处理页面上的元素，这一点很容易忽视，
但是，我们还有ready方法。

jQuery中的ready方法会在页面解析后运行，语法如下：

//语法 1
$(document).ready(function)
//语法 2
$().ready(function)
//语法 3
$(function)

自定义方法，通过监听DOMContentLoaded实现ready方法

/**
 * 页面解析后执行 fn
 * https://ichochy.com
 * /
function ready(fn) {
    if (window.addEventListener) {
        window.addEventListener('DOMContentLoaded', function () {
            //注销时间，避免重复触发
            document.removeEventListener('DOMContentLoaded', arguments.callee, false);
            fn(); //运行函数
        }, false);
    } else if (document.attachEvent) { //IE浏览器
        document.attachEvent('onreadystatechange', function () {
            if (document.readyState == 'complete') {
                document.detachEvent('onreadystatechange', arguments.callee);
                fn(); //函数运行
            }
        });
    }
}

当然还有我的onload方法，可以在页面完成所有加载后再执行

//window 的 onload
window.onload = function(){
    //load https://ichochy.com
    //some things ……
}
//body 的 onload
<body onload="load()">

总结

可以看到，JS的执行顺序决定着程序是否正常工作。加载过早，可能无法获取到页面元素，而太晚，页面元素无法交互。对于执行的顺序，要以当前的程序功能而定。

联系方式

网站：https://ichochy.com/
源文：
https://ichochy.com/posts/20200807/

JS Async

上一篇：如何优雅处理 async await 错误——解读小而美的 await-to-js 库
下一篇：async-validator 源码学习(一):文档翻译

了解 JS 的加载顺序和方式，实现 Ready 方法

了解 JS 的加载顺序

Ready方法的实现

总结

联系方式

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿