浏览器内部工作原理

网页浏览速度最快的浏览器内核； • 4.Webkit：Safari 和Chrome浏览器使用的内核代号,使用
的还有塞班手机浏览器，安卓默认浏览器； • 5.Webkit是一款开源渲染引擎，它本来是为Linux平台研发
的； • 6.Geoko——Mozilla自主研发的渲染引擎；
浏览器的主要功能
• 浏览器的主要功能是将用户选择的web资源呈现 出来，它需要从服务器请求资源，并将其显示在 浏览器窗口中，资源的格式通常是HTML，也包 括PDF、image及其他格式。用户用URI （Uniform Resource Identifier统一资源标识符， 是URL的一个子集）来指定所请求资源的位置；
post-check=0, – pre-check=0 – Expires: Sat, 01 Jan 2000 00:00:00 GMT – P3P: CP="DSP LAW" – Pragma: no-cache – Content-Encoding: gzip – Content-Type: text/html; charset=utf-8 – X-Cnection: close – Transfer-Encoding: chunked – Date: Fri, 12 Feb 2010 09:05:55 GMT • 8.The browser begins rendering the HTML(浏览器开始显示HTML)
• Connection : 表示要求服务器为了后边的请求不要关闭TCP连接
• 请求中也包含浏览器存储的该域名的cookies，cookies会存储登录用户名，服务器分配的密码和一些用户设置等
• 像“http://facebook.com/”中的斜杠是至关重要的。这种情况下，浏览器能安全的添加斜杠。而像 “http: //example.com/folderOrFile”这样的地址，因为浏览器不清楚folderOrFile到底是文件夹还 是文件，所以不能自动添加 斜杠。这时，浏览器就不加斜杠直接访问地址，服务器会响应一个重定 向，结果造成一次不必要的握手
而非“http://facebBiblioteka Baiduok.com/”。 • 5.The browser follows the redirect(浏览器跟踪重定向地址)
– GET http://www.facebook.com/ HTTP/1.1 – Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...] – Accept-Language: en-US – User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...] – Accept-Encoding: gzip, deflate – Connection: Keep-Alive – Cookie: lsd=XW[...]; c_user=21[...]; x-referer=[...] – Host: www.facebook.com • 6.The server ‘handles’ the request(服务器“处理”请求)
中保存类似cookie的各种数据；
用户界面
浏览器引擎
数
据
存
储
渲染引擎
网络
JS解释器
UI后端
浏览器组件之间联系图
渲染引擎
• 1. 浏览器最重要的核心部分是“Rendering Engine”即渲染引擎，也可译为“解释引 擎”，一般将之称为“浏览器内核”；负 责对网页语法的解释（如HTML、 JavaScript）并渲染（显示）网页；
浏览器内部工作原理
浏览器可以被认为是使用最广泛的软件，我将 介绍浏览器的简单基本的工作原理，我们将看 到，从你在地址栏输入facebook.com到你看到
facebook主页过程中都发生了什么。
URL解析过程
• 1. You enter a URL into the browser（输入一个 url地址）
• HTML和CSS规范中规定了浏览器解释html文档 的方式，由W3C组织对这些规范进行维护
浏览器的主要构成
• 1. 用户界面 － 包括地址栏、后退/前进按钮、书 签目录等；
• 2. 浏览器引擎 － 用来查询及操作渲染引擎的接 口；
• 3. 渲染引擎 － 用来显示请求的内容，例如，如 果请求内容为html，它负责解析html及css，并将 解析后的结果显示出来；
• 4. 网络 － 用来完成网络调用，例如http请求，它 具有平台无关的接口，可以在不同平台上工作；
• 5. UI后端 － 用来绘制类似组合选择框及对话框 等基本组件，具有不特定于某个平台的通用接口， 底层使用操作系统的用户接口；
• 6. JS解释器 － 用来解释执行JS代码； • 7. 数据存储 － 属于持久层，浏览器需要在硬盘
• 9.The browser sends requests for objects embedded in HTML(浏览器发送获取嵌入 在HTML中的对象)
– 在浏览器显示HTML时，它会注意到需要获取 其他地址内容的标签。这时，浏览器会发送一 个获取请求来重新获得这些文件；
– 比如图片，CSS样式表，JavaScript
– Accept-Encoding: gzip, deflate
– Connection: Keep-Alive
– Host: facebook.com
– Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...] • Get : 以GET的方式提交发送请求 | POST • Http://facebook.com/ 发送请求的URL地址 • Http/1.1 HTTP协议 • User-Agent : 浏览器自身定义 • Accept-Encoding : 希望接收什么类型相应数据
• 2.渲染引擎可以显示html、xml文档及图片， 它也可以借助插件（一种浏览器扩展）显 示其他类型数据，例如使用PDF阅读器插 件，可以显示PDF格式
渲染引擎的主要职能
解析HTML 以构建DOM树
构建渲染树 (render)
布局渲染树 (render)
绘制渲染树 (render)
这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈 现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它 是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
DOM
HTML
HTML Parser
DOM树
Layout
Style Sheets
附件 attachment
CSS Parser
Style Rules
Render树
Painting
webkit渲染引擎主流程
Display
解析与DOM树的构建
• 1.解析(Parsing-general)：解析一个文档即将其转 换为具有一定意义的结构——编码可以理解和使 用的东西。解析的结果通常是表达文档结构的节 点树，称为解析树或语法树；
HTMLDivElement
Text
Test
CSS解析
• CSS：级联样式表，不同于html，css属于 上下文无关文法，可以用前面所描述的解 析器来解析。CSS规范定义了css的词法及 语法文法。
• The browser sends further asynchronous (AJAX) requests(浏览器发送异步（AJAX） 请求)
– 在Web 2.0伟大精神的指引下，页面显示完成 后客户端仍与服务器端保持着联系
简单介绍
• 目前主要6种主流浏览器： • 1.chrome(谷歌个人喜欢) • 2.FireFox(火狐,有许多便捷的插件可以使用) • 3.IE(历史比较,落魄王者) • 4.Opera浏览器(网页浏览速度最快浏览器) • 5.Safari 浏览器(Apple用户中最受欢迎的浏
• 2.文法(Grammars)：解析基于文档依据的语法规 则——文档的语言或格式；
• 3.解析器－词法分析器(Parser－Lexer combination)：解析可以分为两个子过程——语 法分析及词法分析;
• 4.转换(Translation)
DOM(文档对象模型)
• DOM是文档对象模型的缩写，它是html文档的对 象表示，作为html元素的外部接口供js等调用；
– Web 服务器软件 – 请求处理
• 7.The server sends back a HTML response(服务器发回 一个HTML响应)
– HTTP/1.1 200 OK – Cache-Control: private, no-store, no-cache, must-revalidate,
览器) • 6.360浏览器(中国用户的大多数选择)
浏览器内核
• 1.IE取得巨大成功起源于其拥有一个成熟稳定的内核--Trident页面解析引擎，现在国内普遍的浏览器：遨游，腾 讯，世界之窗，360，搜狗都是基于IE流；
• 2.Gecko：Mozilla Firefox 浏览器使用的内核代号； • 3.Presto：Opera 浏览器使用的内核代号，这是目前公认
• 4.The facebook server responds with a permanent redirect (facebook服务的永久重定 向响应)
– HTTP/1.1 301 Moved Permanently – Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0, – pre-check=0 – Expires: Sat, 01 Jan 2000 00:00:00 GMT – Location: http://www.facebook.com/ – P3P: CP="DSP LAW" – Pragma: no-cache – Set-Cookie: made_write_conn=deleted; expires=Thu, 12-Feb-2009 05:09:50 GMT; – path=/; domain=.facebook.com; httponly – Content-Type: text/html; charset=utf-8 – X-Cnection: close – Date: Fri, 12 Feb 2010 05:09:51 GMT – Content-Length: 0 – 服务器给浏览器响应一个301永久重定向响应，这样浏览器就会访问“http://www.facebook.com/”
– www.baidu.com
• 2.The browser looks up the IP address for the domain name（浏览器查找域名的ip地址）
– 浏览器缓存 – 系统缓存 – 路由器缓存 – ISP DNS缓存 – 递归搜索
• 3.The browser sends a HTTP request to the web server(浏览器给web服务器发送一个 HTTP请求)
• <html>
<head> <title>DOM</title>
</head> <body>
<p>This is P Label</p> <div>This is DIV Label</div> </body>
• </html>
HTMLHtmlElement HTMLBodyElement
HTMLParagraphElement
– GET http://facebook.com/ HTTP/1.1
– Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
– User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]