zoukankan      html  css  js  c++  java
  • Javascript 多线程?

           最近在遇到一个问题:HTML页面中的页面无法刷新,只能在底层全部处理完成后才能进行页面刷新。在里面已经采用SetTimeout进行了处理,但是明显没有达到预期的效果。

          主要的原因是对SetTimeout这个函数并未清楚,对Javascript单线程也没有清晰的认识。

         浏览器中的线程介绍

          通常一个浏览器会至少存在三个线程:JS引擎线程(用于处理JS)、GUI渲染线程(用于页面渲染)、浏览器时间触发线程(用于控制交互)。

         而因为JS可以操作DOM元素,进而会影响到GUI的渲染结果,因此JS引擎线程与GUI渲染线程是互斥的。也就是说当JS引擎线程处于运行状态时,GUI渲染线程将处于冻结状态。

         JS引擎是基于事件驱动,采用的是单线程运行机制。即JS引擎会只会顺序的从任务列表中取任务,并执行。

         SetTimeout/SetInternal

        其中SetTiemout:在指定的毫秒数后调用指定的代码段;SetInternal:在指定的时间间隔内(ms)循环调用指定的代码段。这两个函数内都涉及到时间计数器,也就是都涉及到一个类似与MFC定时器。JS引擎本身就只能单线程运行,因此定时器需要由其他的外部线程来启动。所以对JS引擎而言,定时器线程可以被视为异步线程。但当定时器时间到达后,所触发的事件则必须在任务列表中排队,等候JS引擎的处理。      关于setTimeout下面有一个例子,可以帮助深入理解:

            setTimeout(function () { while (true) { } }, 1000);
            setTimeout(function () { alert('end 2'); }, 2000);
            setTimeout(function () { alert('end 1'); }, 100);
            alert('end');

          执行的结果是弹出‘end’‘end 1’,然后浏览器假死,就是不弹出‘end 2’。也就是说第一个settimeout里执行的时候是一个死循环,这个直接导致了理论上比它晚一秒执行的第二个settimeout里的函数被阻塞,这个和我们平时所理解的异步函数多线程互不干扰是不符的。

    引用的网页:

    例子:

    http://www.cnblogs.com/jeffwongishandsome/archive/2011/06/13/2080145.html

    w3c给出的SetTimeout/SetInternal的函数介绍及使用示例

    http://www.w3school.com.cn/htmldom/met_win_settimeout.asp

    http://www.w3school.com.cn/htmldom/met_win_setinterval.asp

    JS的多线程介绍(里面画了一张介绍任务队列机制的原理图,图画的清楚,解释的也很清楚)

    http://blog.csdn.net/nx8823520/article/details/7513098

  • 相关阅读:
    CodePlus#4 最短路
    最大子矩阵问题———悬线法
    Luogu P3393 逃离僵尸岛
    SCOI2011 糖果
    关于页面的跳转添加参数(比如id啥的)
    npm 常用命令
    移动开发中的一些基本的思想,和需要注意的细节技巧之处
    Mock模拟后台数据接口--再也不用等后端的API啦
    普及知识
    移动端JD首页H5页面
  • 原文地址:https://www.cnblogs.com/firstdream/p/7575935.html
Copyright © 2011-2022 走看看