浏览器开发基础培训汇总

最新推荐文章于 2024-04-23 20:49:10 发布

bergkamp_zhang

最新推荐文章于 2024-04-23 20:49:10 发布

阅读量724

点赞数 1

文章标签：浏览器 webkit list tree behavior javascript

本文链接：https://blog.csdn.net/bergkamp_zhang/article/details/6131650

版权

浏览器开发基础培训汇总

一．背景知识

1. 必看规范

（1） HTML 4.01: http://www.w3.org/TR/REC-html40/

重点： A) DTD, B) 理解 Element 、 Tag 和 Node

（2） XML: http://www.w3.org/TR/2006/REC-xml-names11-20060816/

（3） CSS2: http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/

重点： A)Element type: Block and Inline.

B)CSS Box Model

（4） DOM2/3:http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/ ， http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/

重点： A)Node tree

B)API

（5） HTTP 1.1: http://www.w3.org/Protocols/rfc2616/rfc2616.html

重点： A)Headers

B)Cache control

（6） URL: http://www.ietf.org/rfc/rfc1738.txt

重点：理解 URL 组成部分

2. 选看规范

（1） URI: http://www.ietf.org/rfc/rfc3986.txt

（2） Javascript http://www.ecma-international.org/publications/standards/ecma-262.htm

（3） Cookie(Http State management): http://www.ietf.org/rfc/rfc2965.txt

重点：了解 Session ，如何维护控制 Session 。

3. 开发资源

（1） Gecko: https://developer.mozilla.org/en/Gecko ： Reflow High level

（2） Gecko Document View ： https://developer.mozilla.org/en/Gecko_Documentation_Overview ： High Level designs

（3） Gecko presentations:https://developer.mozilla.org/en/Gecko_Presentations : Some slides about introduction 、 overview and internals

（4） Webkit High Level Overview: http://trac.webkit.org/wiki/HighLevelOverview

（5） WebCore Rendering: http://trac.webkit.org/wiki/WebCoreRendering

（6） WebCore Add Render Object: http://trac.webkit.org/wiki/LayoutAndRendering

（7） Mozilla moduls: http://www.mozilla.org/about/owners.html

二．窗口区域划分： Chrome 和 Content

1.Content 是窗口中用来显示 HTML 内容的区域。 Chrome 是 Content 之外的元素所占的区域集合：标题栏、工具栏、滚动条等占有的区域均属于 Chrome 。

三．模块划分

浏览器因为涉及规范和技术比较多，按照功能划分为： ML Parser ， Javascript ， Layout ， Style System, Network, Cache service, Session service, Plugin & Addon, Bindings, DOM, Shell, Widget(Render Object), Graphics, I18N(intl)

四．模块关系

ML parser 解析 HTML 文件，生成 Node tree ； Style system 解析 CSS 内容 ;Bindings 负责 Javascript 与 Node Tree 的交互； Shell 与用户交互，并且更新 Chrome ； Graphics 绘制 page 到 content 区域；、 I18N 国际化支持

五．内容层次

WebCore 中处理文档内容过程中，使用的三种结构。 HTML 文档结构化为 Page Tree 。每个 Page 建立模型后为 Frame Tree 。 Frame Tree 显示到屏幕上为 FrameView Tree 。

Html Sample 1:

<html>

</frameset>

</html>

Html sample 2 ：

<html>

<body>

……..

</body>

</html>

六． WebCore 接口

1. 网络及 UI 接口： FrameLoadercClient 。

2. DOM tree 接口： InspectorClient

3. 上下文菜单接口： ContextMenuClient

4. 图形界面接口： ChromeClient

5. Java LoadListener 和 Native WebCoreResource 是 Webkit 的网络接口

七． WebKit 渲染

请看《 WebCore_Rendering.doc 》

八．插件及扩展（略）

九．附加资源

1. URL load, 引用 firefox 图例 :

https://developer.mozilla.org/en/Document_Loading_-_From_Load_Start_to_Finding_a_Handler#nsDocumentOpenInfo

Line Callout 3: 相当于WebFrame：：loadResource

2. Request process, 引用 Firefox 例图：

Line Callout 3: 类似Webkit FrameLoader https://developer.mozilla.org/en/The_life_of_an_HTML_HTTP_request

Line Callout 3: 类似Webkit WebFrame

bergkamp_zhang

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
浏览器开发基础培训汇总

<br /><!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;}
复制链接

扫一扫