浏览器基础知识课件

1、浏览器基础知识1.目录浏览器的发展历史嵌入式浏览器分类浏览器工作原理Android Webkit简介浏览器简史（一）浏览器简史1991年，WorldWideWeb 浏览器发布 这款由 Web 之父 Tim Berners-Lee 亲手设计的图形化浏览器还包含一个所见即所得 HTML 编辑器，为了避免同 WWW 混淆，这个浏览器后来改名为 Nexus1993年，Mosaic 发布 Internet 的流行应该归功于 Mosaic，这款浏览器将 Web 带向了大众。诸如 IE, Firefox 一类的当代浏览器仍然在延用 Mosaic 的图形化操作界面思想。 1994年，Netscape 成立 1

2、995年，IE 发布，浏览器之战即将爆发 1996年，Opera 发布 1998年，Netscape 浏览器走向开源，Mozilla 项目成立 2002年，IE 开始主导浏览器市场 ，市场份额达到95%2003年，苹果 Safari 浏览器登场 2004年，Firefox 引发第二场浏览器之战 ，Firefox 1.0 推出。2006年，IE7 发布 ，迫于 Firefox 的压力，微软匆匆推出 IE7 应战2008年，Google 携 Chrome 参战 嵌入式浏览器简史（二）2007年在手机浏览器领域，WAP是主流的标准。世界上掌握WAP浏览器核心技术的厂商只有4家，分别是美国的Openw

3、ave（Motorola），瑞典的Teleca（Obigo），日本的Access（Netfront）和韩国的Infraware。嵌入式浏览器简史（四）2010年手机浏览器市场的竞争主体主要由三股力量构成：一是智能手机制造商，如苹果、HTC、诺基亚等。苹果公司通过IPhone推出了手机浏览器Safari，诺基亚则拥有基于SymbianS60平台的Web浏览器。二 是互联网企业，如谷歌、微软。近年来，谷歌和微软等巨头纷纷加大了手机领域的开发力度。谷歌先是推出了Android手机操作系统，而后又推出了手机浏览器Chrome。微软则推出了移动版IE。三 是专业浏览器公司(也称第三方浏览器公司)，如优视

4、动景、Opera公司、Mozilla公司。国内手机浏览器公司优视动景推出了手机浏览器UCweb，全球知名浏览器公司Opera则推出了OperaMini和OperaMobile两款手机浏览器，另外，Mozilla公司也推出了手机版火狐浏览器Fennec。1.目录浏览器的发展历史嵌入式浏览器分类浏览器工作原理Android Webkit简介浏览器分类-WAP浏览器Wap协议一度是互联网的标准协议,但是由于先天不足，所以浏览器的表现能力差强人意。经过多年的发展和积累，当前业务已经比较丰富，同时由于各方面技术成熟，使得用户解决方案各方面的成本已经非常低，因此Wap浏览器仍然是手机终端的标准配置，尤其在

5、低端手机手机上已经和短信、彩信等功能成为基本功能之一。这个阶段的代表厂商是Teleca(Obigo)和Openwave。WAP2.0与PROXY(一)在Wap时代，代理服务器（Proxy Server）扮演了重要的角色，Proxy是连接手机和传统意义WWW网络的桥梁，Proxy的主要功能有如下几个方面： 1.Web缓冲 2.安全功能 3.内容转换PROXY的主要功能安全功能:8080:8080客户端request:response:302跳转:302客户端request:response:302跳转:302PROXY检查sina是否在列表中PROXY检查网页的Meta字段WAP2.0与PROX

6、Y(三)Baidu wml版简版 Baidu内容转换WAP2.0与PROXY(三)Baidu PC版浏览器分类-Transcoding浏览器Transcoding技术 顾名思义就是转码技术，由于上文提到的Wap协议的特性，使得传统的Wap浏览器无法访问丰富的互联网资源，为了实现这个目的，出现了基于转码的方案。设备库设备识别内容转换图形转换内容修复应 用 服 务 器图形管理界面第三方内容浏览器分类-Transcoding浏览器一是互联网应用的代码非常的不规范，国内网页尤其突出，在内容转换过程中的兼容性是非常难保证的。二是网页上存在着大量的 脚本及动态应用 ，这时依赖服务器的脚本识别也是非常难以达

7、到实用的程度，比如网银。三是转换过程的失真问题，随着智能机的普及，过度的转换、精简对网页的效果也会产生较大的失真，反而影响了用户体验。浏览器分类-Web浏览器也称WWW浏览器或者桌面级浏览器能在手机终端上提供更好的用户体验、更强的功能扩展一直是各浏览器厂商矢志不渝的方向。在第二代手机浏览器的概念上，并没有太明确的定义，不过各方共同认可的一点那就是完全依赖手机终端的能力，提供与PC基本一致的上网体验的浏览器，才能称为第二代的浏览器。实际上2007年以后，各浏览器厂商基于这个想法就已经有了很多尝试，不过真正把大家的眼球中到手机浏览器上的非苹果的Safari莫属。HTTP协议的工作原理HTTP协议的

8、作用原理包括四个步骤： 连接：Web浏览器与Web服务器建立连接，打开一个称为socket（套接字）的虚拟文件，此文件的建立标志着连接建立成功。 请求：Web浏览器通过socket向Web服务器提交请求。HTTP的请求一般是GET或POST命令。 应答：Web浏览器提交请求后，通过HTTP协议传送给Web服务器。Web服务器接到后，进行事务处理，处理结果又通过HTTP传回给Web浏览器，从而在Web浏览器上显示出所请求的页面。 关闭连接：当应答结束后，Web浏览器与服务器必须断开，以保证其它Web浏览器能够与Web服务器建立连接。客户端服务器连接TCP/IP请求响应关闭连接HTTP协议的工作原

