SEO研究中心

微信
手機版
微信碼
tag標簽

高性能網站構建實戰

2014-08-26 投稿人 : chaojicms 圍觀 :2338 評論
電腦廣告
手機廣告
 

如何用HTML5構建高性能視差網站

 
  文中多處涉及瀏覽器重繪和性能優化的原理,也是《Web滾動性能優化實戰》的拓展和延續,難度上屬于中級進階,請在閱讀前請先看看這篇文章。 如果你還不了解它們,它們其實就是頁面的視覺結構隨滾動變化的站點。正常情況下,頁面上的元素按比例縮放、旋轉或者
 
  文中多處涉及瀏覽器重繪和性能優化的原理,也是《Web滾動性能優化實戰》的拓展和延續,難度上屬于中級進階,請在閱讀前請先看看這篇文章。    如果你還不了解它們,它們其實就是頁面的視覺結構隨滾動變化的站點。正常情況下,頁面上的元素按比例縮放、旋轉或者移動到滾動的位置。
視差效果的演示頁面
  我們視差效果的演示頁面
 
  你喜不喜歡視差網站是一回事,但是我們能確定的是這絕對是一個性能黑洞。原因是當你滾動時,瀏覽器會試圖對新內容出現的地方(根據滾動的方向)進行性能優 化,總的來講,在滾動中視覺上越少更新瀏覽器性能越好。對于視差網站來說這很少見,因為在整個頁面上大的視覺元素會多次發生改變,從而導致瀏覽器必須對整 個頁面進行重繪(為什么是性能黑洞,可以參考我的這篇文章《Web滾動性能優化實戰》)。
 
  把視差網站歸納為下面的特性是合理的:
 
  1、  當你向上或者向下滾動頁面時,背景元素改變位置、旋轉或者縮放。
 
  2、  頁面內容,例如文本或者小圖片,以特別的從上到下的方式滾動。
 
  我們之前介紹過滾動性能及其優化方式,你可以以此來改進應用的響應能力。本文將建立在此基礎上,所以你需要先讀一下上面這篇文章。
 
  所以現在的問題是,如果你正在構建一個視差滾動網站,是必須要進行代價昂貴的重繪,還是有其它方法可以采用來最大限度的提高性能?讓我們來看看可供選擇的方法。
 
  方法1:使用DOM元素和絕對定位
 
  這可能是大多數人選擇的方式。頁面里有許多元素,當滾動事件觸發時,許多視覺上的更新會發生在這些元素上。這里我展示了一個演示頁面。
 
  如果你開啟了開發者工具時間軸的frame模式,并且上下滾動,你會注意到有代價昂貴的全屏繪制操作。如果你滾動多次,你也許可以在一個單獨的幀里看到多個滾動事件,每一個都會觸發布局工作。
如何構建高性能視差網站
  開發者工具展示了一幀里有大量的繪制操作和多個由事件觸發的布局
 
  重要的是要牢記,為了達到60fps(與典型的顯示器刷新率60Hz相匹配),我們必須要在差不多16ms內完成所有事情。在這第一個版本中,我們每當得 到一個滾動事件,我們就要執行一次視覺更新,但是正如我們在前面的文章-《用requestAnimationFrame實現更簡單動畫》和《Web滾動 性能優化實戰》里討論到的一樣,這與瀏覽器的更新節奏并不一致。所以我們要么錯過幀,要么在一幀里完成太多的工作。這會讓你的站點很容易看起來不舒服和不 自然,導致用戶感覺失望。
 
  讓我們把視覺更新的代碼從滾動事件中移到requestAnimationFrame回調里,并且在滾動事件的回調里簡單的獲取滾動的值。我們在第二個演示中展示了這個變化。
 
  如果你重復滾動測試,你可能會注意到有輕微的改善,雖然并不多。原因是由滾動觸發的布局操作代價昂貴,而現在我們只在每幀中執行一次布局操作。
 
  開發者工具展示了一幀里有大量的繪制操作和多個由事件觸發的布局
使用DOM元素和絕對定位
 
  我們現在在每幀里可以處理一個或者上百個滾動事件,但最重要的是,我們僅僅存儲最近的一個滾動值,供requestAnimationFrame回調觸發時使用,并執行視覺上的更新。關鍵是我們已經從每次接收到滾動事件時進行視覺更新優化為在瀏覽器給我們的合適時機進行處理。你是不是覺得這相當給力?
 
  這個方法的主要問題是,無論使用requestAnimationFrame與否,我們基本上都會生成整個頁面的層,在移動這些視覺元素時需要大量和代價 昂貴的重繪。通常重繪會是一個阻塞操作(雖然這點將會優化),這意味著瀏覽器不能同時進行其它工作,而我們經常有可能超過瀏覽器16ms的幀的處理時限, 這代表會出現性能上卡頓的情況。
 
  方法2:使用DOM元素和3D轉換
 
  除了絕對定位之外,另外一種我們可以采用的方法就是3D轉換(transform)。在這種情況下我們可以看到每個用3D轉換處理的元素都會產生新的層。相比之下,在方法1中,如果有任何變化時,我們必須要重繪頁面上一大部分的層。
 
  這意味著使用此方法情況會大為不同:我們可能對應用了3D轉換的任何元素都會有一個層。如果通過更多元素的轉換做到這一點,我們不需要重繪任何層,GPU 能夠處理移動元素和合成整個頁面。也許你想知道為什么用3D轉換替代3D,原因是2D轉換不能保證得到一個新的層,而3D轉換可以。
 
  這是另一個使用了3D轉換的演示。滾動時你可以看到性能已經大有改觀。
 
  很多時候人們使用-webkit-transform:translateZ(0)這個技巧,能夠看到有奇妙的性能改善(宇捷注:關于這種方式,其實就是 利用3D轉換來開啟瀏覽器硬件加速,屬于一種Hack。國內很少有資料提及,而國外有很多移動App開發性能優化的文章提到。國內可以看看《改善 HTML5網頁性能》,國外可以看看《IncreasingPerformance of HTML and JavaScript on Mobile Devices》)。這種方式現在可以正常工作,但是會帶來一些問題:
 
  1、  它并不是瀏覽器兼容的;
 
  2、  它強迫瀏覽器為每一個轉換的元素創建新的層。大量的層會帶來其它性能瓶頸,所以需要有節制的使用。
 
  3、  它在某些Webkit版本的移植上被禁用。
 
  所以,你如果采用這種方法需要非常謹慎,這對解決問題來說是一個臨時方案。在完美的情況下我們甚至都不會考慮它,而且瀏覽器每天都在改進中,誰知道也許哪天我們就不需要它了。
 
  方法3:使用固定定位(Fixed Position)的Canvas或者WebGL
 
  我們最后要考慮的方法就是在頁面上采用固定定位的Canvas,而把轉換的圖像繪制在上面。乍看之下,這可能不是最高效的解決方案,但是它有幾個好處:
 
  我們不再需要大量合成工作,因為頁面只有一個元素 - Canvas;
 
  我們可以高效的通過硬件加速處理一個單獨的bitmap;
 
  Canvas2D API非常適合我們要執行的轉換類型,這意味著開發和維護更容易管理。
 
  使用Canvas元素為我們提供了一個新的層,但是它只有一層,而在方法2中我們為每一個應用3D轉換的元素都創建了一個新層,所以有額外的工作量來把這些層合成在一起。

以上文章來自互聯網,由小孔負責發布,有問題可以聯系網站管理員
文章底部電腦廣告
手機廣告位-內容正文底部
任天堂在线观看高清