雙內核瀏覽器內核切換控制技術

時間 2019-11-16

原文原文鏈接

什麼是雙核瀏覽器

雙核瀏覽器支持使用兩個或者以上的瀏覽器引擎來渲染網頁，目前絕大多數國產瀏覽器均爲雙核甚至多核。html

雙核究竟是什麼內核

基於Chromium的Blink/Webkit內核。通常在國產瀏覽器中被稱爲「極速內核/極速模式」。該內核隨着該瀏覽器的更新而更新。
IE內核。通常在國產瀏覽器中被稱爲「IE內核/兼容模式」，是指調用Windows系統中內置的IE，並不是該瀏覽器單獨內置了一套IE，該內核隨着Windows或者IE的更新而更新。

惟一的例外狀況是2012年360安全瀏覽器曾經推出內置IE的版本html5

IE內核的兼容模式

某些國產瀏覽器在「IE內核」下，能夠切換其「兼容模式」，這並非切換不一樣的IE內核版本，而是經過調用系統中IE內核的不一樣「文檔模式」來實現的，詳細的信息請參閱這裏。這可能形成一些問題。好比A用戶系統中安裝了IE8，使用QQ瀏覽器的「兼容模式 - 7」；B用戶系統中安裝了IE11，也使用QQ瀏覽器的「兼容模式 - 7」，雖然都用的同一個瀏覽器且選擇了同一個兼容模式，可是對於html5表單項等諸多DOM細節，有着很大的差別。git

如何配置網站要使用的渲染引擎

在html的<head>標籤中加入以下代碼：github

<!DOCTYPE html>
<html>
<head>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  ... 如下代碼省略

複製代碼

這裏咱們一共添加了三條有關瀏覽器渲染方面的指令：web

<meta name="renderer" content="webkit">中的webkit指令，可讓QQ、傲遊、360等瀏覽器默認使用Chromium內核渲染頁面。
X-UA-Compatible 中的IE=edge指令，可讓IE或者調用IE內核的瀏覽器，使用標準模式渲染網頁，注意這裏和「Edge瀏覽器」無關，只是恰巧重名罷了。
X-UA-Compatible 中的chrome=1指令，可讓安裝了GCF插件的IE，在打開網頁時使用Chromium內核渲染頁面。

須要注意幾個重要的神坑：

<meta>標籤必須出如今<head>內的頂部，不然瀏覽器可能沒法識別。
<!DOCTYPE html>文檔類型聲明必須寫，不然各類瀏覽器內核均會以「IE5模式(又稱做怪癖模式、quirks模式)」渲染網頁。
測試效果時，網站必須以域名訪問，內網或者本地地址方式可能對部分瀏覽器無效。
若是用戶曾經自主選擇過渲染引擎，瀏覽器將記住這個選擇，它的優先級高於咱們的指令。若是測試時不當心點了，在必要的狀況下須要卸載瀏覽器並清空用戶數據，而後重裝。
應該儘可能保證整站的渲染內核一致，以便避免內核切換可能帶來的cookie丟失問題。

經過js判斷當前瀏覽器內核及文檔模式

<script src="//gucong3000.github.io/browser.js/browser.min.js"></script>
<script> if (browser.MSIE) { alert("系統IE版本：" + browser.rv + "\n文檔模式：" + browser.MSIE); } else if (browser.Edge) { alert("Edge內核瀏覽器"); } else if (browser.Webkit) { alert("Blink/Webkit內核的瀏覽器"); } else if (browser.Gecko) { alert("Gecko內核的瀏覽器"); } </script>
複製代碼