浏览器渲染原理

完整过程


23.png
重排会整个过程重新触发，重绘只会触发 合成线程

浏览器渲染原理


1.png

渲染时间点


2.png

渲染流⽔线


3.png

  1. 解析 HTML - Parse HTML


    4.png

  1. 解析 HTML - Parse HTML Document Object Model


    5.png

  2. 解析 HTML - Parse HTML CSS Object Model


    6.png

  3. 解析 HTML - Parse HTML


    7.png

HTML 解析过程中遇到 CSS 代码怎么办？
为了提⾼解析效率，浏览器会启动⼀个预解析器率先下载和解析 CSS


8.png

常⻅问题

  1. 解析 HTML - Parse HTML
    HTML 解析过程中遇到 JS 代码怎么办？
    渲染主线程遇到 JS 时必须暂停⼀切⾏为，等待下载执⾏完后才能继续
    预解析线程可以分担⼀点下载 JS 的任务


    9.png

常⻅问题

  1. 解析 HTML - Parse HTML


    10.png

  2. 样式计算 - Recalculate Style


    11.png

Computed Style

  1. 布局 - Layout


    12.png

  2. 布局 - Layout DOM 树 和 Layout 树
    DOM 树 和 Layout 树不⼀定是⼀⼀对应的


    13.png

  3. 布局 - Layout DOM 树 和 Layout 树
    DOM 树 和 Layout 树不⼀定是⼀⼀对应的


    14.png

  4. 布局 - Layout DOM 树 和 Layout 树
    DOM 树 和 Layout 树不⼀定是⼀⼀对应的


    15.png

  5. 分层 - Layer
    分层


    16.png

  6. 绘制 - Paint
    这⾥的绘制，是为每⼀层⽣成如何绘制的指令


    17.png

  7. 绘制 - Paint
    渲染主线程的⼯作到此为⽌，剩余步骤交给其他线程完成


    18.png

  8. 分块 - Tiling
    分块会将每⼀层分为多个⼩的区域


    19.png

  9. 分块 - Tiling
    分块的⼯作是交给多个线程同时进⾏的


    20.png

  10. 光栅化 - Raster
    光栅化是将每个块变成位图
    优先处理靠近视⼝的块


    21.png

  11. 光栅化 - Raster
    此过程会⽤到 GPU 加速


    21.png

  1. 画 - Draw
    合成线程计算出每个位图在屏幕上的位置，交给 GPU 进⾏最终呈现


    22.png

完整过程


23.png

常⻅⾯试题
什么是 reflow ？


61.png

常⻅⾯试题
什么是 repaint ？


62.png

常⻅⾯试题
为什么 transform 效率⾼？


63.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容