美文网首页
浏览器渲染机制以及重绘(Repaint)与重排(Reflow)

浏览器渲染机制以及重绘(Repaint)与重排(Reflow)

作者: ElricTang | 来源:发表于2019-10-28 19:54 被阅读0次

    一. 浏览器渲染过程

    1. 解析 HTML,生成 DOM Tree。
    2. 解析 CSS,生成 CSSOM(CSS Object Model)。
    3. 合并 DOM Tree 和 CSSOM,生成 Rendering Tree。
    4. 布局,计算节点的位置和大小信息。
    5. 绘制,将节点绘制到页面上。

    Load 和 DOMContentLoaded

    • Load事件触发时,所有资源都已加载完毕(CSS,JavaScript,图片等)。
    • DOMContentLoaded事件触发时,仅代表HTML加载完成,不保证CSS,JavaScript,图片的加载。

    脚本的defer和async

    • defer:脚本与HTML并行加载,但是要等到HTML加载完再执行
    • async:脚本与HTML并行加载,加载完马上执行(执行会阻塞HTML解析)
    • 注意:并行加载不会阻塞,但脚本执行会阻塞。

    二. 重绘(Repaint)

    • 元素外观变化会引起浏览器重绘,以更新外观。
    • 触发:修改元素的colorbackground-color,修改visibilityhidden(修改可见性没有引起空间变化)

    三. 重排(Reflow)

    • 重排一定会引起重绘。
    • 元素的布局,尺寸变化会引起浏览器重排,以重新计算位置大小。
    • 触发:
    场景 描述
    display:none 空间发生变化
    页面首次渲染 必须发生
    浏览器窗口resize 修改浏览器空间
    元素尺寸变化 内外边距、边框、大小变化
    <p>内容变化、<img>图片修改 内容动态变化引起空间变化
    使用动画或JavaScript修改元素位置 位置变化引起重排
    动态添加或删除DOM元素 浏览器需要重新计算位置

    四. 优化

    1. 使用JavaScript操作元素样式时通过修改class的方法合并操作
    2. 使用transform完成位置移动
    3. 简化并优化CSS选择器,尽量将嵌套层减少到最小
    4. 先设置元素为display:none;然后再进行页面布局等操作;设置完成后将元素设置为display:block;这样的话就只引发两次重绘和重排;
    5. 将需要添加动画的元素置于额外图层(脱离文档流)
    6. 尽量不要使用table布局
    7. 动态插入大量元素时使用DocumentFragment过渡

    相关文章

      网友评论

          本文标题:浏览器渲染机制以及重绘(Repaint)与重排(Reflow)

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