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标签内容的加载过程。
