一、常見的瀏覽器內(nèi)核

常見的瀏覽器內(nèi)核可以分四種：Trident、Gecko、Blink、Webkit

image

二、常見的兼容性問題

1、html 兼容性問題

問題：HTML5新的語義標簽在低版本的老IE瀏覽器中存在兼容性問題

解決方案：引用第三方解析庫

<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

2、css 兼容性問題

（1）常見問題

問題一：不同瀏覽器的標簽默認的外補丁和內(nèi)補丁不同

• 問題癥狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大
• 解決方案：css里 *{margin:0;padding:0;}
• 備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的css文件開頭都會用通配符*來設置各個標簽的內(nèi)外補丁是0

問題二：塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大

• 問題癥狀:常見癥狀是ie6中后面的一塊被頂?shù)较乱恍?/li>
• 解決方案：在float的標簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性
• 備注：我們最常用的就是div+css布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現(xiàn)的，橫向的間距設置如果用margin實現(xiàn)，這就是一個必然會碰到的兼容性問題。

問題三：設置較小高度標簽（一般小于10px），在ie6，ie7，遨游中高度超出自己設置高度

• 問題癥狀：ie6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度
• 解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度。
• 備注：這種情況一般出現(xiàn)在我們設置小圓角背景的標簽里。出現(xiàn)這個問題的原因是ie8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高

問題四：行內(nèi)屬性標簽，設置display:block后采用float布局，又有橫行的margin的情況，ie6間距bug（類似第二種）

• 問題癥狀：ie6里的間距比超過設置的間距
• 解決方案：在display:block;后面加入display:inline;display:table;
• 備注：行內(nèi)屬性標簽，為了設置寬高，我們需要設置display:block;(除了input標簽比較特殊)。在用float布局并有橫向的margin后，在ie6下，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內(nèi)屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline后面加入display:table。

問題五：圖片默認有間距

• 問題癥狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加上問題一中提到的通配符也不起作用。
• 解決方案：使用float屬性為img布局
• 備注：因為img標簽是行內(nèi)屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道

問題六：標簽最低高度設置min-height不兼容

• 問題癥狀：因為min-height本身就是一個不兼容的css屬性，所以設置min-height時不能很好的被各個瀏覽器兼容
• 解決方案：如果我們要設置一個標簽的最小高度200px，需要進行的設置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
• 備注：在B/S系統(tǒng)前端開發(fā)時，有很多情況下我們有這種需求。當內(nèi)容小于一個值（如300px）時。容器的高度為300px；當內(nèi)容高度大于這個值時，容器高度被撐高，而不是出現(xiàn)滾動條。這時候我們就會面臨這個兼容性問題。

問題七：透明度的兼容css設置

• 問題癥狀：IE9一下瀏覽器不能使用opacity
• 解決方案：opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

問題八：IE6下div高度無法小于10px

• 問題癥狀：比如定義一條高2px的線條，F(xiàn)F和IE7都正常，但IE6就是10px
• 解決方案：添加overflow屬性或設置fontsize大小為高度大小。如：

<div style="height:2px;overflow:hidden;background:#000000;width:778px;"></div>

<div style="height:2px;font-size:2px;background:#000000;width:778px;">&nbps;</div>

問題九：鼠標的手勢也有問題

• 問題癥狀：FireFox的cursor屬性不支持hand，但是支持pointer，IE兩個都支持
• 解決方案：統(tǒng)一使用cursor:pointer

問題十：chrome下默認會將小于12px的文本強制按照12px來解析

• 解決方案：添加屬性

-webkit-text-size-adjust: none; 

（2）css hack

我們?yōu)榱俗岉撁嫘纬山y(tǒng)一的效果，要針對不同的瀏覽器或不同版本寫出對應可解析的CSS樣式，所以我們就把這個針對不同瀏覽器/版本而寫CSS的過程叫做 CSS hack.

CSS hack主要有三種：IE條件注釋法、CSS屬性前綴法、選擇器前綴法。

1、IE條件注釋法，即在正常代碼之外添加判別IE瀏覽器或?qū)姹镜臈l件注釋，符合條件的瀏覽器或者版本號才回執(zhí)行里邊的代碼。

<!--  lt是小于 gt是大于 lte是小于等于 gte是不小于 !是不等于 -->

<!-- [if IE]>
   你想要執(zhí)行的代碼 
<![endif]-->

<!-- [if lt IE 8]>
   你想要執(zhí)行的代碼 
<![endif]-->

<!-- [if ! IE 8]>
   你想要執(zhí)行的代碼 
