DOM树 CSS树 render树 以及JS的加载
2019-03-12 本文已影响0人
kangaroo_v
回流和重绘
回流一定会引起重绘
而重绘可以单独触发 例如修改背景颜色 字体颜色等...
引起回流的因素:
1.DOM节点 增加 删除
2.DOM节点位置变化
3.元素的尺寸 边距 填充 边框 宽高
- DOM节点 display显示与否
- 页面渲染初始化
- 浏览器窗口尺寸变化 ->resize
- 向浏览器请求某些样式信息
offset scroll client width height getComputedStyle()
IE:currentStyle
尽量减少回流 比如style一个一个添加和 添加一个class 是完全不一样的
script标签的异步加载
link 加载css是异步的 他不会阻塞加载
但是..script的加载默认是阻塞的.他会等JS加载完毕才会执行下面的语句
如何让script标签异步加载呢
可以使用async=async属性(IE9及以上支持 HTML5新增);
或者defer=defer属性 (IE8及以下支持);
他们之前除了兼容性的区别 async是异步加载但是加载完成以后立即执行;
而defer是加载完成后还要等待domTree加载完成后再执行;
值得注意的是 异步加载的脚本不要对文档直接操作.
---未完待续
