Webkit 学习技巧.doc

Webkit 学习技巧 篇一：Webkit学习笔记 Webkit主要组成 WebKit主要包括三个部分WebCore、JavascriptCore及Ports部分 WebKit专注的核心部分主要是： 分析HtmlJavascript的解析布局渲染技术 分别在WebCore/htmlJavascriptCore和WebCore/rendering里面 1WebCore内容 目录结构 bindings 将DomBinding给JavascriptCore方面的代码同时包含依据idl接口描述文件自动生成对应于JavascriptCore的Binding实现的脚本等内容 bridge 主要包含NPPlugin方面的接口访问等内容 css 主要包括与css方面相关的内容如解析、不同css规则的定义与实现、cssBinding给JS的接口定义等内容； dom 主要包括dom方面相关的内容如不同dom元素的定义与实现、domBinding给JS的接口定义等内容 html 关于html方面相关的内容如不同html元素的定义与实现、HTMLTokenizer及HTMLParser等内容 load 主要包括装载资源如html页面、css、js及image等方面内容； page 主要包括描述一个Web页面所涉及的内容如page、frame、frameview、frametree、setting、history、chrome、chromeclient等内容； rendering 主要包括如何使用样式组织布局、显示html元素等方面内 plugins 主要包括浏览端如何实现NPPlugin方面的内容 svg 主要包括与svg方面相关的内 xml 主要包括与xml方面相关的内容如xmlparser、XPath、XSLT等 platform 主要包括与不同平台或外部库相关的内容如graphics(图形输出方面)、network(网络处理方面)、imagedecoders(解析不同图片格式方面)等 主要数据结构 为了更加简单有效的描述浏览网页的内容及过程WebKit为了明显区分不同方面的内容采取了不同的namespace如webcore、javascriptcore、webkit等webcore方面的主要数据结构有：webcore:page、webcore:frame、 webcore:FrameLoader、webcore:FrameView、Document、DOMWindow、KJSProxy、DocumentLoader、ResourceHandle、ResourceRequest、ResouceResponse、MainResourceLoader、RenderObject、RenderView等 总的说来WebCore包含了浏览器引擎的核心部分如处理html、dom、css、svg、获取资源、渲染页面过程控制、回调/通知外壳程序以及与Javascript实现的Binding等等 2port的内容 Port方面的主要内容在于提供不同的Port接口供外部程序使用以及如何与外部程序交互因为WebKit中的其它两部分WebCore、Javascript实现从逻辑上讲是不直接提供接口给外部程序使用的同时为了完成浏览器的核心功能WebKit也需要从外部程序中通过Port接口的方式获取一些支持 1WebCore交互接口 在WebKit源代码目录结构中WebKit目录下分别包含gtk、mac、qt、win、wx目录其分别对应不同的Port移植方式在每一个目录下面都包括WebCoreSupport目录而在不同的WebCoreSupport目录下分别包含有对类接口 WebCore:ChromeClient、WebCore:ContextMenuClient、WebCore:DragClient、WebCore:EditorClient、WebCore:FrameLoaderClient、WebCore:InspectorClient等的实现它们代表外部程序提供给WebKit内部使用的接口实现其中WebCore:ChromeClient、WebCore:FrameLoaderClient非常重要 2连接模块loader 对WebCore中的page/loader等方面的类提供对应Port的实现支持如 EventHandlerWin.cpp、FrameLoaderWin.cpp、DocumentLoaderWin.cpp、DocumentLoaderWin.cpp、WidgetWin.cpp、KeyEventWin.cpp等.Loader是在WebKit里面一个很重要的连接器通过loader发起IO下载网页再通过loader发起解析已经最后的渲染功能 3显示模块WebView和WebFrame WebView及WebFrame主要功能是方便外部程序嵌入WebKit不同的Port移植对WebView及WebFrame的定义及实现有所不同但其与WebCore中的Page、Frame之间的关系图描述相一致 4chrome中对Port移植方面的实现 其基本上与其他Port移植类似其主要代码在webkitglue目录中可重点关注带clientimpl.cc后缀的文件、webviewimpl.cc、webwidgetimpl.cc等但是其究竟如何创建原生windows窗口、如何创建Render进程、Render进程与创建 的原生windows窗口的关系如何等需要更进一步深入研究Chrome如果能从上面提到的Port部分入手也许很快就可得到答案 5Android中对Port移植方面的实现 其实现有点特殊由于Andriod将WebKit以一个Java类接口的方式提供给Java环境使用(不像上面提到的Chrome、Safari等都是将WebKit以一个C+动态或静态库的方式供C/C+外部程序调用)这样WebKit内部与外部即JavaVM的交互(如上面提到的ChromeClient、FrameLoaderClient接口实现)需要一个Bridge类来协调处理同时WebView、WebFrame接口绑定给JavaVM的jni接口实现也需要通过这个Bridge来支持协调处理具体可详细参考android源码代码中WebCoreplatformandroid目录下的源文件 篇二：webkit开发学习笔记 由于工作需要最近在准备一个介绍webkit的PPT文档我个人断断续续学习webkit的代码也有一年多了其间也阅读了网上的一些webkit相关技术文章但中文的资料很少大部分都是english的有些E文资料还需要翻墙平常由于自已记性不好去年看过的一些模块今年再去翻时竟然没一点印象了悲剧? 所以借此机会把自已对webkit的理解先做下笔记以便于以后需要时可以方便查阅需要说明的是笔记记录的有我个人的理解也有网上摘录的片段和图片不一定正确也会比较凌乱希望看到的朋友及时指正共同进步 一 Webkit的由来 1十几年前的故事 1994年Netscape浏览器曾占据整个浏览器市场的90%风头无二（也很嚣张）但随着微软推出win95后把IE1.0做为win95的插件发布开始挑战Netscape的霸主地位到发布IE4.x短短三年时间打败Netscape这里面虽然说有与windows集成的原因但从本身的功能上来讲IE从速度和对标准的支持上来讲已真正打败了Netscape 此阶段的浏览器可称为第一代浏览器它的主要特点是单窗口型式竞争的最主要是访问速度、兼容性原因：90年代都大多是用modem拨号上网56K/S 2Webkit出生 Apple公司在它的MacOSX里集成了基于KHTML改进型的WebKit引擎的浏览器命名为：Safari当年苹果比较了Gecko和KHTML后之所以选择了后者就因为它拥有清晰的源码结构、极快的渲染速度（KHTML是由KDE小组开发的） 随后apple将它开源 至此第二代浏览器基本上是三分天下： Trident:IE系列以Trident作为内核引擎; Gecko:Firefox是基于Gecko开发; WebKit:Safari,GoogleChrome,搜狗双核浏览器(集成IE和chrome),QQ浏览器5 WebKit内核在手机上的应用也十分广泛例如Google的手机Gphone、Apple的iPhone,NokiasSeries60browser等所使用的Browser内核引擎都是基于WebKit 总结： webkit 答：Webkit是一套浏览器排版代码已开源主要由apple公司在维护强调：webkit仅仅是一套排版引擎 举个例子说明下： google的chrome是一个浏览器对吧那chrome主要包含以下模块：外壳UI（多标签菜单状态栏网址输入栏等）读取网络数据的模块排版解析模块JS解析引擎外壳UI是google自已写的js引擎是google写的V8,读取网络数据模块用的winhttp只有排版引擎用的webkit 不知道我说清楚了没呵呵 WebKitisanopensourceWebcontentengineforbrowsersandotherapplications.Wevaluerealworldwebpatibility,standardspliance,stability,performance,security,portability,usability,andrelativeeaseofunderstandingandmodifyingthecode(hackability). 二Webkit编译环境 Webkit的官网：/retype/zoom/5b3f590ceff9aef8941e0617?pn=4x=0y=0raww=626rawh=719o=png600135113704808892.9791262.879type=picaimh=551.3099041533546md5sum=a27dea88b29041c789cb0213818b8bbcsign=171bf19a9bzoom=png=87947148147jpg=00target=blank点此查看 编译运行在VisualStudio中设置browser工程为主工程然后编译可以顺利编译完成下面是运行后的效果图 4.最最简单的webkit学习环境ISee 5.Isee是一位中国人移植的webkit在winxp下用vsxx直接编译即可调试用于学习 最好强烈支持也是一位同事推荐给我的后面的代码走读主要基于该环境 6.Isee还可以直接移植到wince平台运行噢 7.官网： 备注：原作者已经不再维护了所以webkit内核的版本号有点老 8.webkit在vsxx中编译 见: 三Webkit整体介绍 1.Webkit的结构图(以ISee架构举例)： 篇三：WebKit学习文档 WebKitgtk+学习文档 简介WebKit是一个开源浏览器网页排版引擎与之相应的引擎有Gecko（MozillaFirefox等使用的排版引擎）和Trident（也称为MSHTMLIE使用的排版引擎）同时WebKit也是苹果MacOSX系统引擎框架版本的名称主要用于SafariDashboardMail和其他一些MacOSX程序WebKit所包含的WebCore排版引擎和JSCore引擎来自于KDE的KHTML和KJS开源项目当年苹果比较了Gecko和KHTML后仍然选择了后者就因为它拥有清晰的源码结构、极快的渲染速度 目前使用WebKit引擎的浏览器主要有：Safari(apple出品)Midorichrome(google出品)等 AdobeAIR也采用了WebKit渲染HTML 一、用到的库： 除了平台相关的库WebKit需要用到的一些主要的后台库有： ICU：InternationalComponentsforUnicode一个成熟广泛使用的一套为C/C+和Java库提供Unicode的全球化支持软件； XSLT：eXtensibleStylesheetLanguageTransformation,W3C定义的用于XML文档转换的规范；Curl：一个利用URL语法的命令行数据传输工具基于libcurl Sqlite：SQLite是实现了SQL92标准的SQL数据库引擎它能在一个库里组合数据库引擎和接口将所有数据存储于单个文件； Gperf：一个很完美的哈希函数生成器；Flex：FastLex,快速词法分析生成器；Bison：语法分析生成器可以将一段带注释的上下文无关语法转化成LALR或GLR语法；Enchant：一个拼写检查库提供单词的拼写检查、纠错等功能； 二、代码目录结构 WebKitTools：一些测试WebKit实现功能的程序；WebKit：此目录位于WebKit的最上层定义了与应用相关的一些接口因此它是平台相关的子目录是对应平台的完整实现： WebCore：WebKit的核心部分定义了浏览相关的数据IO、页面加载、脚本分析、UIxml：提供xml相关的内容；组织、事件处理、网络分析、平台相关的具体实现等内容 html：提供html相关的内容；其下的Canvas目录定义了3D画布以及WebGL库相关的内容； wml:WirelessMarkupLanguage；css：提供css相关的内容；dom：提供dom相关的内容；editing：编辑相关的功能；page：浏览相关内容并非是我们看到的一个页面在一次浏览会话中它只有一个实例；rendering：页面渲染相关的内容在对页面脚本进行DOM树分析之后需要对这些元素进行渲染和显示； notification：内部模块间的事件通信；history：页面浏览历史记录相关的内容；svg：矢量图形功能有选项svg； mathml：W3C为网页中的数学表达式制定的规范；有编译选项mathml；loader加载资源及Cache；： workers：“WebWorkers为WEB前端网页上的脚本提供了一种能在后台进程中运行的方法一旦它被创建WebWorkers就可以通过postMessage()向任务池发送任务请求执行完之后再通过postMessage()返回消息给创建者指定的事件处理程序(通过onmessage进行捕获) WebWorkers进程能够在不影响用户界面的情况下处理任务并且它还可以使用XMLHttpRequest来处理I/O无论responseXML和channel属性是否为null” storage：WebStorage相关的内容保存页面的数据可以看成是Cookie的升级；websockets：与网络连接相关的内容；bridge:主要包含NPPlugin(NetscapePlugin)方面的接口访问等内容；binding：Dom与JavaScriptCore绑定的功能； accessibility：提供控件的可用性相关的内容accessibility常用来形容对一些特殊人群的功能支持比如残障者、老人等； icu：里面放了专门为MacOSX10.4编译的icu相关头文件；platform：提供了平台相关的具体实现如事件响应、本地化、网络连接等；plugins：插件相关内容；ForwardingHeaders：头文件； inspector：Inspector是WebKit提供的查看网页源代码DOM树以及调试脚本的工具本目录包含了实现此功能的内容； English.lproj：本地化文件；Resources：资源图标； WebCore.gyp：工程文件GYP（GenerateYoureProject）是google自己开发了一个脚本工具这个工具也是采用python编写的它采用了自定义的一套规则用于生成各种工程文件； JavaScriptGlueJavaScriptCore：有关JavaScript的相关内容包括了脚本解释器、分析器以及执行程序；PlanetWebkit:一个比较灵活的RSS阅读器；Webkit网站上的Planet：一站式的Webkit开发与动态信息； 三、体系结构 WebKit主要包括三部分：WebKitWebCore以及JavaScriptCore加上所使用的库依托的平台其基本的体系结构(Architecture)如下所示： 注意有的模块相对于下面的模块有突出这是因为此模块与下面几个模块直接相关比如WebCore模块就与JavaScriptCore、Libraries和Platforms模块直接相关 四、Webkit/gtk+中下层与gtk的接口 WebKit中实现网页上所有信息的显示一部分是由WebKit本身画出来的一部分是利用gtk的接口实现部分对象的显示其中本身画出来的部分的代码实现部分主要位于editing和rendering两个目录下利用gtk提供的一些控件的接口实现网页上一些对象的显示主要集中于platform/gtk/目录下： ./platform/gtk/RenderThemeGtk.cpp ./platform/gtk/ContextMenuGtk.cpp ./platform/gtk/FileChooserGtk.cpp ./platform/gtk/WidgetGtk.cpp ./platform/gtk/Language.cpp ./platform/gtk/PasteboardGtk.cpp ./platform/gtk/CursorGtk.cpp ./platform/gtk/ContextMenuItemGtk.cpp ./platform/gtk/ScrollbarGtk.cpp ./platform/gtk/LocalizedStringsGtk.cpp ./platform/gtk/DragImageGtk.cpp ./platform/gtk/PlatformScreenGtk.cpp ./platform/gtk/PopupMenuGtk.cpp ./platform/gtk/PasteboardHelper.cpp ./platform/gtk/GRefPtrGtk.cpp ./platform/gtk/ScrollbarThemeGtk.cpp ./platform/gtk/ScrollViewGtk.cpp ./platform/gtk/ClipboardGtk.cpp ./platform/gtk/GtkPluginWidget.cpp ./platform/network/soup/ResourceHandleSoup.cpp ./platform/graphics/gtk/IconGtk.cpp ./platform/graphics/gtk/FontPlatformDataPango.cpp ./platform/graphics/gtk/ImageGtk.cpp ./platform/graphics/cairo/FontPlatformDataCairo.cpp ./plugins/gtk/PluginViewGtk.cpp 1、 各个文件实现的功能RenderThemeGtk.cpp 该文件主要实现了对一些基本控件的创建与属性的设置例如：button,Toggle,Checkbox,RadioMenuList,Text,Background,Foreground,ListBox,Container,Entry,TreeView,MediaSlider等 ContextMenuGtk.cpp该文件主要是对文本菜单(ContextMenu)的创建FileChooserGtk.cpp该文件中包含两个函数：staticboolstringByAdoptingFileSystemRepresentation(gchar*systemFilename,Stringresult);该函数是得到systemFilename中所包含的文件的名称通过result值返回 StringFileChooser:basenameForWidth(constFontfont,intwidth)const; 通过给定文本的字形名称和一定的宽度从而得到该长度下可以显示最长文本信息WidgetGtk.cpp 该文件主要是对widget的一些属性的设置例如：光标、焦点、显示隐藏还有对widget自身的新建与销毁等等 Language.cpp 该文件仅包含一个函数： StringdefaultLanguage(); 该函数实现返回当前默认的语言类型 PasteboardGtk.cpp 该文件主要是对剪贴板的操作文件中所包含的函数主要有： staticvoidclipboardgetcontentscb(GtkClipboard*clipboard,GtkSelectionData*selectiondata,guintinfo,gpointerdata); 得到指定剪贴板当前的内容 staticvoidclipboardclearcontentscb(GtkClipboard*clipboard,gpointerdata); 清空指定剪贴板中当前的内容 Pasteboard*Pasteboard:generalPasteboard(); 创建一新的剪贴板 voidPasteboard:writeSelection(Range*selectedRange,boolcanSmartCopyOrDelete,Frame*frame); 存储所选内容至剪贴板中 voidPasteboard:writePlainText(constStringtext); 保存纯文本至剪贴板中 voidPasteboard:writeURL(constKURLurl,constString,Frame*frame); 保存URL至剪贴板中 voidPasteboard:writeImage(Node*node,constKURL,constString); 保存图片文件至剪贴板中 voidPasteboard:clear(); 清除默认剪贴板中的内容 PassRefPtrPasteboard:documentFragment(Frame*frame,PassRefPtrcontext,boolallowPlainText,boolchosePlainText); /欠缺 StringPasteboard:plainText(Frame*frame); 返回当前剪贴板中的纯文本内容 CursorGtk.cpp 该文件主要实现了对各种不同光标类型的的创建 ContextMenuItemGtk.cpp 该文件主要实现了对文本菜单的一些操作例如： staticconstchar*gtkStockIDFromContextMenuAction(constContextMenuActionaction);根据所操作的对象得到它所对应的stockID GtkMenuItem*ContextMenuItem:createNativeMenuItem(constPlatformMenuItemDescriptionmenu); 创建菜单项 voidContextMenuItem:setSubMenu(ContextMenu*menu); 篇四：WebKit学习大纲 webkit入门准备 1.1.C+ a)Webkit代码风格 b) c) d) e) f) 2.2. a) b) c) 3.3. a) b) InlineConst构造与析构重载继承泛式编程Vector/List/HashTableIterator智能指针面向对象编程对象概念设计模式 4.4.调试、测试及工具 a)Gcc及Makefile b)Trace c)VC d)Gdb e)Alert及javascript调试 f)GUNbinary工具 g)JsUnit h)Javascript框架Dojo i)JsDoc j)JsLint k)HTMLValidator l)Dominspector m)Xmlspy n)标准测试用例 5.5.性能分析 a)Gprof 6.6.Socket 7.7.编译原理 a)词法 b)语法 8.8.操作系统 a)Linux线程 b)Linux内存 c)编译与链接 9.体系结构详解 1.浏览器功能结构 2.浏览器结构 3.Webkit体系结构 4.WebKit目录结构 5.WebKit编译 10.HTML引擎详解 1.HTML语法 2.DomCore 3.DomEvent 4.DomHtml 5.焦点处理 6.HTML扩展 11.JS引擎详解 1.Javascript语法 2.JSBinding 3.JSInterpreter 4.GarbageCollect 5.javascript扩展 12.CSS排版详解 1.CSS语法 2.DomCSS 3.DomStyle 4.Paint 5.CSS风格扩展 13.CURL、SSL详解 1.Loader 2.Curl 3.HTTP 4.SSL 14.XML引擎详解 1.XML 2.Ajax 15.TCMalloc内存管理机制 1.内存池 2.TcMalloc 16.其它 1.WebKit外壳封装 2.Plugin插件机制 篇五：webkit用例审核及处理方法(初稿)leo webkit用例审核及处理方法 1.前言 Webkit官方用例大约有3万现已通过自动化方式将一半的用例添加进入日常的LayoutTests测试集中还有一般需要人工地过滤看不过的原因 2.用例类型说明及举例 按照测试用例给出的预期结果类型可以将用例分为：文本型（TextResult）、图片型（PixelResult）、Render树型（RenderTreeResult）、HTML型（工具暂不支持）、其他特殊类型（例如预期是音频、pdf文件的用例暂不支持） 文本型：测试结果标注为TextResult预期文件为expected.txt内容是：该用例使用浏览器打开后显示的文字信息如果有图片也不会出现在txt文件里的用例源码js有testRunner.dumpAsText()或testRunner.dumpAsText(false)调用例如： 图片型：测试结果标注为PixelResult预期文件为expected.png：该用例使用浏览器打开完全后的截屏文件用例源码js有testRunner.dumpAsText(true)调用 Render树型：测试结果标注为RenderTreeResult预期文件一般会给出expected.txt和expected.png目前只做txt的对比效率较高txt内容是该用例使用浏览器排版之后的RenderTree结构用例源码js没有调用testRunner.dumpAsText()这样的方法（目前还没出错不知道其他不通过的用例会不会存在误判）例如： Html型：暂时不支持测试给出的预期文件是expected.html主要是根据预期文件类型来判断 其他类型：用例给出的预期文件是txt、png、html以外的其他类型比如expected.pdfexpected.audio等主要是根据预期文件类型判断这些特殊用例不支持测试 更详细的介绍说明见附件LayoutTests测试用例编写.docx 3.不通过用例处理方法和归类 3.1处理方法 对于目前还未通过测试的15k用例建立excel表格记录分析处理结果表格设计如下： 测试同学目前需要做的工作：根据该文档的说明逐一分析未通过用例将分析的结果填入表格 开发同学根据表格信息快速定位进一步分析根本原因或者修改用例或者查内核缺陷优先级高的问题已注明提tapd开发优先解决这些问题个别内核缺陷会转给项目组其他相关开发同学跟进 3.2归类 对不通过的用例结果和基准对比分析原因归类分为： 1、（用例在）目录测试时crash：测试该用例目录时该用例必现crash但是单独测试该用例时并不会crash原因应该和前后用例行为有关需要整个目录测试复现问题解决处理方法：提tapdbug 2、内核crash：用例使用浏览器打开过程必然crash处理方法：提tapdbug 3、工具crash：用例不会在浏览器打开过程crash但是单独测试时比如crash处理方法：提tapdbug 4、（测试用例）内核不支持：测试用例调用了某些js方法需要内核专门支持测试而增加的目前X5内核还不能支持处理方法：将分析的原因填入对应的excel表格调用的特殊js对象描述清楚方便后期确定是否实现支持 5、（测试用例）工具不支持：测试用例中testRunner调用了某些js方法并未实现例如testRunner.display()处理方法：将分析的原因填入对应的excel表格调用的特殊方法描述清楚方便后期继续跟进 6、（测试工具）类型判断错误：工具判断出来的用例类型和用例给出的基准文件判断的类型不一致处理方法：将原因填入对应的excel表格 7、内核缺陷：工具和内核对用例测试完全支持测试结果和预期存在差异判定为内核逻辑缺陷处理方法：将原因填入对应excel表格 8、html型用例：用例给出的预期文件是expected.html工具暂不支持测试处理方法：将原因填入对应excel表格 9、其他类型用例：用例给出的预期文件类型不是txt、png、html（htm）之一的工具暂不支持处理方法：将原因填入对应excel表格 10、其他原因：不能归入前9类的另类原因 4.审核步骤、归类及处理方法 注：所有提tapd的bug请标题注明LayoutTests处理人leolincao、totorima 首先打开目录对应的Details.html文件逐一审核未通过的用例 4.1分析Crash用例 Details.html文件中注明是CrashedDummyResult该用例测试过程crash 1、单独测试该用例是否crash如果没有crash归类为：目录测试时crash 2、使用浏览器打开该用例如果crash归类为：内核crash提tapd；否则归类为：工具crash提tapd 4.2分析Timeout用例 Details.html文件中用例后面有黄色底色的TIMEDOUT标识用例 TIMEDOUT用例大多数原因是用例调用的部分js对象方法不支持导致js执行中止；js执行了testRunner.waitUntilDone()但testRunner.waitUntilDone()未能执行 1、查看用例源码包括html和js资源文件 2、阅读主要的js代码是否存在特殊的js对象调用 如果存在window调用了未知的js对象（testRunner例外）归类为：内核不支持记录下window调用的未知js对象名称 如果存在testRunner调用js方法除了一下这些方法外还存在其他方法归类为：工具不支持记录下testRunner调用的未知js对象名称testRunner支持的方法有：clearAllDatabases()、dumpAsText()(包括带参和不带参)、dumpChildFramesAsText()、dumpDatabaseCallbacks()、notifyDone()、overridePreference()、setAppCacheMaximumSize()、setCanOpenWindows()、setDatabaseQuota()、setXssAuditorEnabled()、waitUntilDone() 3、还不能确定的归类为：其他原因 4.3预期文件找不到 Details.html文件中如果测试结果Expectedresult栏为空（图片类型用例PixelResult例外）可以判断为预期文件找不到先到platform/m