本篇介紹了CSS3與頁面布局學(xué)習(xí)總結(jié)——瀏覽器兼容與前端性能優(yōu)化，具體如下：
一、瀏覽器兼容
1.1、概要
世界上沒有任何一個(gè)瀏覽器是一樣的，同樣的代碼在不一樣的瀏覽器上運(yùn)行就存在兼容性問題。不同瀏覽器其內(nèi)核亦不盡相同，相同內(nèi)核的版本不同，相同版本的內(nèi)核瀏覽器品牌不一樣，各種運(yùn)行平臺(tái)還存在差異、屏幕分辨率不一樣，大小不一樣，比例不一樣。兼容性主要考慮三方面：
1)、CSS兼容
2)、JavaScript兼容
3)、HTML兼容
這三類也是前端的主要組成部分，都存在一定的兼容性問題，知己知彼，百戰(zhàn)百勝，我們先了解瀏覽器的發(fā)動(dòng)機(jī)—內(nèi)核。
多年前我們一直為IE6兼容煩惱，為它沒少加班；盼走了IE6現(xiàn)在又出現(xiàn)了IE8，看來兼容沒有盡頭...
1.2、瀏覽器內(nèi)核
Trident
Microsoft公司瀏覽器內(nèi)核，IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）及許多品牌瀏覽器的內(nèi)核。其中部分瀏覽器的新版本是“雙核”甚至是“多核”，其中一個(gè)內(nèi)核是Trident，然后再增加一個(gè)其他內(nèi)核。
Gecko
Firefox內(nèi)核，Netscape6開始采用的內(nèi)核，后來的Mozilla FireFox(火狐瀏覽器) ，Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位開源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon使用的內(nèi)核。
Presto
Opera前內(nèi)核，已廢棄，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核。
Webkit
Safari內(nèi)核,Chrome內(nèi)核原型,開源，它是蘋果公司自己的內(nèi)核，也是蘋果的Safari瀏覽器使用的內(nèi)核。 傲游瀏覽器3、Apple Safari、(Win/Mac/iPhone/iPad)、Symbian手機(jī)瀏覽器、Android 默認(rèn)瀏覽器
Blink
Blink是一個(gè)由Google和Opera Software開發(fā)的瀏覽器排版引擎，Google計(jì)劃將這個(gè)渲染引擎作為Chromium計(jì)劃的一部分，這一渲染引擎是開源引擎WebKit中WebCore組件的一個(gè)分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）。
edge
微軟專門為新IE打造的引擎，速度快，目前已經(jīng)基于此引擎開發(fā)了瀏覽器，目前IE11使用該內(nèi)核，估計(jì)以后微軟的新瀏覽器會(huì)繼續(xù)采用該內(nèi)核。
1.3、瀏覽器市場(chǎng)份額（Browser Market Share）
能過瀏覽器的市份額我們可以在處理瀏覽器兼容性時(shí)會(huì)更加關(guān)注市場(chǎng)份額高的瀏覽器，適當(dāng)?shù)臅r(shí)候可以放棄市場(chǎng)份額占有量小的瀏覽器。
國際：
查詢地址：https://www.netmarketshare.com
2016年12月PC瀏覽器數(shù)據(jù)
2016年12月平板+移動(dòng)數(shù)據(jù)
2016年瀏覽器份額變化
國內(nèi)：
查詢地址：http://tongji.baidu.com/data/browser
從上圖可以看出，我們?cè)卺槍?duì)PC Web開發(fā)時(shí)需要重點(diǎn)關(guān)注Chrome、IE瀏覽器，開發(fā)Mobile項(xiàng)目時(shí)要重點(diǎn)關(guān)注Chrome瀏覽器與Safari。
1.4、兼容的一般標(biāo)準(zhǔn)
1)、在不同的主流的瀏覽器上表現(xiàn)效果一致
2)、能適應(yīng)不同的屏幕大小
3)、能適應(yīng)不同的分辨率與色彩深度
瀏覽器兼容在線測(cè)試：
http://browsershots.org/
http://browsershots.org/
IE測(cè)試可以安裝：IETester在本地測(cè)試。
1.5、CSS Reset
每種瀏覽器都有一套默認(rèn)的樣式表，即user agent stylesheet，網(wǎng)頁在沒有指定的樣式時(shí)，按瀏覽器內(nèi)置的樣式表來渲染。這是合理的，像word中也有一些預(yù)留樣式，可以讓我們的排版更美觀整齊。不同瀏覽器甚至同一瀏覽器不同版本的默認(rèn)樣式是不同的。但這樣會(huì)有很多兼容問題，CSSReset可以將所有瀏覽器默認(rèn)樣式設(shè)置成一樣。
如全局重置*{ padding: 0; margin: 0; border:}雖然能全部重置，但由于性能較低，不推薦使用。因?yàn)?需要遍歷整個(gè)DOM樹，當(dāng)頁面節(jié)點(diǎn)較多時(shí)，會(huì)影響頁面的渲染性能。這個(gè)網(wǎng)站http://cssreset.com/有最新的CSSReset提供給大家參考。
Normalize (號(hào)稱是CSS reset的替代方案，保留了一些內(nèi)置的樣式，并不是清除所有)
http://nicolasgallagher.com/about-normalize-css/
https://github.com/necolas/normalize.css
示例：請(qǐng)看第2章的內(nèi)容
1.6、CSS Hack
CSS Hack就是針對(duì)不同的瀏覽器或不同版本瀏覽器寫特定的CSS樣式達(dá)到讓瀏覽器兼容的過程。
1.6.1、條件注釋法
IE條件注釋（Conditional comments）是IE瀏覽器私有的代碼，在其它瀏覽器中被視為注釋。
gt : greater than，選擇條件版本以上版本，不包含條件版本 >
lt : less than，選擇條件版本以下版本，不包含條件版本 <
gte : greater than or equal，選擇條件版本以上版本，包含條件版本>=
lte : less than or equal，選擇條件版本以下版本，包含條件版本 <=
! : 選擇條件版本以外所有版本，無論高低
*只有IE瀏覽器認(rèn)識(shí)條件注釋、其它瀏覽器會(huì)跳過