前端那些事(二)浏览器

482 阅读8分钟

几个问题

第一个问题,浏览器是什么呢?
浏览器是一个应用程序,是我们用来浏览和检索万维网上形形色色的网页的工具。

第二个问题,万维网又是什么呢?
万维网全称是(英语:World Wide Web),亦被称为“WWW”,“Web”。他是一个系统,是一个什么系统呢?是一个由许多互相链接的超文本组成的系统,那么这个系统运行在哪里呢?他运行在互联网上。P.S:万维网不等同于互联网。
第三个问题,万维网是如何工作的?
万维网由三项关键技术组成。这三项技术分别是:

  1. 一个全球网络资源唯一认证的系统,统一资源标志符(URI)
  2. 超文本标记语言(HTML)
  3. 超文本传输协议(HTTP)

后两者我们很熟悉,几乎天天都在和他们打交道。第一个我们也熟悉,不过经常用到的是他的孪生兄弟:统一资源定位符(URL)。 这里解释一下这几者之间的联系,万维网的发明者:英国科学家蒂姆·伯纳斯-李 设计了一个简单但趋于稳定的系统,URI 用来标识万维网上所有的超文本,也就是资源(可以是文字,图片,媒体等格式)。这些资源如何展示呢?没错,通过 HTML 这个超文本标记语言来渲染万维网上所有的资源。接下来还有一个问题,如何连接这些资源呢?你猜对了!就是通过HTTP协议(这里是一次完整的HTTP请求)。最后一个问题,为了便于访问这些分布在世界各地的资源,需要一个便于访问的协议。是的,他就是 URL。
统一资源定位符(URL) 的标准格式如下:
[协议类型]://[服务器地址]:[端口号]/[资源层级UNIX文件路径][文件名]?[查询]#[片段ID]

统一资源定位符(URL) 的完整格式如下:
[协议类型]://[访问资源需要的凭证信息]@[服务器地址]:[端口号]/[资源层级UNIX文件路径][文件名]?[查询]#[片段ID]

其中[访问凭证信息]、[端口号]、[查询]、[片段ID]都属于选填项。

浏览器的历史

网页浏览器(英语:Web Browser,常简称为浏览器)是一种用于检索并展示万维网信息资源的应用程序。这些信息资源可为网页、图片、影音或其他内容,它们由统一资源标志符标识。信息资源中的超链接可使用户方便地浏览相关信息。 网页浏览器虽然主要用于使用万维网,但也可用于获取专用网络网页服务器之信息或文件系统内之文件。 主流网页浏览器有Mozilla FirefoxInternet ExplorerMicrosoft EdgeGoogle ChromeOperaSafari。 维基百科-网页浏览器

浏览器名称 发行日期 排版引擎
WorldWideWeb(Nexus) 1990年2月15日
NCSA Mosaic 1993年4月22日 Mosaic
Netscape Navigator 1994年10月13日 Gecko
Internet Explorer 1995年8月16日 Trident
Opera 1996年 Presto->Blink
Mozilla Application Suite 2002年6月5日 Gecko
Safari 2003年1月7日 WebKit
Mozilla Firefox 2004年11月9日 Gecko
Google Chrome 2008年9月2日 WebKit->Blink
Microsoft Edge 2015年7月9日 EdgeHTML
Vivaldi 2016年4月6日 Blink

通过以上的表格,我们可以知道浏览器从面世到流行也不过30年不到,但是却给我们的生活带来了天翻地覆的变化。

说起来,浏览器的发展历史也是靠免费打天下,1993年4月30日,欧洲核子研究组织宣布万维网对任何人免费开放,并不收取任何费用,这为浏览器的发展提供了无限可能。与此同时,两个月之后Gopher协议宣布不再是免费使用。大量用户由Gopher 转向万维网。这个时候,1993年推出的Mosaic网页浏览器提供了图形使用接口,也就是让图片的嵌入更加方便(之前的网页浏览器和其他旧协议都是以文字浏览居多)。这使得万维网打败了Gopher和WAIS,成为了迄今为止最受欢迎的互联网协议。

之后,整个浏览器和万维网就进入了高速发展时期,层出不穷的浏览器被开发出来,直到1998年的第一次浏览器大战奠定了微软的Internet Explorer 的霸主地位。因为捆绑于Windows(同年,微软发布 Windows 98),IE迅速占据了市场的主导地位,在2002年巅峰时期市场占有率一度高达95%。

