日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
僅使用CSS就可以提高頁面渲染速度的4個(gè)技巧

用戶喜歡快速的網(wǎng)絡(luò)應(yīng)用，他們希望頁面加載速度快，功能流暢。如果在滾動(dòng)時(shí)有破損的動(dòng)畫或滯后，用戶很有可能會(huì)離開你的網(wǎng)站。作為一名開發(fā)者，你可以做很多事情來改善用戶體驗(yàn)。本文將重點(diǎn)介紹4個(gè)可以用來提高頁面渲染速度的CSS技巧。

創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、古田網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場(chǎng)景定制、商城建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為古田等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

1. Content-visibility

一般來說，大多數(shù)Web應(yīng)用都有復(fù)雜的UI元素，它的擴(kuò)展范圍超出了用戶在瀏覽器視圖中看到的內(nèi)容。在這種情況下，我們可以使用內(nèi)容可見性( content-visibility )來跳過屏幕外內(nèi)容的渲染。如果你有大量的離屏內(nèi)容，這將大大減少頁面渲染時(shí)間。

這個(gè)功能是最新增加的功能之一，也是對(duì)提高渲染性能影響最大的功能之一。雖然 content-visibility 接受幾個(gè)值，但我們可以在元素上使用 content-visibility: auto; 來獲得直接的性能提升。

讓我們考慮一下下面的頁面，其中包含許多不同信息的卡片。雖然大約有12張卡適合屏幕，但列表中大約有375張卡。正如你所看到的，瀏覽器用了1037ms來渲染這個(gè)頁面。

下一步，您可以向所有卡添加 content-visibility 。

在這個(gè)例子中，在頁面中加入 content-visibility 后，渲染時(shí)間下降到150ms，這是6倍以上的性能提升。

正如你所看到的，內(nèi)容可見性是相當(dāng)強(qiáng)大的，對(duì)提高頁面渲染時(shí)間非常有用。根據(jù)我們目前所討論的東西，你一定是把它當(dāng)成了頁面渲染的銀彈。

content-visibility 的限制

然而，有幾個(gè)領(lǐng)域的內(nèi)容可視性不佳。我想強(qiáng)調(diào)兩點(diǎn)，供大家參考。

  • 此功能仍處于試驗(yàn)階段。截至目前，F(xiàn)irefox(PC和Android版本)、IE(我認(rèn)為他們沒有計(jì)劃在IE中添加這個(gè)功能)和，Safari(Mac和iOS)不支持內(nèi)容可見性。
  • 與滾動(dòng)條行為有關(guān)的問題。由于元素的初始渲染高度為0px，每當(dāng)你向下滾動(dòng)時(shí)，這些元素就會(huì)進(jìn)入屏幕。實(shí)際內(nèi)容會(huì)被渲染，元素的高度也會(huì)相應(yīng)更新。這將使?jié)L動(dòng)條的行為以一種非預(yù)期的方式進(jìn)行。

為了解決滾動(dòng)條的問題，你可以使用另一個(gè)叫做 contain-intrinsic-size 的 CSS 屬性。它指定了一個(gè)元素的自然大小，因此，元素將以給定的高度而不是0px呈現(xiàn)。

 
 
 
 
      
  
  
  
  1. .element{ 
    2.   
  
  
  
  2.   content-visibility: auto; 
    3.   
  
  
  
  3.   contain-intrinsic-size: 200px; 
    4.   
  
  
  
  4. } 
    5.

然而，在實(shí)驗(yàn)時(shí)，我注意到，即使使用 conta-intrinsic-size，如果我們有大量的元素，content-visibility 設(shè)置為 auto ，你仍然會(huì)有較小的滾動(dòng)條問題。

因此，我的建議是規(guī)劃你的布局，將其分解成幾個(gè)部分，然后在這些部分上使用內(nèi)容可見性，以獲得更好的滾動(dòng)條行為。

2. Will-change 屬性

瀏覽器上的動(dòng)畫并不是一件新鮮事。通常情況下，這些動(dòng)畫是和其他元素一起定期渲染的。不過，現(xiàn)在瀏覽器可以使用GPU來優(yōu)化其中的一些動(dòng)畫操作。

通過will-change CSS屬性，我們可以表明元素將修改特定的屬性，讓瀏覽器事先進(jìn)行必要的優(yōu)化。

下面發(fā)生的事情是，瀏覽器將為該元素創(chuàng)建一個(gè)單獨(dú)的層。之后，它將該元素的渲染與其他優(yōu)化一起委托給GPU。這將使動(dòng)畫更加流暢，因?yàn)镚PU加速接管了動(dòng)畫的渲染。

考慮以下CSS類：

 
 
 
 
      
  
  
  
  1. // In stylesheet 
    2.   
  
  
  
  2. .animating-element { 
    3.   
  
  
  
  3.   will-change: opacity; 
    4.   
  
  
  
  4. } 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. // In HTML 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.   Animating Child elements 
    9.
 

