## 一、常見的瀏覽器內核 常見的瀏覽器內核可以分四種：Trident、Gecko、Blink、Webkit  ## 二、常見的兼容性問題 ### 1、html 兼容性問題 **問題：HTML5新的語義標簽在低版本的老IE瀏覽器中存在兼容性問題** 解決方案：引用第三方解析庫 ``` <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> ``` ### 2、css 兼容性問題 #### （1）常見問題 **問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同** - 問題癥狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大 - 解決方案：css里 `*{margin:0;padding:0;}` - 備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的css文件開頭都會用通配符*來設置各個標簽的內外補丁是0 **問題二：塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大** - 問題癥狀:常見癥狀是ie6中后面的一塊被頂到下一行 - 解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性 - 備注：我們最常用的就是div+css布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。 **問題三：設置較小高度標簽（一般小于10px），在ie6，ie7，遨游中高度超出自己設置高度** - 問題癥狀：ie6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度 - 解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度。 - 備注：這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是ie8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高 **問題四：行內屬性標簽，設置display:block后采用float布局，又有橫行的margin的情況，ie6間距bug（類似第二種）** - 問題癥狀：ie6里的間距比超過設置的間距 - 解決方案：在display:block;后面加入display:inline;display:table; - 備注：行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了input標簽比較特殊)。在用float布局并有橫向的margin后，在ie6下，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline后面加入display:table。 **問題五：圖片默認有間距** - 問題癥狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加上問題一中提到的通配符也不起作用。 - 解決方案：使用float屬性為img布局 - 備注：因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道 **問題六：標簽最低高度設置min-height不兼容** - 問題癥狀：因為min-height本身就是一個不兼容的css屬性，所以設置min-height時不能很好的被各個瀏覽器兼容 - 解決方案：如果我們要設置一個標簽的最小高度200px，需要進行的設置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;} - 備注：在B/S系統前端開發時，有很多情況下我們有這種需求。當內容小于一個值（如300px）時。容器的高度為300px；當內容高度大于這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題。 **問題七：透明度的兼容css設置** - 問題癥狀：IE9以下瀏覽器不能使用opacity - 解決方案：opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); **問題八：IE6下div高度無法小于10px** - 問題癥狀：比如定義一條高2px的線條，FF和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;">&nbsp;</div> ``` **問題九：鼠標的手勢也有問題** - 問題癥狀：FireFox的cursor屬性不支持hand，但是支持pointer，IE兩個都支持 - 解決方案：統一使用cursor:pointer **問題十：chrome下默認會將小于12px的文本強制按照12px來解析** - 解決方案：添加屬性 ``` -webkit-text-size-adjust: none; ``` #### （2）css hack 我們為了讓頁面形成統一的效果，要針對不同的瀏覽器或不同版本寫出對應可解析的CSS樣式，所以我們就把這個針對不同瀏覽器/版本而寫CSS的過程叫做 CSS hack. 　　CSS hack主要有三種：IE條件注釋法、CSS屬性前綴法、選擇器前綴法。 　　 **1、IE條件注釋法，即在正常代碼之外添加判別IE瀏覽器或對應版本的條件注釋，符合條件的瀏覽器或者版本號才會執行里邊的代碼。** ``` <!-- lt是小于 gt是大于 lte是小于等于 gte是不小于 !是不等于 --> <!-- [if IE]> 你想要執行的代碼 <![endif]--> <!-- [if lt IE 8]> 你想要執行的代碼 <![endif]--> <!-- [if ! IE 8]> 你想要執行的代碼 <![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中絕大部分標簽元素在網頁顯示中都有一個默認屬性值，通常為了避免重復定義元素樣式，需要進行重置默認樣式（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;//網頁可見區域寬 var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//網頁可見區域寬 //以上為不包括邊框的寬高，如果是offsetWidth或者offsetHeight的話包括邊框 var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整個網頁的寬 var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整個網頁的高 var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//網頁被卷去的高 var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//網頁左卷的距離 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節點相關的問題** ``` //DOM節點相關，主要兼容IE 6 7 8 function nextnode(obj){//獲取下一個兄弟節點 if (obj.nextElementSibling) { return obj.nextElementSibling; } else{ return obj.nextSibling; }; } function prenode(obj){//獲取上一個兄弟節點 if (obj.previousElementSibling) { return obj.previousElementSibling; } else{ return obj.previousSibling; }; } function firstnode(obj){//獲取第一個子節點 if (obj.firstElementChild) { return obj.firstElementChild;//非IE678支持 } else{ return obj.firstChild;//IE678支持 }; } function lastnode(obj){//獲取最后一個子節點 if (obj.lastElementChild) { return obj.lastElementChild;//非IE678支持 } else{ return obj.lastChild;//IE678支持 }; } ``` **（4）document.getElementsByClassName問題** ``` //通過類名獲取元素 document.getElementsByClassName('');//IE 6 7 8不支持； //這里可以定義一個函數來解決兼容問題，當然別在這給我提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;//注意返回的也是數組，包含你傳入的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;//注意返回的也是數組，包含你傳入的class所有元素； } ``` **（5）獲取元素的非行間樣式值** ``` //獲取元素的非行間樣式值 function getStyle(object,oCss) { if (object.currentStyle) { return object.currentStyle[oCss];//IE }else{ return getComputedStyle(object,null)[oCss];//除了IE } } ``` **（6）設置監聽事件** ``` //設置監聽事件 function addEvent(obj,type,fn){//添加事件監聽，三個參數分別為 對象、事件類型、事件處理函數，默認為false if (obj.addEventListener) { obj.addEventListener(type,fn,false);//非IE } else{ obj.attachEvent('on'+type,fn);//ie,這里已經加上on，傳參的時候注意不要重復加了 }; } function removeEvent(obj,type,fn){//刪除事件監聽 if (obj.removeEventListener) { obj.removeEventListener(type,fn,false);//非IE } else{ obj.detachEvent('on'+type,fn);//ie，這里已經加上on，傳參的時候注意不要重復加了 }; } ``` **（7）元素到瀏覽器邊緣的距離** ``` //在這里加個元素到瀏覽器邊緣的距離，很實用 function offsetTL(obj){//獲取元素內容距離瀏覽器邊框的距離（含邊框） 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.fromElement;//鼠標來的地方，同樣后面的為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 } ``` ## 三、常見的瀏覽器調優方法： #### 優化原則： - dns是否通過緩存減少查詢時間 - 網絡請求走最近的網絡環境 - 相同的靜態資源緩存 - 減小請求的大小 - 服務端渲染優化 #### 1、減少http請求，合理設置 HTTP緩存 http協議是無狀態的應用層協議，意味著每次http請求都需要建立通信鏈路、進行數據傳輸，而在服務器端，每個http都需要啟動獨立的線程去處理。這些通信和服務的開銷都很昂貴，減少http請求的數目可有效提高訪問性能。 減少http的主要手段是合并CSS、合并javascript、合并圖片。將瀏覽器一次訪問需要的javascript和CSS合并成一個文件，這樣瀏覽器就只需要一次請求。圖片也可以合并，多張圖片合并成一張，如果每張圖片都有不同的超鏈接，可通過CSS偏移響應鼠標點擊操作，構造不同的URL。 - 簡單的圖片效果可以使用html+css、canvas或者svg來替換。 - 合并CSS、合并javascript、合并圖片（webpack等包管理工具） - 圖片格式，大小選擇，圖片優化 #### 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: 儲存在用戶本地終端上的數據(通常經過加密)有長度和個數限制，瀏覽器端也可以通過document.cookie來獲取cookie，并通過js瀏覽器端也可以方便地讀取/設置cookie的值。 - localStorage: localStorage是html5的一種新的本地緩存方案，目前用的比較多，一般用來存儲ajax返回的數據，加快下次頁面打開時的渲染速度。localStorage大小有限制，不適合存放過多的數據，如果數據存放超過最大限制會報錯，并移除最先保存的數據。localStorage存儲的數據是不能跨瀏覽器共用的，一個瀏覽器只能讀取各自瀏覽器的數據 **localStorage核心API**： ``` localStorage.setItem(key, value) //設置記錄 localStorage.getItem(key) //獲取記錄 localStorage.removeItem(key) //刪除該域名下單條記錄 localStorage.clear() //刪除該域名下所有記錄 ``` 注：localStorage對象的屬性值只能是字符串，json對象可以借助JSON類，將對象轉換成字符串保存，然后在取出來的時候將json字符串轉換成真正可用的json對象格式。 - sessionStorage： sessionStorage和localstorage類似，但是瀏覽器關閉則會全部刪除，api和localStorage相同，實際項目中使用較少。 - application cache application cahce是將大部分圖片資源、js、css等靜態資源放在manifest文件配置中。當頁面打開時通過manifest文件來讀取本地文件或是請求服務器文件。 #### 3、啟用壓縮 在服務器端對文件進行壓縮，在瀏覽器端對文件解壓縮，可有效減少通信傳輸的數據量。如果可以的話，盡可能的將外部的腳本、樣式進行合并，多個合為一個。文本文件的壓縮效率可達到80%以上，因此HTML、CSS、javascript文件啟用GZip壓縮可達到較好的效果。但是壓縮對服務器和瀏覽器產生一定的壓力，在通信帶寬良好，而服務器資源不足的情況下要權衡考慮。 采用網上在線壓縮工具（jQuery MiniUI）自己壓縮或者通過webpack、gulp等打包工具進行壓縮處理。 #### 4、CSS Sprites CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。 CSS Sprites為一些大型的網站節約了帶寬， 提高了用戶的加載速度和用戶體驗，不需要加載更多的圖片 #### 5、LazyLoad Images 對于圖片而言，在頁面剛加載的時候可以只加載第一屏，當用戶繼續往后滾屏的時候才加載后續的圖片。 - jqueryLazyload方式 - echo.js方式 #### 6、CSS放在頁面最上部，javascript放在頁面最下面 head 內的 JavaScript 需要執行結束才開始渲染 body，所以盡量不要將 JS 文件放在 head 內。可以選擇在 document complete 時，或者特定區塊后引入和執行 JavaScript。而 CSS 應當寫在 head 中，以避免頁面元素由于樣式缺失造成瞬間的白頁或者給用戶閃爍感。