Javascript：再论Javascript的单线程机制 之 DOM渲染时机
Javascript：再论Javascript的单线程机制 之 DOM渲染时机
背景
Javascript是单线程事件驱动的，所有能看到的Javascript代码都是在一个线程执行，定时器回调和AJAX回调会在适当的时刻插入队列等待Javascript线程调度执行，今天想测试一下DOM渲染的线程与时机，具体的问题是：
修改DOM会立即显示在UI中吗？
一个小测试
测试代码
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 <script src="Scripts/jquery-2.0.3.js"></script>
7 </head>
8 <body>
9 <p>DOM的修改不会立马导致渲染，而是会内部触发一个事件（可能叫paint），这个事件的处理程序会被插入到Javascript的调度队列中等待调度执行。</p>
10 <div id="Test1" style="height: 100px; margin: 5px; background-color: yellow;"></div>
11 </body>
12 </html>
13 <script type="text/javascript">
14
15 function sleep(millisecond) {
16 var start = new Date().getTime();
17
18 do {
19 var end = new Date().getTime();
20 } while (end - start <= millisecond);
21 }
22
23 setTimeout(function () {
24 console.log('start...');
25
26 $("#Test1").css({
27 backgroundColor: 'red'
28 });
29
30 sleep(3000);
31
32 console.log('...end');
33 }, 2000);
34
35 </script>
测试结果
DOM的修改不会立马导致渲染，而是会内部触发一个事件（可能叫paint），这个事件的处理程序会被插入到Javascript的调度队列中等待调度执行。
一个小例子
需求
在DOM中显示1至20的斐波那契数组。
实现
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 <script src="Scripts/jquery-2.0.3.js"></script>
7 </head>
8 <body>
9 <div id="Test2" style="height: 100px; margin: 5px; background-color: blue;"></div>
10 </body>
11 </html>
12
13 <script type="text/javascript">
14 setTimeout(function () {
15 var fibonacci = function (n, callback) {
16 if (n == 1 | n == 0) {
17 callback(n);
18 }
19
20 setTimeout(function () {
21 fibonacci(n - 1, function (n_1) {
22 fibonacci(n - 2, function (n_2) {
23 callback(n_1 + n_2);
24 });
25 });
26 }, 0);
27 }
28
29 for (var i = 1; i <= 20; i++) {
30 fibonacci(i, function (result) {
31 $("#Test2").append(result + '<br/>');
32 });
33 }
34 }, 4000);
35 </script>
分析
如果采用传统的递归方式，界面至少卡死N分钟，以这种形式递归，保证界面不至于卡死。
备注
时刻铭记：单线程+事件驱动。
Javascript：再论Javascript的单线程机制 之 DOM渲染时机的更多相关文章
- 我理解的javascript单线程机制
废话不多说,我们先来看几个例子: 1. setTimeout( console.log(2); result: 2 1 2. console.log(100 setTimeout( cons ...
- 我想这次我真的理解了 JavaScript 的单线程机制
今天面试的时候被问到一个问题,是关于 JS 异步的.当时我脑海中闪过了一个单线程的概念,但却没有把真正的原理阐述清楚.所以回来特意重新回顾了前面单线程和异步相关的一些知识点. 虽然之前学习的时候也接触 ...
- Javascript引擎的单线程机制和setTimeout执行原理阐述
工作中使用setTimeout解决了一个问题,于是对setTimeout的相关资料整理了下,以及对js引擎执行的原理一并整理了下,希望能给码农们一些帮助.若发现有错的地方大家及时指出,共同学习进步. ...
- （转载）JavaScript中的原型和对象机制
(转载)http://www.cnblogs.com/FlyingCat/archive/2009/09/21/1570656.html 1 对象相关的一些语言特性 1.1 一切皆为对象JavaScr ...
- Javascript中双等号(==)隐性转换机制 JS里charCodeAt()和fromCharCode()方法拓展应用：加密与解密
Javascript中双等号(==)隐性转换机制 在Javascript中判断相等关系有双等号(==)和三等号(===)两种.其中双等号(==)是值相等,而三等号(===)是严格相等(值及类型是否 ...
- 再谈javascript面向对象编程
前言:虽有陈皓<Javascript 面向对象编程>珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力.另外这篇文章是一篇入门文章,我也是才开始 ...
- 再谈JavaScript的数据类型问题
JavaScript的数据类型问题已经讨论过很多次了,但许多人还有许多书仍然沿用着错误的.混乱的一些观点,所以就再细讲一回. 提及这个讨论的原因在于argb同学在我的MSN博客上的一段回复,又更早的起 ...
- （五）我的JavaScript系列：JavaScript的糟粕
泪眼问花花不语,乱红飞过秋千去. JavaScript的糟粕 JavaScript语言是一门集精华与糟粕于一体的语言.在JavaScript: the good parts中,便集中讨论了关于精华与糟 ...
- JS三座大山再学习 ---- 异步和单线程
本文已发布在西瓜君的个人博客,原文传送门 前言 写这一篇的时候,西瓜君查阅了很多资料和文章,但是相当多的文章写的都很简单,甚至互相之间有矛盾,这让我很困扰:同时也让我坚定了要写出一篇好的关于JS异步. ...
随机推荐
- 熊猫猪新系统測试之三：iOS 8.0.2
本来本猫要等到8.1版本号出来后再做測试的,结果等来等去就是迟迟不推送更新呀!说好10月20号的iOS 8.1呢?为了一鼓作气写完,就先不等了.先拿手头的iOS 8.0.2系统做一下測试吧! 8.x系 ...
- FindBugs:Compiler output path for module can not be null. check your module/project settings问题原因
这可能是很多人在使用Android studio 该插件会发现此错误信息:Compiler output path for module can not be null. check your mod ...
- TLD跟踪算法优化（一）并行化
才学疏浅,仅仅言片语,仅仅求志同道的朋友一起交流研究. 并行化不算是算法的改进,仅仅是追求执行的实时性. 简要列举一个样例: TLD算法的C++版本号源代码里: LKTracker::trackf2f ...
- springmvc实现long-pulling技术
背景介绍: 项目中有一个通讯模块,本来是用websocket全双工技术实现的,但IE10下面不支持websocket,而国内的360.2345浏 览器封装的所有是IE10下面的内核,考虑到站点在国内的 ...
- mono for android 学习记录
C#开发Android应用实战(全 扫描 中文版) 学习记录: 拖完控件后,不要急着按F5,需要重新生成,才能自动修改 Resource.Designer.cs 文件 1. Activity 是基于a ...
- JavaScript随记汇总
1.<script>标签嵌套,浏览器无法正常解析的问题: 百度知道回答 <script>FTAPI_slotid = 1007894;FTAPI_sync = true< ...
- UIButton UIImage 用法分析
一.UIButton和UIImageView的区别 1.显示图片 1> UIImageView只能显示一种图片(图片默认会填充整个UIImageView) image\setImage: 2&g ...
- linux 在系统启动过程
从学习<鸟哥linux私人厨房> 用于在计算机系统启动,计算机硬件和软件由(它包含的操作系统软件)包括.对于操作系统在同一台计算机硬件方面的表现,该系统配备有硬件是公用,不同的系统是 的操 ...
- 苹果浏览器Safari对JS函数库中newDate()函数中的参数的解析中不支持形如“2020-01-01”形式
苹果浏览器safari对new Date('1937-01-01')不支持,用.replace(/-/g, "/")函数替换掉中划线即可 如果不做处理,会报错:invalid da ...
- C语言连接Oracle
原文:C语言连接Oracle 最近在搞C语言连接Oracle.DB2数据库,现把C连接Oracle的文章总结下: 用C语言连接ORACLE数据库.有两个思路和目的 思路一)本地环境:UBUNTU 7. ...