CSS編寫時(shí)的高性能以及高維護(hù)性代碼優(yōu)化建議有哪些

今天就跟大家聊聊有關(guān)CSS編寫時(shí)的高性能以及高維護(hù)性代碼優(yōu)化建議有哪些，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來，先為威海等服務(wù)建站，威海等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為威海企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

性能，這個(gè)詞如今被炒的很熱，也是每個(gè)開發(fā)者，由“知道”、“會(huì)做”之后必經(jīng)的一個(gè)“怎樣做好”的階段。性能關(guān)乎用戶在不同設(shè)備和不同網(wǎng)絡(luò)狀態(tài)下的體驗(yàn)。也被多方面因素所影響。此文說說css方面怎樣做到高性能。

高性能css

Html和css本身的性能問題并不突出，在提高可讀性和可維護(hù)性的前提下，如果能讓代碼運(yùn)行和解析的速度更快，則是錦上添花了。

一、使用高效css選擇器

簡(jiǎn)單來說，能被瀏覽器快速解析和匹配的css選擇器，就是高效的選擇器。

首先要知道瀏覽器如何解析css

舉個(gè)例子：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .nav ul.list li div{}  

我們常見的思維是，先去找到nav這個(gè)類，再找類包含的ul，再找ul中類為list的后代所有l(wèi)i中所有的div，簡(jiǎn)而言之，就是從左到右?？墒聦?shí)是這樣么？么？么？~

事實(shí)是相反的！意味著什么呢？就是說它不是從第一個(gè)開始去慢慢的縮小范圍，而是從div這個(gè)“裸奔”的盒子開始，相當(dāng)于遍歷，然后再找到li，以此類推，好吧不用我形容你應(yīng)該知道這當(dāng)中的消耗。理解這一原理非常重要，高效的選擇器意味著匹配更快，查找次數(shù)更少。所以我們定義選擇器時(shí)，應(yīng)該讓第一次匹配時(shí)的數(shù)量達(dá)到最少，并且讓整體的匹配查找次數(shù)最少。

以上這些解釋恰恰遵循了這樣一些原則

（1）避免使用通配符

（2）避免使用標(biāo)簽選擇器和單個(gè)屬性選擇器作為關(guān)鍵選擇器

（3）不要在id選擇器前加標(biāo)簽名

（4）盡量不要在選擇符定義過多層級(jí)，層級(jí)越少，同時(shí)也降低了css和dom結(jié)構(gòu)的耦合程度，提高樣式的可維護(hù)性

（ps：老實(shí)說上面的這些“禁忌”你是不是都有犯過？~）

做個(gè)小結(jié)，以上所說，有兩點(diǎn)需要知道，第一點(diǎn)在開頭就已經(jīng)提到，css的性能問題表現(xiàn)的并不突出，特別是在小項(xiàng)目中，所以，可維護(hù)性為先；第二點(diǎn)是雖然定義id選擇器，有唯一性的優(yōu)勢(shì)，但是一個(gè)頁面只能定義唯一id，定義過多id會(huì)使重用性降低，維護(hù)更困難，所以不建議多用id。

二、css相關(guān)的圖片處理

現(xiàn)在的網(wǎng)頁當(dāng)中，圖片所占的比重以及它的重要性大家都知道。那么如何處理好圖片以及如何為圖片設(shè)置樣式，才能讓用戶打開網(wǎng)頁時(shí)體驗(yàn)更好呢？下面給出一些意見：

（1）不給圖片設(shè)置尺寸

在我個(gè)人的從業(yè)經(jīng)歷當(dāng)中，有過這樣的情況，我按照設(shè)計(jì)稿做好了頁面，交給后臺(tái)去測(cè)試，他就突然跑過來跟我說：hi，你看，這兒出狀況了，我一看，壞菜，圖片出格了，我才想起沒有給圖片定義寬高（直接從設(shè)計(jì)稿里切的也不需要），然后就犯錯(cuò)了似的在css樣式里定義了寬高。以至于后來我把這個(gè)作為下次再做頁面時(shí)候的注意事項(xiàng)。當(dāng)我看到這一條意見的時(shí)候，才更知一二。

