浏览器开发基础培训汇总

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

 

2.       Request process, 引用 Firefox 例图:

https://developer.mozilla.org/en/The_life_of_an_HTML_HTTP_request

阅读更多
上一篇web core 基础框架
下一篇webkit render tree dom tree
想对作者说点什么? 我来说一句

PHP开发基础培训 中文版 PPT

2009年09月25日 492KB 下载

H3C 原厂内部培训PPT资料汇总

2016年12月06日 14MB 下载

SAP HR模块abap开发基础培训

2018年07月06日 2.68MB 下载

没有更多推荐了,返回首页

关闭
关闭