日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

一、前言

每一個(gè)網(wǎng)頁(yè)都離不開 css ，但是很多人又認(rèn)為， css 主要是用來完成頁(yè)面布局的，像一些細(xì)節(jié)或者優(yōu)化，就不需要怎么考慮，實(shí)際上這種想法是不正確的，作為頁(yè)面渲染和內(nèi)容展現(xiàn)的重要環(huán)節(jié)， css 影響著用戶對(duì)整個(gè)網(wǎng)站的第一體驗(yàn)。

創(chuàng)新互聯(lián)長(zhǎng)期為上1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為林芝企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站制作，林芝網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

因此，在整個(gè)產(chǎn)品研發(fā)過程中， css 性能優(yōu)化同樣需要貫穿全程

二、實(shí)現(xiàn)方式

實(shí)現(xiàn)方式有很多種，主要有如下：

• 內(nèi)聯(lián)首屏關(guān)鍵CSS
• 異步加載CSS
• 資源壓縮
• 合理使用選擇器
• 減少使用昂貴的屬性
• 不要使用@import

內(nèi)聯(lián)首屏關(guān)鍵CSS

在打開一個(gè)頁(yè)面，頁(yè)面首要內(nèi)容出現(xiàn)在屏幕的時(shí)間影響著用戶的體驗(yàn)，而通過內(nèi)聯(lián) css 關(guān)鍵代碼能夠使瀏覽器在下載完 html 后就能立刻渲染

而如果外部引用 css 代碼，在解析 html 結(jié)構(gòu)過程中遇到外部 css 文件，才會(huì)開始下載 css 代碼，再渲染

所以， CSS 內(nèi)聯(lián)使用使渲染時(shí)間提前

注意：但是較大的 css 代碼并不合適內(nèi)聯(lián)（初始擁塞窗口、沒有緩存），而其余代碼則采取外部引用方式

異步加載CSS

在 CSS 文件請(qǐng)求、下載、解析完成之前， CSS 會(huì)阻塞渲染，瀏覽器將不會(huì)渲染任何已處理的內(nèi)容

前面加載內(nèi)聯(lián)代碼后，后面的外部引用 css 則沒必要阻塞瀏覽器渲染。這時(shí)候就可以采取異步加載的方案，主要有如下：

• 使用javascript將link標(biāo)簽插到head標(biāo)簽最后

 
 
 
 

  
  
  
  
// 創(chuàng)建link標(biāo)簽 
  
  
  
  
const myCSS = document.createElement( "link" ); 
  
  
  
  
myCSS.rel = "stylesheet"; 
  
  
  
  
myCSS.href = "mystyles.css"; 
  
  
  
  
// 插入到header的最后位置 
  
  
  
  
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling ); 
 
 
 
 

• 設(shè)置link標(biāo)簽media屬性為noexis，瀏覽器會(huì)認(rèn)為當(dāng)前樣式表不適用當(dāng)前類型，會(huì)在不阻塞頁(yè)面渲染的情況下再進(jìn)行下載。加載完成后，將 media 的值設(shè)為 screen 或 all ，從而讓瀏覽器開始解析CSS

• 通過rel屬性將link元素標(biāo)記為alternate可選樣式表，也能實(shí)現(xiàn)瀏覽器異步加載。同樣別忘了加載完成之后，將rel設(shè)回stylesheet

資源壓縮

利用 webpack 、 gulp/grunt 、 rollup 等模塊化工具，將 css 代碼進(jìn)行壓縮，使文件變小，大大降低了瀏覽器的加載時(shí)間

合理使用選擇器

css 匹配的規(guī)則是從右往左開始匹配，例如 #markdown .content h3 匹配規(guī)則如下：

• 先找到h3標(biāo)簽元素
• 然后去除祖先不是.content的元素
• 最后去除祖先不是#markdown的元素

如果嵌套的層級(jí)更多，頁(yè)面中的元素更多，那么匹配所要花費(fèi)的時(shí)間代價(jià)自然更高

所以我們?cè)诰帉戇x擇器的時(shí)候，可以遵循以下規(guī)則：

• 不要嵌套使用過多復(fù)雜選擇器，最好不要三層以上
• 使用id選擇器就沒必要再進(jìn)行嵌套
• 通配符和屬性選擇器效率最低，避免使用

減少使用昂貴的屬性

在頁(yè)面發(fā)生重繪的時(shí)候，昂貴屬性如 box-shadow / border-radius / filter /透明度/ :nth-child 等，會(huì)降低瀏覽器的渲染性能

不要使用@import

css樣式文件有兩種引入方式，一種是 link 元素，另一種是 @import

@import 會(huì)影響瀏覽器的并行下載，使得頁(yè)面在加載時(shí)增加額外的延遲，增添了額外的往返耗時(shí)

而且多個(gè) @import 可能會(huì)導(dǎo)致下載順序紊亂

比如一個(gè)css文件 index.css 包含了以下內(nèi)容： @import url("reset.css")

那么瀏覽器就必須先把 index.css 下載、解析和執(zhí)行后，才下載、解析和執(zhí)行第二個(gè)文件 reset.css

其他

• 減少重排操作，以及減少不必要的重繪
• 了解哪些屬性可以繼承而來，避免對(duì)這些屬性重復(fù)編寫
• cssSprite，合成所有icon圖片，用寬高加上backgroud-position的背景圖方式顯現(xiàn)出我們要的icon圖，減少了http請(qǐng)求
• 把小的icon圖片轉(zhuǎn)成base64編碼
• CSS3動(dòng)畫或者過渡盡量使用transform和opacity來實(shí)現(xiàn)動(dòng)畫，不要使用left和top屬性

三、總結(jié)

css 實(shí)現(xiàn)性能的方式可以從選擇器嵌套、屬性特性、減少 http 這三面考慮，同時(shí)還要注意 css 代碼的加載順序

文章題目：如果要做優(yōu)化，CSS提高性能的方法有哪些？
標(biāo)題URL：http://www.dlmjj.cn/article/cohcdpc.html