摘要：值得注意的是，谷歌浏览器和大多数浏览器不同，每一个选项卡都是渲染引擎的一个实例，都拥有独立的进程。组件之间的通信火狐和谷歌都发展了一个特殊的通信结构，后面我们将会多带带来讲。渲染引擎我们所讨论的几款浏览器火狐谷歌都是基于两种渲染引擎建立的。
写在前面
这篇文章是一篇译文，年代有点久，部分内容有过时，请读者仔细阅读，翻译自“How browser work”，原文地址为点击这里查看原文
简介web浏览器可能是我们使用最广的软件了。在这篇文章中我将会详细介绍一下浏览器在背后究竟是如何工作的。我们将会知道，在你在地址栏键入“google.com”到浏览器呈现页面的这段时间内，究竟发生了什么。
我们将会探讨的浏览器
如今我们常用的浏览器主要有5种：IE、Firefox、Safari、Chrome以及Opera。我们将会以开源浏览器Firefox、Chrome和Safari（部分开源）为例，据W3C浏览器相关统计，以上三种浏览器占比大概有60%（2009 年 10月）。由此可见，现如今开源的浏览器已经占据浏览器市场的大部分了。
浏览器主要功能
浏览器主要的功能是通过向服务器请求，来获取你所想要的网络资源，并将它渲染到浏览器窗口中。而资源类型通常是html文件，但也可能是PDF，图片或者是其他类型的资源。资源地址通常是由用户键入的URI(统一资源标识符)来决定的。更多内容在以下网络部分会讲到。
浏览器渲染解读html文件是依据定义好的html结构以及css样式。这些规则描述主要是由W3C组织来制定的。现在的html的版本是4，版本5正在规划准备中。而css的版本是2，同样的，css3也正在规划。
很多年以来，各种浏览器只有部分是遵从标准的，同时各个浏览器厂商都发展了他们自己独有的东西。这给web开发者带来了很多兼容性问题。如今多数浏览器或多或少会遵从标准。
在用户界面上，各个浏览器之间还是有很多相似之处的。比如说：
地址栏用于键入URI
回退和前进按钮
书签选项
用于刷新和停止的按钮
主页按钮
令人诧异的是，没有任何正式的规范指定用户界面，这只是多年经验和浏览器相互模仿形成的良好习惯。HTML5规范不定义浏览器必须具备的UI元素，但列出了一些常见元素。如地址栏、状态栏、工具栏等。当然，像Firefox下载管理器这样的功能，是独有的。
更多相关内容我们在用户界面部分再介绍。
浏览器深层结构
用户界面－包括了地址栏、返回前进按钮、书签菜单等。在每一个请求页内，你都可以看到这些UI组件，除了主窗口。
浏览器引擎－用来查询和操作渲染引擎的接口
渲染引擎－负责渲染请求的内容。比如，若果请求的资源是html文件，那么渲染引擎负责解析html以及css，然后再把结果渲染到页面。
网络连接－用于处理网络请求，如http请求。它不依赖不同的平台，这意味着它可以在不同平台工作。
UI后台－用于渲染基础部件，如多选框、窗口等。它暴露了一个不是特定平台的通用接口，在底层调用了操作系统的用户接口。
js引擎－用于解析javascript代码
数据存储－这是一个持久层。浏览器需要在硬盘中存储各式数据，比如cookie。HTML5定义了‘web database’这样轻量级的web浏览器存储技术。
值得注意的是，谷歌浏览器和大多数浏览器不同，每一个选项卡都是渲染引擎的一个实例，都拥有独立的进程。我将会对以上每个组件都写一个章节来讲解。
组件之间的通信
火狐和谷歌都发展了一个特殊的通信结构，后面我们将会多带带来讲。
渲染引擎说到渲染引擎的责任，好吧，所谓渲染，就是将请求到的内容展现在浏览器屏幕上。
默认情况下，渲染引擎会将HTML和XMl文档以及图片展示出来。当然，通过一些插件（浏览器扩展），渲染引擎也能够展现其它类型的文档。举例来说，用PDF扩展，渲染引擎可以展现PDF文档。我们会多带带拿一章篇幅来介绍浏览器插件和扩展。在这章里，我们会把重点放在最主要的情况：渲染用CSS修饰的HTML和图片。
渲染引擎
我们所讨论的几款浏览器－火狐、谷歌、Safari都是基于两种渲染引擎建立的。火狐使用的是Gecko－一种Mozilla自主研发的渲染引擎。Safari和谷歌都是使用Webkit渲染引擎。
Webkit是开源的，它一开始是作为Linux平台上的引擎，经过苹果公司改良后支持了Mac和Windows平台。详情请参阅这里
主要流程
渲染引擎将会先通过网络获取请求的文档内容，这不操作通常以8k分块的方式完成。
以下是渲染引擎拿到数据后主要的工作流程：
解析HTML并构建DOM树 => 构建render树 => render树布局 => render树绘制
渲染引擎开始解析HTML文档，并把标签转化成内容树中的DOM节点。同时它也开始解析样式数据，外链的css文件以及style标签内的样式。所有这些样式数据以及HTML中的可见性指令都是用来创建另一棵树－－render 树。
render树由一些包含颜色、尺寸等视觉属性的小方块组成。这些小方块将会按照正确的顺序显示在屏幕上。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/82531.html
摘要：每种可解析的格式必须具有由词汇及语法规则组成的特定的文法，这被称为上下文无关文法。解析器将会从词法分析器获取一个新符号，并且尝试用某一种语法规则去匹配它。第二个匹配到规则的是，它匹配到第三条语法规则。 衔接 接着上文继续。 在构建好render树后，浏览器就开始进行布局了。这意味着浏览器会给每个节点正确的坐标，让它们出现在该出现的地方。下一步就是进行绘制了，浏览器将会遍历render树...
摘要：主题来自于的典型面试问题列表。有多种方法来处理事件委托。这种方法的缺点是父容器的侦听器可能需要检查事件来选择正确的操作，而元素本身不会是一个监听器。 showImg(http://fw008950-flywheel.netdna-ssl.com/wp-content/uploads/2014/11/Get-Hired-Fast-How-to-Job-Search-Classifieds...
摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...
阅读 390·2021-09-24 09:48
阅读 2380·2021-08-26 14:14
阅读 416·2019-08-30 13:08
阅读 1300·2019-08-29 15:22
阅读 2830·2019-08-29 11:06
阅读 894·2019-08-26 18:26
阅读 825·2019-08-26 13:53
阅读 2312·2019-08-26 12:21
