Webkit 绘制图像的过程记录

最新推荐文章于 2025-09-30 09:30:53 发布

原创最新推荐文章于 2025-09-30 09:30:53 发布 · 465 阅读

0 ·

CC 4.0 BY-SA版权

WebKit 专栏收录该内容

136 篇文章

订阅专栏

本文深入探讨了网页渲染过程中的关键步骤，重点分析了`GraphicsContext::drawImage()`函数及其相关调用链路，包括从`RenderImage`到`InlineBox`的图像绘制流程，以及`RenderLayer`在图层绘制中的作用。此外，文章还概述了从事件触发到`FrameView::paintContents()`的重绘流程，为理解现代网页渲染技术提供了一幅清晰的蓝图。

GraphicsContext::drawImage()
# 最终调度平台上下文的drawImage进行绘制图像
RenderImage::paintIntoRect
RenderImage::paintReplaced()
RenderReplaced::paint()
RenderImage::paint()
# 关于<img>图像元素的绘制入口点

InlineBox::paint()
InlineFlowBox::paint()
RootInlineBox::paint()
RenderLineBoxList::paint()
RenderBlock::paintContents()
RenderBlock::paintObject()
RenderBlock::paint()
RenderBlock::paintChildren()
RenderBlock::paintContents()

RenderBlock::paintObject()
RenderBlock::paint()
# 进行迭代的绘制流程

RenderLayer::paintLayer()
RenderLayer::paintList()
RenderLayer::paintLayer(）
RenderLayer::paint(）
# 先画图层
FrameView::paintContents()
# 绘制的入口点(事件触发、自行更新、定时等激发重绘操作)