js在html中各初始化函数执行顺序_html初始化函数-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39585051/article/details/108297115
参见代码：
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="./jquery-2.1.3.min.js"></script>

<script type="text/javascript">

console.log(11111)

window.onload = function(){

    console.log(22222);

}

;(function(){

    console.log(33333);

}());

$(document).ready(function () {

console.log(44444)

})

console.log(55555)

function aaa(){

　　　　alert("静态标签====》onload");

　　}

</script>

</head>

<body onload="aaa()">

<div id="id" class="id">测试</div>

</body>

<script type="text/javascript">

console.log(66666)

window.onload = function(){

    var id = document.getElementById("id");

    console.log(id.innerHTML+"---2");

}

$(window).load(function(){

console.log(77777)

});

;(function(){

    var id = document.getElementById("id");

    console.log(id.innerHTML+"---1");

}());

$(function(){

    var id = document.getElementById("id");

    console.log(id.innerHTML+"---3");

})

console.log(88888)

</script>

</html>

<!--

从上到下运行，先解析head标签中的代码，

（1）head标签中会包含一些引用外部文件的代码，从开始运行就会下载这些被引用的外部文件

        当遇到script标签的时候

        浏览器暂停解析（不是暂停下载），将控制权交给JavaScript引擎（解释器）

        如果<script>标签引用了外部脚本，就下载该脚本，否则就直接执行，执行完毕后将控制权交给浏览器渲染引擎

（2）当head中代码解析完毕，会开始解析body中的代码

        如果此时head中引用的外部文件没有下载完，将会继续下载

        浏览器解析body代码中的元素，会按照head中声明一部分样式去解析

        如果此时遇到body标签中的<script>，同样会将控制权交给JavaScript引擎来解析JavaScript

        解析完毕后将控制权交还给浏览器渲染引擎。

        当body中的代码全部执行完毕、并且整个页面的css样式加载完毕后，css会重新渲染整个页面的html元素。

（3）按照之前的描述，<script>写到body标签内靠后比较好，

        因为JavaScript 会操作html元素， 如果在body加载完之前写JavaScript 会造成JavaScript 找不到页面元素

        但是我们经常将<script>写到head中，body中不会有大量的js代码，body中的html代码结构会比较清晰

        window.onload： 等待页面中的所有内容加载完毕之后才会执行

        $(document).ready()： 页面中所有DOM结构绘制完毕之后就能够执行

        可以这样理解：window.onload 和 $(document).ready()/$(function(){}); 相当于  写在body 内  最靠后的<script> 代码段

-->

<!--

加载方法的执行顺序

1、使用jQuery的$(document).ready(function(){})，或者使用它的简写$(function){}，document加载完成后就执行方法

2、使用jQuery的$(window).load(function(){});

3、使用window.onload = function(){} 第2种和第3种都是等到整个window加载完成执行方法体。两者也没有区别，只是一个使用dom对象，一个使用jQuery对象。

在标签上静态绑定onload事件，<body onload="aaa()">等待body加载完成，就会执行aaa()方法。

先后顺序：

使用1：jQuery的$(function){}和jquery的$(document).ready(function(){});无论位置放置在哪里，总是优先其余两种方式

原因：这两种方式是在document加载完成后就执行，后两种是等到整个window页面加载完成后才执行，这两者之间的执行顺序是谁在上方谁优先执行。

使用2：jQuery的$(window).load(function(){});

　　window.onload = function bbb(){}这两种方式，总是优先于<body onload="aaa()">执行。他们两者执行顺序也是根据谁在上方谁先执行。

使用3：<body onload="aaa()">总是最后执行。

区别：

ready：表示文档结构已经加载完成（不包含图片等非文字媒体文件）

onload：指示页面包含图片等文件在内的所有元素都加载完成。

一般情况先一个页面响应加载的顺序是：域名解析-加载html-加载js和css-加载图片等其他信息。

  -->