CSS在前端優(yōu)化中需要注意什么-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“CSS在前端優(yōu)化中需要注意什么”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS在前端優(yōu)化中需要注意什么”這篇文章吧。

成都創(chuàng)新互聯(lián)公司專注于蔡家坡網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。熱誠(chéng)為您提供蔡家坡營(yíng)銷型網(wǎng)站建設(shè)，蔡家坡網(wǎng)站制作、蔡家坡網(wǎng)頁設(shè)計(jì)、蔡家坡網(wǎng)站官網(wǎng)定制、成都小程序開發(fā)服務(wù)，打造蔡家坡網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供蔡家坡網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

1. 開發(fā)原則

1.1 編寫符合當(dāng)代瀏覽器性能的代碼
如果想提高前端性能，就必須理解瀏覽器的工作原理，哪怕是個(gè)大概，這樣才能知道性能瓶頸在哪里以及如何優(yōu)化。下圖展示了Webkit瀏覽器從代碼（HTML+CSS）到用戶最終看到頁面的處理過程。
CSS在前端優(yōu)化中需要注意什么

為什么瀏覽器要在第一時(shí)間下載頁面的HTML內(nèi)容？首先HTML被解析成一棵DOM樹，其次HTML包含了展示頁面的其他所有資源文件（樣式、腳本、圖片）。然后DOM樹和CSS樣式表（包括自定義的和瀏覽器默認(rèn)的）合起來構(gòu)成渲染樹，瀏覽器開始根據(jù)這棵渲染樹“畫”到屏幕上。
要改進(jìn)瀏覽器性能，可以從減少HTML中元素的數(shù)量及減少重繪兩方面入手。前者很好理解，不要濫用HTML標(biāo)簽，應(yīng)該用最少量但是必需的HTML去語義化地布局。后者對(duì)提高性能的作用更加明顯。在元素完成繪制后，動(dòng)態(tài)更改DOM結(jié)構(gòu)或CSS樣式都會(huì)引發(fā)瀏覽器重繪。重繪的性能耗損直接取決于動(dòng)態(tài)改動(dòng)的范圍。例如改動(dòng)一個(gè)元素的位置或新增一個(gè)元素，都會(huì)引起大量的重繪，因?yàn)樗绊懥怂械男值茉?；又例如?dòng)態(tài)添加一個(gè)列表時(shí)，不要一個(gè)一個(gè)把li加進(jìn)去，因?yàn)槊刻砑右淮味紩?huì)導(dǎo)致一次重繪，而是把所有的項(xiàng)拼在一起再添加。此外，減少重繪的一些準(zhǔn)則還有規(guī)定img元素的寬高，不要用表格來布局，在head標(biāo)簽內(nèi)定義字符集等等。
通常來說，改動(dòng)的元素在DOM樹中的深度越深，對(duì)其他節(jié)點(diǎn)影響就越??；如果要對(duì)DOM進(jìn)行多次操作，盡量合并到一次做完，例如要修改一個(gè)DOM元素的多種樣式時(shí)，不要反復(fù)給element.style下的各種屬性賦值，而是將要變化的多種樣式寫在一個(gè)CSS類中，再賦予該DOM元素這個(gè)類。

1.2 用CSS來布局并處理邊界
瀏覽器渲染頁面其實(shí)是在渲染一系列“盒子”，而且這些“盒子”都可以嵌套。在用CSS做布局的時(shí)候，應(yīng)該注重語義化，把一組元素都包在一個(gè)盒子里，而不是把部分元素丟到盒子外面。如下圖所示，要用CSS來實(shí)現(xiàn)這種簡(jiǎn)單的兩列布局，較好的做法是給右欄設(shè)置一個(gè)padding-left，并把左欄圖標(biāo)絕對(duì)定位到left:0，這樣就有了一個(gè)所有內(nèi)容都包含在內(nèi)部的盒子。錯(cuò)誤的做法是給右欄設(shè)置margin-left，并把左欄圖標(biāo)絕對(duì)定位到left: -50px，這種做法把圖標(biāo)放到了盒子外，而且還定義了一個(gè)負(fù)坐標(biāo)，這不僅不符合語義（把應(yīng)該包含的元素放到了盒子外），出現(xiàn)負(fù)數(shù)這種不協(xié)調(diào)的代碼感，而且這種布局還有可能在舊瀏覽器上出問題。
CSS在前端優(yōu)化中需要注意什么

使用CSS寫樣式時(shí)，還應(yīng)該多考慮模塊化和可復(fù)用性。如果你寫的代碼是獨(dú)立于內(nèi)容的，它就是可復(fù)用的。另外從CSS類的命名上也經(jīng)?？梢钥闯鰡栴}，我的經(jīng)驗(yàn)是盡量以元素的樣式，而不是元素的功能去命名，例如給一個(gè)發(fā)送郵件按鈕添加樣式CSS類時(shí)，.btn-confirm就比.btn-send-mail好一些，前者可以復(fù)用到任何確認(rèn)操作的按鈕上（當(dāng)然.btn-send-mail這個(gè)類也可以用于做js事件綁定用，只要它不綁定任何樣式）。

