HTML5 使用网页工作线程（Web Worker）渲染图像数据的性能测试 - 踏得网

本例测试多个网页工作线程在Canvas上渲染几何图形的性能情况。从测试结果看，并非worker越多越好。本例中4个worker所花费的时间最少。这很自然，更多的worker需要更多的线程维护以及通信系统开销。本例中包含一些基本的几何计算公式（如矢量加减、矩阵变换等）的JavaScript实现。

HTML5

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3639
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var noImageData = false;
var numWorkers = 4;
var blockSize = 20;
var canvasSize = 400;
var goImmediately = false;
var reuseWorkers = true;
var vsync = true;
if (Object.defineProperty)
    Object.defineProperty(window, "go", {
        get: function() {
            goImmediately = true;
        }
    })
else
    window.__defineGetter__("go", function() {
        goImmediately = true;
    });
(function() {
    try {
        eval(window.location.search.toString().substring(1));
    } catch (e) {}
})();
window.onload = function() {
    controls = document.getElementById("controls");
    workerCount = document.createElement("select");
    workerCount.id = "workerCount";
    if (window.Worker) {
        for (var i = 1; i <= 16; ++i) {
            var opt = document.createElement("option");
            opt.value = i;
            opt.appendChild(document.createTextNode(i));
            workerCount.appendChild(opt);
        }
        var opt = document.createElement("option");
        opt.value = 0;
        opt.appendChild(document.createTextNode("disabled"));
        workerCount.appendChild(opt);
        workerCount.value = numWorkers;
    } else {
        workerCount.disabled = true;
        var opt = document.createElement("option");
        opt.value = 0;
        opt.appendChild(document.createTextNode("no workers"));
        workerCount.appendChild(opt);
    }
    var workerCountLabel = document.createElement("label");
    workerCountLabel.appendChild(document.createTextNode("Number of Workers:"));
    workerCountLabel.setAttribute("for", "workerCount");
    controls.insertBefore(workerCountLabel, document.getElementById("renderButton"));
    controls.insertBefore(workerCount, document.getElementById("renderButton"));
    useImageData = document.createElement("input");
    useImageData.type = "checkbox";
    var supportsImageData = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype.putImageData;
    useImageData.checked = supportsImageData;

if (supportsImageData) {
        var useImageDataLabel = document.createElement("label");
        useImageDataLabel.appendChild(document.createTextNode("Use ImageData API:"));
        useImageDataLabel.setAttribute("for", "useImageData");
        useImageData.id = "useImageData";
        controls.insertBefore(useImageDataLabel, document.getElementById("renderButton"));
        controls.insertBefore(useImageData, document.getElementById("renderButton"));
    }

var canvas = document.getElementById("renderCanvas");
    canvas.width = canvasSize;
    canvas.height = canvasSize;
    console.log(goImmediately);
    if (goImmediately) render();
}

编译

CSS

HTML

<script src="/uploads/160301/jobqueue.js"></script>
<script src="/uploads/160301/rtstructs.js"></script>
<script src="/uploads/160301/renderer.js"></script>
<script src="/uploads/160301/scene.js"></script>
<canvas id="renderCanvas" width="400px" height="400px">
    <div id="canvasError">You need a browser that supports DOM Canvas to view this demo, such as Safari (or any other WebKit based browser), or more or less any other non-IE browser </div>
</canvas>
<br />
<p>HTML5 使用网页工作线程（Web Worker）渲染图像数据的性能测试，点击Go开始测试。</p>
<div id="console"></div>
<script>
    function log(str) {
        var console = document.getElementById("console");
        console.appendChild(document.createTextNode(str + '\n'));
    }
    var rendering = false;
    var angle = 0;
    var queue;
    var lastWorkerCount = -1;

function render(profile) {
        if (rendering)
            return;
        var renderButton = document.getElementById("renderButton");
        renderButton.innerText = "Cancel";
        renderButton.onclick = function() {
            renderButton.disabled = true;
            renderButton.innerText = "Cancelling...";
            queue.stop(function() {
                renderButton.disabled = false;
                rendering = false;
                renderButton.innerText = "Go!";
                renderButton.onclick = render;
            });
        };
        rendering = true;
        var startDate = new Date().getTime();
        var canvasElem = document.getElementById("renderCanvas");
        var _canvas = canvasElem.getContext("2d");
        var _camera = new Camera([-40 * Math.sin(angle), 30 + 10 * Math.sin(angle * 1.2), 40 * Math.cos(angle)], [0, 0, 0], [0, 1, 0]);
        _camera.onFinished = function() {
            var deltaTime = new Date().getTime() - startDate;
            rendering = false;
            renderButton.onclick = render;
            if (!window.animate) {
                log("Time taken: " + deltaTime / 1000 + "s");
                renderButton.innerText = "Go!";
            } else {
                angle += 0.1;
                setTimeout(render, 10);
            }

};
        queue = (workerCount.value === lastWorkerCount && reuseWorkers) ? queue : new JobQueue(workerCount.value);
        lastWorkerCount = workerCount.value;
        _camera.render(queue, createScene, _canvas, canvasElem.width, canvasElem.height,
            useImageData.checked);
    }
</script>
<br />
<div id="controls">
    <button id="renderButton" onclick="render()">Go!</button>
</div>