大家好，欢迎来到IT知识分享网。

浏览器线程中至少存在三个线程：

• JS引擎线程（用于处理JS）
• GUI渲染线程（用于页面渲染）
• 浏览器事件触发线程（用于控制交互）

因为JS可以操作DOM元素，进而会影响到GUI的渲染结果，因此JS引擎线程和GUI渲染线程是互斥的。而JS引擎是基于事件驱动，即单线程运行机制，所以在JS引擎线程处于运行状态时，GUI渲染线程处于冻结状态

案例

需求：在请求数据的过程中，在DOM中添加一个加载样式，请求完成后，关闭此样式

ajax同步请求造成浏览器假死及阻塞GUI渲染

function fn() {
    //js操作dom元素
    $(dom).addClass(classname)
    //ajax同步请求
    $.ajax({
        async: false，
        success: function() {
            $(dom).removeClass(classname)
        }
    })
}
//1.浏览器假死，即数据请求完成后浏览器才正常
//2.页面渲染没效果，数据请求完成后才有效果

IT知识分享网

分析原因：GUI线程和JS线程是互斥的，在执行JS耗时操作时，GUI会被阻塞，当同步请求的时候，其它线程都会处于等待状态，不管DOM操作语句是不是在发出请求的前面，都会被阻塞，不给它执行的时间

解决方案：把同步请求改成异步请求