最近在遇到一个问题: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. OpenJudg / Poj 1363 Rails

    1.链接: http://poj.org/problem?id=1363 http://bailian.openjudge.cn/practice/1363 2.题目: Rails Time Limi ...

  2. Redis与Memcached的比较

    网络IO模型 Memcached 是多线程,非阻塞IO复用的网络模型,分为监听主线程和worker子线程,监听线程监听网络连接,接受请求后,将连接描述字pipe 传递给worker线程,进行读写IO, ...

  3. 队列(顺序存储)C++模板实现

    队列:一端进行插入,另一端进行删除的线性结构,具有先进先出性.利用数组来实现队列将面临"假溢出"的情况,如下图所示: front:永远指向队首元素,队首在本文中是允许删除元素的一端 ...

  4. SQL索引问题

    很多文章都提到使用IN,OR会破坏索引,造成全表扫描,但实际测试却不是这样. ) 或者 ,) 以上SQL文,第一组(=,IN),第二组(=,OR,IN),每一组的两个SQL文都使用相同的执行计划,执行 ...

  5. 关于Active控件的电子签名 转

    关于Active控件的电子签名 两种方案:一是自己制作证书,客户端安装证书后就可以识别该控件:二就是买官方的喽,在国内找verisign的代理,负责各种电子签名,任何一台浏览器都可以识别该证书.该公司 ...

  6. 关于H5 storage 的一些注意事项以及用法

    在我们使用H5 storage之前,先了解一下storage的介绍吧: Storage模块管理应用本地数据存储,用于应用数据的保存和读取,应用本地数据localStorage,sessionStora ...

  7. android通过泛型获取控件或视图

    @SuppressWarnings("unchecked") public <T extends Fragment> T getFragment(int id) { T ...

  8. 创建一个cocos2d-x工程添加一个自定义Scene并显示

    #include "cocos2d.h" class RunScene :public cocos2d::CCLayer { public: virtual bool init() ...

  9. php学习日志(1)-php介绍

    在学习Php之前,我们要搞懂php是什么.英文全称php: php hypertext preprocessor,即php超文本预处理器.php脚本在服务器上执行,故它是一种服务器编程语言. php文 ...

  10. linux点滴:rsync

    rsync(remote sync)是一款远程同步工具,可以实现全量备份.增量备份.本地备份.删除,核心功能是远程数据备份. 工作原理 rsync核心算法 1.分块checksum算法 首先,把文件平 ...