CSS前端頁面渲染優化屬性will-change的具體使用_CSS教程_CSS_網頁制作

來源:腳本之家  責任編輯:小易  

CSS通常有三種方式,內部樣式表,行內式,外部樣式表。內部樣式表內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標簽中,并且用style標簽定義,其基本語法格式如下:選擇器 {屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}語法中,style標簽一般位于head標簽中title標簽之后,也可以把他放在HTML文檔的任何地方。type="text/CSS"在html5中可以省略,寫上也比較符合規范,所以這個地方可以寫也可以省略。行內式(內聯樣式)內聯樣式,又有人稱行內樣式、行間樣式、內嵌樣式。是通過標簽的style屬性來設置元素的樣式,其基本語法格式如下:標簽名 style="屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;內容標簽名>語法中style是標簽的屬性,實際上任何HTML標簽都擁有style屬性,用來設置行內式。其中屬性和值的書寫規范與CSS樣式規則相同,行內式只對其所在的標簽及嵌套在其中的子標簽起作用。外部樣式表(外鏈式)鏈入式是將所有的樣式放在一個或多個以.CSS為擴展名的外部樣式表文件中,通過link標簽將外部樣式表文件鏈接到HTML文檔中,其基本語法格式如下:文件的路徑"rel="stylesheet"/>該語法中,link標簽需要放在head頭部標簽中,并且必須指定link標簽的三個屬性,具體如下:href:定義所鏈接外部樣式表文件的URL,可以是相對路徑,也可以是絕對路徑。type:定義所鏈接文檔的類型,在這里需要指定為“text/CSS”,表示鏈接的外部文件為CSS樣式表。rel:定義當前文檔與被鏈接文檔之間的關系,在這里需要指定為“stylesheet”,表示被鏈接的文檔是一個樣式表文件www.13333515.buzz防采集請勿采集本網。

前言

當觸發scroll、resize這類的滾動事件時,被觸發的頻率非常高,間隔也特別近。如果事件中涉及到大量的位置計算、DOM操作、元素重繪等工作,并且這些工作無法在下一個scroll事件出發前完成,就會造成瀏覽器掉幀(掉幀就是例如圖像一閃一閃的,運動不流暢的情況)。加之用戶鼠標滾動往往是連續的,就會持續觸發scroll事件導致掉幀擴大、瀏覽器CPU使用率增加,用戶體驗收到影響。

css優化頁面是這樣的: 1、首先現在主流的網站都是采用div+css的網站結構來實現的,這樣的好處是網站的骨架由HTML來實現,其中的所有樣式都是使用css來實現的,這樣避免了改版的麻煩,這本身就是網頁的

而CSS屬性will-change為web開發者提供了一種告知瀏覽器該元素會有哪些變化的方法,這樣瀏覽器就可以在元素屬性真正發生變化之前提前做好對應的優化準備工作。這種優化可以將一部分復雜的計算工作提前準備好,使頁面的反應更為快速靈敏。

display:none就是不會render,但是元素本身的功能啟用與否是另一個層面的問題—比如媒體是否加載播放。這不是css的范疇,所以沒有css屬性來指定。通常是有元素上的屬性或dom方法來決定的。

準備知識

display:none就是不會render,但是元素本身的功能啟用與否是另一個層面的問題—比如媒體是否加載播放。這不是css的范疇,所以沒有css屬性來指定。通常是有元素上的屬性或dom方法來決定的。

CPU

CPU即中央處理器,它的功能主要是解釋計算機指令以及處理計算機軟件中的數據,也被稱為主板。

3、通過 CSS Rule Tree 匹配 DOM Tree 進行定位坐標和大小,是否換行,以及 position、overflow、z-index 等等屬性,這個過程稱為 Flow 或 Layout。4、最終通過調用Native GUI 的 API 繪制網頁畫面的過程

GPU

GPU是圖形處理器,專門處理和繪制圖形相關的硬件。GPU是專為執行復雜的數學和幾何計算而設計的,使得CPU從圖形處理的任務中解放出來,可以執行其他更多的系統任務。

而除影響續航外,強制GPU還有一個致命的弊端,那就是有一些較老的軟件在強制GPU渲染下是無法正常運行的,會經常性的出現FC的情況,主要原因是過去程序的SDK版本多數不支持GPU加速,或者默認不開啟GPU渲染

硬件加速

硬件加速意味著Graphics Processing Unit(GPU)會通過代替Central Processing Unit (CPU)做一些負荷比較大的事情,來協助瀏覽器快速渲染頁面,當CSS操作使用硬件加速的時候,通常會使頁面渲染速度加快。

瀏覽器渲染頁面的過程:

1.解析HTML(HTML Parser)

2.構建DOM樹(DOM Tree)

3.渲染樹構建(Render Tree)