來看解釋，第一、設(shè)計(jì)人員為了畫面的精美，會(huì)制作一些超出需求尺寸的圖片；第二、同一張圖片可能會(huì)在頁面不同地方多次使用，比如縮略圖、正常圖、大圖。問題來了，如果圖片原始尺寸和實(shí)際需求不同，在使用過程中就會(huì)存在性能問題，利用樣式縮放會(huì)帶來cpu的額外計(jì)算過程，增加了圖片在瀏覽器的渲染時(shí)間，網(wǎng)絡(luò)傳輸過程也會(huì)占更多帶寬，增加下載時(shí)間。因此，最佳做法是，為需要的部分單獨(dú)做一套圖片，初始頁面加載時(shí)就能更快展示。

（2）使用css“雪碧圖“

是將零散的圖片合并成一張大圖，在利用css進(jìn)行背景定位。好處是減少請(qǐng)求數(shù)，提高了圖片整體的加載速度。

但它也存在一些缺點(diǎn)：

比如，多張圖片合并成大圖，需要精確計(jì)算，仔細(xì)的調(diào)整位置，單純手工制作是一件很復(fù)雜的事情。（所幸現(xiàn)在有一些工具可以幫我們做）

另外，維護(hù)過程復(fù)雜，要盡量讓已有的圖片保持原來的位置不變，如果是背景圖的尺寸發(fā)生變化導(dǎo)致原有區(qū)域無法放置，那就只好放棄，如果非要在原有位置修改，則剩余的圖片樣式都需要修改，是很繁瑣的過程。新加的圖片最好放在最后面。

還有就是使用不當(dāng)會(huì)導(dǎo)致性能問題，最大的問題就是內(nèi)存消耗。如果制作過程不做任何的規(guī)劃，隨意擺放，則可能會(huì)使圖片變得相當(dāng)大，從而很占內(nèi)存。

下面是一些最佳實(shí)踐：

1、在項(xiàng)目后期應(yīng)用css sprite技術(shù)

因?yàn)橐话阍陂_發(fā)過程中，會(huì)比較頻繁的修改或者更換圖片，如果這個(gè)時(shí)候使用sprite技術(shù)，就會(huì)增加很多開發(fā)成本。

2、合理組織“雪碧”圖

如果要把所有的圖片放在一張圖上面，也會(huì)有不妥，維護(hù)方面也不會(huì)很方便。組織背景圖主要按照模塊和背景圖的風(fēng)格來劃分。比如，作為展示的縮略圖放在一起，評(píng)論、點(diǎn)贊、上下箭頭等圖標(biāo)放在一起等。

3、控制“雪碧”圖的尺寸和大小

因?yàn)榇蟪叽绲膱D片會(huì)占用大量的內(nèi)存，所以要控制在合理尺寸，推薦長(zhǎng)寬相乘不超過2500，大小在200kb內(nèi)

4、合理控制背景圖單元間的距離及背景圖位置

這個(gè)原則是為了防止在背景圖比元素大小更小的時(shí)候，區(qū)域出現(xiàn)別的無關(guān)背景圖

5、借助相關(guān)工具處理sprite

三、減少css的代碼量

提高網(wǎng)站整體加載速度的一個(gè)重要手段，就是提高代碼文件的網(wǎng)絡(luò)傳輸速度。除了代碼壓縮，精簡(jiǎn)代碼也是一種手段。

（1）定義簡(jiǎn)潔的css規(guī)則

合并相關(guān)規(guī)則，定義簡(jiǎn)潔的屬性值

合并規(guī)則是指比如font-family、font-size、font-weight等等，可以合并為font。 簡(jiǎn)潔屬性值，比如顏色值：color，#33AAFF可以簡(jiǎn)化為#3AF等。

