浏览器是怎样工作的(一):基础知识

标签: 前端开发 chrome CSS Firefox Gecko | 发表时间:2012-04-17 10:11 | 作者:hfliu
出处:http://ued.ctrip.com/blog

译注:

前两天看到一篇不错的英文文章,叫做 How browsers work,该文概要的介绍了浏览器从头到尾的工作机制,包括HTML等的解析,DOM树的生成,节点与CSS的渲染等等,对于想学习浏览器源码的同学来说,实在是很棒的一篇科普文章。尽管对于每部分,该文的描述并不足够深入,但综合来讲,即使没兴趣学浏览器源码,也还是有一些值的学习的思想在里面的,可以权当开拓下视野,有益无害。

于是,我想分节挑重点翻译一下与大家分享。以下为译文:

我们要讨论的浏览器

当今主流浏览器有五类: Internet Explorer, Firefox, Safari, Chrome 以及 Opera。 我会基于开源浏览器 Firefox, Chrome 与 Safari(部分开源)来举例说明。 按照 W3C 浏览器统计 , 当今(2009年10月), Firefox, Safari 及 Chrome 的总占有率已接近 60%,这是非常可观的。

浏览器的主要功能

浏览器的主要功能是展示网页资源,也即请求服务器并将结果显示在浏览器窗口中。资源的格式一般是HTML,但也有PDF、图片等其它各种格式。资源的定位由URL来实现。更多细节请参考“网络”一节。

