CSS3與頁面佈局學習總結（八）——瀏覽器兼容與前端性能優化

時間 2019-11-12

標籤 css3 css 頁面佈局學習總結瀏覽器兼容前端性能優化欄目 CSS 简体版

原文原文鏈接

CSS3與頁面佈局學習總結（八）——瀏覽器兼容與前端性能優化

目錄javascript

1、瀏覽器兼容

2、前端性能優化

3、示例下載

1、瀏覽器兼容

1.一、概要

世界上沒有任何一個瀏覽器是同樣的，一樣的代碼在不同的瀏覽器上運行就存在兼容性問題。不一樣瀏覽器其內核亦不盡相同，相同內核的版本不一樣，相同版本的內核瀏覽器品牌不同，各類運行平臺還存在差別、屏幕分辨率不同，大小不同，比例不同。兼容性主要考慮三方面：php

1)、CSS兼容
2)、JavaScript兼容
3)、HTML兼容css

這三類也是前端的主要組成部分，都存在必定的兼容性問題，知己知彼，百戰百勝，咱們先了解瀏覽器的發動機—內核。html

多年前咱們一直爲IE6兼容煩惱，爲它沒少加班；盼走了IE6如今又出現了IE8，看來兼容沒有盡頭...前端

1.二、瀏覽器內核

Trident
Microsoft公司瀏覽器內核，IE六、IE七、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）及許多品牌瀏覽器的內核。其中部分瀏覽器的新版本是「雙核」甚至是「多核」，其中一個內核是Trident，而後再增長一個其餘內核。java

Gecko
Firefox內核，Netscape6開始採用的內核，後來的Mozilla FireFox(火狐瀏覽器) ，Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位開源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon使用的內核。git

Presto
Opera前內核，已廢棄，Opera現已改用Google Chrome的Blink內核。github

Webkitweb

Safari內核,Chrome內核原型,開源，它是蘋果公司本身的內核，也是蘋果的Safari瀏覽器使用的內核。傲遊瀏覽器三、Apple Safari、(Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 默認瀏覽器ajax

Blink

Blink是一個由Google和Opera Software開發的瀏覽器排版引擎，Google計劃將這個渲染引擎做爲Chromium計劃的一部分，這一渲染引擎是開源引擎WebKit中WebCore組件的一個分支，而且在Chrome（28及日後版本）、Opera（15及日後版本）。

edge

微軟專門爲新IE打造的引擎，速度快，目前已經基於此引擎開發了瀏覽器，目前IE11使用該內核，估計之後微軟的新瀏覽器會繼續採用該內核。

1.三、瀏覽器市場份額（Browser Market Share）

經過瀏覽器的市份額咱們能夠在處理瀏覽器兼容性時會更加關注市場份額高的瀏覽器，適當的時候能夠放棄市場份額佔有量小的瀏覽器。

國際：

查詢地址：https://www.netmarketshare.com

2016年12月PC瀏覽器數據

2016年12月平板+移動數據

2016年瀏覽器份額變化

國內：

查詢地址：http://tongji.baidu.com/data/browser

從上圖能夠看出，咱們在針對PC Web開發時須要重點關注Chrome、IE瀏覽器，開發Mobile項目時要重點關注Chrome瀏覽器與Safari。

1.四、兼容的通常標準

1)、在不一樣的主流的瀏覽器上表現效果一致

2)、能適應不一樣的屏幕大小

3)、能適應不一樣的分辨率與色彩深度

瀏覽器兼容在線測試：

http://browsershots.org/

IE測試能夠安裝：IETester在本地測試。

1.五、CSS Reset

每種瀏覽器都有一套默認的樣式表，即user agent stylesheet，網頁在沒有指定的樣式時，按瀏覽器內置的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可讓咱們的排版更美觀整齊。不一樣瀏覽器甚至同一瀏覽器不一樣版本的默認樣式是不一樣的。但這樣會有不少兼容問題，CSSReset能夠將全部瀏覽器默認樣式設置成同樣。

