浏览器基础知识.ppt

《浏览器基础知识.ppt》由会员分享，可在线阅读，更多相关《浏览器基础知识.ppt（49页珍藏版）》请在三一办公上搜索。

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

2、 1995年，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。,嵌入式浏览器简史（三）,随后手机浏览器厂商都重点解决手机操作系统的兼容性问题。以Opera为例，目前已经开发了应用于各主要操作系统的手机浏览器版本。支持OperaMini软件的手机类型已经超过了40个厂商的674个型号。,嵌入式浏览器简史（四）,2010年手机浏览器市场的竞争主体主要由三股力量构成：一是智能手机制造商，如苹果、HTC、诺基亚等。苹果公司通过IPhone推出了手机浏览器Safari，诺基亚则拥有基于SymbianS60平台的Web浏览器。二 是互联网企

4、业，如谷歌、微软。近年来，谷歌和微软等巨头纷纷加大了手机领域的开发力度。谷歌先是推出了Android手机操作系统，而后又推出了手机浏览器Chrome。微软则推出了移动版IE。三 是专业浏览器公司(也称第三方浏览器公司)，如优视动景、Opera公司、Mozilla公司。国内手机浏览器公司优视动景推出了手机浏览器UCweb，全球知名浏览器公司Opera则推出了OperaMini和OperaMobile两款手机浏览器，另外，Mozilla公司也推出了手机版火狐浏览器Fennec。,1.目录,浏览器的发展历史嵌入式浏览器分类浏览器工作原理Android Webkit简介,浏览器分类,手机浏览器的发展主

5、要受制于用户终端和带宽的影响，终端能力主要是屏幕大小和处理器能力。根据上述原则，嵌入式浏览器可以分为三类，或者说发展的三个阶段1.WAP浏览器2.Transcoding浏览器3.WEB浏览器,浏览器分类-WAP浏览器,Wap协议一度是互联网的标准协议,但是由于先天不足，所以浏览器的表现能力差强人意。经过多年的发展和积累，当前业务已经比较丰富，同时由于各方面技术成熟，使得用户解决方案各方面的成本已经非常低，因此Wap浏览器仍然是手机终端的标准配置，尤其在低端手机手机上已经和短信、彩信等功能成为基本功能之一。这个阶段的代表厂商是Teleca(Obigo)和Openwave。,WAP2.0与PROX

6、Y(一),在Wap时代，代理服务器（Proxy Server）扮演了重要的角色，Proxy是连接手机和传统意义WWW网络的桥梁，Proxy的主要功能有如下几个方面：1.Web缓冲 2.安全功能 3.内容转换,PROXY的主要功能,安全功能,http:/:8080,http:/:8080,客户端request:http:/,response:302,跳转:302,客户端request:http:/,response:302,跳转:302,PROXY检查sina是否在列表中,PROXY检查网页的Meta字段,WAP2.0与PROXY(三),Baidu wml版,简版 Baidu,内容转换,WAP2

7、.0与PROXY(三),Baidu PC版,浏览器分类-Transcoding浏览器,Transcoding技术 顾名思义就是转码技术，由于上文提到的Wap协议的特性，使得传统的Wap浏览器无法访问丰富的互联网资源，为了实现这个目的，出现了基于转码的方案。,浏览器分类-Transcoding浏览器,近两年3G网络的普及及智能机的长度发展，带宽和终端处理能力不再成为限制浏览器发展的瓶颈。,浏览器分类-Transcoding浏览器,一是互联网应用的代码非常的不规范，国内网页尤其突出，在内容转换过程中的兼容性是非常难保证的。二是网页上存在着大量的 脚本及动态应用，这时依赖服务器的脚本识别也是非常难以

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

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

10、器能够与Web服务器建立连接。,HTTP协议的工作原理,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-

