创建一个昂贵的同步任务，以测试UI响应

Question

所以我试图弄清楚如何将图像渲染到浏览器，而不会使其崩溃或使UI无响应。我正在使用此代码将大量缩略图加载到屏幕上，目标是保持旋转器gif在每个LI中旋转，没有毛刺，同时图像在每个LI内逐个渲染。

这是我现在正在测试的方法，但我需要一些帮助来模拟昂贵的操作，比如在评论的for循环中;我认为这个for循环太贵了; setTimeout工作正常（模拟web worker的工作），但我想测试一些昂贵的同步任务;

for循环完全冻结了应用程序;你有其他建议吗？

renderThumbnail = function(imageObj){ 
    var li = document.createElement('li');
    li.className = 'photo-list-item loading-spinner';
    photoList.appendChild(li);
    thumbnailListItems.push(li);
    imageObj.load().then(function(){
        thumbnailRenderQueue.push(imageObj);
        if(!renderingThumbnails){
            renderQueue();
        }
    });
};

var renderQueue = function(){
    renderingThumbnails = true;
    (function renderOne(){
        var li = thumbnailListItems.shift();
        var imageObj = thumbnailRenderQueue.shift();
        var canvas = document.createElement('canvas');
        canvas.width = 120;
        canvas.height = 80;
        // setTimeout(function(){
            // for(var i = 0; i < 9999999; i++){ 10000*10000; }
            var ctx = canvas.getContext('2d');
            li.appendChild(canvas);
            li.classList.remove('loading-spinner');
            ctx.drawImage(imageObj.image, 0, 0, 120, 80);
            if(thumbnailRenderQueue.length > 0){
                renderOne();
            } else {
                renderingThumbnails = false;
            }
        // }, 1000);
    })();