（2）合并相同定義

網(wǎng)頁中總會(huì)有一些模塊有較高相似度，則可把同樣的部分共用一次定義，不同的部分再單獨(dú)定義。而且在css中，很多屬性是可以繼承的，則只需要在合適的地方定義一次即可。

（3）刪除無效的定義

無效的定義，并不會(huì)影響頁面功能顯示，但會(huì)影響頁面展示的性能，增加代碼量的同時(shí)，也增加了瀏覽器解析代碼的時(shí)間。無效的定義包括無效的規(guī)則及無效的樣式屬性，一般是開發(fā)過程中引入的，而從直觀上無法判斷，這情況，可以用工具，chrome自帶的工具就可以查找css中的無效樣式。。

其他css高性能實(shí)踐

（1）避免使用@import

@import導(dǎo)入的新樣式文件會(huì)阻止頁面的并行下載，這樣增加了文件的整體加載時(shí)間。

（2）避免使用IE瀏覽器獨(dú)有樣式：圖片濾鏡和css表達(dá)式

圖片濾鏡的使用會(huì)在圖片加載時(shí)阻塞瀏覽器的加載和渲染，并會(huì)增加額外的內(nèi)存開銷。 Css表達(dá)式的作用是動(dòng)態(tài)設(shè)置css屬性，表達(dá)式不只是有兼容性問題，還有性能問題，例如瀏覽器大小改動(dòng)、窗口改動(dòng)時(shí)，會(huì)使得瀏覽器頻繁計(jì)算，性能消耗極大。同樣的效果可以用javascript來實(shí)現(xiàn)。

css3最佳實(shí)踐

查看瀏覽器支持情況

在我們使用css3的過程中，問的最多的一個(gè)問題可能就是：兼容性如何？沒辦法，隨著css的發(fā)展，它可以為我們之前遇到的很多不好解決的問題提供一個(gè)更好的方案，讓我們?nèi)滩蛔∪ハ肽懿荒苣菢尤プ?。PC端有飽受詬病的IE系列，到了移動(dòng)端會(huì)好很多，但有些還是不太好。所以，查看瀏覽器支持情況幾乎成了必備動(dòng)作。 如果使用的特性僅僅是裝飾點(diǎn)綴性的效果，不影響大局，則不需要考慮太多兼容問題，如果是出于設(shè)計(jì)要求，必須支持所有瀏覽器，則要特別的關(guān)注一下了。 開發(fā)者可以選擇比如：caniuse.com、css3 Click Chart、css contents and browser compatibility這些在線工具來查看兼容性。

添加必要的瀏覽器前綴

對(duì)于剛使用css不久的朋友來說，如果偶爾在某網(wǎng)站源碼當(dāng)中看到諸如：“-webkit-、-moz-”等，可能會(huì)覺得很奇怪，這是什么？它們是對(duì)應(yīng)不同的瀏覽器廠商所加上的前綴。

因?yàn)闉g覽器在支持css3時(shí)，可能僅僅實(shí)現(xiàn)了標(biāo)準(zhǔn)定義的一個(gè)早期版本，所以，尚不支持標(biāo)準(zhǔn)寫法，給代碼添加瀏覽器前綴也是無奈之舉，會(huì)使得代碼更多，更難維護(hù)。

但也不是為了“完美”而一定要去兼容所有的瀏覽器，一般可以按照瀏覽器或者系統(tǒng)的版本的市場(chǎng)占有率和目標(biāo)用戶使用瀏覽器的比例，來決定加不加前綴以及加幾種前綴。而且相信隨著逐步的發(fā)展，系統(tǒng)、瀏覽器的不斷升級(jí)、更新，需要使用前綴的情況會(huì)減少。

問題又來了，既然需要添加必要的前綴，說明有些時(shí)候還是很有必要，那不得不加的情況下，那不是挺麻煩的？同樣的一條規(guī)則要寫三四遍，可能很多地方都要用，如何是好？別急，下面是幾個(gè)對(duì)策：

