两个概念:1,js是同步加载的html
2,浏览器执行js程序,高于页面渲染java
因而就出现了js更新dom,页面不能及时渲染的问题ajax
代码例子:浏览器
document.body.html('为何不先渲染我');
//程序
$.ajax({
...
})
//运行结果会在ajax执行完毕后,再去渲染页面
从浏览器层面解释:多线程
深刻研究浏览器内核能够发现,浏览器内核是多线程的,其中一个常驻线程叫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