一个研究Webkit源码的建议方法

最新推荐文章于 2014-02-19 15:05:19 发布
最新推荐文章于 2014-02-19 15:05:19 发布
阅读量2.1w 收藏 25
点赞数 1
分类专栏： 浏览器研究 文章标签： webkit border header div chrome css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingtian713/article/details/4471169
版权

一个研究Webkit源码的建议方法

研究Webit源码，如果直接从Webkit网站 下载代码，编译将是一个很痛苦的事情，而且对于熟悉Windows下Visual Studio家族产品的兄弟来说调试也是一件很郁闷的事情，毕竟边调试，边分析代码是最有效的方式。
另外的一种方式就是从Chrome开始了，Google已经在Windows平台上做好了基于Visual Studio的所有项目编译选项设置，对于Windows平台下的兄弟来说，是一个福音。
但是如果你只是想分析Webkit内核的代码，那你就无需从最上层开始分析了，毕竟Google在Webkit的基础上作了太多的UI框架扩展，从最上层开始分析，需要先熟悉Chrome的架构和UI框架，难度有点大，在Chrome的众多工程中，在Webkit子目录下有一个工程test_shell.

test_shell项目的位置

这个程序是一个测试程序，简单的来说是一个简易的浏览器。具备了一个浏览器的基本功能。
test_shell运行后的效果

这个测试程序中间增加了Chrome的消息循环模块(MessageLoop,MessagePump),但是这个消息循环并没有直接跳用，消息循环虽然运行起来了，但是基本上没处理任何逻辑。
测试程序的核心处理程序也就在主窗口的事件回调函数中：
  1. LRESULT CALLBACK WebWidgetHost::WndProc(HWND hwnd, UINT message, WPARAM wparam,
  2.                                         LPARAM lparam) {
  3.   WebWidgetHost* host = FromWindow(hwnd);
  4.   if (host && !host->WndProc(message, wparam, lparam)) {
  5.     switch (message) {
  6.       case WM_DESTROY:
  7.         delete host;
  8.         break ;
  9.  
  10.       case WM_PAINT: {
  11.         RECT rect;
  12.         if (GetUpdateRect(hwnd, &rect, FALSE)) {
  13.           host->UpdatePaintRect(gfx::Rect(rect));
  14.         }
  15.         host->Paint();
  16.         return 0;
  17.       }
  18.  
  19.       case WM_ERASEBKGND:
  20.         // Do nothing here to avoid flashing, the background will be erased
  21.         // during painting.
  22.         return 0;
  23.  
  24.       case WM_SIZE:
  25.         host->Resize(lparam);
  26.         return 0;
  27.  
  28.       case WM_MOUSEMOVE:
  29.       case WM_MOUSELEAVE:
  30.       case WM_LBUTTONDOWN:
  31.       case WM_MBUTTONDOWN:
  32.       case WM_RBUTTONDOWN:
  33.       case WM_LBUTTONUP:
  34.       case WM_MBUTTONUP:
  35.       case WM_RBUTTONUP:
  36.       case WM_LBUTTONDBLCLK:
  37.       case WM_MBUTTONDBLCLK:
  38.       case WM_RBUTTONDBLCLK:
  39.         host->MouseEvent(message, wparam, lparam);
  40.         break ;
  41.  
  42.       case WM_MOUSEWHEEL:
  43.         host->WheelEvent(wparam, lparam);
  44.         break ;
  45.  
  46.       case WM_CAPTURECHANGED:
  47.       case WM_CANCELMODE:
  48.         host->CaptureLostEvent();
  49.         break ;
  50.  
  51.       // TODO(darin): add WM_SYSKEY{DOWN/UP} to capture ALT key actions
  52.       case WM_KEYDOWN:
  53.       case WM_KEYUP:
  54.       case WM_SYSKEYDOWN:
  55.       case WM_SYSKEYUP:
  56.       case WM_CHAR:
  57.       case WM_SYSCHAR:
  58.       case WM_IME_CHAR:
  59.         host->KeyEvent(message, wparam, lparam);
  60.         break ;
  61.  
  62.       case WM_SETFOCUS:
  63.         host->SetFocus(true );
  64.         break ;
  65.  
  66.       case WM_KILLFOCUS:
  67.         host->SetFocus(false );
  68.         break ;
  69.     }
  70.   }
  71.  
  72.   return DefWindowProc(hwnd, message, wparam, lparam);;
  73. }

 

如果大家想研究WebKit是如何进行渲染和排版网页的，可以从这个函数中的Line 15出发了。

 

基本上，这个Test_shell基本上具备了一个简单浏览器的雏形，如果大家对Webkit有兴趣，可以考虑从这里出发了。

