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))。
希望可以能帮助大家