精华内容
下载资源
问答
  • js阻塞线程方法

    千次阅读 2020-08-07 11:47:02
    var timeOutFunc = () => { return new Promise((a, b) => { setTimeout(async () => { console.log(2) await timeOutFunc... } await timeOutFunc() console.log(3) 执行上面的代码会阻塞住,无限打印2,不会打印1和3
    var timeOutFunc = () => {
        return new Promise((a, b) => {
            setTimeout(async () => {
                console.log(2)
                await timeOutFunc()
                console.log(1)
            }, 1000);
        });
    }
    await timeOutFunc()
    console.log(3)
    

    执行上面的代码会阻塞住,无限打印2,不会打印1和3

    展开全文
  • 两个概念:1,js是同步加载的html2,...//程序$.ajax({...})//运行结果会在ajax执行完毕后,再去渲染页面从浏览器层面解释:多线程 深刻研究浏览器内核能够发现,浏览器内核是多线程的,其中一个常驻线程叫java...

    两个概念: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

    展开全文
  • 两个概念:1,js是同步加载的 2,浏览器执行js程序,高于页面渲染 于是就出现了js更新dom,页面不能及时渲染的问题 代码例子: document.body.html('为什么不先渲染我'); //程序 $.ajax({...

    参考:https://blog.csdn.net/qq_39542027/article/details/78893873

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

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

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

    代码例子:

    document.body.html('为什么不先渲染我');
    
    //程序
    $.ajax({
       url: '',
       async: false
    })
    
    
    //运行结果会在ajax执行完毕后,再去渲染页面

    从浏览器层面解释:

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

     

    解决办法:

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

    2,setTimeout

    展开全文
  • 遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下。 事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的原则,我封装了一个名为getData的函数,它接收不同参数,只负责获取数据,...

    遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下。

    事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的原则,我封装了一个名为getData的函数,它接收不同参数,只负责获取数据,然后把数据return。基本的逻辑剥离出来是这样的:

    function getData1() {
        var result;
        $.ajax({
            url: "p.php",
            async: false,
            success: function(data) {
                result = data;
            }
        });

        return result;
    }

        这里的ajax不能用异步的,否则函数返回时,result还未赋值,会出错。所以我加了async:false。看起来好像没什么问题。我调用这个函数可以正常的得到数据。
    $(".btn1").click(function() {
        var data = getData1();
        alert(data);
    });

         接下来,要加另外一个功能,由于ajax请求有一定的耗时,所以我需要在发出请求前页面有个loading效果,即显示一张“正在加载”的gif图片,想必大家也都见过。所以我的处理函数就变成了这样: 

    $(".btn1").click(function() {
        $(".loadingicon").show();
        var data = getData1();
        $(".loadingicon").hide();
        alert(data);
    });

        请求之前显示loading图片,请求完成后把它隐藏。看起来也没什么问题。为了看清效果,我的p.php代码sleep了3秒,如下:

    <?php
    sleep(3);
    echo ("aaaaaa");
    ?>
        但是我运行的时候问题出现了,我点击按钮并未像预想的那样出现这个loading图片,页面什么反应也没有。排除良久找到了原因,就在async:false这里。
        浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题,但当设置为同步请求时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来。即使我的DOM操作语句是在发起请求的前一句,这个同步请求也会“迅速”将UI线程阻塞,不给它执行的时间。这就是代码失效的原因。

    setTimeout解决阻塞问题

    既然明白了问题在哪里,我们就来针对性想办法。为了不让同步ajax请求阻塞线程,我想到了setTimeout,把请求的代码放到sestTimeout中,让浏览器重启一个线程来操作,不就解决问题了吗?于是乎,我的代码就变成了这样:

    $(".btn2").click(function() {
        $(".loadingicon").show();
        setTimeout(function() {
            $.ajax({
                url: "p.php",
                async: false,
                success: function(data) {
                    $(".loadingicon").hide();
                    alert(data);
                }
            });
        }, 0);
    });

    setTimeout的第二个参数设为0,浏览器会在一个已设的最小时间后执行。不管三七二十一先运行起来看看。

    结果loading图片显示出来了,但是!!!图片怎么不动呢,我明明是一张动态gif图。这个时候我很快就想到了,虽然同步请求延迟执行了,但是它执行期间还是会把UI线程给阻塞。这个阻塞相当牛逼,连gif图片都不动了,看起来像一张静态图片一样。

    结论很明显,setTimeout治标不治本,相当于把同步请求“稍稍”异步了一下,接下来还是会进入同步的噩梦,阻塞线程。方案失败。

    是时候用Deferred了

    jQuery在1.5版本之后,引入了Deferred对象,提供的很方便的广义异步机制。详情可参看阮一峰老师的这篇文章http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

    于是我用Deferred对象改写了代码,如下:

    function getData3() {

        var defer = $.Deferred();
        $.ajax({
            url: "p.php",
            //async : false,
            success: function(data) {
                defer.resolve(data)
            }
        });
        return defer.promise();
    }

    $(".btn3").click(function() {
        $(".loadingicon").show();
        $.when(getData3()).done(function(data) {
            $(".loadingicon").hide();
            alert(data);
        });
    });

         可以看到我在ajax请求中去掉了async:false,也就是说,这个请求又是异步的了。另外请注意success函数中的这一 句:defer.resolve(data),Deferred对象的resolve方法可传入一个参数,任意类型。这个参数可以在done方法中拿到, 所以我们异步请求来的数据就可以以这样的方式来返回了。

    至此,问题得到了解决。Deferred对象如此强大且方便,我们可以好好利用它。

     

         最后说明:本篇文章摘自其他站点,仅用来作为一个记录(自己的整理能力略弱:)) 

      最后推荐一篇关于这方面的文章:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

    展开全文
  • Weblogic线程阻塞解决方案

    万次阅读 2015-01-07 15:06:52
    Weblogic线程阻塞解决方案 今天生产环境下的系统出现以下的错误提示: ernel.Default (self-tuning)' has been busy for "613" seconds working on the request "weblogic.servlet.internal.ServletR ...
  • jQuery同步Ajax带来的UI线程阻塞问题及解决办法
  • setTimeout解决GUI渲染线程阻塞问题

    千次阅读 2017-08-27 19:04:22
    我还记得我第一次用这个函数的时候,我天真的以为它就是js实现多线程的工具.当时用它实现了一个坦克大战的小游戏,玩儿不亦乐乎.可是随着在前端这条路上越走越远,对它理解开始产生了变化.它似乎开始蒙上了面纱,时常有...
  • 一个页面,从被请求访问,到用户可以看到页面、操作页面,到最后页面完全...浏览器线程阻塞 虽然大家耳熟能详的一句话是: JavaScript是单线程的。 但是: 浏览器当然不是单线程的。 浏览器的多线程中,有的线程负...
  • 前几日写了一篇文章,介绍了js阻塞页面加载的问题。当时是通过例子来验证的。今天,我介绍一下浏览器内核,从原理上介绍一下js阻塞页面加载的原因。...1.javascript引擎是基于事件驱动单线程执行的,JS引...
  • NodeJS WebScoket异常问题(由于线程阻塞)最近发现一个 WebSocket 的异常问题,莫名其妙的网络断掉了, 最后发现居然是处理文件导致主线程阻塞时间太长,WebSocket 莫名其妙的断掉了。 最后把文件处理模块改成异步...
  • waitFor()一直等待,线程阻塞问题

    万次阅读 2017-04-05 16:31:52
    waitFor()一直等待,线程阻塞问题 —转载–Java中使用Runtime和Process类运行外部程序使用Runtime.getRuntime().exec()方法可以在java程序里运行外部程序。 Java代码 收藏代码1. exec(String command) 2. exec...
  • 总所周知,JavaScript 是以单线程的方式运行的。说到线程就自然联想到进程。那它们有什么联系呢? 进程和线程都是操作系统的概念。进程是应用程序的执行实例,每一个进程都是由私有的虚拟地址空间、代码、数据和...
  • Javascript】解决Ajax轮询造成的线程阻塞问题(过渡方案)
  • 一、需求 在调ajax接口的时候因为有时间延迟,想要做一个loading加载的效果,等数据返回时再把loading的效果去掉。 所以我在调ajax的代码块前面加了显示loading效果...浏览器的渲染(UI)线程js线程是互斥的,在执...
  • js线程方法 webwork

    2020-12-26 21:21:37
    JS为我们提供了一个Worker的类,它的作用就是... //postMessage方法把在新线程执行的结果发送到浏览器的js引擎线程里 worker.onmessage = function(){ //获取在新线程中执行的js文件发送的数据 用event.data接收数据
  • 但是发现当子线程中通过Control.Invoke()方式操作Form控件,同时UI主线程在 Thread.Join()等待子线程执行完毕,这种方式实际上会导致UI主线程及子线程都处于阻塞等待状态,程序假死无法继续执行。 通过网上找资料...
  • 一直以为如果js写在head里就需要用window.onload=function(){},如果写在body结尾前面,则不用写,但是为什么下面的代码不写的话,最开始载入页面img的高度全部为0?(就是看不见图)执行js需要等img加载好吗,这...
  • 假如当前 JavaScript线程正在执行一段很耗时的代码,此时发生了一次鼠标点击,那么事件处理程序就被阻塞,用户也无法立即看到反馈,事件处理程序会被放入任务队列,直到前面的代码结束以后才会开始执行。如果代码中...
  • 实际开发中,我们享受着Ajax异步请求带来的便利,使我们开发更加...由于开发JavaScript是单线程的,当我们使用Ajax同步请求时,线程将停在等待请求response的地方,直到收到response,线程才继续执行。这导致了程序...
  • 笔者初接触js,目前还在啃javascript高级程序设计,啃完ECMAScripts和一部分DOM,有个问题很困惑,求助各位大神 js在浏览器的执行是单线程的,我这样理解应该是没问题的吧?那么问题来了,假设我要实现一个功能,每...
  • 阻塞线程

    2016-10-14 21:36:42
    阻塞与线程阻塞(block)线程在执行中如果遇到磁盘读写或者网络通信,也就是I/O操作,通常会耗费较多时间,这时候操作系统就会剥夺掉这个线程的CPU控制权,使其暂停执行,同时将资源让给其他工作的线程,这种调度...
  • 出现原因是:JavaScript是单线程。 二、改善方法 1.简单但不治本的方法 将script加载放在body的最后面,这样即使脚本之间阻塞了也不影响其他资源的加载,页面已经呈现出来,不至于显得很慢。将多个相关的JavaScript...
  • JavaScript线程

    2016-07-17 21:58:24
    JavaScript是单线程的,因此在单个脚本运行过程中,会阻塞其它代码的执行
  • Ralph:~ allenlee$ jps 1144 Launcher 1145 Test01 284 1166 Jps Ralph:~ allenlee$ jstack 1145
  • javascript线程

    2017-03-08 10:00:46
    javaScript线程学习笔记 之前看javaScript的执行顺序,就想着了解一下js的线程问题。 知识要点 单线程:指的是一次只能执行一个任务,如果有多个任务,要排队执行 同步:后一个任务等待前一个任务结束在执行,执行...
  •  当线程执行了sleep(long millis)方法,将转到阻塞状态,参数millis指定睡眠时间;当线程执行了yield()方法,将转到就绪状态。  sleep()方法声明抛出InterruptedException异常,而yield()方法没有声明抛出任何...
  • JS线程

    2017-03-21 15:51:20
    最近发现一个问题,setTimeout设置为0时,并不是瞬时0秒后触发里面的函数,从而牵引出关于JS线程的一些问题。从多方资料了解了很多,现在做个总结加深自己的理解,也为一些不知道的朋友做个讲解。 我们从js线程讲...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,769
精华内容 19,907
关键字:

js线程阻塞的方法