9、理HTTP状态码（HTTP Status Code）是用以表示网页服务器HTTP响应状态的3位数字代码。它由 RFC 2616 规范定义的,所有状态码的第一个数字代表了响应的五种状态之一。1xx 消息这一类型的状态码，代表请求已被接受，需要继续处理。由于 HTTP/1.0 协议中没有定义任何 1xx 状态码，仅HTTP/1.1协议支持.2xx 成功这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。3xx 重定向301-永久跳转, 302-临时跳转, 303-See Other,同302,但如果是Post请求,后续要转为GET, 304-Not Modified, 307-临时跳转(仅

10、处理Get请求)4xx 请求错误400-Bad request(语义或者参数有误), 401-Unauthorized,403-Forbidden,404 Not Found(404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下)5xx 服务器错误501-Not Implemented(服务器不支持当前某个功能),502-Bad Gateway,504-Gateway TimeoutHTTP响应码(二)RequestResponse何谓WML，HTML，XHTMLWireless Markup Language，缩写为WML，是WAP规范指定的基于X

11、ML的基本内容格式，使用支持该规范的设备例如移动电话可以浏览WML的页面。 WML的页面是规范的XML文档。WML的版本: 1.0, 1.1, 1.2(1998年), 1.3, 2.0(2001年)WML，HTML，XHTML超文本置记语言（HyperText Markup Language，简称HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种置标语言。HTML被用来结构化信息例如标题、段落和列表等等。HTML的版本:HTML 1.0在1993年6月发为互联网工程工作小组（IETF）工作草案发布（并非标准）.HTML 2.01995年11月作为RFC 1866发布.HTML

12、 3.21996年1月14日HTML 4.01997年12月18日，W3C推荐标准HTML 4.01（微小改进）1999年12月24日，W3C推荐标准WML，HTML，XHTMLXHTML，表现方式与HTML类似，不过语法上更加严格。XHTML基于可扩展置标语言（XML），XML是SGML的一个子集。XHTML 1.0在2000年1月26日成为W3C的推荐标准。XHTML的版本:XHTML 1.0发布于2000年1月26日，是W3C推荐标准，修订于2002年8月1日重新发布。XHTML 1.1，于2001年5月31日发布，W3C推荐标准。XHTML 2.0，W3C工作草案。XHTML 5，从X

13、HTML 1.x的更新版，基于HTML 5草案, W3C标准.浏览器内核工作流程图XML/HTML 解析（分词）构建DOM树Javascript 解析窗口管理网络侧数据渲染网页浏览器的工作原理浏览器内核内核是浏览器工作的心脏衡量内核好坏的标准： 1. 架构合理Email ClientWidgets 2. 渲染效率高浏览器引擎浏览器引擎浏览器引擎TridentInternet ExplorerMaxthon搜狗浏览器360 浏览器Green BrowserOperaPrestoGeckoMozilla firefoxThunderbirdCaminoWebkitMac SafariChromeM

14、idori嵌入式浏览器引擎嵌入式浏览器TridentMobileIEOpera MobilePrestoGeckoMozilla firefoxThunderbirdCaminoWebkitIphone SafariAndroid browserNetfront BrowserSymbian BrowserCSS的作用CSSCSSHTML+Cascading Style Sheets（层叠样式表），简写为CSS，由W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的语言。目前最新版本是CSS 2.1。下一版本CSS 3仍然在开发过程中。An

15、driod2.2目前支持CSS 2.1。Javascript的作用图:Javascript是因特网时代的机器语言Javascript的作用(二)AJAX的广泛使用,使得Javascript的地位更加重要,高效的Javascript引擎成为衡量浏览器引擎是否高效的重要指标目前比较流行的浏览器引擎有：Javascript的作用(三)SpiderMonkeyMozilla和Webkit均采用此引擎,近几年出现了一些衍生版本TraceMonkey,JaegerMonkey等, Obigo浏览器也是采用此引擎。Googe V8 Chromegoogle自行研发的Javascript引擎，目前还没有移植到

16、Andriod上。Chakra IE浏览器Futhark Opera浏览器Javascript的作用(3)function recordLoad() try if (loadRecorded) return; var loadString = toJsonString(loadTime); new Ajax.Request(ajax, parameters: pos: editorload, string: loadString, cookie: document.cookie , bgRequest:true ); loadRecorded = 1; catch (e) AJAX-异步Jav

17、aScript和XML。AJAX颠覆了传统的表单式交互方式，通过异步的xml http request和response，大大减少了流量。Google地图、Gmail等均采用了AJAX技术1.目录浏览器的发展历史嵌入式浏览器分类浏览器工作原理Android Webkit简介Webkit ArchitectureAndroid Browser 主要分成三个部分:1. Browser app (java)；2. Framework WebView (Java); 3. Webkit Engine (C+):JavascriptCore,WebCore,Webkit;1. JavaScriptCor

18、e；Javascript 引擎KJS进化到Squirrel Fish基本的模板库WTF基本的正则表达式解析模块PCRE基本编码转换模块，依赖ICU进行JS解析/编译引擎JS运行库2. WebCore-render engine；WebCore负责解析页面，生成DOM tree 和 Render tree，最终绘制整个页面到background。网络接口封装HTML解析引擎XML解析引擎CSS解析引擎JS 客户端对象封装网页渲染引擎BackEnd封装与实现SVG引擎HTML Editing（Dom Event）PluginsCache，Cookies，History，Image/Icon。3. Webkit接口层接口层负责和平台相关的background实现，里面包括了android 平台的实现，具体是通过JNI和framework 里面的webview。WebCore的高层封装提供与BackEnd一直的平台支撑提供给WebCore用户操控相关的支撑接口Url的打开过程（一