【转】ajax同步请求与遮罩层的问题

最新推荐文章于 2022-05-31 14:49:46 发布

wsdhla

最新推荐文章于 2022-05-31 14:49:46 发布

阅读量2k

点赞数

分类专栏：自留Mark 文章标签： js 页面渲染线程

自留Mark 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

引用文章链接：https://blog.csdn.net/wingzingliu/article/details/88788205

参考链接：https://www.cnblogs.com/caihua0405/p/8193033.html

具体问题，在使用ExtJS时，页面有个ajax请求，请求前需要在页面加上遮罩层，请求结束，取消遮罩，发现一个问题，当ajax同步时，遮罩层不生效，只有异步时才可以，所以就搜索下相关的问题原因以及如何解决方法。

具体的原因不知道如何描述，大体如下:GUI渲染线程与JS引擎线程是互斥的，如果JS执行的时间过长（比如同步请求），渲染线程就会阻塞。

解决方法见引用文章。

引用文章内容：

遮罩不生效
今天同事丢给我一个很小的需求，在几个报表的页面加入一个遮罩。拿到需求我就知道肯定没那么简单，如果只是简单的加一个遮罩他自己肯定早就做了，根本不会特意和我说，来让我做。

果然，直接设置ajax的beforeSend:loadMask()以及unLoadMask()后遮罩并没有显示出来。

debug进行调试，发现遮罩生效了只是在正常请求模式下没有展示出来而已。听起来似乎这句话有点别扭，实际上就是渲染线程被阻塞了。

解决方案

       $.ajax({        	
            async: true, //直接设置请求为异步，或者删除这一行ajax默认异步
            url: _uri,
            type: 'POST',
            dataType: "JSON",
            data: {
            },
            beforeSend:loadMask(),
            success: function (data) {
	            unLoadMask();
                alert('成功');
            },
            error: function () {
            	unLoadMask();
            	alert('失败');
            }
        });

因ajax设置了同步，而GUI渲染线程与JS引擎线程是互斥的，所以此时渲染线程被阻塞导致遮罩的样式没有被加载出来。

而直接设置ajax请求为异步的时候，浏览器会新开一个线程来执行，当然回调的时候还是js的单线程性。只是此时GUI渲染线程不会被阻塞。

拓展
1.GUI渲染线程

负责渲染浏览器界面，解析HTML，CSS，构建DOM树，布局和绘制等等。

当界面需要重绘时，该线程就会执行

2.JS引擎线程

JS引擎线程负责解析Javascript脚本，运行代码。

JS引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线程在运行JS程序

注意，GUI渲染线程与JS引擎线程是互斥的，所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。(这就是出现以上ajax请求阻塞了渲染线程的原因所在)

3.事件触发线程

归属于浏览器而不是JS引擎，用来控制事件循环，当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中

当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理

注意，由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）

4.定时触发器线程

setInternal与setTimeout所在线程，浏览器定时计数器并不是由JavaScript引擎计数的,（因为JS引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确），因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）

5.异步http请求线程

在XMLHttpRequest在连接后是通过浏览器新开一个线程请求，将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行。

盲区
可能会有人不是很理解JS的单线程，明明ajax是一种异步请求，为什么js还是单线程的呢。其实实现多线程的是浏览器，在需要异步请求的时候由浏览器新开一个线程来执行其方法，在请求结束之后可以利用回调函数进行执行获得的参数处理等等。实现的方式是将请求放入一个JS的执行队列中依次执行(这也是JS的单线程体现)，这是回调函数和普通函数公用的一个队列。

题外话
也幸好是同事觉得这个小问题不知道怎么解决，随便就丢给我让我帮忙解决一下，自己才有机会去处理并且学习。总之，解决问题就是对自己的一个提升。
---------------------
作者：WINGZINGLIU
来源：CSDN
原文：https://blog.csdn.net/wingzingliu/article/details/88788205
版权声明：本文为博主原创文章，转载请附上博文链接！