浏览器内部工作原理

浏览器内部工作原理


浏览器的主要功能
浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，
资源的格式通常是HTML，也包括PDF、image及其他格式。

用户用URI（Uniform Resource Identifier统一资源标识符）来指定所请求资源的位置

HTML和CSS规范中规定了浏览器解释html文档的方式，由W3C组织对这些规范进行维护，W3C是负责制定web标准的组织。


浏览器的主要构成（High Level Structure）
浏览器的主要组件包括：
1. 用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
2. 浏览器引擎 － 用来查询及操作渲染引擎的接口。
3. 渲染引擎 － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
4. 网络 － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
5. UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
6. JS解释器 － 用来解释执行JS代码。
7. 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术





解析与DOM树[b]构建（Parsing and DOM tree construction）[/b]
将HTML文档解析成DOM树（DOM元素及属性节点组成）。
DOM是文档对象模型的缩写，它是html文档的对象表示，作为html元素的外部接口供js等调用。
树的根是“document”对象。

解析结束时的处理（Action when the parsing is finished）
文档状态将被设置为完成，同时触发一个load事件。


CSS解析（CSS parsing）
在解析文档的过程中会进行CSS的解析,并会生成另一个CSS的DOM树（样式树）（猜测），这个树并与HTML的DOM树有关联


渲染树
HTML的DOM树与CSS的DOM树进行了关联的对象


绘制（Painting）
绘制阶段，遍历渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上，绘制使用UI基础组件，这在UI的章节有更多的介绍。


动态变化
浏览器总是试着以最小的动作响应一个变化，所以一个元素颜色的变化将只导致该元素的重绘，元素位置的变化将
大致元素的布局和重绘，添加一个Dom节点，也会大致这个元素的布局和重绘。一些主要的变化，比如增加html元
素的字号，将会导致缓存失效，从而引起整体的布局和重绘。



渲染引擎的线程
事件循环
浏览器主线程是一个事件循环，它被设计为无限循环以保持执行过程的可用，等待事件（例如layout和paint事件）并执行它们。



渲染引擎
渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。
渲染引擎最主要的用途——显示应用了CSS之后的html及图片

渲染主流程
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树



渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS文件及style标签中的样式信息。
这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。

Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。

Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，
即遍历render树，并使用UI后端层绘制每个节点。

值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，
并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，
同时，可能还在通过网络下载其余内容。



javascript执行
浏览器是至上而下解析html文档中的代码的

html文档中script越靠前通常越先执行

外部js文件中的代码 比 内嵌的js代码先执行

通过设置script元素的defer属性，可以设置包围其内的js代码是在html文档加载完后才执行该js代码，
还是html代码加载到该js代码时，就执行。

设置defer属性值为true后，script中没有包含在函数中(并该函数没被调用)的代码会立即执行，在其函数中则不会。

onload事件函数是指html文档加载结束后执行的函数，当需要操作HTMl的DOM树时，通常应该在onload事件函数中操作，
防止html还没加载完就执行js代码时，找不到指定的元素(标签)和内容。

onload标准来说与匿名函数配合使用：window.onload=function(){ html加载后做的事;}



参考原文：http://kb.cnblogs.com/page/129756/
参考原文：http://zhidao.baidu.com/link?url=-e35RP0YDbqugpRZBln7tdn3Tk_8DBFEQM2Z0c6394QNtTi5BEM0iE3r95_M_3gYBOKnVIW9Y0CCwrlbgGDzeq