浏览器释与展现HTML文件的方式是参照HTML与CSS规范来的,这些规范由 W3C (World Wide Web Consortium) Web标准化组织来维护。 当前HTML版本是 4 ( http://www.w3.org/TR/html401/),HTML5正在进行中。当前CSS版本为2 ( http://www.w3.org/TR/CSS2/),同样,版本3进行中。

过去几年里,各版本浏览器有许多各自的扩展,这使网页作者很难写出兼容性好的内容。如今这一严重的兼容性问题已经开始好转,各种浏览器都开始兼容标准规范。

各浏览器的用户接口有很多相同的地方,下面是一些常用的用户接口:

  • 用于输入URI的地址栏
  • 前进后退按钮
  • 书签选项
  • 刷新停止按钮,用于控制页面加载
  • 主页按钮

很奇怪的是,浏览器的用户接口并没有写进任何规范中,这种极大的相似性只是在多年的实践经验以及浏览器之间的相互借鉴中形成的。HTML5规范没有规定浏览器必须有哪些交互元素,但是列出了一些通用元素,比如地址栏, 状态栏和工具栏。 当然,特定浏览器有自己独有的特性,如Firefox的下载管理器。更多内容请参考用户接口一节。

浏览器的上层结构

浏览器的主要概念如下 ( 1.1):

  1. 用户接口 – 包括地址栏,前进后退,书签菜单等窗口上除了网页显示区域以外的部分。
  2. 浏览器引擎 – 查询与操作渲染引擎的接口。
  3. 渲染引擎 – 负责显示请求的内容。比如请求到HTML, 它会负责解析HTML 与 CSS 并将结果显示到窗口中。
  4. 网络 – 用于网络请求, 如HTTP请求。它包括平台无关的接口和各平台独立的实现。
  5. UI后端 – 绘制基础元件,如组合框与窗口。它提供平台无关的接口,内部使用操作系统的相应实现。
  6. JavaScript解释器。用于解析执行JavaScript代码。
  7. 数据存储。这是一个持久层。浏览器需要把所有数据存到硬盘上,如cookies。新的HTML规范 (HTML5) 规定了一个完整(虽然轻量级)的浏览器中的数据库:’web database’。

图1: 浏览器的主要概念

需要注意的是,与其它浏览器不同,chrome使用多个渲染引擎实例,每个Tab一个,每个Tab都是一个独立进程。

我会拿出一个章节来介绍每块内容。

组件间的通信

Firefox 与 Chrome 开发了一种特殊的通信架构,这会在一个特殊章节讨论。

相关 [浏览器 工作 基础] 推荐:

浏览器是怎样工作的(一):基础知识

- - 携程UED
前两天看到一篇不错的英文文章,叫做 How browsers work,该文概要的介绍了浏览器从头到尾的工作机制,包括HTML等的解析,DOM树的生成,节点与CSS的渲染等等,对于想学习浏览器源码的同学来说,实在是很棒的一篇科普文章. 尽管对于每部分,该文的描述并不足够深入,但综合来讲,即使没兴趣学浏览器源码,也还是有一些值的学习的思想在里面的,可以权当开拓下视野,有益无害.

web基础-web工作原理,http协议,浏览器缓存

- - 浏览器 - 互联网 - ITeye博客
4,cookie和session. 平时用浏览器,输入网址后回车,页面响应我们想要浏览的内容,简单操作的背后蕴涵了什么原理. 当输入url回车后,客户端(浏览器)会去请求DNS服务器,通过DNS获取域名对应的IP地址,然后通过这个地址找到对应的服务器,要求建立TCP连接,建立连接,客户端发送httpRequest(请求包)后,服务器接收并开始处理请求,调用自身服务,返回httpResponse(响应包),客户端收到响应包后开始渲染body主体,等到全部接收,断开与该服务器端的TCP连接.

[转]手机浏览器工作原理

- - 小鸥的博客
现在电脑上的浏览器越来越多,出现了几大内核的浏览器纷争的局面. (小知识)几种常见的浏览器内核简介及优缺点:. Trident:Windows 下的 IE 浏览器使用的内核代号. 除 IE 外,众多的 IE Shell(如 Maxthon)都使用这个内核. 70%的占有率,几乎所有的互联网页面都要参照这个内核进行页面优化所以页面显示效果最好.

【快乐周末】浏览器是如何工作的?

- muqing - 谷奥——探寻谷歌的奥秘
今天这个漫画给我们详细的讲述了浏览器的工作过程,看着很累啊. © gkp 发表于 谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2010. | 16 条评论 | 永久链接 | 关于谷奥 | 投稿/爆料.

浏览器是怎样工作的:渲染引擎,HTML解析(连载二)

- - 携程UED
渲染引擎的职责是……渲染,也就是把请求的内容显示到浏览器屏幕上. 默认情况下渲染引擎可以显示HTML,XML文档以及图片. 通过插件(浏览器扩展)它可以显示其它类型文档. 比如使用PDF viewer插件显示PDF文件. 我们会在一个专门的章节讨论插件与扩展. 在这一节我们将专注渲染引擎的主要用途——显示用CSS格式化的HTML与图片.

Silk 浏览器:Google? No!

- 橙子 - 爱范儿 · Beats of Bits
前苹果员工, Blogger Chris Espinosa 指出, Amazon 的 Silk 浏览器技术,让 Amazon 不能把自己置于 Google 的控制之下. Silk 在云端为用户组织和优化网页,之后再下载到本地. 这样做的结果是, Amazon 能掌握用户在网络上的一举一动. 不仅仅包括在 Amazon.com 下的订单.

浏览器检测

- - JavaScript - Web前端 - ITeye博客
1.navigator 对象. 由于每个浏览器都具有自己独到的扩展, 所以在开发阶段来判断浏览器是一个非常重要的步骤. 虽然浏览器开发商在公共接口方面投入了很多精力, 努力的去支持最常用的公共功能;但在现实中,浏览器之间的差异,以及不同浏览器的“怪癖”却是非常多的,因此客户端检测除了是一种补救措施,更是一种行之有效的开发策略.

浏览器缓存机制

- Leo Pay - Learning Correcting Improving
Cache-Control 是最重要的规则. 这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令. 这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为. 缓存指令是单向的,即请求中存在一个指令并不意味着响应中将存在同一个指令. cache-control 定义是:Cache-Control = "Cache-Control" ":" cache-directive.

浏览器进化史

- Hao Zeng - 爱范儿 · Beats of Bits
这张图非常直观,纵轴是浏览器存在的时间线,横轴代表使用此浏览器的用户数量. 出现在图片中的浏览器包括:Netscape、Opera、IE、Firefox、Safari 和 Chrome. Netscape:1994 年诞生,1995 年用户基数达到最大(2.x 版本). 1998 年 Netscape 被创业杀手 AOL 收购,再加上微软的冲击,逐渐走向衰败,2008 年彻底终结.

百度浏览器评测

- 溪梦 - 月光博客
  百度今年在客户端方面的动作不断,目前已经推出了百度输入法、百度电脑管家、百度安全卫士、百度影音,百度压缩软件,而现在,百度客户端领域的重要产品百度浏览器已经进入了测试阶段,不久后将正式对外发布.   百度在其公关稿里称:“百度浏览器具备以下几点特性:第一,整合百度平台的热门应用,使用户一键触达;第二,采用沙箱安全技术将用户电脑与病毒木马隔离;第三,融合百度搜索技术的智能地址栏;第四,界面设计简洁易操作……百度希望通过浏览器的改进,推动互联网的良性发展,吸引更多的用户来使用互联网,增进使用的频度与时长,最终推动搜索这个媒体平台的发展和巩固.