HTML畫布Vs的堆積事業部績效

Question

基本上我有一個div設置像這樣：

<div class="pane"> 
     <div class="banner"> 
      <img class="original" src="images/picture.jpg" width="100%" height="100%" /> 

      <div class="blurred"></div> 
      <div class="blurred_colour"></div> 
      <div class="focused"></div> 

     </div> 
    </div> 

好我的劇本隱藏.original，然後得到它的來源，併爲每個div的3個不同的圖像。它們都是用javascript生成的canvas標籤。 .blurred包含原始的去飽和和模糊版本。 .blurred_colour包含一個模糊的版本，但顏色。 .focused只是原始圖像。

現在我還在每個div和位置的頂部放置了一個邊框圖像，因此它出現在頂部而不是在div下面。所以如果你保持跟蹤，那3個div，3個畫布圖像和3個邊界圖像（png）定位在3個畫布圖像的頂部。而三個主要的divs相互堆疊在一起。我使用jQuery動畫製作了大量不透明度變化的動畫。

正如你所猜測的，一些瀏覽器顯示這個動畫相當不連貫，它可能會更強大的電腦功能更差。

我的問題是，是否有可能用1個畫布標籤重寫所有這些，同時仍然具有所有這些動畫，但也有更好的表現，那麼我目前正在如何做呢？

Answer 1

很難說你的代碼爲什麼在這裏很慢。

你沒有很多DOM元素這樣可能不是問題。

你應該可以剖析代碼。 Chrome或IE中的F12，進入Profiler選項卡，運行它，看看所有時間都在吃什麼。

你準備完成什麼？某種模糊效果？在一個畫布中做所有這些可能是可取的，只要你想要做的事情可以很容易地做到這一點。

什麼樣的動畫？您是否在物理移動DOM元素？那很糟。從性能的角度來看，如果可以避免的話，絕對不要對DOM做任何事情。如果是這種情況，那麼將所有內容放在一個畫布中可能會有很大幫助。再次，它很難說這樣的細節。

你只是在模糊動畫？一般來說，CSS模糊比Canvas模糊更快（並且更容易編寫）。

無論如何，答案可能不是「DOM元素太多」。它或者是DOM過多的東西，或者是在動畫循環中重複的工作，或者當畫布中的所有內容都會更好時，過多的DOM交互。