如全局重置*{ padding: 0; margin: 0; border:}雖然能所有重置，但因爲性能較低，不推薦使用。由於*須要遍歷整個DOM樹，當頁面節點較多時，會影響頁面的渲染性能。
這個網站http://cssreset.com/有最新的CSSReset提供給你們參考。

Normalize (號稱是CSS reset的替代方案，保留了一些內置的樣式，並非清除全部)

http://nicolasgallagher.com/about-normalize-css/

https://github.com/necolas/normalize.css

示例：請看第2章的內容

1.六、CSS Hack

CSS Hack就是針對不一樣的瀏覽器或不一樣版本瀏覽器寫特定的CSS樣式達到讓瀏覽器兼容的過程。

1.6.一、條件註釋法

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.6.二、樣式內屬性標記法

在CSS樣式的屬性名前或值後面添加特殊的字符讓不一樣的瀏覽器解析。

http://browserhacks.com/在線查詢，這一個功能強大的提供各類針對性兼容辦法的網站，很是實用。

「-″下劃線是IE6專有的hack
「\9″ IE6/IE7/IE8/IE9/IE10都生效
「\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
「\9\0″ 只對IE9/IE10生效，是IE9/10的hack

這裏以IE6雙邊距問題爲例。

代碼：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 100px; height: 100px; background: lightgreen; float: left; margin-left: 100px; _margin-left: 50px; } </style> </head> <body> <div id="div1"></div> </body> </html>

效果：

1.6.三、選擇器前綴法

*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效

《hack速查表》：

View Code

示例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> @media screen\0 { body { background: lightblue; } } </style> </head> <body> </body> </html>

運行結果：

1.七、文檔模式（X-UA-Compatible）

文檔模式是IE8瀏覽器之後的一種獨有技術，他能夠經過meta指定當前文檔的渲染模式，如能夠把IE8降級成IE六、IE7使用。文檔模式的主要做用是影響瀏覽器顯示網頁HTML的方式，用於指定IE的頁面排版引擎（Trident）以哪一個版本的方式來解析並渲染網頁代碼。

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瀏覽器內核

未指定文檔模式時使用默認的文檔模式示例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>X-UA-Compatible</title> <style> #div1 { width: 100px; height: 100px; background: lightgreen; float: left; margin-left: 100px; _margin-left: 50px; } </style> </head> <body> <div id="div1"></div> </body> </html>

運行結果：

強制指定文檔模式爲IE6，在IE8下會自動變成怪異模式，簡單說IE8被看成IE6在用。

多數狀況下咱們不會這樣降級使用，通常會將IE選擇爲最新版本的文檔模式（注意不是文檔類型），若是IE瀏覽器使用了GCF技術咱們應該強制使用最新版內核，寫入以下：

<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1" />

如今多數網站這是這種寫法如baidu。

1.八、javascript兼容

這裏有兩層意思，第一可使用javascript操做樣式與標籤，強制瀏覽器兼容，好比先使用javascript判斷瀏覽器類型，再操做樣式與標籤。

第二指javascript存在兼容問題，如一個對象在某些瀏覽器下沒有辦法使用，要讓javascript更加兼容，能夠採起以下辦法：

一、使用第三方提代的javascript庫，如jQuery，Zepto， Prototype，dojo、YUI、ExtJS

像jQuery這種成熟的javascript庫通過屢次的版本迭代，已經變得很是成熟，世界上的網站到如今近60%都使用到了jQuery，他的兼容性不錯。

二、瀏覽器檢測、從新封裝

使用javascript判斷瀏覽器類型，對一些特色的方法或對象從新封裝後使用屏蔽瀏覽的不兼容性。可使用User-Agent、或特定對象。

示例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2 id="msg"></h2> <script type="text/javascript"> //用於檢測瀏覽器是否爲IE var isIE=function(){ return !!window.ActiveXObject; } function show(info){ document.getElementById("msg").innerHTML+=info+"<br/>" } //得到用戶代理對象，瀏覽器與操做系統信息  show(navigator.userAgent); show(isIE()?"是IE瀏覽器":"不是IE瀏覽器"); </script> </body> </html>

效果：

在user-agent中包含有很多的客戶端信息，能夠解析出判斷瀏覽器部分的內容。

2、前端性能優化

2.一、概要

