惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

V
V2EX
J
Java Code Geeks
月光博客
月光博客
博客园_首页
The GitHub Blog
The GitHub Blog
Vercel News
Vercel News
B
Blog RSS Feed
博客园 - 聂微东
宝玉的分享
宝玉的分享
T
Tailwind CSS Blog
Jina AI
Jina AI
S
SegmentFault 最新的问题
B
Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
有赞技术团队
有赞技术团队
Hugging Face - Blog
Hugging Face - Blog
Google DeepMind News
Google DeepMind News
阮一峰的网络日志
阮一峰的网络日志
The Cloudflare Blog
量子位
Martin Fowler
Martin Fowler
博客园 - Franky
大猫的无限游戏
大猫的无限游戏
博客园 - 叶小钗

博客园 - 薛端阳

12小时包你学会基于ReactMix框架的ReactNativeApp开发(二)基于Css+HTML写第一个app页面 12小时包你学会基于ReactMix框架的ReactNativeApp开发(一)Hello World! ReactMix框架,让你实现一套js代码,基于ReactNative在H5,App都能完美跑起来,Write Once,Run Anywhere [分享黑科技]纯js突破localstorage存储上线,远程抓取图片,并转码base64保存本地,最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制,单页应用最新黑科技 不要听吹牛逼什么前端MVVM框架就是好,其实都是一帮没学好分层设计的搞出来的,让你彻底看清前端MVVM的本质 基于Css反射形自触发事件,优化你的延时事件 巧用正则零宽断言实现靓号检索逻辑 HTML5触屏版多线程渲染模板技术分享 (造福中国前端界)纯前端Js完美解决各种汉字urlencode,urldecode,编码解码问题,不借助任何字库,内码表,轻松一行,兼容IE8+,chrome,firefox,safari等主流浏览器 分享Css3设计---纯Css实现超酷的iphone玻璃气泡效果 中文前端UI框架Kit(十四)超酷的瀑布流特效动画 中文前端UI框架Kit(十三)使用RequireJs托管你的类库和js代码 中文前端UI框架Kit(十二)整合Mustache做kitjs模板引擎,基本写法${varname} 中文前端UI框架Kit(十一)摇头动画?让你的页面元素嗑药嗑起来?? 中文前端UI框架Kit(九)IE下实现W3C标准的range对象所有api,支持通过xpath跨浏览器实现特定选区高亮,书签标记功能 中文前端UI框架Kit(八)无插件异步文件上传组件源码解析 中文前端UI框架Kit(七)无插件异步文件上传组件,带进度,支持文件拖拽 中文前端UI框架Kit(六)javascript动画代码实现原理和一些小技巧 不知道大家知道不知道,iOS开发,web页面的链接的active属性无效,但是今天发现一个hack办法可以让Css的active有效
中文前端UI框架Kit(十)Javascript多线程工作模型的实现
薛端阳 · 2012-05-30 · via 博客园 - 薛端阳

号外:kitjs官方讨论QQ群建立了,QQ群号88093625,欢迎大家加入,讨论前端相关话题

今天给大家介绍一下kitJs的多线程类,以及原生的javascript,不借助浏览器插件以及HTML5的webWorker是如何实现多线程模式的。

Demo地址:http://xueduany.github.com/KitJs/KitJs/index.html#multithread

(一)多线程简单工作原理

所谓多线程,一般意义上理解,就是两段程序块,在操作系统的分时调配下,交错运行。

1. 每个程序块需要有自己独立的线程运行环境以及独立上下文

2. 每个程序块包含多个语句块,每个语句块是原子的,不可分割的,例如while之类的循环

3. 语句块和语句块之间是可以分割执行的,以及支持sleep,比如a=1;b=2;这样是两个语句块

4. 程序块可以调用公共资源区,比如调用window空间下其他资源

5. 支持死循环解锁,即杀死进程

(二)Kit是如何实现的

首先我们通过$kit.multithread.newThread方法创建一个新的线程

image

newThread方法接受一个匿名函数,我们可以看到在这个匿名函数体内部,包含了独立线程块自己的资源,变量a/b,以及自己的逻辑

$kit.multithread.iterate方法提供一个循环方法,类似while,接受2个参数,参数1为一个是否执行循环的标记,参数2为一个循环体。

image

我们可以看到线程1的循环体的意思就是一个死循环,不断的输出“数字a为xxx”这样的文字

在循环体内部,有一个sleep方法,是让程序块休眠指定的时间,这里是100毫秒

image

线程2的意思就是b的递减,输出字段,然后有两个判断,当b<995,kill线程1,当b<980时kill自己

最后就是线程定义完毕之后,执行方法

image

运行页面,我们就会看到线程1和线程2交织执行

image

(三)原理解析

查看kit源代码,我们可以看到

image

新建一个线程,kit会保留线程的id号以及线程对应的匿名方法

image

运行比较简单,直接执行

image

延时的实现,使用setTimeout做延时,这里有个技巧,在setTimeout里面用匿名方法纠正this指针,同时在线程的附属信息里面记录延时执行的stack顺序

image

循环的实现,最为复杂,可以看到首先保留远程执行方法的上下文,定义一个inner Fn执行第一次方法体,然后用setInterval执行后续,在setInterval内部还要加载对于sleep的延时判断,如果当前excuteStack处于sleep状态,那么继续hold,等待sleep结束再继续循环

image

杀死线程,清空所有的excuteStack里面的timeout,delete线程注册信息

(四) 高级技巧

其实对于一个js程序块来说,按照$kit提供的api改成这样已经看上不去很不像一段简单的js代码了

如果要做的更友好一些,我们可以使用正则表达式做一个词法分析器,通过fn.toString获取function的代码块文本,分析,并转换for语句,while语句成为$kit的iterate语句,直接转换sleep(xxx);为$kit的sleep方法,这样的代码会写的更友好一些,这里只为抛砖引玉,欢迎有兴趣的同学继续改成$kit的多线程类,这里也提供了一个parse方法,没有实现