1、使用工具來添加css屬性的瀏覽器前綴

Prefixr，可以在開發(fā)的后期對(duì)代碼進(jìn)行處理。它會(huì)自動(dòng)的添加需要的前綴和刪去不必要的前綴。

Autoprefixer，如果想要在開發(fā)過程中更多的自主性，可以使用這個(gè)工具，開發(fā)者可以自定義瀏覽器支持范圍，它也有多種使用方式，可以集成到多個(gè)開發(fā)環(huán)境中。 此外還有幾種工具可供使用：cssFx、*css Agent*和-prefix-free。

2、借助css預(yù)處理技術(shù)

目前流行的有sass、less，具體方法是，針對(duì)css3樣式特性定義一份模板樣式。 優(yōu)點(diǎn)是：避免大量重復(fù)代碼，只需要維護(hù)一份定義。

3、不要過度添加瀏覽器前綴

有些開發(fā)者為了兼容所有瀏覽器，不管什么情況都為css代碼加上了所有瀏覽器的前綴，這是一種消極的編碼方式，增加了太多的重復(fù)代碼，降低了瀏覽器的解析性能，增加了復(fù)雜度，同時(shí)某些前綴的屬性可能沒有被瀏覽器支持過。

4、添加css3標(biāo)準(zhǔn)屬性定義

何為標(biāo)準(zhǔn)屬性定義呢？就是不需要任何瀏覽器前綴，大家可能都會(huì)注意到，很多使用css3的地方都會(huì)在最后的地方寫標(biāo)準(zhǔn)屬性定義，為什么呢？因?yàn)楫?dāng)瀏覽器支持標(biāo)準(zhǔn)屬性時(shí)，它可以覆蓋前面添加了前綴的定義，css3中的屬性標(biāo)準(zhǔn)定義才是符合規(guī)范的定義，添加了瀏覽器前綴的定義會(huì)隨著瀏覽器的更新逐漸被淘汰。

當(dāng)然，還有一點(diǎn)需要注意的是，某些屬性，目前是屬于Only webkit或者Only firefox的，那么就沒有必要再寫上標(biāo)準(zhǔn)定義及其他瀏覽器前綴了。

做好css3中新特性的兼容處理

說到兼容，就會(huì)提到低版本IE，比如很常見的圓角、透明圖片等，有時(shí)候我們會(huì)給它們降級(jí)的處理，比如filter或者javascript，使用box-sizing、transform，推薦使用Modernizr,這個(gè)框架中包含了很多css3新特性的兼容方案。

無論是哪種方案，都會(huì)帶來性能上的損耗，不能毫無章法的濫用，仍然是需要大家去權(quán)衡和選擇。推薦一個(gè)如何更有效率的使用HTML5的建議網(wǎng)站：html5please。網(wǎng)站按照使用的方式把css3中的新特性分成了三類：

（1）直接使用

包含了大部分新特性，有些特性本身不會(huì)影響兼容性，如border-radius、media queries等，有些需要添加降級(jí)處理，如多背景圖，要設(shè)置一個(gè)單背景圖或者背景色作為備選。

（2）謹(jǐn)慎使用

這部分主要是性能問題，例如框陰影應(yīng)用于占用很大區(qū)域的元素，頁面滾動(dòng)或鼠標(biāo)懸停時(shí)，會(huì)引起不小性能問題。

（3）避免使用

這部分因?yàn)樗鼈兛赡軆H支持某個(gè)瀏覽器，比如倒影，則需要避免使用。

綜上所述，css能夠用來提高性能的方法還是蠻多的，但我們很容易忽略它們，因?yàn)樗鼈兯鶐淼挠绊懰坪鯖]有那么明顯，而且，很多人可能為了圖方便，任意揮灑著自己的才華，想怎么寫就怎么寫，能達(dá)到效果就行，這也有點(diǎn)小消極哈，忘了你的優(yōu)秀工程師目標(biāo)了麻？！~~css規(guī)則雖不不難，真正寫好也不易，還是要有些追求極致的精神滴。諸君且寫且珍惜吧！~

