成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比通城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式通城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋通城地區(qū)。費用合理售后完善，十多年實體公司更值得信賴。

 CSS 性能優(yōu)化總結(jié)篇

1、命名與備注規(guī)范化

頭：header

內(nèi)容：content/container

尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar

欄目：column

頁面外圍控制整體佈局寬度：wrapper

左右中：left right center

登錄條：loginbar

標(biāo)志：logo

廣告：banner

頁面主體：main

熱點：hot

新聞：news

下載：download

子導(dǎo)航：subnav

菜單：menu

子菜單：submenu

搜索：search

友情鏈接：friendlink

頁腳：footer

版權(quán)：copyright

滾動：scroll

內(nèi)容：content

標(biāo)簽：tags

文章列表：list

提示信息：msg

小技巧：tips

欄目標(biāo)題：title

加入：joinus

指南：guide

服務(wù)：service

注冊：regsiter

狀態(tài)：status

投票：vote

合作伙伴：partner

導(dǎo)航：nav

主導(dǎo)航：mainnav

子導(dǎo)航：subnav

頂導(dǎo)航：topnav

邊導(dǎo)航：sidebar

左導(dǎo)航：leftsidebar

右導(dǎo)航：rightsidebar

菜單：menu

子菜單：submenu

標(biāo)題: title

摘要: summary

2、提取重復(fù)樣式【這一個方法很容易理解，簡單說就是提取相同的樣式成為一個單獨的類再引用，這樣不僅可以精簡CSS文件大小，而且CSS代碼變少，更易于重用和維護】

3、書寫順序

這個書寫順序指的是各個樣式的書寫順序，下面是推薦的CSS書寫順序

(1)位置屬性(position, top, right, z-index, display, float等)

(2)大小(width, height, padding, margin)

(3)文字系列(font, line-height, letter-spacing, color- text-align等)

(4)背景(background, border等)

(5)其他(animation, transition等)

4、盡量將樣式寫在單獨的css文件里面，在head元素中引用

有時候為了圖方便或者快速搞定功能，我們可能會直接將樣式寫在頁面的style標(biāo)簽或者直接內(nèi)聯(lián)在元素上，這樣雖然簡單方便，但是非常不利于日后的維護。將代碼寫成單獨的css文件有幾點好處：

(1)內(nèi)容和樣式分離，易于管理和維護

(2)減少頁面體積

(3)css文件可以被緩存、重用，維護成本降低

5、不使用@import

這條手段已經(jīng)是眾所周知，這里簡單提一下，@import影響css文件的加載速度

6、避免使用復(fù)雜的選擇器，層級越少越好

有時候項目的模塊越來越多，功能越來越復(fù)雜，我們寫的CSS選擇器會內(nèi)套多層，越來越復(fù)雜。

建議選擇器的嵌套最好不要超過三層

7

1、盡量將樣式寫在單獨的css文件里面，在head元素中引用

有時候為了圖方便或者快速搞定功能，我們可能會直接將樣式寫在頁面的style標(biāo)簽或者直接內(nèi)聯(lián)在元素上，這樣雖然簡單方便，但是非常不利于日后的維護。將代碼寫成單獨的css文件有幾點好處：

(1)內(nèi)容和樣式分離，易于管理和維護

(2)減少頁面體積

(3)css文件可以被緩存、重用，維護成本降低

2、不使用@import

這條手段已經(jīng)是眾所周知，這里簡單提一下，@import影響css文件的加載速度

3、避免使用復(fù)雜的選擇器，層級越少越好

有時候項目的模塊越來越多，功能越來越復(fù)雜，我們寫的CSS選擇器會內(nèi)套多層，越來越復(fù)雜。

建議選擇器的嵌套最好不要超過三層

8  正確使用display 屬性

display:inline后不應(yīng)該再使用width、height、margin、padding以及float。

display:inline-block后不應(yīng)該再使用float。

display:block后不應(yīng)該再使用vertical-align。

display:table-*后不應(yīng)該再使用margin或者float。

9.值為0的時候不需要加單位

10 不要過多的聲明font-size

11  不要濫用字體【web fonts 體積龐大的時候  可能會阻塞渲染影響性能】

12 不要濫用浮動

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文題目：CSS性能優(yōu)化篇-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://jinyejixie.com/article28/psecp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站設(shè)計公司、響應(yīng)式網(wǎng)站、網(wǎng)頁設(shè)計公司、網(wǎng)站制作、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)