在保證功能的前提下，性能也很是關鍵。從上圖能夠看出若是性能太差，響應速度慢將帶很是差的用戶體驗，會失去大量用戶。好的性能要依託以下幾個方面：

1)、服務器端

2)、網絡速度，客戶端與服務器之間的每一個網絡環節

3)、客戶端軟件與硬件配置

4)、前端的性能，資源的數量，大小，javascript的時間與空間複雜度等

要提升前端的性能能夠從以下幾個方面入手：

1)、儘可能減小HTTP請求數量
2)、壓縮
3)、緩存
4)、使用內容發佈網絡（CDN的使用）
5)、DNS Prefetch
6)、將CSS樣式表放在頂部
7)、將javascript腳本放在底部
8)、使用外部javascript和CSS
9)、避免重定向

2.二、減小HTTP請求數量

前端優化的黃金準則指導着前端頁面的優化策略：只有10%-20%的最終用戶響應時間花在接受請求的HTML文檔上，剩下的80%-90%時間花在爲HTML文檔所引用的全部組件（圖片、腳本、樣式表等）進行的HTTP請求上。

一、圖片地圖

二、CSS Sprite

三、Data URI Scheme（內聯資源）

四、樣式表的合併

五、使用Web Font字體圖標

2.2.一、圖片地圖

圖片地圖與稱熱點圖片，不算新技術，早在HTML4.0中就存在了，就是在圖片的指定區域指定超連接。這樣作的目的是將本來須要物理拆分的圖片合併在一塊兒，經過熱點單獨指定連接，間接的減小了客戶端請求服務器圖片的數量。

示例代碼：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="img/banner.jpg" width="600" usemap="#Map"/> <map name="Map"> <area shape="rect" coords="22,35,149,148" href="#" onclick="return show('鳥')"> <area shape="circle" coords="505,88,75" href="#" onclick="return show('獎盃')"> <area shape="rect" coords="168,39,392,70" href="#" onclick="return show('文字')"> </map> <script type="text/javascript"> function show(arg){ alert(arg); return false; } </script> </body> </html>

運行效果：

2.2.二、精靈圖片（Sprite）

就是把多張細小的圖片拼成一張大圖片，而後經過CSS來控制在什麼地方具體顯示這整張圖片的什麼位置，使用CSS裁剪出想要的圖片，這樣能夠減小客戶端請求小圖片的次數。

示例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS Sprite</title> <style type="text/css"> #icon{ height: 64px; width: 56px; background: url(img/allbgs.png) no-repeat #fff; background-position: -128px 0; } </style> </head> <body> <h2>CSS Sprite</h2> <div id="icon"></div> </body> </html>

詳細請查看個人另外一篇文章：《CSS3與頁面佈局學習總結（五）——Web Font與Sprite》

2.2.三、字體圖標（Web Font）

使用@font-face可以加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體，能夠實現矢量圖標，一次加載反覆使用多個圖標，至關於圖標都變成了字體。能夠將多個小圖標定義在一個字體中，減小圖標的請求次數。

示例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>font-face</title> <style type="text/css"> @font-face { font-family: 'iconfont'; /*字體名稱*/ src: url('font/fontello.eot?53711433'); /*字體文件路徑*/ src: url('font/fontello.eot?53711433#iefix') format('embedded-opentype'), url('font/fontello.woff2?53711433') format('woff2'), url('font/fontello.woff?53711433') format('woff'), url('font/fontello.ttf?53711433') format('truetype'), url('font/fontello.svg?53711433#fontello') format('svg'); font-weight: normal; /*加粗*/ font-style: normal; /*字形，如斜體*/ } .ok{ font-family: iconfont; font-size: 16px; color: blue; } </style> </head> <body> <i class="ok">&#59405</i>贊 <i class="ok">&#xe80d</i>贊 </body> </html>

運行效果：

具體請查看個人另外一篇文章：《CSS3與頁面佈局學習總結（五）——Web Font與Sprite》

2.2.四、內聯資源（Data URI Scheme）

