最火的五大瀏覽器是:google chrome、firefox(FF)、Internet Explorer(IE)、safari、opera。
內核是什麼呢?
谷歌瀏覽器:Google Chrome,谷歌瀏覽器之前一直使用蘋果的webkit內核,但是現在它與蘋果內核分道揚鑣,自己開創了新的blink內核,這個內核也在被歐鵬(opera瀏覽器)共同採用和開發;
火狐瀏覽器:Mozilla Firefox ,內核是Gecko;
opera瀏覽器:內核是blink;
Safari瀏覽器:使用的是蘋果公司自己的內核webkit;
IE瀏覽器:微軟出品的瀏覽器,IE4以上版本都是Trident內核。由於壟斷性,IE在很長一段時間內沒有更新,導致兩個後果:一是IE與W3C標準脱節,二是Trident內核大量的bug問題沒得到及時解決。所以這就給了其他瀏覽器機會,比如firefox等。也正是這些原因,使Web前端開發人員大費周折,特別是IE6正處在新舊交替的關鍵地方(已經逐漸被捨棄)。
當然除了這五大瀏覽器之外,市場上還有很多,例如:
搜狗瀏覽器:兼容模式(IE:Trident)和高速模式(webkit);
遨遊瀏覽器:兼容模式(IE:Trident)和高速模式(webkit);
QQ瀏覽器:普通模式(IE:Trident)和極速模式(webkit);
360極速瀏覽器:基於谷歌(Chromium)和IE內核;
360安全瀏覽器:IE內核。
當然,既然瀏覽器的內核不同,那麼瀏覽器在解析代碼的時候就會有可能不一樣,因為他們所支持的方法有不同之處。
在pc端,通用的方法有三種:分別是能力檢測、代理檢測和怪癖檢測。
1.能力檢測(常用):通過獲取標籤的API,檢測他是否支持這個API,如果支持,那麼就用,否則就換另一種API來達到效果,例如原生js中常用的innerText方法:
1 // 書寫innerText的兼容性代碼:
2 // 獲取標籤的innerText(兼容所有瀏覽器)
3 function getInnerText(element) {
4 if (typeof element.innerText === "string") {
5 return element.innerText;
6 } else {
7 return element.textContent;
8 }
9 }
10
11 //設置標籤的innerText(兼容所有瀏覽器)
12 function setInnerText(element, value) {
13 //能力檢測
14 if (typeof element.innerText === "string") {
15 element.innerText = value;
16 } else {
17 element.textContent = value;
18 }
19 }
2.代理檢測:通過在瀏覽器中的控制枱(console.log)中輸入navigator.userAgent,來獲得瀏覽器的相關信息。
3.怪癖檢測:由於有些瀏覽器有自己獨特的特徵,通過檢測瀏覽器有無對應的特徵,來分辨瀏覽器。