1.3 漸進(jìn)式增強(qiáng)
漸進(jìn)式增強(qiáng)指的是首先有一個(gè)基本的設(shè)計(jì)是可以兼容所有瀏覽器的，然后再為較新式的瀏覽器做加強(qiáng)的樣式或功能（漸進(jìn)式）。例如設(shè)置漸變背景顏色時(shí)，可以先定義一條background-color屬性（退化樣式），再設(shè)置其他linear-gradient屬性，這樣可以確保在瀏覽器不支持CSS3的時(shí)候，也可以正常顯示一個(gè)背景顏色。
強(qiáng)烈建議不要用判斷瀏覽器類型或版本號(hào)的方式來判斷是否支持某個(gè)功能，而是用特征檢測(cè)來判斷。關(guān)于特征檢測(cè)，推薦用第三方庫(kù)Modernizr。

2. 性能準(zhǔn)則
前端開發(fā)人員不僅要給用戶提供好的界面體驗(yàn)，還要關(guān)心頁面的加載時(shí)間。2010年4月，谷歌把頁面加載的快慢列入了搜索排名的考慮因素，有很多研究數(shù)據(jù)表明用戶流量和加載速度呈正相關(guān)關(guān)系，可見頁面加載速度的優(yōu)化是何等重要。以下是一些性能準(zhǔn)則，根據(jù)對(duì)頁面加載時(shí)間的影響強(qiáng)弱排序。

2.1 減少HTTP請(qǐng)求：HTTP請(qǐng)求數(shù)量是影響前端性能最明顯的一個(gè)方面?，F(xiàn)代很多瀏覽器支持4個(gè)并行連接，理解瀏覽器的并行連接機(jī)制，把資源文件分發(fā)到不同的域名下利用瀏覽器并發(fā)，可以提高加載效率。加載少量的大文件優(yōu)于加載大量的小文件，因此線上的網(wǎng)站應(yīng)盡可能合并CSS和JS文件。另外，使用圖片精靈（CSS Sprite，俗稱雪碧圖）把許多圖標(biāo)之類的小圖片合到一個(gè)大圖片，可以減少大量的圖片HTTP請(qǐng)求。

2.2 使用CDN加速：如果有能力的話，把靜態(tài)資源文件如圖片、字體、JS庫(kù)等放到CDN可以大幅提高訪問速度。使用CDN應(yīng)該給每個(gè)文件引用加一個(gè)時(shí)間戳，這樣就不用擔(dān)心緩存在CDN服務(wù)器上過期對(duì)用戶產(chǎn)生影響。

2.3 避免空的src和href屬性值：空src的img元素會(huì)被JS動(dòng)態(tài)賦值，導(dǎo)致瀏覽器會(huì)發(fā)起一個(gè)無用的HTTP請(qǐng)求。同樣，點(diǎn)擊空href的a標(biāo)簽也會(huì)導(dǎo)致瀏覽器發(fā)起HTTP請(qǐng)求，通常是重新加載當(dāng)前頁面，這也是許多初學(xué)者難以發(fā)掘出的bug的原因所在。

2.4 增加過期頭：應(yīng)該給靜態(tài)資源文件都加上過期頭，過期的日期要定得很遙遠(yuǎn)，基本上可以認(rèn)為永不過期，這樣瀏覽器就會(huì)緩存靜態(tài)文件。但為了避免用戶更新不到新的文件，好在文件名上加上版本控制。

2.5 啟用gzip壓縮：服務(wù)器開啟gzip壓縮可以將文本文件傳輸流量平均減少70%左右。

2.6 把CSS放在<head>內(nèi)，把Javascript放在<body>尾部：瀏覽器會(huì)同時(shí)解析HTML和渲染元素，把CSS放到前面可以保證先渲染的一部分元素樣式是正確的，而把CSS放到后面會(huì)引起大量的瀏覽器重繪。要把script標(biāo)簽放到尾部，因?yàn)闉g覽器會(huì)預(yù)處理js文件，把js文件放到頭部會(huì)延遲頁面元素的渲染，讓用戶覺得頁面打開變慢了。

2.7 避免使用CSS表達(dá)式：CSS表達(dá)式只在IE5、IE6、IE7被支持，使用CSS表達(dá)式不僅比正常的寫法要長(zhǎng)得多，還會(huì)嚴(yán)重影響頁面渲染效率——只要頁面一滾動(dòng)，甚至移動(dòng)鼠標(biāo)時(shí)，表達(dá)式就會(huì)進(jìn)行計(jì)算，這是完全沒有必要的。

2.8 移除不使用的CSS語句：實(shí)際項(xiàng)目中可能會(huì)有一個(gè)common.css來讓每個(gè)頁面都引用，表示那些公共樣式，應(yīng)該盡量讓這種公共文件的利用率達(dá)到較大。

2.9 對(duì)Javascript和CSS進(jìn)行代碼壓縮：壓縮代碼可以顯著節(jié)省帶寬并提高加載速度。好在部署到線上的時(shí)候利用工具對(duì)代碼進(jìn)行壓縮。

以上是“CSS在前端優(yōu)化中需要注意什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：CSS在前端優(yōu)化中需要注意什么-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://muchs.cn/article20/dchjco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、動(dòng)態(tài)網(wǎng)站、Google、外貿(mào)建站、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站策劃

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

猜你還喜歡下面的內(nèi)容