11、Not Modified,307-临时跳转(仅处理Get请求)4xx 请求错误400-Bad request(语义或者参数有误),401-Unauthorized,403-Forbidden,404 Not Found(404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下)5xx 服务器错误501-Not Implemented(服务器不支持当前某个功能),502-Bad Gateway,504-Gateway Timeout,HTTP响应码(二),Request,Response,何谓WML，HTML，XHTML,Wireless Markup L

12、anguage，缩写为WML，是WAP规范指定的基于XML的基本内容格式，使用支持该规范的设备例如移动电话可以浏览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.019

13、95年11月作为RFC 1866发布.HTML 3.21996年1月14日HTML 4.01997年12月18日，W3C推荐标准HTML 4.01（微小改进）1999年12月24日，W3C推荐标准,WML，HTML，XHTML,XHTML，表现方式与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推荐标准。XHT

14、ML 2.0，W3C工作草案。XHTML 5，从XHTML 1.x的更新版，基于HTML 5草案,W3C标准.,浏览器工作原理,Render引擎,DOM HTML,DOM EVENT,DOM Core,XML/HTML Tokenizer/Parser,JavaScript引擎,HTTP协议栈,TCP/IP协议栈,窗口管理,书签,历史记录,密码管理,Application,内核,操作系统,浏览器内核工作流程图,浏览器的工作原理,浏览器内核内核是浏览器工作的心脏衡量内核好坏的标准：1.架构合理Email ClientWidgets 2.渲染效率高,浏览器的工作原理(一),高速模式：Webkit引

15、擎，渲染快，安全性好。,兼容模式：IE内核，兼容性好，支持大多数IE兼容网页。,支持多内核的浏览器-Maxthon,Mozilla Firefox本身是单内核的，但支持第三方扩展，能够实现IE和Firefox两个内核自由切换浏览，满足中国用户的需求,浏览器引擎,浏览器引擎,嵌入式浏览器引擎,CSS的作用,Cascading Style Sheets（层叠样式表），简写为CSS，由W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的语言。目前最新版本是CSS 2.1。下一版本CSS 3仍然在开发过程中。Andriod2.2目前支持CSS 2.

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

17、ra 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-异步JavaScript和XML。AJAX颠覆了传统的表单式交互方式，通过异

18、步的xml http request和response，大大减少了流量。Google地图、Gmail等均采用了AJAX技术,1.目录,浏览器的发展历史嵌入式浏览器分类浏览器工作原理Android Webkit简介,Webkit Architecture,Android Browser 主要分成三个部分:1.Browser app(java)；2.Framework WebView(Java);3.Webkit Engine(C+):JavascriptCore,WebCore,Webkit;,1.JavaScriptCore；,Javascript 引擎KJS进化到Squirrel Fish基

19、本的模板库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实现，

20、里面包括了android 平台的实现，具体是通过JNI和framework 里面的webview。WebCore的高层封装提供与BackEnd一直的平台支撑提供给WebCore用户操控相关的支撑接口,Url的打开过程（一）,Url的打开过程（二）,例子:在应用中嵌入浏览器窗口,Android SDK提供了很方便的WebView控件,用于显示网页,数据来源可以是一个网址,一段网页代码或者本地的一个html文件。步骤1.创建修改namifest文件,添加 步骤2.修改layout文件,添加WebView控件,例子:在应用中嵌入浏览器窗口,步骤3.修改代码，加载url WebView engine=

21、(WebView)findViewById(R.id.web_engine);engine.loadUrl(http:/);这样，嵌入式的浏览器窗口就被加入到原来的应用里了，如果想要添加前进后退等功能，可以用如下方法：reload():-Refreshes and re-renders the page.goForward():-Goes one step forward in browser history.goBack():-Goes one step back in browser history.setJavaScriptEnabled(true):-Enable or disable javascript engine.,例子:在应用中嵌入浏览器窗口,最新的浏览器技术简介,JQuery,参考文献,2009-2013年中国手机浏览器行业市场调查与发展前景预测分析报告 http:/,