最近在做視訊圖層繪製時，用JS讀取DLL庫中回撥資料時，遇到一個繪製視訊資料存在延時嚴重的現象，約有1s左右。

大致過程為如下

function(data,width,height,length){

  var m_ImageSt = new Date().getTime();

  //資料轉換為Uint8ClampedArray型別
  var m_Imagedata = new  Uint8ClampedArray(length);

  m_Imagedata.set(data,0);

  //var m_Imagedata = Uint8ClampedArray.from(data);
 


  var middle = new Date().getTime();
  console.log('中間距離第一次計算耗時:'+(middle-start)+'毫秒 中間計算*********:' +(middle-m_ImageSt)+"毫秒");

  var m_image = new ImageData(m_Imagedata,width,height);
  var canvas = document.getElementById("m_canvas");
  canvas.width = width;
  canvas.height = height;

   for(var
 
 i= 0;i< length;i+=4)
    {  
      //alpha 為 0時,介面全透明，所以要做一個轉換。RGBA
      m_image.data[i+3] = 255 ;
    }


  canvas.getContext('2d').putImageData(m_image,0,0);

  var end = new Date().getTime();
  console.log('計算和繪圖耗時：'+(end-start)+'毫秒');
}

通過獲取到的data資料，進行影象繪製。影象資料需要一個Uint8ClampedArray型別，而原本的資料過來是一個Uint8Array型別的。

很自然的想到用上面註釋中的方法來實現

//var m_Imagedata = Uint8ClampedArray.from(data);

結果發現這個方式對於data大小有一百萬位元組的資料時，第一次載入會有200ms 多的延時。不管你如果用非同步的方式去實現，總是佔用CPU的資源的。

而後通過var end = new Date().getTime();方式來加註釋分析程式碼片段的耗時。原來是這句話嚴重佔用了資源。雖然不太清楚這個原因是為什麼，但是通過如下方式來解決。

  var m_Imagedata = new  Uint8ClampedArray(length);

  m_Imagedata.set(data,0);

最後這個總的耗時也就是在2~3ms的內就完成了。

總的來說是解決，後續要是誰比較清楚這個耗時原因可以@我。在此記錄下，以免其他人遇到相同問題。