js 代码块执行先后生命周期

快来打我* 2023-03-04 12:25 6阅读 0赞

# js 代码块执行先后生命周期 #

## js加载时间线 ##

1.  创建Document 对象，开解析web页面。解析HTML元素和他们的的文本内容添加Element对象和Text节点到文档中，这个阶段 document.readState = ‘loading’
2.  遇到link外部css，创建新的线程，并继续解析文档。
3.  遇到script 外部js，并且没有设置async，defer，（同步加载）浏览器加载，并阻塞，等待js加载完成并执行脚本，然后继续解析文档。
4.  遇到script 外部js，并且设置async，defer(异步加载 )，浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完后立即执行。（异步禁止使用document.write()）
5.  遇到img等，先正常解析dom结构，然后浏览器异步加载src,并继续解析文档。
6.  当文档解析完成时，document.readyState = ‘interactive’。
7.  文档解析完成后，所有设置有defer的脚本会按照顺序执行。
8.  document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段转化为事件驱动阶段。
9.  当所有的async的脚本加载完成并执行后，img 等加载完成后，document.readyState = ‘complete’, window 对象触发load事件。
10. 从此，以异步相应的方式处理用户和网络事件。

## 页面加载生命周期 ##

1.  loading 加载中
2.  interactive
3.  complete 页面加载完毕后

// 监听页面加载状态
    document.onreadystatechange = function () { 
        console.log(document.readyState) 
        // ===》1. loading 2. interactive 3.complete 
    }

#### 1. 即页面解析完成后执行 ####

// 在document.readyState === interactive立即执行
     document.addEventListener('DOMContentLoaded', function () { 
        console.log('在解析完成后立即执行 ')
     }, false)

#### 2. 即页面所有的 html 标签（包括图片等）都加载完了，执行下列代码块 ####

//文档加载，这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码,换句话说，写在这里面的JQuery代码都是文档加载好之后的,方便维护。
    
    $(document).ready(function(){ 
    	console.log("页面解析完后执行ready执行");
    })
    
    ** 简写为  **
    $(function () { 
        console.log("ready执行2");
    });

*不会被覆盖，可以写多个*

#### 3. 在页面全部资源加载完成后渲染 。在ready() 之后 ####

window.onload = function () { 
        console.log('页面加载完执行onload');
    }

*不会被覆盖 ，只能写一个*