<![endif]-->

2、CSS屬性前綴法，即是給css的屬性添加前綴。比如 * 可以被IE6/IE7識別，但 _ 只能被IE6識別，IE6-IE10都可以識別 "\9"，IE6不能識別!important FireFox不能識別 * _ \9

/* CSS屬性級Hack */ 
color:red; /* 所有瀏覽器可識別*/

_color:red; /* 僅IE6 識別 */

*color:red; /* IE6、IE7 識別 */

+color:red; /* IE6、IE7 識別 */

*+color:red; /* IE6、IE7 識別 */

[color:red; /* IE6、IE7 識別 */ 

color:red\9; /* IE6、IE7、IE8、IE9 識別 */

color:red\0; /* IE8、IE9 識別*/

color:red\9\0; /* 僅IE9識別 */

color:red \0; /* 僅IE9識別 */

color:red!important; /* IE6 不識別!important 有危險*/

說明：在標準模式中

• “-″減號是IE6專有的hack
• “\9″ IE6/IE7/IE8/IE9/IE10都生效
• \0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
• “\9\0″ 只對IE9/IE10生效，是IE9/10的hack

3、選擇器前綴法，顧名思義，就是給選擇器加上前綴。

*html #demo { color:red;} /* 僅IE6 識別 */

*+html #demo { color:red;} /* 僅IE7 識別 */

body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以識別 
*/ 
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以識別 */

:root #demo { color:red\9; } : /* 僅IE9識別 */

（3）css reset

CSS Reset，意為重置默認樣式。HTML中絕大部分標簽元素在網(wǎng)頁顯示中都有一個默認屬性值，通常為了避免重復定義元素樣式，需要進行重置默認樣式（CSS Reset）

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
    body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
    h1, h2, h3, h4, h5, h6{ font-size:100%; }
    address, cite, dfn, em, var { font-style:normal; }
    code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
    small{ font-size:12px; }
    ul, ol { list-style:none; }
    a { text-decoration:none; }
    a:hover { text-decoration:underline; }
    sup { vertical-align:text-top; }
    sub{ vertical-align:text-bottom; }
    legend { color:#000; }
    fieldset, img { border:0; }
    button, input, select, textarea { font-size:100%; }
    table { border-collapse:collapse; border-spacing:0; }

3、javascript 兼容性問題

（1） 獲取屏幕寬高

var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//網(wǎng)頁可見區(qū)域?qū)?var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//網(wǎng)頁可見區(qū)域?qū)?//以上為不包括邊框的寬高，如果是offsetWidth或者offsetHeight的話包括邊框

var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整個網(wǎng)頁的寬
var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整個網(wǎng)頁的高

var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//網(wǎng)頁被卷去的高
var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//網(wǎng)頁左卷的距離

var screenH=window.screen.height;//屏幕分辨率的高
var screenW=window.screen.width;//屏幕分辨率的寬
var screenX=window.screenLeft;//瀏覽器窗口相對于屏幕的x坐標（除了FireFox）
var screenXX=window.screenX;//FireFox相對于屏幕的X坐標
var screenY=window.screenTop;//瀏覽器窗口相對于屏幕的y坐標（除了FireFox）
var screenYY=window.screenY;//FireFox相對于屏幕的y坐標

（2）event事件問題

document.onclick=function(ev){//谷歌火狐的寫法，IE9以上支持，往下不支持；
    var e=ev;
    console.log(e);
}
document.onclick=function(){//谷歌和IE支持，火狐不支持；
    var e=event;
    console.log(e);
}
document.onclick=function(ev){//兼容寫法；
    var e=ev||window.event;
    var mouseX=e.clientX;//鼠標X軸的坐標
    var mouseY=e.clientY;//鼠標Y軸的坐標
}

（3）DOM節(jié)點相關的問題

//DOM節(jié)點相關，主要兼容IE 6 7 8
function nextnode(obj){//獲取下一個兄弟節(jié)點
    if (obj.nextElementSibling) {
        return obj.nextElementSibling;
    } else{
        return obj.nextSibling;
    };
}
function prenode(obj){//獲取上一個兄弟節(jié)點
    if (obj.previousElementSibling) {
        return obj.previousElementSibling;
    } else{
        return obj.previousSibling;
    };
}
function firstnode(obj){//獲取第一個子節(jié)點
    if (obj.firstElementChild) {
        return obj.firstElementChild;//非IE678支持
    } else{
        return obj.firstChild;//IE678支持
    };
}
function lastnode(obj){//獲取最后一個子節(jié)點
    if (obj.lastElementChild) {
        return obj.lastElementChild;//非IE678支持
    } else{
        return obj.lastChild;//IE678支持
    };
}

（4）document.getElementsByClassName問題

//通過類名獲取元素
document.getElementsByClassName('');//IE 6 7 8不支持；

//這里可以定義一個函數(shù)來解決兼容問題，當然別在這給我提jQuery...
//第一個為全局獲取類名，第二個為局部獲取類名
function byClass1(oClass){//全局獲取，oClass為你想要查找的類名，沒有“.”
    var tags=document.all?document.all:document.getElementsByTagName('*');
    var arr=[];
    for (var i = 0; i < tags.length; i++) {
        var reg=new RegExp('\\b'+oClass+'\\b','g');
        if (reg.test(tags[i].className)) {
            arr.push(tags[i]);
        };
    };
    return arr;//注意返回的也是數(shù)組，包含你傳入的class所有元素；
}

function byClass2(parentID,oClass){//局部獲取類名，parentID為你傳入的父級ID
    var parent=document.getElementById(parentID);
    var tags=parent.all?parent.all:parent.getElementsByTagName('*');
    var arr=[];
    for (var i = 0; i < tags.length; i++) {
    var reg=new RegExp('\\b'+oClass+'\\b','g');
        if (reg.test(tags[i].className)) {
            arr.push(tags[i]);
        };
    };
    return arr;//注意返回的也是數(shù)組，包含你傳入的class所有元素；
 }

（5）獲取元素的非行間樣式值

//獲取元素的非行間樣式值
 function getStyle(object,oCss) {
         if (object.currentStyle) {
             return object.currentStyle[oCss];//IE
         }else{
             return getComputedStyle(object,null)[oCss];//除了IE
         }
 }

（6）設置監(jiān)聽事件

//設置監(jiān)聽事件
 function addEvent(obj,type,fn){//添加事件監(jiān)聽，三個參數(shù)分別為 對象、事件類型、事件處理函數(shù)，默認為false
    if (obj.addEventListener) {
        obj.addEventListener(type,fn,false);//非IE
    } else{
        obj.attachEvent('on'+type,fn);//ie,這里已經(jīng)加上on，傳參的時候注意不要重復加了
    };
}
function removeEvent(obj,type,fn){//刪除事件監(jiān)聽
    if (obj.removeEventListener) {
        obj.removeEventListener(type,fn,false);//非IE
    } else{
        obj.detachEvent('on'+type,fn);//ie，這里已經(jīng)加上on，傳參的時候注意不要重復加了
    };
}

（7）元素到瀏覽器邊緣的距離

//在這里加個元素到瀏覽器邊緣的距離，很實用
function offsetTL(obj){//獲取元素內(nèi)容距離瀏覽器邊框的距離（含邊框）
    var ofL=0,ofT=0;
    while(obj){
        ofL+=obj.offsetLeft+obj.clientLeft;
        ofT+=obj.offsetTop+obj.clientTop;
        obj=obj.offsetParent;
    }
    return{left:ofL,top:ofT};
}

（8）阻止事件傳播

//js阻止事件傳播，這里使用click事件為例
document.onclick=function(e){
    var e=e||window.event;
    if (e.stopPropagation) {
        e.stopPropagation();//W3C標準
    }else{
        e.cancelBubble=true;//IE....
    }
}

（9）阻止默認事件

//js阻止默認事件
document.onclick=function(e){
    var e=e||window.event;
    if (e.preventDefault) {
        e.preventDefault();//W3C標準
    }else{
        e.returnValue='false';//IE..
    }
}

（10）關于EVENT事件中的target

//關于event事件中的target
document.onmouseover=function(e){
    var e=e||window.event;
    var Target=e.target||e.srcElement;//獲取target的兼容寫法，后面的為IE
    var from=e.relatedTarget||e.formElement;//鼠標來的地方，同樣后面的為IE...
    var to=e.relatedTarget||e.toElement;//鼠標去的地方
}

（11） 鼠標滾輪滾動事件

//鼠標滾輪事件
//火狐中的滾輪事件
document.addEventListener("DOMMouseScroll",function(event){
    alert(event.detail);//若前滾的話為 -3，后滾的話為 3
},false)
//非火狐中的滾輪事件
document.onmousewheel=function(event){
    alert(event.detail);//前滾：120，后滾：-120
}

三、常見的瀏覽器調(diào)優(yōu)方法：

優(yōu)化原則：

• dns是否通過緩存減少查詢時間
• 網(wǎng)絡請求走最近的網(wǎng)絡環(huán)境
• 相同的靜態(tài)資源緩存
• 減小請求的大小
• 服務端渲染優(yōu)化

1、減少http請求，合理設置 HTTP緩存

http協(xié)議是無狀態(tài)的應用層協(xié)議，意味著每次http請求都需要建立通信鏈路、進行數(shù)據(jù)傳輸，而在服務器端，每個http都需要啟動獨立的線程去處理。這些通信和服務的開銷都很昂貴，減少http請求的數(shù)目可有效提高訪問性能。

減少http的主要手段是合并CSS、合并javascript、合并圖片。將瀏覽器一次訪問需要的javascript和CSS合并成一個文件，這樣瀏覽器就只需要一次請求。圖片也可以合并，多張圖片合并成一張，如果每張圖片都有不同的超鏈接，可通過CSS偏移響應鼠標點擊操作，構(gòu)造不同的URL。

• 簡單的圖片效果可以使用html+css、canvas或者svg來替換。
• 合并CSS、合并javascript、合并圖片（webpack等包管理工具）
• 圖片格式，大小選擇，圖片優(yōu)化

2、應用瀏覽器緩存

• http緩存（文件級緩存）

<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2013 23:00:00 GMT" />

• cookie: 儲存在用戶本地終端上的數(shù)據(jù)(通常經(jīng)過加密)有長度和個數(shù)限制，瀏覽器端也可以通過document.cookie來獲取cookie，并通過js瀏覽器端也可以方便地讀取/設置cookie的值。
• localStorage: localStorage是html5的一種新的本地緩存方案，目前用的比較多，一般用來存儲ajax返回的數(shù)據(jù)，加快下次頁面打開時的渲染速度。localStorage大小有限制，不適合存放過多的數(shù)據(jù)，如果數(shù)據(jù)存放超過最大限制會報錯，并移除最先保存的數(shù)據(jù)。localStorage存儲的數(shù)據(jù)是不能跨瀏覽器共用的，一個瀏覽器只能讀取各自瀏覽器的數(shù)據(jù)

localStorage核心API：

localStorage.setItem(key, value) //設置記錄
localStorage.getItem(key) //獲取記錄
localStorage.removeItem(key) //刪除該域名下單條記錄
localStorage.clear() //刪除該域名下所有記錄

注：localStorage對象的屬性值只能是字符串，json對象可以借助JSON類，將對象轉(zhuǎn)換成字符串保存，然后在取出來的時候?qū)son字符串轉(zhuǎn)換成真正可用的json對象格式。

• sessionStorage：
  sessionStorage和localstorage類似，但是瀏覽器關閉則會全部刪除，api和localStorage相同，實際項目中使用較少。
• application cache
  application cahce是將大部分圖片資源、js、css等靜態(tài)資源放在manifest文件配置中。當頁面打開時通過manifest文件來讀取本地文件或是請求服務器文件。

3、啟用壓縮

在服務器端對文件進行壓縮，在瀏覽器端對文件解壓縮，可有效減少通信傳輸?shù)臄?shù)據(jù)量。如果可以的話，盡可能的將外部的腳本、樣式進行合并，多個合為一個。文本文件的壓縮效率可達到80%以上，因此HTML、CSS、javascript文件啟用GZip壓縮可達到較好的效果。但是壓縮對服務器和瀏覽器產(chǎn)生一定的壓力，在通信帶寬良好，而服務器資源不足的情況下要權(quán)衡考慮。

采用網(wǎng)上在線壓縮工具（jQuery MiniUI）自己壓縮或者通過webpack、gulp等打包工具進行壓縮處理。

4、CSS Sprites

CSS Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。

CSS Sprites為一些大型的網(wǎng)站節(jié)約了帶寬， 提高了用戶的加載速度和用戶體驗，不需要加載更多的圖片

5、LazyLoad Images

對于圖片而言，在頁面剛加載的時候可以只加載第一屏，當用戶繼續(xù)往后滾屏的時候才加載后續(xù)的圖片。

• jqueryLazyload方式
• echo.js方式

6、CSS放在頁面最上部，javascript放在頁面最下面

head 內(nèi)的 JavaScript 需要執(zhí)行結(jié)束才開始渲染 body，所以盡量不要將 JS 文件放在 head 內(nèi)?？梢赃x擇在 document complete 時，或者特定區(qū)塊后引入和執(zhí)行 JavaScript。而 CSS 應當寫在 head 中，以避免頁面元素由于樣式缺失造成瞬間的白頁或者給用戶閃爍感。