本文共 2975 字，大约阅读时间需要 9 分钟。

原文链接：

1. WebKit是一个用于web browsers处理web pages的布局渲染引擎。 
2. WebKit提供了多个类用于显示web元素，同时它还实现了很多浏览器属性和特性。比如， 
点击链接进行页面转向，页面前进与后退，管理历史访问记录等等。 
3. WebKit 核心功能： 
    a:) Loading -> Get the data. 
        * Very Complicated. 
        * Split between WebKit & WebCore 
            WebCore/loader 
            WebCore/platform/network 
            FrameLoaderClient 
        * Two paths :Frames VS Resources 
      ----------------------------------------- 
        Loading a Frame 
        * Mostly FrameLoader 
        * Policy Stage 
            Block Pop-ups 
            Cross-process Navigation 
        * Provisional Phase 
            Download or Commit 
        * Commited Phase 
            Start of Parsing 
       ----------------------------------------- 
        * Uses DocLoader & Cache 
        * DocLoader 
            Takes a URL 
            Talks to Cache or Loader 
            Returns CachedResource 
        * CachedResource 
            Handles callbacks 
            Produces object (image,Font...) 
     b:) Parsing -> Make a DOM Tree 
        * HTML VS XML 
            HTMLTokenizer & HTMLParser 
            XMLTokenizer(SAX-style) 
        * Elements from ElementFactory 
        * DNS Prefetch 
        * Pre-load scanning 
        * XSS-Auditor 
     c:) Data Structures 
        * Parsing 
            DOM Tree 
        * Layout 
            RenderObjectTree 
               -> All information required to paint 
               -> Owned by the DOM Tree 
               -> Only created for rendered content 
            RenderStyleTree 
               -> All CSS style information 
               -> Owned by the Render Tree 
               -> RenderObjects share styles 
               -> RenderStyles share data members 
            RenderLayerTree 
               -> Transparency,Masking 
               -> z-ordering 
               -> Overflow clip 
               -> Reflections,Shadows,Transforms 
               -> Positioned content 
               -> Textures on the GPU (iPhone) 
        * Line Layout 
            LineBox Tree 
               -> Held by a RenderBlock 
               -> List of RootLineBoxes,one per line 
               -> Sub-tree of InlineBoxes 
               (Each InlineBox has a RenderObject 
                RenderObject may have many InlineBoxes mapping to them) 
       d:) Layout -> Put stuff in the right place 
       e:) Paint 
             -> Only Render* class paint 
             -> GraphicsContext abstraction 
             -> RenderTheme for platform bits 
       f:) HTML Editing 
         * Hit Testing 
             -> Tree walk from the root layer 
             -> Multple phases 
             -> Every mouse move (:hover,onmousemove) 
         * Selection 
             -> positionForPoint 
             -> VisiblePosition 
             -> Selection is painted via a paint phase 
         * EditCommand 
             -> All editing logic 
             -> Holds undo state 
             -> Built into undo group trees 
            (Examples: 
                 InsertTextCommand() 
                 DeleteSelectionCommand() 
                 ApplyStyleCommand() 
                 SetNodeAttributeCommand()) 
         * Undo/Redo 
              -> Managed by Webkit/OS Layer 
              -> Build off of EditCommands 
              -> execCommand undo/redo 
         * DOM Binding 
         * JS Binding Objects 
               
         ------------------------------------------ 
(注意： Loading -> Source Text 
        Parsing -> DOM Tree 
        attach() -> RenderObject Tree 
        Style Resolution -> RenderStyles 
        Layout -> LineBoxes,Layers 
        ---------------------------------- 
        RenderObjectExamples: 
         -> RenderBoxModelObject (CSS) 
         -> RenderSVGModelObject 
         -> RenderBlock (<div>,<p>) 
         -> RenderInline (<span>,<b>,<i>) 
         -> RenderImage (<img>) 
         -> RenderText (#text) 
         -> RenderTableCell (<td>) 
        ----------------------------------- 
        From Controls 
         -> Rendered by WebCore 
         -> Shadow DOM Trees 
         -> Theme images from the OS 



） 
4. Webkit中的Tree  
     a:) DOM Tree 
     b:) Render Tree 
         * Holds 
           Style information,computed metrics 
           Links to Founts,Images,Subframes 
           Shadow DOM Trees 
         * Handles 
           Layout 
           Paint 
           Hit testing 

转载地址：http://dumbi.baihongyu.com/