最近在遇到一个问题: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

Javascript 多线程?的更多相关文章

  1. Web Worker javascript多线程编程(一)

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  2. Web Worker javascript多线程编程(二)

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  3. Javascript多线程引擎(十)---Web服务器

     Javascript多线程引擎(十)---Web服务器 经过一天的努力, 引擎可以支持web服务的功能了并且支持UTF-8的编码, 具有对HTTP参数的解析,状态码的配置, 响应报文的输出等. 提供 ...

  4. Javascript多线程引擎(九)

    Javascript多线程引擎(九)--垃圾回收 垃圾回收这个话题对Programer来说是非常老旧的话题, 从手动的malloc/free 到半自动的 引用计数 再到全自动的 mark-sweep ...

  5. Javascript多线程引擎(八)

    Javascript多线程引擎(八)    Javascript 多线程项目, 做到现在已经快3个月了(加上前期准备编译原理和必要的文档), 该项目(js-engine)已经快进入尾声了, 现在该引擎 ...

  6. Javascript多线程引擎(七)

    Javascript多线程引擎(七)--synchronized关键字 经过两天的努力, 今天synchronzied关键字终于支持了, 如下是测试代码 thread() 是一个开启新线程的API, ...

  7. Javascript多线程引擎(六)

    Javascript多线程引擎(六) 经过三个月的时间, Javascript 引擎已经完成beta版本(还不支持多线程特性, 预计下个星期就可以支持了, 现阶段还在进行测试基本JS单元功能), 并且 ...

  8. Javascript多线程引擎(五)

    Javascript多线程引擎(五)之异常处理 C语言没有提供一个像Java一样的异常处理机制, 这就带来了一个问题, 对于一个子函数中发生异常后, 需要在父函数调用子函数的位置进行Check, 如果 ...

  9. Javascript多线程引擎(四)

    Javascript多线程引擎(四)--之C语言单继承 因为使用C语言做为开发语言, 而C语言在类的支持方面几乎为零, 而Javascript语言的Object类型是一个非常明显的类支持对象,所以这里 ...

  10. Javascript多线程引擎(三)

    Javascript多线程引擎(三) 完成对ECMAScript-262 3rd规范的阅读后, 列出了如下的限制条件 1. 去除正则表达式( 语法识别先不编写) 2. 去除对Function Decl ...

随机推荐

  1. [翻译][MVC 5 + EF 6] 12[完结]:高级场景

    原文:Advanced Entity Framework 6 Scenarios for an MVC 5 Web Application 1.执行原生SQL查询: EF Code First API ...

  2. C++带参数默认值的函数

    定义形式: void fun(int a = 1 ,int b = 2 ,int c = 3 ,int d = 4){ //函数定义 cout<<"a="<< ...

  3. 防火墙,svn服务器端安装(yum),使用

    yum install subversion 查看安装位置 rpm -ql subversion 结果如下: svn在bin目录下生成了几个二进制文件 可以查看svn的使用方法 svn --help ...

  4. sql server触发器的例子

    发布:thebaby   来源:脚本学堂     [大 中 小] 本文介绍下,在sql server数据库中使用触发器的简单例子,有需要的朋友可以参考下,希望对你有一定的帮助. 原文地址:http:/ ...

  5. 【3】Bootstrap的下载和目录结构

    [1]下载 去中方官网下载http://www.bootcss.com/ 如果你是做网页练习,你可以使用CDN加速服务,免去下载等痛苦,当然你使用的时候必须有连接上网络.中方的官网也提供了很多种类的C ...

  6. bottle + vue.js 打造你的单页应用

    看到各种单页应用之后,觉得单页应用简直酷毙了,作为一个技术宅,在假期的 时候恶补了一下vue ,觉得还不错,不过想想前端的东西毕竟还是太广博了.我也不知道怎么写反正应用起来有点别扭,就是资料太少了,成 ...

  7. uCGUI窗口的创建过程分析

    一.相关结构体和变量 窗口管理结构体 /* 窗口管理结构体 共30个字节 */ struct WM_Obj { GUI_RECT Rect; //窗口尺寸(x0,y0,x1,y1) 8个字节 GUI_ ...

  8. 常用后台frame框架

    一般后台框架结构: top:左边显示logo,右边显示模块信息. left:对应模块的菜单信息. content:具体的内容. bottom:版权.时间等一些碎屑信息. Html代码: <htm ...

  9. pgrep 查询进程的工具

    pgrep 1:简介 pgrep 是通过程序的名字来查询进程的工具,一般是用来判断程序是否正在运行.在服务器的配置和管理中,这个工具常被应用,简单明了: 1:用法 #pgrep 参数选项 程序名 常用 ...

  10. [转载]MongoDB学习 (六):查询

    本文地址:http://www.cnblogs.com/egger/archive/2013/06/14/3135847.html  欢迎转载 ,请保留此链接๑•́ ₃•̀๑! 本文将介绍操作符的使用 ...