如何用JS阻断GUI渲染进程，阻止js函数的运行

为什么js的加载会阻塞页面渲染

1、主要原因是因为：浏览器的渲染(UI)线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题，但当设置为同步请求时，其他的动作（ajax函数后面的代码，还有渲染线程）都会停止下来。

2、JS过多而且放在页面的前面的话，会影响页面渲染造成用户体验很差，用户会感觉东西迟迟没有出来。

3、dom树构建和render树构建renderlayer树构建是同时进行的，第3点说到遇到script就加载，加载完后会马上执行，所以dom树后续节点并不能构建，这里就会发生运行阻塞了。

4、无阻塞加载js 浏览器加载静态资源和js的方式都是线性加载，所以一般情况可以将js放到前，防止UI线程的阻塞。而某些时候我们既希望js在整个网页的头部就加载，又担心js阻塞导致网站加载缓慢，就可以用到无阻塞加载js技术。

5、因为请求的js迟迟无法加载（可能由于谷歌被墙等原因），于是阻塞了后面的代码的执行，页面得不到渲染。

相关问答

Q1: js在运行的时候会阻塞渲染吗

我觉得会。我的一些理解：页面呈现过程是：取回html代码，从上往下进行解析。解析我觉得就是构建dom树和render树以及renderlayer树，前面是html各节点的结构树，后两棵用于渲染页面。

不会。link样式外部引入，会阻塞页面渲染，但是不会阻塞DOM解析JS：script外部引入标签，既会阻塞页面渲染，也会阻塞DOM解析。

我们恍然大悟，改变js的加载位置只能改变页面的渲染，然而对于js的加载并没有什么卵用，js还是会阻塞。

Q2: 如何监听angularjs列表数据是否渲染完毕

1、对于angularjs处理这类问题，最好的方式就是指令 directive。

2、分析：on-finish-render-filters 传入一个回调函数Complete ，渲染时每次会判断当前渲染记录是否为最后一条，若为最后一条，则执行Complete 函数。

3、使用Jquery结合AngulraJs使用的时候，在render完table后，执行一段js脚本，把JqTable应用到该table上，能够捕获到AngularJs渲染完成页面的事件。

4、某个数据，监测这个数据的值是否发生变化；一条angular表达式，监测表达式的结果是否发生变化；函数()，监测函数的返回值是否发生变化；注意：以上都是字符串格式，并且都是在 $scope 作用域下执行的。

如何用JS阻断GUI渲染进程的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于阻止js函数的运行、如何用JS阻断GUI渲染进程的信息别忘了在本站进行查找喔。