解析js高级部分当中的时间线原理，重绘，回流

js时间线原理：自己总结出主要分为三个过程

1.开始解析页面:开始的状态为 document.readyState="loading",当遇到外部的js(也就是异步加载写了defer/async)、css、img进行创建线程加载，同步的js浏览器加载阻塞正在执行的js，继续解析文档。

2.文档解析完成：状态变为document.readyState="interactive",会触发DOMContentLoaded事件，按照顺序去执行defer脚本，等待资源加载完成。

3.文档加载完成：状态变为document.readyState="complete",触发onload事件

以上就是js在执行时，时间线的大致三个过程

js重绘

对元素操作没有影响页面排版，只需要重新绘制的过程叫做重绘。

如background-color、color 、visibility等

js回流

元素的大小、位置发生改变时，会重新计算dom树（渲染树）。

        注意:

    1.页面渲染初始化 ，这个是无法避免的

    2.添加或者删除可见的DOM元素

    3.元素位置改变或者有动画的时候

    4.元素尺寸大小的改变

    5.浏览器窗口尺寸的变化

    6.填充内容改变时，比如说去填充文本内容或者插入图片大小时，内容的多少和设置图片宽度和高度变化时。

    7.读取某些元素属性时。如(offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE))。

希望可以能帮助大家