認識瀏覽器
對於前端開發而言，最必不可少的工具就是瀏覽器，但是之前對於瀏覽器的瞭解只是停留在使用的層面，最近決定對於瀏覽器需要重新認識一下它，根據以前的使用和《WebKit技術內幕》這本書爲大家做一下分享，當然在下面的說法中，也可能存在不詳盡或者有誤的地方，歡迎指正
瀏覽器介紹
瀏覽器的功能：網絡、資源管理、網頁瀏覽、多頁面管理、插件和擴展、書籤管理、歷史記錄管理、設置管理、下載管理、賬號和同步、安全機制、隱私管理、外觀主題、開發者工具等
網絡：它是第一步，瀏覽器通過網絡模塊來下載各種各樣的資源，例如HTML文本、JavaScript代碼、樣式表、圖片、音視頻文件等。網絡部分其實非常重要，因爲它耗時比較長並且需要安全訪問互聯網上的資源
資源管理：從資源下載或者本地獲取資源，並將它們管理起來，這需要高效的管理機制，例如如何避免重複下載資源、緩存資源等，都是它們需要解決的問題
網頁瀏覽：這是瀏覽器的核心也是最基本、最重要的功能，它通過網絡下載資源並從資源管理器獲得資源，將它們轉變爲可視化的結果（瀏覽器內核的最終要的功能）
多頁面管理：支持多個頁面同事加載，解決多頁面的相互影響和安全等問題也非常重要，解決方法：使用進程或者使用線程來繪製網頁
插件和擴展：插件是用來顯示網頁特定內容的，而擴展則是增加瀏覽器新功能的軟件或者壓縮包
安全機制：本質是提供一個安全的瀏覽器環境，避免用戶信息被各種非法工具竊取和破壞，這可能包括顯示用戶訪問的網站是否安全，爲網站設置安全級別、防止瀏覽器被惡意代碼攻破等
開發者工具：審查HTML元素、調試JavaScript代碼，改善網頁性能等
瀏覽器核心的種類
瀏覽器的種類實在是太多，如IE、Firefox、Chrome、Opera等，但是瀏覽器內核的種類就比較少了，分別是Trident、Gecko、WebKit和Presto、Blink，對於Trident來說，代表的產品就是Internet Explorer（IE），Gecko的代表就是Mozilla Firefox，WebKit的代表就是Safari、Chrome，Presto的代表是Opera（之前版本），現在Opera使用的是Blink內核
Blink內核是開源引擎WebKit中的WebCore組件的一個分支，在Chrome（28及往後版本）、Opera（15及往後版本）和Yandex瀏覽器中使用，Blink目前是從WebKit直接複製出的一個版本，將與Chromium無關的Ports都去掉，將代碼結構重新整理
瀏覽器之間產生兼容性的原因
通過上面就可以看出，因爲不同的瀏覽器可能使用不同的瀏覽器內核，因爲內核的不同所以導致各個瀏覽器對於網頁的解析產生了差異，在做前端方面的工作時，對於兼容性的問題的解決，可以從三方面入手：HTML、CSS、JavaScript
HTML差異性主要體現在對HTML5的支持上，
關於JavaScript的兼容性：
事件綁定的方法，addEventListener和attachEvent（IE）
event屬性獲取目標元素的方法，event.target和event.srcElement（IE）
Ajax的實現方式，XMLHttpRequest和ActiveXObject（IE）
DOM元素的屬性，childNodes和children，childNodes它是標準屬性，它返回指定元素的子元素集合，包括HTML節點，所有屬性，文本節點，通過nodeType來判斷是哪種類型的節點，只有當nodeType==1時纔是元素節點，2是屬性節點，3是文本節點，children只返回HTML節點，甚至不返回文本節點
對於IE瀏覽器，有event.x和event.y屬性，在Firefox下，event.pageX和event.pageY是存在的
一些關於WebKit的概念
當我在看那本書的時候，就看到這樣幾個概念，覺得比較容易混淆，所以專門列舉出來
WebKit：一個開源的項目，其前身來自於KDE的KHTML和KJS，該項目專注於網頁內容的展示，開發出一流的網頁渲染引擎，該項目包含兩部分，一部分是WebCore，其中包含着對HTML、CSS等很多W3C規範的實現，第二部分是狹義的WebKit，它主要包含各個平臺的移植並提供相對應的Web接口，也就是WebView或者類似WebView，這些接口提供操作和顯示網頁的功能。目前使用WebKit的主流的瀏覽器包括Chrome, Safari, QtWebKit, Android Browser以及衆多的移動平臺的瀏覽器
WebKit2：相對於狹義的WebKit而言，不是簡單的第二個版本，它是新的API層，最主要的變化在於將網頁的渲染置於單獨的進程，而接口層在另外一個進程，它們之間使用IPC來通訊。對於接口的調用者來說，中間的IPC和地下的是現實透明的，這樣做的最明顯的好處是，當網頁的渲染出現問題的時候，不會阻礙Web解口的調用者進程，提高了瀏覽器的穩定性和安全性
Chromium：是建立在WebKit上的開源項目，由Google發起，引入了很多先進的技術，如跨進程模型、沙箱模型等，也支持很多新的規範，如WebGL、Canvas2D、CSS3以及HTML5特性
Chrome：是Google公司的瀏覽器產品，基於Chromium開源項目，但是Chrome的代碼卻沒有開源，因爲含有Google的私有Code和很多服務，Chrome可以自動更新，Chrome的版本更細是落後於Chromium的
WebKit架構
上面的圖來自《WebKit技術內幕》書中，由此也可以看出大體上分爲了四個層次：
1.最底層爲操作系統層，這個也就說明了WebKit可以運行在不同的操作系統上
2.所依賴的第三方庫：主要有圖形庫、音頻庫、視頻庫
3.WebKit層，它又可以分爲三部分WebCore、JavaScriptCore、WebKit Ports
WebCore：與平臺無關，可以被多個瀏覽器移植使用，起加載和渲染網頁的部分，具體包括了HTML解釋器（HTML解析）、CSS解釋器（CSS解析）、SVG、DOM、渲染樹（RenderObject樹、RenderLayer樹等），以及Inspector（Web Inspector、調試網頁）
JavaScriptCore：在WebKit中起到的作用是解析和提供執行環境
WebKit Ports：WebKit中的非共享部分，所謂一個WebKit Port，並沒有確切的形式，可以看作是OS，平臺（應用程序框架），JS引擎，以及各種第三方庫的一個組合，詳細介紹
4.WebKit接口層：主要是提供嵌入式編程接口，提供給瀏覽器調用
博文開始正常更新中，希望對你有用 ^_^