前端那些事（二）瀏覽器

幾個問題

第一個問題，瀏覽器是什麼呢？
瀏覽器是一個應用程序，是咱們用來瀏覽和檢索萬維網上形形色色的網頁的工具。

第二個問題，萬維網又是什麼呢？
萬維網全稱是（英語：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 Firefox、Internet Explorer、Microsoft Edge、Google Chrome、Opera及Safari。 維基百科-網頁瀏覽器

瀏覽器名稱	發行日期	排版引擎
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 Windows、Linux和Mac OS X等主要操做系統上運行，使用Gecko引擎的主要是Mozilla Firefox（火狐）瀏覽器。

WebKit：原做者是KDE，WebKit的HTML及JavaScript代碼源自KDE的KHTML及KJS庫的一個分支，分別是WebCore和JavaScriptCore。WebKit 被用於Mac OS的Safari，以及iOS上的Safari。早期的Chrome也是用的WebKit 引擎。

• WebCore是包含佈局（Layout）渲染（Rendering）及HTML和SVG的DOM庫。
• JavaScriptCore是一個在WebKit中提供JavaScript引擎的框架，並且在OS X做爲其餘內容的腳本引擎。

Trident：是微軟的網頁瀏覽器 Internet Explorer 的排版引擎。用C++語言編寫，第一個版本隨着IE 4一塊兒發佈。微軟同時提出了一個「組件對象模型」（COM）的軟件接口架構。供其它支持的組件對象模型開發環境的應用程序（如：C++及.NET）訪問及編輯網頁。也就是能夠經過應用程序的方式來獲取瀏覽器上的網頁內容以及處理瀏覽器控件所觸發的事件。像早期的世界之窗，騰訊TT等瀏覽器也是用的Trident引擎。

Blink：是一個開源瀏覽器排版引擎，是開源引擎WebKit中WebCore組件的一個分支。主要用於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說明裏獲取。

本文若有不對的地方，歡迎批評指正！

參考資料

• 網頁瀏覽器
• 各瀏覽器對ES2015的兼容性
• 瀏覽器對CSS3的兼容
• W3C