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

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

image

二、常見(jiàn)的兼容性問(wèn)題

1、html 兼容性問(wèn)題

問(wèn)題：HTML5新的語(yǔ)義標(biāo)簽在低版本的老IE瀏覽器中存在兼容性問(wèn)題

解決方案：引用第三方解析庫(kù)

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

2、css 兼容性問(wèn)題

（1）常見(jiàn)問(wèn)題

問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同

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

問(wèn)題二：塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大

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

問(wèn)題三：設(shè)置較小高度標(biāo)簽（一般小于10px），在ie6，ie7，遨游中高度超出自己設(shè)置高度

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

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

• 問(wèn)題癥狀：ie6里的間距比超過(guò)設(shè)置的間距
• 解決方案：在display:block;后面加入display:inline;display:table;
• 備注：行內(nèi)屬性標(biāo)簽，為了設(shè)置寬高，我們需要設(shè)置display:block;(除了input標(biāo)簽比較特殊)。在用float布局并有橫向的margin后，在ie6下，他就具有了塊屬性float后的橫向margin的bug。不過(guò)因?yàn)樗旧砭褪切袃?nèi)屬性標(biāo)簽，所以我們?cè)偌由蟙isplay:inline的話，它的高寬就不可設(shè)了。這時(shí)候我們還需要在display:inline后面加入display:table。

問(wèn)題五：圖片默認(rèn)有間距

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

問(wèn)題六：標(biāo)簽最低高度設(shè)置min-height不兼容

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

問(wèn)題七：透明度的兼容css設(shè)置

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

問(wèn)題八：IE6下div高度無(wú)法小于10px

• 問(wèn)題癥狀：比如定義一條高2px的線條，F(xiàn)F和IE7都正常，但I(xiàn)E6就是10px
• 解決方案：添加overflow屬性或設(shè)置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>

問(wèn)題九：鼠標(biāo)的手勢(shì)也有問(wèn)題

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

問(wèn)題十：chrome下默認(rèn)會(huì)將小于12px的文本強(qiáng)制按照12px來(lái)解析

• 解決方案：添加屬性

-webkit-text-size-adjust: none; 

（2）css hack

我們?yōu)榱俗岉?yè)面形成統(tǒng)一的效果，要針對(duì)不同的瀏覽器或不同版本寫(xiě)出對(duì)應(yīng)可解析的CSS樣式，所以我們就把這個(gè)針對(duì)不同瀏覽器/版本而寫(xiě)CSS的過(guò)程叫做 CSS hack.

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

1、IE條件注釋法，即在正常代碼之外添加判別IE瀏覽器或?qū)?yīng)版本的條件注釋，符合條件的瀏覽器或者版本號(hào)才回執(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識(shí)別，但 _ 只能被IE6識(shí)別，IE6-IE10都可以識(shí)別 "\9"，IE6不能識(shí)別!important FireFox不能識(shí)別 * _ \9

/* CSS屬性級(jí)Hack */ 
color:red; /* 所有瀏覽器可識(shí)別*/

_color:red; /* 僅IE6 識(shí)別 */

*color:red; /* IE6、IE7 識(shí)別 */

+color:red; /* IE6、IE7 識(shí)別 */

*+color:red; /* IE6、IE7 識(shí)別 */

[color:red; /* IE6、IE7 識(shí)別 */ 

color:red\9; /* IE6、IE7、IE8、IE9 識(shí)別 */

color:red\0; /* IE8、IE9 識(shí)別*/

color:red\9\0; /* 僅IE9識(shí)別 */

color:red \0; /* 僅IE9識(shí)別 */

color:red!important; /* IE6 不識(shí)別!important 有危險(xiǎn)*/

說(shuō)明：在標(biāo)準(zhǔn)模式中

• “-″減號(hào)是IE6專有的hack
• “\9″ IE6/IE7/IE8/IE9/IE10都生效
• \0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
• “\9\0″ 只對(duì)IE9/IE10生效，是IE9/10的hack

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

*html #demo { color:red;} /* 僅IE6 識(shí)別 */

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

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

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

（3）css reset

CSS Reset，意為重置默認(rèn)樣式。HTML中絕大部分標(biāo)簽元素在網(wǎng)頁(yè)顯示中都有一個(gè)默認(rèn)屬性值，通常為了避免重復(fù)定義元素樣式，需要進(jìn)行重置默認(rèn)樣式（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 兼容性問(wèn)題

（1） 獲取屏幕寬高

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

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

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

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

（2）event事件問(wèn)題

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

（3）DOM節(jié)點(diǎn)相關(guān)的問(wèn)題

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

（4）document.getElementsByClassName問(wèn)題

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

//這里可以定義一個(gè)函數(shù)來(lái)解決兼容問(wèn)題，當(dāng)然別在這給我提jQuery...
//第一個(gè)為全局獲取類名，第二個(gè)為局部獲取類名
function byClass1(oClass){//全局獲取，oClass為你想要查找的類名，沒(méi)有“.”
    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為你傳入的父級(jí)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）設(shè)置監(jiān)聽(tīng)事件

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

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

//在這里加個(gè)元素到瀏覽器邊緣的距離，很實(shí)用
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標(biāo)準(zhǔn)
    }else{
        e.cancelBubble=true;//IE....
    }
}

（9）阻止默認(rèn)事件

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

（10）關(guān)于EVENT事件中的target

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

（11） 鼠標(biāo)滾輪滾動(dòng)事件

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

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

優(yōu)化原則：

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

1、減少http請(qǐng)求，合理設(shè)置 HTTP緩存

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

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

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

2、應(yīng)用瀏覽器緩存

• http緩存（文件級(jí)緩存）

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

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

localStorage核心API：

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

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

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

3、啟用壓縮

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

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

4、CSS Sprites

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

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

5、LazyLoad Images

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

• jqueryLazyload方式
• echo.js方式

6、CSS放在頁(yè)面最上部，javascript放在頁(yè)面最下面

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