所謂的內聯資源就是將一些小的資源文件序列化成base64的編碼，放在CSS樣式或頁面中，在客戶端再解析，優勢是合併了小的文件，減小請求，把二進制變成了字符串方便存儲，可是會出一個沒有意義的長字符串影響開發時閱讀代碼，另外在某些狀況下將失去圖片的緩存。

data類型的Url格式，是1998年在RFC2397中提出，如今多數瀏覽器支持，IE8支持。能夠在CSS，HTML中嵌入小的非字符數據。

直接引用：
<img src="data:image/jpeg;base64,/9j/4AAQSk.."/>

樣式中引用：
background: url(data:image/gif;base64,R0lGOD==)

示例：

View Code

效果：

若是須要將圖片或其它資源文件轉成base64編碼，可使用轉換工具、在線轉換或使用Less等方法。

固然字體也能夠轉換，能夠參考前面的文章。

2.2.五、合併資源

將多個小的離散的css、js文件合併，注意粒度，把多個請求變成1個請求
手動合併：複製粘貼
工具合併
copy a.js+b.js+c.js abc.js /b
Jscompres
CssGaga

2.三、壓縮

用戶請求的資源越小速度將越快，網絡帶寬佔用越小，可是壓縮將佔用更多的CPU資源，壓縮與解壓也是須要成本的。

2.3.一、GZIP壓縮

GZIP，即網頁壓縮，是由WEB服務器和瀏覽器之間共同遵照的協議
Gzip一般能夠減小70%網頁內容的大小，包括腳本、樣式表、圖片等文件

2.3.二、開啓Tomcat Gzip壓縮

使用gzip壓縮能夠減小數據傳輸大小，加快網頁加載速度。不少大站都開啓了gzip壓縮，不過也有不少網站並無開啓gzip壓縮，gzip壓縮後對SEO不友好，但從帶寬和流量的角度來看，仍是有必要開啓gzip壓縮的。

對於tomcat7服務器，打開conf文件夾下的server.xml 文件，找到

<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" />

修改成：

<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" compression="on" compressionMinSize="2048" noCompressionUserAgents="gozilla,traviata" compressableMimeType="text/html,text/xml,text/javascript,application/x-javascript,application/javascript,text/css,text/plain"/>

測試運行：

保存退出，重啓tomcat服務器便可。可使用下面網站測一下gzip是否開啓：

http://www.gidnetwork.com/tools/gzip-test.php

2.3.三、開啓IIS Gzip壓縮

IIS設置示例：

未啓用gzip時的文件大小：

啓用gzip時的文件大小：

約8.6倍，固然這裏只是一我的爲構造的示例，壓縮對字符頗有效，可是圖片由於已是壓縮格式效果不明顯，另外還要注意爲了提升性能，註釋在發佈後應該刪除。

2.3.四、壓縮javascript、css

能夠在IDE中安裝插件，也可使用單獨的工具，或者在前端自動化中設置壓縮步驟。

2.3.五、優化圖像

選擇合適的圖像壓縮格式，常見是gif、jpg、png
離線工具：jpegmini.exe
在線工具：http://img.hust.cc/

未壓縮前的圖片，311KB：

壓縮後的圖片，124KB：

比較一下，很難發現他們的質量有什麼區別，可是有2.5倍的體積差異，使用的壓縮工具是：

https://tinypng.com/

http://zhitu.isux.us/

2.3.六、壓縮HTML

去除html中的多餘空格、註釋等內容（演示）
後臺動態壓縮，頁面渲染時壓縮

這裏使用一個asp.net中的示例，在頁面輸出前在服務將內容壓縮，代碼以下：

using System; using System.Collections.Generic; using System.Configuration; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Text.RegularExpressions; using System.IO; /// <summary> ///BP 的摘要說明 /// </summary> public class BasePage : Page { public BasePage() { } protected override void OnInit(EventArgs e) { base.OnInit(e); } protected override void Render(HtmlTextWriter writer) { StringWriter sw = new StringWriter(); HtmlTextWriter htw = new HtmlTextWriter(sw); base.Render(htw); string op = sw.ToString(); op = Regex.Replace(op, "<!--.*-->", ""); op = Regex.Replace(op, @"\s+", " "); op = Regex.Replace(op, @">\s+<", "><"); op = op.Replace(@"//<![CDATA[", "//<![CDATA[" + Environment.NewLine); op = op.Replace(@"//.*\s+", ""); writer.Write(op); } }