當(dāng)在瀏覽器中渲染上述片段時(shí)，它將識(shí)別 will-change 屬性并優(yōu)化未來與不透明度相關(guān)的變化。

根據(jù)Maximillian Laumeister所做的性能基準(zhǔn)，可以看到他通過這個(gè)單行的改變獲得了超過120FPS的渲染速度，而最初的渲染速度大概在50FPS。

什么時(shí)候不是用will-change

雖然 will-change 的目的是為了提高性能，但如果你濫用它，它也會(huì)降低Web應(yīng)用的性能。

  • 使用 will-change 表示該元素在未來會(huì)發(fā)生變化。因此，如果你試圖將 will-change 和動(dòng)畫同時(shí)使用，它將不會(huì)給你帶來優(yōu)化。因此，建議在父元素上使用 will-change ，在子元素上使用動(dòng)畫。
    •   
  
  
  
         
   
   
   
    1. .my-class{ 
      2.    
   
   
   
    2.   will-change: opacity; 
      3.    
   
   
   
    3. } 
      4.    
   
   
   
    4. .child-class{ 
      5.    
   
   
   
    5.   transition: opacity 1s ease-in-out; 
      6.    
   
   
   
    6. } 
      7.
  • 不要使用非動(dòng)畫元素。當(dāng)你在一個(gè)元素上使用 will-change 時(shí)，瀏覽器會(huì)嘗試通過將元素移動(dòng)到一個(gè)新的圖層并將轉(zhuǎn)換工作交給GPU來優(yōu)化它。如果您沒有任何要轉(zhuǎn)換的內(nèi)容，則會(huì)導(dǎo)致資源浪費(fèi)。

最后需要注意的是，建議在完成所有動(dòng)畫后，將元素的 will-change 刪除。

3. 減少渲染阻止時(shí)間

今天，許多Web應(yīng)用必須滿足多種形式的需求，包括PC、平板電腦和手機(jī)等。為了完成這種響應(yīng)式的特性，我們必須根據(jù)媒體尺寸編寫新的樣式。當(dāng)涉及頁面渲染時(shí)，它無法啟動(dòng)渲染階段，直到 CSS對(duì)象模型(CSSOM)已準(zhǔn)備就緒。根據(jù)你的Web應(yīng)用，你可能會(huì)有一個(gè)大的樣式表來滿足所有設(shè)備的形式因素。

但是，假設(shè)我們根據(jù)表單因素將其拆分為多個(gè)樣式表。在這種情況下，我們可以只讓主CSS文件阻塞關(guān)鍵路徑，并以高優(yōu)先級(jí)下載它，而讓其他樣式表以低優(yōu)先級(jí)方式下載。

 
 
 
 
      
  
  
  
  1.  
    2.

將其分解為多個(gè)樣式表后：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.  
    9.

如您所見，根據(jù)樣式因素分解樣式表可以減少渲染阻止時(shí)間。

4. 避免@import包含多個(gè)樣式表

通過 @import，我們可以在另一個(gè)樣式表中包含一個(gè)樣式表。當(dāng)我們?cè)谔幚硪粋€(gè)大型項(xiàng)目時(shí)，使用 @import 可以使代碼更加簡潔。

關(guān)于 @import 的關(guān)鍵事實(shí)是，它是一個(gè)阻塞調(diào)用，因?yàn)樗仨毻ㄟ^網(wǎng)絡(luò)請(qǐng)求來獲取文件，解析文件，并將其包含在樣式表中。如果我們?cè)跇邮奖碇星短琢?@import，就會(huì)妨礙渲染性能。

 
 
 
 
      
  
  
  
  1. # style.css 
    2.   
  
  
  
  2. @import url("windows.css"); 
    3.   
  
  
  
  3. # windows.css 
    4.   
  
  
  
  4. @import url("componenets.css"); 
    5.

與使用 @import 相比，我們可以通過多個(gè) link 來實(shí)現(xiàn)同樣的功能，但性能要好得多，因?yàn)樗试S我們并行加載樣式表。

總結(jié)

除了我們?cè)诒疚闹杏懻摰?個(gè)方面，我們還有一些其他的方法可以使用CSS來提高網(wǎng)頁的性能。CSS最近的一個(gè)特性： content-visibility，在未來的幾年里看起來是如此的有前途，因?yàn)樗o頁面渲染帶來了數(shù)倍的性能提升。

最重要的是，我們不需要寫一條JavaScript語句就能獲得所有的性能。

我相信你可以結(jié)合以上的一些功能，為終端用戶構(gòu)建性能更好的Web應(yīng)用。希望這篇文章對(duì)你有用，如果你知道什么CSS技巧可以提高Web應(yīng)用的性能，請(qǐng)?jiān)谙旅娴脑u(píng)論中提及。謝謝大家。


分享題目：僅使用CSS就可以提高頁面渲染速度的4個(gè)技巧
轉(zhuǎn)載來于：http://www.5511xx.com/article/djdojsi.html