高維護(hù)性css

Css有些什么特點(diǎn)？

簡(jiǎn)單來說，使用方式：內(nèi)聯(lián)、內(nèi)嵌、外聯(lián)、import。為元素設(shè)置樣式的方式：元素標(biāo)簽名、類名、id、各種選擇器，以及它們的組合。所以，它是很靈活的，如果不做任何的規(guī)范的限制，就肯定會(huì)導(dǎo)致css代碼的混亂和難以維護(hù)。

如何高效組織css代碼？

結(jié)構(gòu)清晰、模塊分明，合理的代碼組織結(jié)構(gòu)可提高代碼的重用性和可維護(hù)性，降低開發(fā)復(fù)雜度。那怎樣組織呢？

首先是組織代碼文件，可分為兩大類：通用類和業(yè)務(wù)類。 然后，有一個(gè)文件用來重置，常見命名是reset或者default、normalize等。

有一個(gè)文件用來存放通用模塊和一些基礎(chǔ)樣式，常命名為mod、common等，如頁面對(duì)話框，提示框，頭部，底部，側(cè)邊欄等，會(huì)在多個(gè)頁面用到，這樣方面各頁面引用，提高代碼復(fù)用度。

另外需要一個(gè)文件存在兼容舊版IE瀏覽器的樣式，這樣做的好處有二：

一、減少非IE瀏覽器加載樣式文件的負(fù)擔(dān)

二、如果未來決定不再支持舊版的IE瀏覽器，則只需要去修改一個(gè)文件，不需要多個(gè)文件到處找去修改。當(dāng)然，在處理瀏覽器兼容問題上，有個(gè)原則是，是否有其他不存在兼容問題的方案，如果沒有，則把要做兼容的部分單獨(dú)放在一個(gè)文件中。

其余的css樣式文件則用于業(yè)務(wù)模塊，不同模塊的樣式文件放置于不同的文件夾中，原則上每個(gè)模塊的樣式文件不宜太大。

這樣可能會(huì)造成一個(gè)問題，一個(gè)頁面不是要引入很多文件了？頁面加載的時(shí)候http請(qǐng)求不是多很多？其實(shí)并不矛盾，文件的劃分只是為了方便開發(fā)和維護(hù)，發(fā)布的時(shí)候會(huì)使用工具把多個(gè)文件壓縮合并成一個(gè)文件，所以不用擔(dān)心引入多個(gè)文件的問題。

上面說的是文件的組織，那么在文件中也要按照一定規(guī)則來組織樣式的聲明。 比如，按照模塊中元素的層級(jí)，如果是同級(jí)，則按照元素在頁面中的位置，從上到下，或者從左到右，若存在多個(gè)元素共用相同聲明，則應(yīng)先聲明共通樣式。 如果覺得這樣還不夠，則可以使用一些更高級(jí)的方式，如less、sass，它們將css賦予了動(dòng)態(tài)語言的特性，如變量、繼承、運(yùn)算、函數(shù)等。

以上是從幾個(gè)大的方向去說的，下面涉及某幾個(gè)點(diǎn)談一談

使用css reset 統(tǒng)一瀏覽器顯示效果