2.四、緩存

2.4.一、http頭部緩存

Expires是Web服務器響應消息頭字段，在響應http請求時告訴瀏覽器在過時時間前瀏覽器能夠直接從瀏覽器緩存取數據，而無需再次請求新內容，可使用客戶端緩存的內容，可是請求仍是會發生，狀態爲304。瀏覽器會默認開啓緩存功能。

由於Expires是HTTP 1.0中的內容，如今默認瀏覽器均默認使用HTTP 1.1，因此它的做用基本忽視，在1.1中咱們使用Cache-control，詳細以下：
Public 指示響應可被任何緩存區緩存。
Private 指示對於單個用戶的整個或部分響應消息，不能被共享緩存處理。這容許服務器僅僅描述當用戶的部分響應消息，此響應消息對於其餘用戶的請求無效。
no-cache 指示請求或響應消息不能緩存（HTTP/1.0用Pragma的no-cache替換）根據什麼能被緩存
no-store 用於防止重要的信息被無心的發佈。在請求消息中發送將使得請求和響應消息都不使用緩存。根據緩存超時

max-age 指示客戶機能夠接收生存期不大於指定時間（以秒爲單位）的響應。
min-fresh 指示客戶機能夠接收響應時間小於當前時間加上指定時間的響應。
max-stale 指示客戶機能夠接收超出超時期間的響應消息。若是指定max-stale消息的值，那麼客戶機能夠接收超出超時期指定值以內的響應消息。
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2009 23:00:00 GMT" />

2.4.二、本地存儲

LocalStorage、SessionStorage、Web SQL Database

2.4.三、離線緩存

ApplicationCache，在斷開服務器時仍然可使用客戶端的緩存文件，繼續瀏覽。

2.4.四、動態頁面靜態化

將動態內容，須要複雜計算的內容變成靜態的如HTML、JavaScript

不能靜態化的部分可使用ajax。

2.五、內容分發網絡（CDN）

CDN的全稱是Content Delivery Network，即內容分發網絡。其基本思路是儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定，它是一個經策略性部署的總體系統，包括分佈式存儲、負載均衡、網絡請求的重定向和內容管理4個要件。

好比咱們在項目中使用jQuery ,加載本地服務器的jQuery可能不如資源公共庫中作過CDN優化的資源快。

http://cdn.code.baidu.com/ 百度靜態資源公共庫

http://lib.sinaapp.com/ 新浪

2.六、DNS Prefetch

DNS Prefetch 是一種 DNS 預解析技術。當你瀏覽網頁時，瀏覽器會在加載網頁時對網頁中的域名進行解析緩存，這樣在你單擊當前網頁中的鏈接時就無需進行 DNS 的解析，減小用戶等待時間，提升用戶體驗。

1)、經過 link 標籤
< link rel="dns-prefetch" href="http://api.twitter.com" />
2)、經過 meta 標籤
< meta http-equiv="x-dns-prefetch-control" content="on" />
3)、設置 Http header 的 x-dns-prefetch-control 屬性爲 on 進行控制。
Firefox: 3.5+ Chrome: Supported
Safari 5+ IE: 9

2.七、小節

優化是沒有止境的，只有更快沒有最快，下面兩篇文章只介紹了更多關於前端優化的方法。

英文原文：https://developer.yahoo.com/performance/rules.html

中文翻譯：http://www.cnblogs.com/developersupport/p/webpage-performance-best-practices.html

《高性能網站建設指南》這本書中提出了一些規則：

規則1——減小HTTP請求
規則2——使用內容發佈網絡
規則3——添加Expires頭
規則4——壓縮組件
規則5——將樣式表放在頂部
規則6——將腳本放在底部
規則7——避免CSS表達式
規則8——使用外部JavaScript和CSS
規則9——減小DNS查找
規則10——精簡JavaScript
規則11——避免重定向
規則12——移除重複腳本
規則13——配置ETag
規則14——使AjaX可緩存