这个测试程序中还有两个很炫的特性：

1. 可以查看当前网页的渲染树。可以在Debug菜单中选择Dump render tree选项：

layer at (0,0) size 800x600
  RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
  RenderBlock {HTML} at (0,0) size 800x600
    RenderBody {BODY} at (8,8) size 784x584
      RenderBlock {DIV} at (0,0) size 784x160
        RenderBlock (anonymous) at (0,0) size 784x110
          RenderImage {IMG} at (0,0) size 276x110
          RenderText {#text} at (0,0) size 0x0
        RenderBlock {DIV} at (0,110) size 784x34 [border: (3px solid #0000FF)]
          RenderText {#text} at (325,3) size 133x27
            text run at (325,3) width 133: "Chrome Tests"
      RenderBlock (floating) {DIV} at (392,160) size 392x420
        RenderBlock {DIV} at (0,10) size 250x270
          RenderBlock {H1} at (0,0) size 250x20 [color=#FFFFFF] [bgcolor=#0000FF]
            RenderText {#text} at (0,0) size 95x19
              text run at (0,0) width 95: "Plugin Tests"
          RenderListItem {LI} at (0,30) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 134x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 134x19
                text run at (15,0) width 134: "Basic Flash Plugin test"
            RenderText {#text} at (0,0) size 0x0
          RenderListItem {LI} at (0,50) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 157x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 157x19
                text run at (15,0) width 157: "Nested Frame Plugin Test"
            RenderText {#text} at (0,0) size 0x0
          RenderListItem {LI} at (0,70) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 177x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 177x19
                text run at (15,0) width 177: "Many Windowed Plugins test"
            RenderText {#text} at (0,0) size 0x0
          RenderListItem {LI} at (0,90) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 127x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 127x19
                text run at (15,0) width 127: "One Flash Plugin test"
            RenderText {#text} at (0,0) size 0x0
          RenderListItem {LI} at (0,110) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 142x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 142x19
                text run at (15,0) width 142: "Flash using 100% CPU"
            RenderText {#text} at (0,0) size 0x0
          RenderListItem {LI} at (0,130) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 144x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 144x19
                text run at (15,0) width 144: "Windowless Plugin Test"
            RenderText {#text} at (0,0) size 0x0
          RenderListItem {LI} at (0,150) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 156x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 156x19
                text run at (15,0) width 156: "Windowless Plugin Test 2"
            RenderText {#text} at (0,0) size 0x0
          RenderListItem {LI} at (0,170) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 189x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 189x19
                text run at (15,0) width 189: "Many Windowless Plugins Test"
            RenderText {#text} at (0,0) size 0x0
          RenderListItem {LI} at (0,190) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 102x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 102x19
                text run at (15,0) width 102: "Javascript object"
            RenderText {#text} at (0,0) size 0x0
          RenderListItem {LI} at (0,210) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 198x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 198x19
                text run at (15,0) width 198: "Plugin calling Javascript functions"
            RenderText {#text} at (0,0) size 0x0
          RenderListItem {LI} at (0,230) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 143x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 143x19
                text run at (15,0) width 143: "Windows Media Player"
            RenderText {#text} at (0,0) size 0x0
          RenderListItem {LI} at (0,250) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 164x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 164x19
                text run at (15,0) width 164: "DiamondX (Linux-specific)"
            RenderText {#text} at (0,0) size 0x0
        RenderBlock {DIV} at (0,290) size 250x70
          RenderBlock {H1} at (0,0) size 250x20 [color=#FFFFFF] [bgcolor=#FF0000]
            RenderText {#text} at (0,0) size 114x19
              text run at (0,0) width 114: "Scrolling Tests"
          RenderListItem {LI} at (0,30) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 135x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 135x19
                text run at (15,0) width 135: "Overflow Div scrolling"
            RenderText {#text} at (0,0) size 0x0
          RenderListItem {LI} at (0,50) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 88x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 88x19
                text run at (15,0) width 88: "Nested frames"
            RenderText {#text} at (0,0) size 0x0
        RenderBlock {DIV} at (0,370) size 250x50
          RenderBlock {H1} at (0,0) size 250x20 [color=#FFFFFF] [bgcolor=#CCCC00]
            RenderText {#text} at (0,0) size 101x19
              text run at (0,0) width 101: "WebKit Tests"
          RenderListItem {LI} at (0,30) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 78x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 78x19
                text run at (15,0) width 78: "Layout Tests"
            RenderText {#text} at (0,0) size 0x0
      RenderBlock {DIV} at (0,170) size 392x270
        RenderBlock {DIV} at (0,0) size 250x50
          RenderBlock {H1} at (0,0) size 250x20 [color=#FFFFFF] [bgcolor=#008000]
            RenderText {#text} at (0,0) size 109x19
              text run at (0,0) width 109: "External Links"
          RenderListItem {LI} at (0,30) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 44x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 44x19
                text run at (15,0) width 44: "Google"
            RenderText {#text} at (0,0) size 0x0
        RenderBlock {DIV} at (0,60) size 250x50
          RenderBlock {H1} at (0,0) size 250x20 [color=#FFFFFF] [bgcolor=#FF0000]
            RenderText {#text} at (0,0) size 86x19
              text run at (0,0) width 86: "Form Tests"
          RenderListItem {LI} at (0,30) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 109x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 109x19
                text run at (15,0) width 109: "Posting to a target"
            RenderText {#text} at (0,0) size 0x0
        RenderBlock {DIV} at (0,120) size 250x70
          RenderBlock {H1} at (0,0) size 250x20 [color=#FFFFFF] [bgcolor=#800080]
            RenderText {#text} at (0,0) size 66x19
              text run at (0,0) width 66: "JS Tests"
          RenderListItem {LI} at (0,30) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 94x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 94x19
                text run at (15,0) width 94: "JS Timer speed"
            RenderText {#text} at (0,0) size 0x0
          RenderListItem {LI} at (0,50) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 101x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 101x19
                text run at (15,0) width 101: "Sorting in Action"
            RenderText {#text} at (0,0) size 0x0
        RenderBlock {DIV} at (0,200) size 250x70
          RenderBlock {H1} at (0,0) size 250x20 [color=#FFFFFF] [bgcolor=#CCCC00]
            RenderText {#text} at (0,0) size 98x19
              text run at (0,0) width 98: "IFrame Tests"
          RenderListItem {LI} at (0,30) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 171x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 171x19
                text run at (15,0) width 171: "IFrame containing w3c page"
            RenderText {#text} at (0,0) size 0x0
          RenderListItem {LI} at (0,50) size 250x20
            RenderListMarker at (-1,0) size 7x19: bullet
            RenderInline {A} at (0,0) size 149x19 [color=#0000EE]
              RenderText {#text} at (15,0) size 149x19
                text run at (15,0) width 149: "IFrame contining bugzilla"
            RenderText {#text} at (0,0) size 0x0
layer at (8,554) size 792x46
  RenderBlock (positioned) {DIV} at (8,554) size 792x46
    RenderBlock {HR} at (0,6) size 792x2 [border: (1px inset #000000)]
    RenderBlock (anonymous) at (0,14) size 792x32
      RenderInline {B} at (0,0) size 96x15
        RenderText {#text} at (0,0) size 96x15
          text run at (0,0) width 96: "What is this page?"
      RenderText {#text} at (96,0) size 771x31
        text run at (96,0) width 3: " "
        text run at (99,0) width 531: "This is just a collection of links to test cases. If you ever find yourself creating a test webpage, add a test here. "
        text run at (630,0) width 141: "It isn't an automated test, but"
        text run at (0,16) width 97: "may be useful later. "
        text run at (97,16) width 140: "Try to keep the order logical."

 

2. 包含了一个类似于Firefox下FireBug插件的功能，所见即所得的查看网页的结构。可以通过选择Debug菜单中Show Web inspector选项。

web inspector

 

 

 


 

xingtian713
关注
  • 1
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Webkit 结构简介难点要点和案例源码解析说明
2401_84235249的博客
04-10 372
JavaScript 引擎（JavaScriptCore）：掌握 JavaScript 解析和执行的原理，了解与呈现引擎的协作方式，是开发基于 WebKit 的浏览器的关键要点。开发团队可以基于这个基本框架，根据项目需求进行进一步的定制和开发工作，例如增加对特定功能的支持、优化性能、改进安全性等，以开发出符合项目需求的定制化浏览器。深入理解和把握 WebKit 结构的难点和要点，将有助于开发团队更好地定制和开发基于 WebKit 的浏览器，提升系统的稳定性、性能和安全性。
WebKit内核源代码分析（五）
热门推荐
红心地瓜的专栏
07-04 2万+
WebKit内核源代码分析(五)红心地瓜（tomorrow.cyz@gmail.com） 摘要：本文分析WebKit中html的解析过程，DOM节点树的建立。 关键词：WebKit，html解析,html tree construction,WebCore
什么是Bugzilla?
乐天---------可以接受失败,但不可以接受放弃!
12-25 1834
 什么是Bugzilla?Bugzilla是一个臭虫的数据库。它让用户报告软件的臭虫而且把它们转给合适的开发者。开发者能使用bugzilla保持一个要做的事情的优先表，还有时间表和跟踪相关性。不是所有的"bugs"都是臭虫。一些数据库中的内容是作为增强的请求(RFE)。一个RFE是一个严重级别字段被设为"enhancement"的"臭虫".人们常说"bug",实际上意思是Bugzilla中
webkit 源码分析系列--css样式解析
梦想狂奔的专栏
03-20 764
http://hi.baidu.com/imxiangpeng/item/c30a463161739528b3c0c51d http://www.cnblogs.com/yc_sunniwell/archive/2010/06/29/1767399.html1、css解析和执行过程 (1).浏览器自带属性解析； (2).网页上css属性解析，在 此之前有部分浏览器自带属性
qt webkit 实例源码
12-26
QT WebKit 是一个基于Qt框架的网页渲染引擎，它允许开发者在Qt应用程序中嵌入和交互Web内容。这个实例源码可能包含了一系列用于演示如何使用QT WebKit进行网页展示、JavaScript交互以及自定义渲染功能的代码。以下是...
WebKit.Interop_浏览器源码_webkit_
10-03
WebKit 是一个开源的浏览器引擎，与之相对应的引擎有Gecko（Mozilla Firefox 等使用），Trident（也称MSHTML，IE 使用）和EdgeHTML（也称Chakra，Edge和其他UWP浏览器使用）。同时WebKit 也是苹果Mac OS X 系统引擎...
iOS WebKit源码
06-01
iOSWebKit官方源码，有兴趣的可以自己下载下来读一下，很不错的！
C#调用WebKit.NET 源码和示例
09-15
WebKit.NET是一个开源项目，它为.NET Framework提供了WebKit渲染引擎的封装，使得开发者能够在C#等.NET语言中使用WebKit进行网页内容的渲染和处理。WebKit是苹果公司为Safari浏览器开发的网页渲染引擎，同时也被用于...
Webkit 源码
04-22
Webkit 源码，开源项目源码。里面源代码，工具，demo都有
WebKit的源代码
08-06
WebKit-r124698.tar.bz2从官网上下载的。
新浏览器WebKitBrowser源码
01-05
新浏览器WebKitBrowser源码
浏览器的引擎webkit源代码
06-26
浏览器的引擎源代码，可编译到不同平台 c++文件
webkit内核源代码导读1：前言及webcore最基本的类
doon的专栏
05-22 2295
前言 webkit代码是目前最复杂也是最优秀的代码之一了。而且随着浏览器大战，也变得炙手可热。 但是，要理解这个代码也非常困难。 我自己也断断续续的读过不少webkit的代码，但是，经常读经常就忘了。最重要的是，很难把握它的全景。最近一段时间，因为工作需要，又需要了解内核的代码。这次，我换一种方式，从代码的结构入手，一步一步的将代码解析清楚。 webkit代码阅读的方法 webk
Windows 7-64位上编译webkit源码纪实
dreamkid的专栏
09-28 3026
一、编译环境搭建 因为运行cygwin-downloader下载webkit编译必要的cygwin安装包太慢，经常到一半程序就退出，然后又要重新下载，所以只好自己先装一个cygwin。 二、源码下载 svn checkout https://svn.webkit.org/repository/webkit/trunk WebKit 一开始我试图下载http://nightly.webkit
webkit关键代码浏览——HTML解析
愤怒的菜鸟
02-19 2559
基础概念就不多说了，直接进入正题，HTML解析这部分我主要关注了6点：1. 词法解析 2. 语法解析 3. 容错机制 4. DOM树构建 5. Render树构建 6. 查看DOM树和Render树
webkit 常用操作代码调用流程
管子（zero）的杂乱空间
12-29 142
构造 HTML/XML tokenizer [HTML]Document::createTokenizer() [HTML]Document::implicitOpen() FrameLoader::begin(const KURL&, bool dispatch, SecurityOrigin*) FrameLoader::receivedFirstData(...
浏览器探究——webkit部分——http请求
whotodo
02-24 207
浏览器探究——webkit部分——http请求 执行加载一个页面时，BrowserFrame的loadUrl会通过jni调用到WebCoreFrameBridge.cpp的LoadUrl中。Java层的BrowserFrame对应的是c层的WebCore::Frame WebCoreFrameBridge::LoadUrl 这个函数会通过参数获取到url并用url创建一个WebCore:...
win10 webkit 源码怎么调试
最新发布
06-04
要在 Windows 10 上调试 WebKit 源码，可以按照以下步骤进行： 1. 首先，从 WebKit 官方网站下载最新的 WebKit 源码，并解压缩到本地目录中。 2. 安装 Visual Studio 2019，并确保已经安装了 C++ 开发组件。 3. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值