Javascript 创建昂贵的同步任务，以测试UI响应能力

因此，我试图找出如何将图像呈现到浏览器，而不会使浏览器崩溃或使UI无响应。我正在使用这段代码将（很多）缩略图加载到屏幕上，目标是使微调器gif在每个LI中旋转，不会出现故障，同时图像在每个LI中逐个渲染

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

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);
    })();

renderThumbnail=函数（imageObj）{
var li=document.createElement（'li'）；
li.className='照片列表项加载微调器'；
照片列表。儿童（李）；
thumbnailListItems.push（li）；
imageObj.load（）.then（函数（））{
thumbnailRenderQueue.push（imageObj）；
如果（！渲染缩略图）{
renderQueue（）；
}
});
};
var renderQueue=函数（）{
renderingThumbnails=true；
（函数renderOne（）{
var li=thumbnailListItems.shift（）；
var imageObj=thumbnailRenderQueue.shift（）；
var canvas=document.createElement（'canvas'）；
画布宽度=120；
高度=80；
//setTimeout（函数（）{
//对于（var i=0；i<999999；i++）{10000*10000；}
var ctx=canvas.getContext（'2d'）；
李.儿童（帆布）；
li.classList.remove（'load-spinner'）；
ctx.drawImage（imageObj.image，0,0,120,80）；
如果（thumbnailRenderQueue.length>0）{
renderOne（）；
}否则{
渲染缩略图=false；
}
// }, 1000);
})();

Javascript在浏览器中是单线程的。一个昂贵的同步任务将使希望获取事件的其他任务（如计时器、单击、鼠标、重新绘制等）无法执行直到同步任务完成。这正是浏览器事件循环的工作方式。防止饥饿的唯一方法是避免昂贵的同步任务，这样所有工作都会分解成小块（通常通过

setTimeout（）

启动）因此，任何一块都不会运行太长时间。动画gif在长时间同步任务期间的行为取决于浏览器，而这不是您可以控制的。请使用小于

999999

？