HTML执行顺序一探究竟

了解浏览器线程基础

一个页面的呈现主要是由浏览器渲染进程实现的（render进程），主要作用为页面的渲染，脚本执行，事件处理等。而render进程是多线程的，它主要包含以下主要线程：

1 GUI渲染线程

• 负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。
• 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行
• 注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻 结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

2 JS引擎线程

• 也称为JS内核，负责处理Javascript脚本程序。（例如V8引擎）
• JS引擎线程负责解析Javascript脚本，运行代码。
• JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中 无论什么时候都只有一个JS线程在运行JS程序
• 同样注意，GUI渲染线程与JS引擎线程是互斥的，所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。

3 事件触发线程

• 归属于浏览器而不是JS引擎，用来控制事件循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）
• 当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中
• 当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理
• 注意，由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）

4 定时触发器线程

• 传说中的setInterval与setTimeout所在线程
• 浏览器定时计数器并不是由JavaScript引擎计数的,（因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确）
• 因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）

5 异步http请求线程

• 在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
• 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行。

JS阻塞特性

由上述ＧＵＩ线程和ＪＳ引擎互斥的关系，我们也就能更好的理解为什么ＪＳ运行会阻塞页面的渲染，也就是常说的JS阻塞特性。

HTML整体执行步骤

０.加载整体ｈｔｍｌ文件

１.至上而下解析html

２.解析html建立dom树，遇到诸如<script>、<link>等标签时，就会去下载相应内容，并解 
析、执行。如果是<link>标签，解析css构建CSSOM树

４.DOM和CSSOM结合生成render树

５.布局render树（Layout/reflow），负责各元素尺寸、位置的计算

６.绘制render树（paint），绘制页面像素信息

７.浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上。

HTML解析过程是至上而下的，当html解析器遇到诸如<script>、<link>等标签时，就会去下载相应内容。且加载、解析、执行JavaScript会阻止解析器往下执行，要强调　渲染　和　下载是不冲突的，渲染是ＧＵＩ线程在执行，下载是下载线程在执行，浏览器多线程。

DOM文档加载步骤： 

1.解析HTML结构 
2.加载外部的脚本和样式文件 
3.解析并执行脚本代码 
4.执行$(function(){})内对应代码 
5.加载图片等二进制资源 
6.页面加载完毕，执行window.onload

①html：贯穿整个页面

②css：三种声明方式

• 外联样式表：在head便签中 用link标签的href属性来引用后缀名为.css的css样式文件
• 内联样式表：在head标签下的style标签中，选择器 + 样式声明
• 内部样式表：在标签的style属性中添加css样式声明

③JavaScript：在<script>标签中，可以在head标签中，也可以在body标签中（区别一会再说）

写的位置：

• html贯穿整个页面，
• css可以定义在head头标签中，也可以在定义在html标签的属性中
• JavaScript定义在<script>标签中，<script>标签既能在head标签中定义也能在body标签中定义

加载顺序：

从上到下运行，先解析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结构绘制完毕之后就能够执行

js在页面装载时执行的顺序就是其引入标记<script />的出现顺序，<script />标记里面的或者通过src引入的外部JS，都是按照其语句出现的顺序执行，而且执行过程是文档装载的一部分。只有全部js脚本按顺序加载完毕后才开始html标签内容的加载过程。

标签：一探,引擎,顺序,浏览器,标签,JS,HTML,线程,执行
来源： https://www.cnblogs.com/xiaoxiaoMrHuang/p/10916216.html