通過上一次的分析，我們看到所有網頁數據經過 HTML 分析器之后，都會變成一個一個 RenderObject 對象，那么這些 RenderObject 對象又是怎么樣顯示到界面上面的呢？現在就帶著這個疑問來分析下面的代碼，這樣肯定會找到解決方法的。怎么樣找到入口呢？其實可以先從界面顯示的類開始，可以看到顯示界面的窗口類名稱叫做 Chrome_RenderWidgetHostHWND, 有了這個類名稱，就可以到代碼里查看它在那里了。

#001 ? class RenderWidgetHost;

#002 ? class WebMouseEvent;

#003 ? class WebCursor;

#004 ?

#005 ? typedef CWinTraits<WS_CHILD | WS_CLIPCHILDREN | WS_CLIPSIBLINGS, 0>

#006 ????? RenderWidgetHostHWNDTraits;

#007 ?

#008 ? static const wchar_t* const kRenderWidgetHostHWNDClass =

# 009 ????? L "Chrome_RenderWidgetHostHWND";

?

可看到這個窗口類名稱是定義在這里，再跟著 kRenderWidgetHostHWNDClass 來查找，就會找到顯示窗口，如下：

#001 ? class RenderWidgetHostHWND :

#002 ??? public CWindowImpl<RenderWidgetHostHWND,

#003 ?????????????????????? CWindow,

#004 ?????????????????????? RenderWidgetHostHWNDTraits>,

#005 ??? public RenderWidgetHostView {

#006 ?? public:

#007 ??? RenderWidgetHostHWND(RenderWidgetHost* render_widget_host);

#008 ??? virtual ~RenderWidgetHostHWND();

#009 ?

#010 ??? void set_close_on_deactivate(bool close_on_deactivate) {

#011 ????? close_on_deactivate_ = close_on_deactivate;

#012 ??? }

#013 ?

#014 ??? void set_parent_hwnd(HWND parent) { parent_hwnd_ = parent; }

#015 ?

#016 ??? DECLARE_WND_CLASS_EX(kRenderWidgetHostHWNDClass, CS_DBLCLKS, 0);

?

通過上面的分析，就可以找到顯示網頁的窗口類 RenderWidgetHostHWND ，在這個類里，主要顯示的位置是在 void RenderWidgetHostHWND::OnPaint(HDC dc) 函數里面，它的代碼如下：

#001 ? void RenderWidgetHostHWND::OnPaint(HDC dc) {

#002 ??? DCHECK(render_widget_host_->process()->channel());

#003 ?

#004 ??? CPaintDC paint_dc(m_hWnd);

#005 ??? HBRUSH white_brush = reinterpret_cast<HBRUSH>(GetStockObject(WHITE_BRUSH));

#006 ?

#007 ??? RenderWidgetHost::BackingStore* backing_store =

#008 ??????? render_widget_host_->GetBackingStore() ;

#009 ?

#010 ??? if (backing_store) {

#011 ????? gfx::Rect damaged_rect(paint_dc.m_ps.rcPaint);

#012 ?

#013 ????? gfx::Rect bitmap_rect(

#014 ????????? 0, 0, backing_store->size().width(), backing_store->size().height());

#015 ?

#016 ????? gfx::Rect paint_rect = bitmap_rect.Intersect(damaged_rect);

#017 ????? if (!paint_rect.IsEmpty()) {

#018 ??????? BitBlt(paint_dc.m_hDC,

#019 ?????????????? paint_rect.x(),

#020 ?????????????? paint_rect.y(),

#021 ?????????????? paint_rect.width(),

#022 ?????????????? paint_rect.height(),

#023 ?????????????? backing_store->dc(),

#024 ?????????????? paint_rect.x(),

#025 ?????????????? paint_rect.y(),

#026 ?????????????? SRCCOPY);

#027 ????? }

......

#058 ? }

?

其實這個函數是通過如下發送消息給另一個進程進行渲染成 BMP 的圖片，

Send(new ViewMsg_Repaint(routing_id_, view_size));

?

那么誰來接收 ViewMsg_Repaint 消息呢？繼續細心地查找，就到在如下類函數里處理：

void RenderWidget::OnMsgRepaint(const gfx::Size& size_to_paint)

在這個函數，并不是最終的結果，它又會調用其它線程來處理渲染，以便達到異步的結果。它的調用過程如下：

1） ? RenderWidget::DoDeferredPaint() ? 線程里開始渲染網頁顯示

2） ? RenderWidget::PaintRect() 窗口里開始進行顯示

3） ? WebViewImpl::Paint() web 視類開始顯示。

4） ? WebFrameImpl::Paint() web 框架類開始顯示。

5） ? WebCore::ScrollView::paint() 滾動窗口顯示。

6） ? WebCore::Frame::paint() WebCore 里的框架顯示。

7） ? WebCore::RenderLayer::paint() 分層顯示。

8） ? WebCore::RenderLayer::paintLayer()

9） ? WebCore::RenderBlock::paint() ? 在每一層里顯示每一塊區域。

10） ??? WebCore::RenderBlock::paintObject() 顯示這一區域的對象。

11） ??? WebCore::RenderBlock::paintContents() 顯示需要顯示的內容。

12） ??? WebCore::RenderFlow::paintLines() 這里需要顯示文字。

13） ??? WebCore::RootInlineBox::paint() 開始顯示一行文字。

14） ??? WebCore::InlineFlowBox::paint() 進行一行文字排列。

15） ??? WebCore::InlineTextBox::paint() ?

16） ??? WebCore::GraphicsContext::drawText() ? 進行一個一個文字顯示。

17） ??? WebCore::Font::drawText() ? 這里調用字體類來把文字的編碼變成位圖。

18） ??? WebCore::Font::drawSimpleText() ? 這里把位圖顯示到界面內存里。

?

通過上面的分析，可以看到顯示一串文字的過程是如此復雜的過程。其它圖片顯示的過程也是一樣，都把它們變成位圖，然后再分層顯示出來。那么 JavaScript 是怎么樣顯示的呢？這個會比上面的過程更加復雜，后面再仔細地分析它。下一次，主要仔細地看看這些過程里的一些類功能。

谷歌瀏覽器的源碼分析(34)