美文网首页
DOM树 CSS树 render树 以及JS的加载

DOM树 CSS树 render树 以及JS的加载

作者: kangaroo_v | 来源:发表于2019-03-12 17:41 被阅读0次

回流和重绘
回流一定会引起重绘
而重绘可以单独触发 例如修改背景颜色 字体颜色等...
引起回流的因素:
1.DOM节点 增加 删除
2.DOM节点位置变化
3.元素的尺寸 边距 填充 边框 宽高

  1. DOM节点 display显示与否
  2. 页面渲染初始化
  3. 浏览器窗口尺寸变化 ->resize
  4. 向浏览器请求某些样式信息
    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加载完成后再执行;
值得注意的是 异步加载的脚本不要对文档直接操作.
---未完待续

相关文章

网友评论

      本文标题:DOM树 CSS树 render树 以及JS的加载

      本文链接:https://www.haomeiwen.com/subject/qsrnpqtx.html