js等待当前线程内ajax完成,js更新dom后页面及时渲染问题(js线程阻塞和解决办法)...

两个概念:1,js是同步加载的html

2,浏览器执行js程序,高于页面渲染java

因而就出现了js更新dom,页面不能及时渲染的问题ajax

代码例子:浏览器

document.body.html('为何不先渲染我');

//程序

$.ajax({

...

})

//运行结果会在ajax执行完毕后,再去渲染页面

从浏览器层面解释:多线程

16cf265d35b21c33b1ea5253ad3bad72.png

深刻研究浏览器内核能够发现,浏览器内核是多线程的,其中一个常驻线程叫javascript引擎线程,负责执行js代码,还有一个常驻线程叫GUI渲染线程,负责页面渲染,dom重画等操做。javascript引擎是基于事件驱动单线程执行的,js线程一直在等待着任务列表中的任务到来,而js线程与gui渲染线程是互斥的,当js线程执行时,渲染线程呈挂起状态,只有当js线程空闲时渲染线程才会执行。因此,咱们能够理解为何dom更新老是不能被马上执行。就咱们的代码来讲,显示提示和隐藏提示的dom操做都被浏览器记下来了并放在gui渲染线程的任务队列中,但都没有马上进行渲染,而是在当前函数完成后(js线程已处于空闲状态),进行最终的dom渲染,而咱们的用户则基本感觉不到这个过程,由于通过show和hide两个相反的操做,至关于dom彻底没变。dom

解决办法:ide

1.     采用alert语句进行提示,alert语句会block住js线程,将执行权让给gui渲染线程,执行alert以后浏览器会把这个语句以前的全部对dom的操做都进行体现。函数

2,setTimeoutui

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值