主页 > 知识库 > 网络编程 > 其他 >

翻译:浏览器内部的工作原理( Tutorials How Browsers Work: Behi

来源:网络 作者:waylon 发表于:2012-07-02 08:49  点击:
译文:引自http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ 作为一名web开发人员,了解浏览器的内部运作会帮助你做出更好的决定和了解最佳实践背后的原理。这是一篇相当长的文章,我们建议你花费一些时间专研,我们保证你会得到意外的收
译文:引自http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
作为一名web开发人员,了解浏览器的内部运作会帮助你做出更好的决定和了解最佳实践背后的原理。这是一篇相当长的文章,我们建议你花费一些时间专研,我们保证你会得到意外的收获。

第一章

简介

浏览器可能是目前使用最广的软件,在这里,我将解释它们在视窗背后是如何运行的。当你在地址栏中输入google.com,直到页面中显示google主页,这其中到底发生了什么。
我们讨论的浏览器
如今使用的5款主要浏览器-ie、firefox、safari、chrome和opera。我将从开源浏览器 -firefox、chrome和部分开源的safari中给出一些实例。通过statCounter浏览器分析,这三款浏览器在整个市场60%的份额 (2011\8)。所以如今的开源浏览器是商业浏览器的组成部分。
浏览器的主要功能
浏览器的主要功能是显示你选择的资源,通过请求从服务器端返回宾显示在浏览器视窗中,这资源通常是一个网页,但也有可能是pdf、图片或者其他类型。通过统一资源定位符来指定资源位置。
浏览器解释和显示方式是通过文档和样式说明书来指定的。这些说明书通过w3c 组织(致力于web标准化组织)来维护。
这些年的发展,浏览器厂商仅仅遵循说明书中的部分细节,并且开发了各自的扩展。对于web开发者来说就导致很严重的兼容性问题。今天大部分的浏览器还是或多或少的遵循这些说明书。
各浏览器之间的用户界面有着大量共同之处,其中共同的用户界面元素如下:
  1. 地址栏
  2. 前进、后退按钮
  3. 书签项
  4. 刷新、停止当前加载的元素
  5. 主页面按钮
足够策略,浏览器用户界面并没有在任何官方的说明书中指定,而是源自多年的用户体验和浏览器之间的模仿。 Html5说明书中也没有定义应该有哪些界面元素,但是却列出一些共同的元素,其中包括地址栏、状态栏和工具栏。当然,还有些在指定的浏览器中的一些独特 特性,如firefox的下载管理。

浏览器的高级结构

浏览器的主要部分

  1. 用户界面-包括地址栏、后退/前进按钮,书签菜单等。其中的每一个部分都在是你请求过的页面中看到,除了主窗口。
  2. 浏览器引擎-安排着界面和渲染引擎之间的活动
  3. 渲染引擎-显示着请求后相应地内容。如如果请求的内容是html片段,浏览器解析这个片段及相应的样式,并在浏览器视窗中显示解析的内容。
  4. 网络-利用网络接口,如http请求,每个浏览器平台都有着平台依赖接口和底层的实现。
  5. UI后端-利用绘制基本的组件如combo 盒子和窗口。暴露出的一些接口并非是浏览器平台指定的而是通过调用底层操作系统提供的接口。
  6. js解释-用作解析和执行js代码
  7. 数据存储-这是持久层。浏览器需要在硬盘上保存各种类型的数据,如cookies。Html5说明书定义了web
    database,是一个轻量级的完整浏览器端数据库
    enter image description here
重要的是要记住 chrome浏览器,不像大部分的浏览器,渲染引擎产生多个实例,对于每一个tab都是一个独立的过程。
-------------------------------------更新----------------------------------

第二章

渲染引擎

渲染引擎的责任就是将渲染完的放在浏览器窗口中以显示请求的数据。
渲染引擎默认是能显示html、xml和图片,并且通过一些插件可以显示其他类型资源,如使用 a PDF viewer插件显示PDF格式。然而,本章我们将集中在这个主要例子上。使用css格式化显示html片段和图片。
我们参考的浏览器是-firefox、chrome和safari构造在上面的两种渲染引擎上。Firefox使用是自家生产的mozilla渲染引擎-gecko,Safari和chrome都使用webkit.
Webkit是一个开源的渲染引擎,当初只是作为 liunx平台的引擎,通过苹果公司的修改开始支持mac和window系统。

主要流程

渲染引擎从网络层开始获取请求文档的内容,通常在8k字节的数据块内完成。
基本的渲染引擎流程是:
渲染引擎开始解析html片段之后将标签转换成称之为内容树的dom节点中。接着解释外部引用和内联使用的样式数据。最后样式信息和文档中可视化结构一起被用于创建另一棵渲染树`。
渲染树包括可视化的矩形属性,如颜色和大小。使用矩形是为了在浏览器窗口正确显示。
渲染树构建之后,渲染树将通过”layout(布局)”处理。这意味着要给出每一个节点在浏览器窗口中的准确位置。接下来的策略就是绘制-渲染树将被反转,使用UI后端层绘制每一个节点。
重要的是要理解这是一个渐进的过程。为了更好的用户体验,渲染引擎将竟可能的在浏览器中显示内容。一直等到html片段开始创建和布局渲染树之后开始解析。部分内容将会被解析和显示,直到剩下的内容从网络返回回来之后在继续解析。
主流程例子:
enter image description here
图:webkit 主流程
enter image description here
图:mozilla gecko渲染引擎主流程
gecko调用可视化、格式化“框架树”。每一个元素都是一个框架。Webkit使用的术语是“渲染树”,并包括“渲染对象”。Webkit使用的 “布局”术语来代替在gecko中称之为”回流 reflow”。“attachment链接”是webkit术语中链接 dom节点和可视化信息(css样式)创建渲染树。相对于gecko使用一个准确的层在html片段和dom树之间这是一个次要非语义的差别。Gecko 称之为“内容渗透(content sink)”也是创建dom元素的工厂,我们将讨论其中每一个部分。
--------------------------------------更新线-------------------------------------------------------

有帮助
(2)
100%
没帮助
(0)
0%