4.繪制渲染樹(Painting)

簡單的解釋就是:瀏覽器通過請求得到服務器返回的html,因為html是樹狀結構,通過瀏覽器解析生成DOM Tree。在CSS解析完畢后,將得到的模擬樹CSSOM Tree和DOM Tree結合構建Render Tree,最終用來進行繪圖(Painting)

CSS的動畫、變形、漸變并不會自動觸發GPU加速,而是使用瀏覽器稍慢的軟件渲染引擎。在transition、transform和animation的世界里,應該卸載進程到GPU以加速速度。只有3D變形會有自己的layer,而2D變形則不會。

will-change

1.will-change 是什么?

will-change的功能是:提前通知瀏覽器元素將要做什么動畫,讓瀏覽器提前準備合適的優化設置

官方文檔說:這是一個仍處于試驗階段的功能,所以在未來版本的瀏覽器中該語法的功能和行為kennel隨之變化。

CSS3 will-change屬于web標準屬性,兼容性這塊Chrome/FireFox/Opera都是支持的。

注意:will-change真正的行為觸發之前會告訴瀏覽器:“我要觸發啦”。這意味著不是通過一個3D變換迫使我們轉換到GPU,而是我們現在可以使用一個專用的屬性來通知瀏覽器留意接下來的變化,從而優化和分配內存。提前預約從容不迫。

2.語法

will-change: autowill-change: scroll-positionwill-change: contentswill-change: transform // Example of <custom-ident> will-change: opacity // Example of <custom-ident>will-change: left, top // Example of two <animateable-feature>will-change: unsetwill-change: initialwill-change: inherit

auto

表示沒有特別指定哪些屬性會變化,需要瀏覽器自己去猜,然后使用瀏覽器經常使用的一些常規方法進行優化。

可以是以下值:

scroll-position

表示開發者希望在不久后改變滾動條的位置或者使之產生動畫

contents

表示開發者希望在不久后改變元素內容中的某些東西,或者使它們產生動畫

表示開發者希望在不久后改變指定的屬性名或者使之產生動畫。如果屬性名是簡寫,則代表所有與之對應的簡寫或者全寫的屬性

will-change的使用

hover使用

不要直接寫在默認狀態中,因為will-change會一直掛載

.will-change { will-change: transform; transition: transform 0.3s;}.will-change:hover { transform: scale(1.5);}

可以讓父元素hover的時候,聲明will-change,這樣移出的時候就會自動remove,觸發的范圍基本上是有效元素范圍。

.will-change-parent:hover .will-change { will-change: transform;}.will-change { transition: transform 0.3s;}.will-change:hover { transform: scale(1.5);}

JS使用

var el = document.getElementById('element');// 當鼠標移動到該元素上時給該元素設置 will-change 屬性el.addEventListener('mouseenter', hintBrowser);// 當 CSS 動畫結束后清除 will-change 屬性el.addEventListener('animationEnd', removeHint);function hintBrowser() { // 填寫上那些你知道的,會在 CSS 動畫中發生改變的 CSS 屬性名們 this.style.willChange = 'transform, opacity';}function removeHint() { this.style.willChange = 'auto';}

如果某個應用在按下鍵盤的時候會翻頁,比如相冊或者幻燈片一類的,它的頁面很大很復雜,此時在樣式表中寫上 will-change 是合適的。這會使瀏覽器提前準備好過渡動畫,當鍵盤按下的時候就能立即看到靈活輕快的動畫。

.slide { will-change: transform;}

使用will-change的注意事項

不要將 will-change應用到太多元素上:

瀏覽器已經盡力嘗試去優化一切可以優化的東西了。有一些更強力的優化,如果與 will-change 結合在一起的話,有可能會消耗很多機器資源,如果過度使用的話,可能導致頁面響應緩慢或者消耗非常多的資源。

有節制地使用:

通常,當元素恢復到初始狀態時,瀏覽器會丟棄掉之前做的優化工作。但是如果直接在樣式表中顯式聲明了 will-change 屬性,則表示目標元素可能會經常變化,瀏覽器會將優化工作保存得比之前更久。所以最佳實踐是當元素變化之前和之后通過腳本來切換 will-change 的值。

不要過早應用 will-change優化:

如果你的頁面在性能方面沒什么問題,則不要添加 will-change 屬性來榨取一丁點的速度。 will-change 的設計初衷是作為最后的優化手段,用來嘗試解決現有的性能問題。它不應該被用來預防性能問題。過度使用 will-change 會導致大量的內存占用,并會導致更復雜的渲染過程,因為瀏覽器會試圖準備可能存在的變化過程。這會導致更嚴重的性能問題。

給它足夠的工作時間:

這個屬性是用來讓頁面開發者告知瀏覽器哪些屬性可能會變化的。然后瀏覽器可以選擇在變化發生前提前去做一些優化工作。所以給瀏覽器一點時間去真正做這些優化工作是非常重要的。使用時需要嘗試去找到一些方法提前一定時間獲知元素可能發生的變化,然后為它加上 will-change 屬性。

到此這篇關于CSS前端頁面渲染優化屬性will-change的具體使用的文章就介紹到這了,更多相關CSS will-change內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持真格學網

今天我要將關注點放到網頁渲染以及其重要性上。雖然已經有很多文章提到過這個主題了,但大部分信息都是零碎的片段。為了思考這件事情,我需要研究很多信息的來源。這也就是為什么我覺得我應該寫這篇文章的原因。我相信這篇文章對新手會很有用,并且對想刷新和鞏固他們已經了解的東西的高手也同樣適用。渲染應該從最開始當頁面布局被定義時就進行優化,樣式和腳本在頁面渲染中扮演著非常重要的角色。專業人員知道一些技巧以避免一些性能問題。這篇文章不會深入研究瀏覽器的技術細節,而是提供一些通用的原則。不同瀏覽器引擎工作原理不同,這就使特定瀏覽器的學習更加復雜。瀏覽器是怎樣渲染一個頁面的?我們從瀏覽器渲染頁面的大概過程開始說起:由從服務器接收到的HTML 形成 DOM(文檔對象模型)。樣式被加載和解析,形成 CSSOM(CSS 對象模型)。緊接著 DOM 和 CSSOM 創建了一個渲染樹,這個渲染樹是一些被渲染對象的集合(Webkit 分別叫它們”renderer”和”render object”,而在Gecko 引擎中叫”frame”)。除了不可見的元素(比如 head 標簽和一些有 display:none 屬性的元素),渲染樹映射了 DOM 的結構。在渲染樹中,每一個文本字符串都被當做一個獨立的 renderer。每個渲染對象都包含了與之對應的計算過樣式的DOM 對象(或者一個文本塊)。換句話說,渲染樹描述了 DOM 的直觀的表現形式。對每個渲染元素來說,它的坐標是經過計算的,這被叫做“布局(layout)”。瀏覽器使用一種只需要一次處理的“流方法”來布局所有元素(tables需要多次處理)。最后,將布局顯示在瀏覽器窗口中,這個過程叫做“繪制(painting)”。重繪當在頁面上修改了一些不需要改變定位的樣式的時候(比如background-color,border-color,visibility),瀏覽器只會將新的樣式重新繪制給元素(這就叫一次“重繪”或者“重新定義樣式”)。重排當頁面上的改變影響了文檔內容、結構或者元素定位時,就會發生重排(或稱“重新布局”)。重排通常由以下改變觸發:DOM 操作(如元素增、刪、改或者改變元素順序)。內容的改變,包括 Form 表單中文字的變化。計算或改變 CSS 屬性。增加或刪除一個樣式表。改變”class”屬性。瀏覽器窗口的操作(改變大小、滾動窗口)。激活偽類(如:hover狀態)。瀏覽器如何優化渲染?瀏覽器盡最大努力限制重排的過程僅覆蓋已更改的元素的區域。舉個例子,一個 position 為 absolue 或 fixed 的元素的大小變化只影響它自身和子孫元素,而對一個 position 為 static 的元素做同樣的操作就會引起所有它后面元素的重排。另一個優化就是當運行一段Jjavascript 代碼的時候,瀏覽器會將一些修改緩存起來,然后當代碼執行的時候,一次性的將這些修改執行。舉例來說,這段代碼會觸發一次重繪和一次重排:var$body=$('body');body.css('padding','1px');重排,重繪body.css('color','red');重繪body.css('margin','2px');重排,重繪實際上只有一次重排和重繪被執行。如上面所說,訪問一個元素的屬性會進行一次強制重排。如果我們給上面的代碼加上一行讀取元素屬性的代碼,這個情況就會出現:var$body=$('body');body.css('padding','1px');body.css('padding');這里讀取了一次元素的屬性,一次強制重排就會發生body.css('color','red');body.css('margin','2px');上面這段代碼的結果就是,進行了兩次重排。因此,為了提高性能,你應該講讀取元素屬性的代碼組織在一起(細節的例子可以看JSBin上的代碼)。有一種情況是必須觸發一次強制重排的。例如:給元素改變同一個屬性兩次(比如margin-left),一開始設置100px,沒有動畫,然后通過動畫的形式將值改為50px。具體可以看例子,當然,我在這里會講更多的細節。我們從一個有transition的CSS class開始:has-transition {webkit-transition:margin-left 1s ease-out;moz-transition:margin-left 1s ease-out;o-transition:margin-left 1s ease-out;transition:margin-left 1s ease-out;}然后進行實現:我們的元素默認有"has-transition"屬性var$targetElem=$('#targetElemId');刪除包含transition的classtargetElem.removeClass('has-transition');當包含transition的class已經沒了的時候,改變元素屬性targetElem.css('margin-left',100);再將包含transition的class添加回來targetElem.addClass('has-transition');改變元素屬性targetElem.css('margin-left',50);上面的實現沒有按照期望的運行。所有的修改都被瀏覽器緩存了,只在上面這段代碼的最后才會執行。我們需要的是一次強制重排,我們可以通過進行以下修改來實現:刪除包含transition的class(this).removeClass('has-transition');改變元素屬性(this).css('margin-left',100);觸發一次強制重排,從而使變化了的class或屬性能夠立即執行。(this)[0].offsetHeight;offsetHeight僅僅是個例子,其他的屬性也可以奏效。再將包含transition的class添加回來(this).addClass('has-transition');改變元素屬性(this).css('margin-left',50);現在這段代碼如我們所期望的運行了。實際的優化建議匯總了一些有用的信息,我建議以下幾點:創建合法的HTML 和 CSS,別忘了制定文件編碼,Style 應該寫在 head 標簽中,script 標簽應該加載 body 標簽結束的位置。試著簡化和優化 CSS 選擇器(這個優化點被大多數使用 CSS 預處理器的開發者忽略了)。將嵌套層數控制在最小。以下是 CSS 選擇器的性能排行(從最快的開始):ID選擇器:#idclass選擇器:.class標簽:div相鄰的兄弟元素:a+i父元素選擇器:ul>li通配符選擇器:*偽類和偽元素:a:hover,你應該記住瀏覽器處理選擇器是從右向左的,這也就是為什么最右面的選擇器會更快—#id或.class。div*{.}/badlist li {.}/badlist-item {.}/goodlist.list-item {.}/good在你的腳本中,盡可能的減少 DOM 的操作。把所有東西都緩存起來,包括屬性和對象(如果它可被重復使用)。進行復雜的操作的時候,最好操作一個“離線”的元素(“離線”元素的意思是與 DOM 對象分開、僅存在內存中的元素),然后將這個元素插入到 DOM 中如果你使用 jQuery,遵循jQuery 選擇器最佳實踐要改變元素的樣式,修改“class”屬性是最高效的方式之一。你要改變 DOM 樹的層次越深,這一條就越高效(這也有助于將表現和邏輯分開)。盡可能的只對 position 為 absolute 或 fix 的元素做動畫。當滾動時禁用一些復雜的:hover 動畫是一個很好的主意(例如,給 body 標簽加一個 no-hover 的 class)關于這個主題的文章。想了解更多的細節,可以看一下這些文章:1.How browsers work2.Rendering:repaint,reflow/relayout,restyle希望這篇文章能夠對你有所幫助!原文鏈接:frontendbabel 翻譯:伯樂在線-Moejser譯文鏈接:http://blog.jobbole.com/72692/內容來自www.13333515.buzz請勿采集。


  • 本文相關:
  • css性能優化-will-change使用詳解
  • 為什么每個前端開發者都要理解網頁渲染
  • 瀏覽器頁面渲染與css位置問題
  • css3中的 渲染 屬性 會經常用到嗎
  • 前端開發和web前端開發的區別
  • 可以從哪些方面用css樣式優化網站頁面
  • 能不能設置某些css屬性讓瀏覽器不渲染對應的元素
  • 能不能設置某些css屬性讓瀏覽器不渲染對應的元素
  • 如何了解 HTML 和 CSS 的渲染原理
  • 如何在移動端利用css開啟渲染的硬件加速優化
  • 什么是后端渲染?什么是前端渲染?
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全主頁網頁制作csscss教程will-changecss性能優化-will-change使用詳解css教程css3div+css教程web標準教程瀏覽器兼容教程css布局實例css控制ul li 的樣式詳解(推薦)html設置超鏈接字體顏色和點擊后的字體顏色div水平垂直居中的完美解決方案css設置各種中文字體如雅黑、黑體、宋體、楷體等等css 文本字體顏色設置方法(css color)css 漂亮搜索框美化代碼css自定義select下拉選擇框的樣式(不用其他標簽模擬)css圓角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行縮進兩個文字css 實現漸變效果小結( linear-gradient線性漸變 和 r解決type=file 文件修改表單 名稱不能正常回顯的問題移動端前端適配方案(總結)css 橫向進度條和豎向進度條實現代碼css運用阿里巴巴矢量庫快速在對應位置加上好看的圖標詳解盒模型大小取決于它的padding,margin,border數css+svg實現b站充電效果的示例代碼css動畫實現領積分效果的思路詳解html/css中的空格處理及如何保留頁面中的空格css實現氣泡的小尖角效果
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.13333515.buzz All Rights Reserved
    3排列五开奖结果