[轉+整合]瀏覽器相容與前端效能優化
一、瀏覽器相容
1.1、概要
世界上沒有任何一個瀏覽器是一樣的，同樣的程式碼在不一樣的瀏覽器上執行就存在相容性問題。不同瀏覽器其核心亦不盡相同，相同核心的版本不同，相同版本的核心瀏覽器品牌不一樣，各種執行平臺還存在差異、螢幕解析度不一樣，大小不一樣，比例不一樣。相容性主要可以分類為：
1)、CSS相容
2)、JavaScript相容
3)、HTML相容
這三類也是前端的主要組成部分，都存在一定的相容性問題，知己知彼，百戰百勝，我們先了解瀏覽器的發動機—核心。
1.2、瀏覽器核心
Trident
Microsoft公司瀏覽器核心，IE6、IE7、IE8（Trident 4.0）、IE9
Gecko
Firefox核心，Netscape6開始採用的核心，後來的Mozilla FireFox(火狐瀏覽器) ，Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位開源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon使用的核心。
Presto
Opera前核心，已廢棄，Opera現已改用Google Chrome
Webkit
Safari核心,Chrome核心原型,開源，它是蘋果公司自己的核心，也是蘋果的Safari瀏覽器使用的核心。 傲遊瀏覽器3、Apple Safari、(Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 預設瀏覽器
Blink
Blink是一個由Google和Opera Software開發的瀏覽器排版引擎，Google計劃將這個渲染引擎作為Chromium計劃的一部分，這一渲染引擎是開源引擎WebKit中WebCore元件的一個分支，並且在Chrome（28及往後版本）、Opera（15及往後版本）。
edge
微軟專門為新
1.3、相容的一般標準
1)、在不同的主流的瀏覽器上表現效果一致
2)、能適應不同的螢幕大小
3)、能適應不同的解析度與色彩深度
每種瀏覽器都有一套預設的樣式表，即user agent stylesheet，網頁在沒有指定的樣式時，按瀏覽器內建的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可以讓我們的排版更美觀整齊。不同瀏覽器甚至同一瀏覽器不同版本的預設樣式是不同的。但這樣會有很多相容問題，CSSReset可以將所有瀏覽器預設樣式設定成一樣。
如全域性重置*{ padding: 0; margin: 0; border:}雖然能全部重置，但由於效能較低，不推薦使用。因為*需要遍歷整個DOM樹，當頁面節點較多時，會影響頁面的渲染效能。
1.5、CSS Hack
CSS Hack就是針對不同的瀏覽器或不同版本瀏覽器寫特定的CSS樣式達到讓瀏覽器相容的過程。
1.5.1、條件註釋法
IE條件註釋（Conditional comments）是IE瀏覽器私有的程式碼，在其它瀏覽器中被視為註釋。
<!--[if IE]>用於 IE <![endif]-->
<!--[if IE 6]>用於 IE6 <![endif]-->
<!--[if IE 7]>用於 IE7 <![endif]-->
<!--[if IE 8]>用於 IE8 <![endif]-->
<!--[if IE 9]>用於 IE9 <![endif]-->
<!--[if gt IE 6]> 用於 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用於 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用於 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用於 IE9 以下版本<![endif]-->
<!--[if !IE 8]> -->用於非 IE <!-- <![endif]-->gt : greater than，選擇條件版本以上版本，不包含條件版本 >
lt : less than，選擇條件版本以下版本，不包含條件版本 <
gte : greater than or equal，選擇條件版本以上版本，包含條件版本>=
lte : less than or equal，選擇條件版本以下版本，包含條件版本 <=
! : 選擇條件版本以外所有版本，無論高低
*只有IE瀏覽器認識條件註釋、其它瀏覽器會跳過
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--[if gt IE 6]>
<style>
body{
background:lightblue;
}
</style>
<![endif]-->
<!--[if lt IE 8]>
<script type="text/javascript">
alert("您的瀏覽器Out了，請下載更新。");
</script>
<![endif]-->
</head>
<body>
<!--[if gt IE 6]>
<h2>大於IE6版本的瀏覽器</h2>
<![endif]-->
</body>
</html>效果：
IE8
chrome
ie6
1.5.1、樣式內屬性標記法
在CSS樣式的屬性名前或值後面新增特殊的字元讓不同的瀏覽器解析。
“-″下劃線是IE6專有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只對IE9/IE10生效，是IE9/10的hack
文件模式是IE8瀏覽器以後的一種獨有技術，他可以通過meta指定當前文件的渲染模式，如可以把IE8降級成IE6、IE7使用。文件模式的主要作用是影響瀏覽器顯示網頁HTML的方式，用於指定IE的頁面排版引擎（Trident）以哪個版本的方式來解析並渲染網頁程式碼。
<meta http-equiv="X-UA-Compatible" content="IE=6" >
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge" >最新IE“X-UA-Compatible”的值有兩種方式：Emulate+IE版本號，單純版本號
EmulateIE8：如果聲明瞭文件型別，則以IE8標準模式渲染頁面，否則將文件模式設定為IE5
9：強制以IE9標準模式渲染頁面，忽略文件型別宣告
x-ua-compatible 頭標籤大小寫不敏感，必須用在 head 中，必須在除 title 外的其他 meta 之前使用。
<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >
<meta http-equiv ="X-UA-Compatible" content = "IE=edge,chrome=1" />
Google Chrome Frame(谷歌內嵌瀏覽器框架GCF)
外掛可以讓使用者的IE瀏覽器外不變，但使用者在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器核心未指定文件模式時使用預設的文件模式。多數情況下我們不會這樣降級使用，一般會將IE選擇為最新版本的文件模式（注意不是文件型別），如果IE瀏覽器使用了GCF技術我們應該強制使用最新版核心，寫入如下：
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1" />
二、前端效能優化
2.1、概要
在保證功能的前提下，效能也非常關鍵。從上圖可以看出如果效能太差，響應速度慢將帶非常差的使用者體驗，會失去大量使用者。好的效能要依託如下幾個方面：
1)、伺服器端
2)、網路速度，客戶端與伺服器之間的每個網路環節
3)、客戶端軟體與硬體配置
4)、前端的效能，資源的數量，大小，javascript的時間與空間複雜度等
要提高前端的效能可以從如下幾個方面入手：
1)、儘量減少HTTP請求數量
2)、壓縮(webpack,gulp,grunt)
3)、快取
4)、使用內容釋出網路（CDN的使用）
5)、DNS Prefetch
6)、將CSS樣式表放在頂部
7)、將javascript指令碼放在底部
8)、使用外部javascript和CSS
9)、避免重定向
2.2、減少HTTP請求數量
前端優化的黃金準則指導著前端頁面的優化策略：只有10%-20%的終端使用者響應時間花在接受請求的HTML文件上，剩下的80%-90%時間花在為HTML文件所引用的所有元件（圖片、指令碼、樣式表等）進行的HTTP請求上。
1、圖片地圖
3、Data URI Scheme（內聯資源）
4、樣式表的合併
5、使用Web Font字型圖示
2.2.1、圖片地圖
圖片地圖與稱熱點圖片，不算新技術，早在HTML4.0中就存在了，就是在圖片的指定區域指定超連結。這樣做的目的是將原本需要物理拆分的圖片合併在一起，通過熱點單獨指定連結，間接的減少了客戶端請求伺服器圖片的數量。
<img src="圖形檔名" usemap="#圖的名稱">
<map name="圖的名稱">
<area shape=形狀 coords=區域座標列表 href="URL資源地址">
<!--可根據需要定義多少個熱點區域-->
<area shape=形狀 coords=區域座標列表 href="URL資源地址">
</map>2.3、快取
2.3.1、http頭部快取
<meta http-equiv="Expires" content="Tue, 01 Dec 2015 13:30:26 GMT" />
Expires是Web伺服器響應訊息頭欄位，在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器快取取資料，而無需再次請求新內容，可以使用客戶端快取的內容，但是請求還是會發生，狀態為304。瀏覽器會預設開啟快取功能。
2.4、內容分發網路 （CDN）
CDN的全稱是Content Delivery Network，即內容分發網路。其基本思路是儘可能避開網際網路上有可能影響資料傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定，它是一個經策略性部署的整體系統，包括分散式儲存、負載均衡、網路請求的重定向和內容管理4個要件。
比如我們在專案中使用jQuery ,載入本地伺服器的jQuery可能不如資源公共庫中做過CDN優化的資源快。
《高效能網站建設指南》這本書中提出了一些規則：
規則1——減少HTTP請求
規則2——使用內容釋出網路
規則3——新增Expires頭
規則4——壓縮元件
規則5——將樣式表放在頂部
規則6——將指令碼放在底部
規則7——避免CSS表示式
規則8——使用外部JavaScript和CSS
規則9——減少DNS查詢
規則10——精簡JavaScript
規則11——避免重定向
規則12——移除重複指令碼
規則13——配置Etag
規則14——使AjaX可快取