当前位置:首页 > web > 正文

翻译:浏览器内部的工作原理( Tutorials How Browsers Work: Behind the scenes of modern web browsers)之简介

作为一名web开发人员,了解浏览器的内部运作会帮助你做出更好的决定和了解最佳实践背后的原理。这是一篇相当长的文章,我们建议你花费一些时间专研,我们保证你会得到意外的收获。

第一章

简介

浏览器可能是目前使用最广的软件,在这里,我将解释它们在视窗背后是如何运行的。当你在地址栏中输入google.com,直到页面中显示google主页,这其中到底发生了什么。

我们讨论的浏览器
如今使用的5款主要浏览器-ie、firefox、safari、chrome和opera。我将从开源浏览器-firefox、chrome和部分开源 的safari中给出一些实例。通过statCounter浏览器分析,这三款浏览器在整个市场60%的份额(2011\8)。所以如今的开源浏览器是商 业浏览器的组成部分。

浏览器的主要功能
浏览器的主要功能是显示你选择的资源,通过请求从服务器端返回宾显示在浏览器视窗中,这资源通常是一个网页,但也有可能是pdf、图片或者其他类型。通过统一资源定位符来指定资源位置。

浏览器解释和显示方式是通过文档和样式说明书来指定的。这些说明书通过w3c 组织(致力于web标准化组织)来维护。
这些年的发展,浏览器厂商仅仅遵循说明书中的部分细节,并且开发了各自的扩展。对于web开发者来说就导致很严重的兼容性问题。今天大部分的浏览器还是或多或少的遵循这些说明书。

各浏览器之间的用户界面有着大量共同之处,其中共同的用户界面元素如下:

<ol>

  • 地址栏
  • 前进、后退按钮
  • 书签项
  • 刷新、停止当前加载的元素
  • 主页面按钮</ol>足够策略,浏览器用户界面并没有在任何官方的说明书中指定,而是源自多年的用户体验和浏览器之间的模仿。 Html5说明书中也没有定义应该有哪些界面元素,但是却列出一些共同的元素,其中包括地址栏、状态栏和工具栏。当然,还有些在指定的浏览器中的一些独特 特性,如firefox的下载管理。

    浏览器的高级结构

    浏览器的主要部分

    <ol>

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

    浏览器组件

暂无评论

发表评论

您必须 [ 登录 ] 才能发表留言!