>本文探讨了HTML5中的JavaScript图像操纵,重点是使用Web Worker进行并行化的绩效优化。 关键要点突出了网络工人的好处,尤其是对于具有多个核心的低端设备。 棕褐色效果用作测试案例。
初始“蛮力”方法在主线程中使用像素的棕褐色效应像素,从而导致性能缓慢,尤其是在功能较小的硬件上。 该代码使用帆布元素直接访问和操纵像素数据。
>
> HTML结构很简单:显示图像(mop.jpg
),并且帆布元素将显示处理后的图像。 JavaScript代码使用包含随机噪声因子的公式来计算每个像素的新RGB值。
用于重复使用中的核心棕褐色处理功能(tools.js
>
default.js
> Web Worker方法将图像分为段(在本示例中,四个),将每个图像分配给一个单独的工人。 每个工作都独立处理其细分市场,可大大减少处理时间。 然后将结果重组在主线程中。
pictureProcessor.js
性能比较证明了使用网络工人实现的显着速度提高,尤其是在低端硬件上引人注目。 但是,本文还指出,由于线程之间的数据复制开销,高端机器上的性能增长可能不太明显。 图像操纵任务的复杂性应证明使用网络工人的使用是合理的。 本文以讨论将代码移植到Windows 8应用程序和FAQ部分的讨论结束,该部分涉及有关Web工作人员和图像操纵性能的常见问题。 使用网络工人的最终结果如下:>
以上是使用网络工人提高图像操纵性能的详细内容。更多信息请关注PHP中文网其他相关文章!