之后就是FireFox 和Safari 的故事了,2003 年发布的Safari 由于内置在Mac OS中,市场份额也一路上升。2004 年发布的FireFox 则因其速度、安全性及扩展组件而广受称赞。2005年的 IE 版本为 IE 7 Beta版(并不稳定,直到2006年才发布稳定版)。从此之后,IE 跌落神坛。

最后的故事留给Google Chrome,于2008年发布的Google Chrome自发布起,一路高歌,市场份额不断上升,据StatCounter统计,截至2018年第一季度,Google Chrome在全球桌面浏览器的网页浏览器的使用分布为66%。

可以看到浏览器市场也是风云变幻的,风水轮流转,皇帝轮流做。能不能坐稳头把交椅还是要看背后的实力硬不硬,什么是浏览器背后的实力呢?那么毫无疑问就是排版引擎了。下面我们说说排版引擎和浏览器兼容性的故事。

浏览器兼容性

上面我们了解了浏览器的发展历史,主要是想从源头弄清楚浏览器的兼容问题。想要聊清楚浏览器的兼容性问题,我们就不得不提到浏览器背后的排版引擎,排版引擎决定了浏览器所支持的标准
而现在市面上的几大主流浏览器的排版引擎基本属于Gecko,Trident,WebKit这三种或者其分支。所以搞清楚了几大排版引擎的区别,兼容性问题也就自然迎刃而解。我们首先大概介绍一下这些引擎。

Gecko:是一套自由及开放源代码、以C++编写的排版引擎,最开始由网景公司开发,中间经历了重写,改名等,后来网景公司解散以后,由Mozilla基金会继续维护。并且它是跨平台的,可以在Microsoft WindowsLinuxMac OS X等主要操作系统上运行,使用Gecko引擎的主要是Mozilla Firefox(火狐)浏览器。

WebKit:原作者是KDE,WebKit的HTML及JavaScript代码源自KDEKHTMLKJS库的一个分支,分别是WebCore和JavaScriptCore。WebKit 被用于Mac OS的Safari,以及iOS上的Safari。早期的Chrome也是用的WebKit 引擎。

  • WebCore是包含布局(Layout)渲染(Rendering)及HTML和SVGDOM库。
  • JavaScriptCore是一个在WebKit中提供JavaScript引擎的框架,而且在OS X作为其他内容的脚本引擎。

Trident:是微软的网页浏览器 Internet Explorer 的排版引擎。用C++语言编写,第一个版本随着IE 4一起发布。微软同时提出了一个“组件对象模型”(COM)的软件接口架构。供其它支持的组件对象模型开发环境的应用程序(如:C++.NET)访问及编辑网页。也就是可以通过应用程序的方式来获取浏览器上的网页内容以及处理浏览器控件所触发的事件。像早期的世界之窗,腾讯TT等浏览器也是用的Trident引擎。

Blink:是一个开源浏览器排版引擎,是开源引擎WebKitWebCore组件的一个分支。主要用于Chrome和Opera浏览器。P.S:Chrome浏览器的Javascript引擎是自行研发的 “V8”引擎。

说完排版引擎,我们继续看浏览器,关于浏览器的兼容性问题我们可以先了解一下Acid1,Acid2,Acid3等测试。

Acid1,最初被称为盒模型酸试验,是一个用于测试浏览器的网页。它在1998年10月开发,成为了衡量早期浏览器兼容性的重要准线,特别是浏览器对CSS 1.0的支持情况。

下面的表格是一个简化版的各浏览器兼容性说明。此处可查看HTML5的各浏览器兼容性

标准/系统 Mozilla Firefox Safari Internet Explorer Chrome
CSS  2.1 全版本 V2.0.2+ IE8+ 全版本
CSS 3 V34+ V5.1+ IE9+ V25+
HTML 4.01 全版本 IE7+ 全版本
HTML 5 V47+ V3.1+ IE9+ V55+
SVG V17+ V3.1+ IE9+ 全版本
ES2015 V53+ V10+ Edge V51+

文中数据来源大部分来自维基百科中的词条以及MDN及W3C的官网,数据我尽量做到了准确,因为时间关系,没有直接从各浏览器的发行版本的release说明里获取。

本文如有不对的地方,欢迎批评指正!

参考资料