80.异步js、时间线、DOM元素克隆

html 的DOM树

DOM树的生成是深度优先：加载了head之后，先加载head内的东西，再加载body内的东西

浏览器渲染的步骤：1.解析DOM节点，生成DOM树

                                 2.解析CSS节点，生成CSS树

                                 3.将DOM树与CSS树合并，生成rander树

                                4.浏览器开始渲染网页

可以先写css再写DOM，必须把js放在body后面，原因，css是异步加载，js是同步加载，外部引入的js是异步加载，因此可以写在head里面             js是单线程，浏览器并不是

重构、重绘耗费性能：因此少用js来操作DOM节点

重构：通过js操作DOM节点，导致DOM树结构变化，重新生成DOM树，重新生成rander树。

          DOM节点的添加/删除           

          DOM节点宽高变化

          DOM节点display之间的转换

减少重构：

先做改变，改变全部完成后，最后添加，这样只重构一次。

重绘：

jss触发了css变化，造成网页一部分颜色变化，但并不会破环网页结构

js加载是同步，css加载是异步：

异步加载js的方法:

1.defer IE9以及以下 可用于内嵌js

2.async 主流浏览器  不可以用于内嵌js

使用defer在script标签里，会使DOM加载完之后再加载js

3.

 text不能执行，因为下载是异步，可能没下载完

解决方法：添加onload事件，并添加onload事件函数，在事件函数里面执行函数

 IE8以及以下没有onload事件，只会把onload当成是属性，解决方法：onreadystatechange 里面readyState判断是否为complete

兼容写法：

封装异步执行js：

优化：方便调用

 方法二：传函数，在函数内部执行调用

时间线：

  2.文档的解析是2~6阶段

元素解析之前：readyState="loading"

文档元素解析完，没解析脚本：readyState="interactive"

                            脚本解析完：readyState="complete"

监听状态码事件：document.onreadystatechange

img.onload是图片加载完成

window.onload是文档加载完成

DOM元素克隆。cloneNode()

传递参数true会把其内部的所有子元素也全部克隆