yishizhu 发表于 2013-2-7 09:54:18

webkit 笔记

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
页: [1]
查看完整版本: webkit 笔记