首先，html的標(biāo)簽是有原始樣式的，但問題是在不同瀏覽器中，標(biāo)簽的默認(rèn)樣式不盡相同，其中的某些差異給開發(fā)造成了麻煩，早在2004年，就有人開發(fā)了第一個(gè)重置樣式文件，叫undohtml.Css,后續(xù)又有了多種重置方案，其中有個(gè)方案“火爆一時(shí)”，此方案總共就一行代碼*{margin：0；padding：0；}。重置了所有標(biāo)簽?zāi)J(rèn)的margin、padding樣式，但有一個(gè)弊端是增加了后續(xù)開發(fā)的復(fù)雜度，并不能很有效的提高整體開發(fā)的效率。另外，此方案性能也不佳，當(dāng)頁面元素很多時(shí)就會(huì)影響頁面渲染的性能。所以，人們還在逐漸的探索更好的重置方式，目前有多個(gè)流行的重置方案，有Eric Meyer開發(fā)的Reset CSS和雅虎公司前端技術(shù)團(tuán)隊(duì)開發(fā)的YUI Reset CSS。其實(shí)并不存在一種方案適合所有項(xiàng)目，所以最好還是選擇參考別人的方案然后設(shè)計(jì)一套適合自己項(xiàng)目的方案。

需要考慮如下幾點(diǎn)：

（1）HTML5新標(biāo)簽 需要重置它們的display樣式，因?yàn)樵诘桶姹綢E中沒有定義它們的默認(rèn)display樣式。

（2）padding、margin、border 標(biāo)簽在瀏覽器中的差異主要是與這三個(gè)樣式有關(guān)的默認(rèn)樣式產(chǎn)生的，但也不是需要重置全部元素的margin、padding、border，應(yīng)根據(jù)實(shí)際情況。

（3）字體設(shè)置

~、、等語義化標(biāo)簽都有默認(rèn)字體，但實(shí)際當(dāng)中所需要的字體大小或者粗細(xì)都跟默認(rèn)不同，所以一般項(xiàng)目中都會(huì)對(duì)他們進(jìn)行重置。

（4）其他元素的樣式重置 典型的有l(wèi)i默認(rèn)的列表項(xiàng)樣式，table的單元格之間默認(rèn)空間，a鏈接的下劃線等。

給css定義排序

Css的邏輯性不強(qiáng)，隨意的書寫也不影響其作用，如果不借助工具對(duì)其排序也會(huì)很繁瑣，所以，很少有人會(huì)在意，但是排序還是有好處的。

比如：

1、更整潔

2、防止重復(fù)定義

3、能夠清晰查看定義

4、后續(xù)維護(hù)能快速定位

排序方式：

1、按類型 如，顯示和浮動(dòng)、定位、尺寸、字體等

2、按字母 按字母順序排列，優(yōu)點(diǎn)是規(guī)則簡(jiǎn)單

3、按定義長(zhǎng)度 按照樣式定義的字符長(zhǎng)度排列

各有優(yōu)劣，實(shí)際應(yīng)用中，推薦使用第一種。 但是如果單靠前端工程師在編寫過程中這么做的話也是很難的，可以在寫的過程中按照效率最高的方式寫，提交代碼時(shí)使用工具為css排序。既提高效率，又方便后續(xù)代碼閱讀和維護(hù)。有一款免費(fèi)工具是 CSScomb。

合理利用css的權(quán)重，提高代碼重用性

何為權(quán)重，即css眾多類型選擇符的優(yōu)先級(jí)，優(yōu)先級(jí)高的樣式會(huì)覆蓋優(yōu)先級(jí)低的樣式。權(quán)重的更具體規(guī)則，大家可以查閱資料，這里不贅述。

這里說說如何依照選擇符的權(quán)重定義合適的選擇符：

（1）盡量不使用ID選擇器

一個(gè)頁面中不允許定義兩個(gè)同樣的ID，而且ID選擇器權(quán)重很高，如果要覆蓋使用了ID選擇器的元素樣式，就必須在其元素上添加新的選擇符，或使用！important，這樣的結(jié)果會(huì)使無法重用的樣式代碼變得更多。最佳實(shí)踐是盡可能使用較低權(quán)重的選擇符作為基礎(chǔ)樣式。

（2）減少子選擇器的層級(jí)

