時間:2020-01-25 18:04:21 作者:Mesa 瀏覽量:136
對于用戶來說,瀏覽器是用戶的萬花筒,從這里可以瀏覽網絡世界的任何一個角落;對于前端開發工程師來說,瀏覽器就是前端知識最大的舞臺。當然,現在的前端的舞臺不僅限于瀏覽器,也有其他應用,如手機端的APP,但其基本原理和瀏覽器類似,正所謂入鄉隨俗,在別人的地盤耍事,就必須認識瀏覽器,了解其工作機理,知道其中規矩。下面我們開始一步一步探討瀏覽器ie內核。

前端用武之地瀏覽器以及ie內核圖一
瀏覽器有哪些?
根據最新的統計顯示,全球瀏覽器市場份額最大的幾家廠商及其排名分別是:Google Chrome、Mozilla Firefox、Internet Explorer、Microsoft Edge、Opera及Safari,國內的主要瀏覽器UC、QQ瀏覽器、搜狗、360,百度等。

前端用武之地瀏覽器以及ie內核圖二
主流瀏覽器市場份額
前端工程師敲的代碼就是在這些瀏覽器解讀和執行的,他們的差別也就是在代碼的解讀和執行上。同樣一行代碼,不同的瀏覽器會有不同的解讀和呈現,而且速度也不一樣,給人的體驗也不一樣。而決定如何解釋和執行代碼的核心就是瀏覽器的內核。

前端用武之地瀏覽器以及ie內核圖三
瀏覽器組成
如果把瀏覽器做個拆分,其組成部分主要有:用戶界面、瀏覽器引擎、渲染引擎、 網絡 、JS解釋器、UI后端、數據存儲7個部分。
1 用戶界面 - 包括地址欄、后退/前進按鈕、書簽目錄等,也就是所看到的除了用來顯示所請求頁面的主窗口之外的其他部分。
2 瀏覽器引擎 - 用來查詢及操作渲染引擎的接口
3 渲染引擎 - 用來顯示請求的內容,例如,如果請求內容為html,它負責解析html及css,并將解析后的結果顯示出來。
4 網絡 - 用來完成網絡調用,例如http請求,它具有平臺無關的接口,可以在不同平臺上工作。
5 UI后端 - 用來繪制類似組合選擇框及對話框等基本組件,具有不特定于某個平臺的通用接口,底層使用操作系統的用戶接口。
6 JS解釋器 - 用來解釋執行JS代碼。
7 數據存儲 - 屬于持久層,瀏覽器需要在硬盤中保存類似cookie的各種數據,HTML5定義了web database技術,這是一種輕量級完整的客戶端存儲技術。
瀏覽器內核
做過設計尤其是3D動畫的人對渲染這個詞應該不陌生。瀏覽器內核,其實就是瀏覽器的渲染引擎,英文叫“Rendering Engine”,它是瀏覽器的核心。渲染引擎負責對網頁代碼的解釋并按照規則渲染出顯示器上的網頁。網頁怎么顯示,完全由它說了算。
四個內核以及已它為基礎的瀏覽器:
(1)Trident內核,由于被微軟采用,并得益于微軟操作系統的普及,以前幾乎一統天下,所以又稱為“IE內核”,主要瀏覽器有IE系列瀏覽器;
(2)Gecko內核,因為被Mozilla FireFox瀏覽器采用并得到開發者的進一步豐富,又被稱為“Firefox內核”;
(3)WebKit內核,是Safari瀏覽器使用的內核,由Apple研發。 Google Chrome、Opera及各種國產瀏覽器高速模式也使用Webkit作為內核。
(4)Blink內核,由Google和Opera Software共同開發的瀏覽器內核,現在Chrome(28及往后版本)、Opera(15及往后版本)都將Webkit內核換成了Blink內核。
一般來說,一個瀏覽器采用一個內核。但是國內的開發者腦洞比較大,開創性發明了雙核瀏覽器。360瀏覽器、獵豹瀏覽器都是采用IE+Chrome雙內核,搜狗、遨游、QQ瀏覽器也是雙內核:Trident(兼容模式)+Webkit(高速模式); UC瀏覽器電腦版采用Blink內核和Trident內核,百度瀏覽器、世界之窗內核都是單核(IE內核)。
另外,瀏覽器內核另外一個很重要的部分就是JS引擎,之前JS引擎也被集成在內核中,但是隨著JS引擎越來越獨立,慢慢瀏覽器內核就是只渲染引擎了。
以上介紹了目前我們熟悉的瀏覽器產品,以及瀏覽器內核簡介,下一次探討真正核心的部分,也是和前端開發最相關的部分——ie內核。