JS下视频数据耗时分析

最近在做视频图层绘制时，用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的内就完成了。

总的来说是解决，后续要是谁比较清楚这个耗时原因可以@我。在此记录下，以免其他人遇到相同问题。