异步加载和时间线

页面渲染过程

了解异步加载域时间线之前,我们先了解下页面渲染的过程,每个浏览器的渲染流程不一样,主要是以webkit为主

页面的渲染过程DOMTree + CSSTree = RenderTree;
根据HTML结构生成DOM Tree、CSS生成CSSTree，DOM和CSSTree 整合形成RenderTree
根据RenderTree开始渲染和展示，遇到srcipt标签时，会执行并阻塞渲染 因为js有权利改变DOM结构，避免冲突从上到下执行。
主要分为两个打的步骤
1.渲染前奏
浏览器中输入url，浏览器主进程接管，开一个下载线程然后就会进行HTTP请求（DNS查询,IP寻址），等待响应，开始下载响应报文将下载完的内容转交给Render进程管理开始渲染。。。
2.渲染前置概念
浏览器将HTML解析成树形的数据结构,将css代码解析成树形结构
将DOM树和css规则树合并形成渲染树,各个节点的css定义以及他们的从属关系，从而计算出每个节点在屏幕中的位置
按照计算出来的规则，通过显卡，把内容画到页面上
reflow(回流)：当浏览器发现某个部分发生了变化影响了布局，需要倒回去从新渲染，内行称会退的过程及时回流。
repaint(重绘)：改变某个元素的属性不影响布局的情况下，屏幕的一部分要重画，但是元素的几何尺寸没变。
需要注意的地方是：display:none属性的节点不会挂载在Render树，而visibility:hidden就会

JS的同步加载与异步加载

同步加载：

又被称为阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把标签放在结尾处，这样尽可能减少页面阻塞。

异步加载：

也称非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。通俗的说，就是在执行过程同时加载，通常会使图片之类重要性较次的东西，可以先忽略掉，，如果另一个线程完成加载了，在贴上去，就是异步。

主要三种方式实现异步加载
1.defer IE才能用

<script  defer>  //IE
console.log("hello");
</script>  

2.async html5的新属性

<script  src = "load.js" async></script>

3.按需加载
创建script标签设置src属性,变成异步插入到dom中

加载时间线

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

综上,所有js最好放在文档下面加载,不会阻塞页面