js window.onload、$(document).ready、直接执行代码什么时候运行

原创于 2020-11-28 09:48:04 发布 · 414 阅读

CC 4.0 BY-SA版权

本文详细介绍了网页加载的整体流程，包括域名解析、HTML文件加载、外部JS和CSS文件加载及图片加载等过程。同时对比了window.onload与$(document).ready()的区别及使用场景，并给出了一些关于脚本加载位置的最佳实践。

页面加载顺序：域名解析 - 加载 html文件 - 加载外部 js 和 css文件 - 加载图片等
加载HTML 文件：会从头开始解释整个文件，包括 html 标签和js代码。如果脚本中有可以直接执行的语句，则会在遇到的时候马上解释执行。

//1. 页面的hmtl，外部的CSS、js、图片等的所有元素加载完毕后才执行，只能有一个window.onload
window.onload=function(){};
//2. 页面的html文件加载后，既可以了，它主要用于获取处理dom。该方法可有多个
$(function(){//jquery用法
    XX
});==$(document).ready(function(){})//js
//3. js中直接执行代码，会在加载html文件时，从头开始，逐个加载遇到时执行，如果访问的dom此时在后面就没办法执行，所以导入js文件要放在head【body前面】，js代码要放在body标签后面