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

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

二、常見的兼容性問題

1余赢、html 兼容性問題

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

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

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

2掸驱、css 兼容性問題

（1）常見問題

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

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

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

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

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

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

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

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

問題五：圖片默認有間距

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

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

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

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

• 問題癥狀：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屬性或設(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>

問題九：鼠標(biāo)的手勢也有問題

• 問題癥狀：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)一的效果疏魏，要針對不同的瀏覽器或不同版本寫出對應(yīng)可解析的CSS樣式，所以我們就把這個針對不同瀏覽器/版本而寫CSS的過程叫做 CSS hack.

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

1养涮、IE條件注釋法葵硕，即在正常代碼之外添加判別IE瀏覽器或?qū)?yīng)版本的條件注釋，符合條件的瀏覽器或者版本號才回執(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 有危險*/

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

• “-″減號是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中絕大部分標(biāo)簽元素在網(wǎng)頁顯示中都有一個默認屬性值钧惧，通常為了避免重復(fù)定義元素樣式，需要進行重置默認樣式（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坐標(biāo)（除了FireFox）
var screenXX=window.screenX;//FireFox相對于屏幕的X坐標(biāo)
var screenY=window.screenTop;//瀏覽器窗口相對于屏幕的y坐標(biāo)（除了FireFox）
var screenYY=window.screenY;//FireFox相對于屏幕的y坐標(biāo)

（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;//鼠標(biāo)X軸的坐標(biāo)
    var mouseY=e.clientY;//鼠標(biāo)Y軸的坐標(biāo)
}

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

//DOM節(jié)點相關(guān)，主要兼容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ù)來解決兼容問題诅妹，當(dāng)然別在這給我提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）設(shè)置監(jiān)聽事件

//設(shè)置監(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，傳參的時候注意不要重復(fù)加了
    };
}
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科乎，傳參的時候注意不要重復(fù)加了
    };
}

（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標(biāo)準(zhǔn)
    }else{
        e.cancelBubble=true;//IE....
    }
}

（9）阻止默認事件

//js阻止默認事件
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的兼容寫法茅茂，后面的為IE
    var from=e.relatedTarget||e.formElement;//鼠標(biāo)來的地方捏萍，同樣后面的為IE...
    var to=e.relatedTarget||e.toElement;//鼠標(biāo)去的地方
}

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

//鼠標(biāo)滾輪事件
//火狐中的滾輪事件
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)絡(luò)請求走最近的網(wǎng)絡(luò)環(huán)境
• 相同的靜態(tài)資源緩存
• 減小請求的大小
• 服務(wù)端渲染優(yōu)化

1、減少http請求碴倾，合理設(shè)置 HTTP緩存

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

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

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

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

• 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瀏覽器端也可以方便地讀取/設(shè)置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) //設(shè)置記錄
localStorage.getItem(key) //獲取記錄
localStorage.removeItem(key) //刪除該域名下單條記錄
localStorage.clear() //刪除該域名下所有記錄

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

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

3揍异、啟用壓縮

在服務(wù)器端對文件進行壓縮，在瀏覽器端對文件解壓縮爆班，可有效減少通信傳輸?shù)臄?shù)據(jù)量衷掷。如果可以的話，盡可能的將外部的腳本柿菩、樣式進行合并戚嗅，多個合為一個。文本文件的壓縮效率可達到80%以上枢舶，因此HTML懦胞、CSS、javascript文件啟用GZip壓縮可達到較好的效果凉泄。但是壓縮對服務(wù)器和瀏覽器產(chǎn)生一定的壓力躏尉，在通信帶寬良好，而服務(wù)器資源不足的情況下要權(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

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

• jqueryLazyload方式
• echo.js方式

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

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