也是降低子選擇符整體權(quán)重的過程，同時(shí)，層級(jí)越少，對(duì)html結(jié)構(gòu)的依賴就越低。引起Css層級(jí)過多的另外一個(gè)原因是sass、less等工具的濫用，這也是我本人在使用之初就有意識(shí)到的問題，因?yàn)槟憧梢允褂们短缀鸵玫确绞絹矶x樣式了，這樣以來給自己省了很多功夫，但文件最終還是要編譯出來，我們不用反復(fù)的敲那么多代碼了，但生成的代碼依然還是會(huì)很多，所以，方便了自己的同時(shí)依然要特別注意減少選擇器層級(jí)。

（3）使用組合的css類選擇器

使用這種方式，開發(fā)者可以不用考慮css樣式覆蓋的問題，避開了計(jì)算選擇符權(quán)重的過程，同時(shí)提高了代碼的重用性，組合的概念是把一個(gè)復(fù)雜的父類中的可變部分和穩(wěn)定部分分割開來，穩(wěn)定部分作為主體類，可變部分分成幾個(gè)簡(jiǎn)單的類，類與類之間沒有繼承，同樣可以起到減少對(duì)html結(jié)構(gòu)的依賴，提高代碼重用性的作用。

如何兼容IE瀏覽器？

IE8及以下版本的IE瀏覽器一直是前端開發(fā)人員心中的痛。為了兼容它們做額外添加的代碼成為hack代碼，往往人們都不想去寫那些代碼。以下是兼容IE瀏覽器的一些實(shí)踐方法。

（1）熟悉IE瀏覽器中常見的樣式兼容問題

一類是瀏覽器本身的bug，一類是和標(biāo)準(zhǔn)不兼容或還不支持標(biāo)準(zhǔn)。

（2）分離樣式兼容代碼

按照瀏覽器的不同版本組織代碼文件，然后使用判斷語句，按需加載

em、px還是%？

談及這個(gè)話題的原因是，如今頁面功能變得越來越多，用來訪問頁面的設(shè)備越來越多，頁面的布局就是一個(gè)頗具挑戰(zhàn)的事情，而頁面當(dāng)中的元素的尺寸和字體、圖片的大小等也跟布局息息相關(guān)。鑒于此，前端開發(fā)開始重視如何提高頁面布局，核心思想是將頁面元素的尺寸和字體大小設(shè)置為相對(duì)值。字體相對(duì)單位包括：em、ex、ch、rem。更多內(nèi)容無需贅述，有更多的資料來講解。下面給出幾個(gè)最佳實(shí)踐：

（1）盡量設(shè)置相對(duì)尺寸

所謂設(shè)置相對(duì)尺寸，并不是說頁面整體的布局是自適應(yīng)的，整體的尺寸可以是固定尺寸也可以是自適應(yīng)的尺寸，這取決于頁面的設(shè)計(jì)。

（2）只有在可預(yù)知元素尺寸的情況下才使用絕對(duì)尺寸

比如設(shè)計(jì)上要求使用絕對(duì)寬度，比如整體寬度，側(cè)邊欄寬度，頁頭頁尾的高度固定等，在展示圖片、視頻的時(shí)候，合適的固定尺寸會(huì)讓這些多媒體元素展示獲得最佳的效果。

（3）使用em設(shè)置字體大小

使用px設(shè)置字體大小的可擴(kuò)展性不好，使用百分比設(shè)置字體大小也不符合習(xí)慣，最佳方式是使用em設(shè)置字體大小，但隨著字體設(shè)置的層級(jí)增多，這種方式反而增加了維護(hù)的成本，對(duì)于此，css3引入了rem單位，是相對(duì)于根元素的字體大小計(jì)算的，就避免了這個(gè)問題，目前除了IE8及以下，大部分瀏覽器都支持它。

看完上述內(nèi)容，你們對(duì)CSS編寫時(shí)的高性能以及高維護(hù)性代碼優(yōu)化建議有哪些有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

當(dāng)前標(biāo)題：CSS編寫時(shí)的高性能以及高維護(hù)性代碼優(yōu)化建議有哪些
本文來源：http://m.jiaotiyi.com/article/jceepc.html