如何在页面DOM加载后执行JavaScript：defer、onload与jQuery对比

本文介绍在页面加载完成后执行JavaScript代码的几种常见方法。包括使用script标签的defer属性、原生JavaScript的window.onload事件，以及jQuery提供的$(document).ready()方法。文章对比了各方法的执行时机、浏览器兼容性及优缺点，并深入解析了jQuery实现ready功能的内部逻辑，帮助开发者根据实际需求选择合适方案。

页面加载完成后执行JS的方法概述

在许多开发场景中，JavaScript代码需要在页面完全加载后执行。若脚本在DOM元素尚未构建完成时运行，极易引发错误，因为此时页面中的部分DOM节点可能还不存在。本文旨在介绍几种确保JavaScript脚本在页面加载完毕后执行的实现方式，供读者参考。

JavaScript：在DOM模型加载完成后执行脚本

避免使用<body onload="">方式

添加defer属性可使脚本在页面完全载入后执行，其效果类似于window.onload，但在应用灵活性上优于window.onload。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script defer="defer">
alert("页面加载完我才执行的")
</script>
先看到这段话 然后再执行上面的 JS 如果去掉上面的 defer="defer" 那么会先执行JS 在看到这段话
</body>
</html>

方法一：使用defer属性

<script defer="defer" language="javascript"></script> //或者 <script defer language="javascript"></script>

方法二：window.onload事件

然而，该方式仅IE浏览器支持，其他主流浏览器并不识别defer属性，因此这种方法并不可靠。方法二：window.onload


<script type=”text/javascript”>
window.onload=function (){
  var userName=”xiaoming”;
  alert(userName);
}
</script>

但该方法在IE中仅支持单次调用，若存在两处调用，后一处调用将覆盖前一处；

方法三：jQuery的ready机制

方法三：jQuery方法，需引入jQuery库文件。


<script type=”text/javascript”>
$(document).ready(function (){
  var userName=”xiaoming”;
  alert(userName);
});
</script>

jQuery ready与window.onload的区别

接下来介绍Window.onload=function (){}与$(document).ready(function (){})的区别：在jQuery中，常见的两种写法为：$(function(){}) 和$(document).ready(function(){})。这两种方式效果一致，均在DOM文档树加载完成后执行回调函数（注意：此处文档树加载完成不等于所有外部资源加载完毕）。而window.onload则需等待DOM文档树加载完成且所有文件（如图片、样式表等）加载完毕后执行。因此，$(document).ready的执行时机早于window.onload。 jQuery内部如何实现$(document).ready函数？下面进行解析：我们手动为document添加一个ready函数：


document.ready = function (callback) {
      ///兼容FF,Google
      if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', function () {
          document.removeEventListener('DOMContentLoaded', arguments.callee, false);
          callback();
        }, false)
      }
       //兼容IE
      else if (document.attachEvent) {
        document.attachEvent('onreadystatechange', function () {
           if (document.readyState == "complete") {
                document.detachEvent("onreadystatechange", arguments.callee);
                callback();
            }
        })
      }
      else if (document.lastChild == document.body) {
        callback();
      }
    }

jQuery ready内部实现原理

document.ready函数实现如下。接下来验证前述观点“ready比onload先执行”：


window.onload = function () {
      alert('onload');
    };
    document.ready(function () {
      alert('ready');
    });

运行上述代码后，浏览器将依次弹出“ready”和“onload”提示框。建议读者亲自测试验证！

页面加载完成后执行JS的几种方法及原理