关闭

浏览器开发基础培训汇总

454人阅读 评论(0) 收藏 举报

<!-- /* 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;} @font-face {font-family:"/@宋体"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; mso-pagination:none; font-size:10.5pt; mso-bidi-font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:宋体; mso-font-kerning:1.0pt;} a:link, span.MsoHyperlink {color:blue; text-decoration:underline; text-underline:single;} a:visited, span.MsoHyperlinkFollowed {color:#606420; text-decoration:underline; text-underline:single;} /* Page Definitions */ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page Section1 {size:595.3pt 841.9pt; margin:72.0pt 1.0cm 72.0pt 1.0cm; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0; layout-grid:15.6pt;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:113524818; mso-list-type:hybrid; mso-list-template-ids:1103013852 252865926 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l0:level1 {mso-level-number-format:japanese-counting; mso-level-text:%1.; mso-level-tab-stop:21.0pt; mso-level-number-position:left; margin-left:21.0pt; text-indent:-21.0pt;} @list l1 {mso-list-id:384916866; mso-list-type:hybrid; mso-list-template-ids:978978430 1547051404 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l1:level1 {mso-level-text:(%1); mso-level-tab-stop:57.0pt; mso-level-number-position:left; margin-left:57.0pt; text-indent:-36.0pt;} @list l2 {mso-list-id:399325490; mso-list-type:hybrid; mso-list-template-ids:-1226132084 -339988088 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l2:level1 {mso-level-tab-stop:39.0pt; mso-level-number-position:left; margin-left:39.0pt; text-indent:-18.0pt;} @list l3 {mso-list-id:528835976; mso-list-type:hybrid; mso-list-template-ids:548974390 -1086677382 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l3:level1 {mso-level-text:(%1); mso-level-tab-stop:57.0pt; mso-level-number-position:left; margin-left:57.0pt; text-indent:-36.0pt;} @list l4 {mso-list-id:990208726; mso-list-type:hybrid; mso-list-template-ids:-1800745974 712557566 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l4:level1 {mso-level-tab-stop:39.0pt; mso-level-number-position:left; margin-left:39.0pt; text-indent:-18.0pt;} @list l5 {mso-list-id:1026713466; mso-list-type:hybrid; mso-list-template-ids:1006416372 2066771668 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l5:level1 {mso-level-text:(%1); mso-level-tab-stop:57.0pt; mso-level-number-position:left; margin-left:57.0pt; text-indent:-36.0pt;} @list l6 {mso-list-id:1092819925; mso-list-type:hybrid; mso-list-template-ids:-636311644 1668602302 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l6:level1 {mso-level-tab-stop:39.0pt; mso-level-number-position:left; margin-left:39.0pt; text-indent:-18.0pt;} ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} -->

浏览器开发基础培训汇总

一. 背景知识

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>

<frame id=A   />

<frame id =B  />

<frame id=C   />

</frameset>

</html>

Html sample 2

<html>

<body>

……..

<iframe id=A  />

<iframe id=B  />

<iframe id=C  />

</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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:13203次
    • 积分:198
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:5篇
    • 译文:0篇
    • 评论:0条
    文章分类