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渲染时机的更多相关文章

  1. 我理解的javascript单线程机制

    废话不多说,我们先来看几个例子: 1. setTimeout( console.log(2); result:  2 1   2.   console.log(100 setTimeout( cons ...

  2. 我想这次我真的理解了 JavaScript 的单线程机制

    今天面试的时候被问到一个问题,是关于 JS 异步的.当时我脑海中闪过了一个单线程的概念,但却没有把真正的原理阐述清楚.所以回来特意重新回顾了前面单线程和异步相关的一些知识点. 虽然之前学习的时候也接触 ...

  3. Javascript引擎的单线程机制和setTimeout执行原理阐述

    工作中使用setTimeout解决了一个问题,于是对setTimeout的相关资料整理了下,以及对js引擎执行的原理一并整理了下,希望能给码农们一些帮助.若发现有错的地方大家及时指出,共同学习进步. ...

  4. （转载）JavaScript中的原型和对象机制

    (转载)http://www.cnblogs.com/FlyingCat/archive/2009/09/21/1570656.html 1 对象相关的一些语言特性 1.1 一切皆为对象JavaScr ...

  5. Javascript中双等号(==)隐性转换机制 JS里charCodeAt()和fromCharCode()方法拓展应用：加密与解密

    Javascript中双等号(==)隐性转换机制   在Javascript中判断相等关系有双等号(==)和三等号(===)两种.其中双等号(==)是值相等,而三等号(===)是严格相等(值及类型是否 ...

  6. 再谈javascript面向对象编程

    前言:虽有陈皓<Javascript 面向对象编程>珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力.另外这篇文章是一篇入门文章,我也是才开始 ...

  7. 再谈JavaScript的数据类型问题

    JavaScript的数据类型问题已经讨论过很多次了,但许多人还有许多书仍然沿用着错误的.混乱的一些观点,所以就再细讲一回. 提及这个讨论的原因在于argb同学在我的MSN博客上的一段回复,又更早的起 ...

  8. （五）我的JavaScript系列：JavaScript的糟粕

    泪眼问花花不语,乱红飞过秋千去. JavaScript的糟粕 JavaScript语言是一门集精华与糟粕于一体的语言.在JavaScript: the good parts中,便集中讨论了关于精华与糟 ...

  9. JS三座大山再学习 ---- 异步和单线程

    本文已发布在西瓜君的个人博客,原文传送门 前言 写这一篇的时候,西瓜君查阅了很多资料和文章,但是相当多的文章写的都很简单,甚至互相之间有矛盾,这让我很困扰:同时也让我坚定了要写出一篇好的关于JS异步. ...

随机推荐

  1. 关于SelectedItems的问题

    在做俄罗斯方块的时候写了以下一段代码: private void listView1_SelectedIndexChanged(object sender, EventArgs e)        { ...

  2. SQL代理执行EXE可执行程序

    原文:SQL代理执行EXE可执行程序  1.如果没有启用xp_cmdshell安全配置是不可以使用的-- 启用xp_cmdshellEXEC sp_configure 'xp_cmdshell', 1 ...

  3. linq 分组求和

    static void Main()         {             DataTable dt = new DataTable();             dt.Columns.Add( ...

  4. Milo的游戏开发的一些链接资料

    http://www.cnblogs.com/miloyip/default.aspx?page=1 http://www.cnblogs.com/miloyip/archive/2010/06/14 ...

  5. navicat连接oracle一个错误：ORA-12737 Instant Client Light:unsupported server character set ZHS16GBK

    今天使用Navicat连接Oracle数据库.它报告了以下错误:"ORA-12737 Instant Client Light:unsupported server character se ...

  6. thinkphp 支付宝错误 Class 'Think' not found

    Class 'Think' not found D:\www\DonatePlatform\ThinkPHP\Extend\Vendor\alipay\lib\alipay_submit.class. ...

  7. SQL Server 2012的附件失败，与硬链接的问题

    1.我在系统上做了硬链接,也就是把C盘的某个目录,映射为D盘. 2.把数据库文件mdf和ldf放入D盘.结果,SQL Server的企业管理器,无法从D盘里加载mdf或ldf文件,并且在目录下无法显示 ...

  8. PHP 9: 表达式

    原文:PHP 9: 表达式 本章介绍PHP的表达式.PHP的表达式其实和其他语言没有什么区别.普通的赋值是表达式,函数也是表达式,通过函数赋值也是.三元条件运算符也是,即: $first ? $sec ...

  9. JavaScript中对数组的操作

    原文:JavaScript中对数组的操作 一:数组的使用 1.定义:JavaScript中对数组的定义有两种形式.如: .var arr = [12,3,5,8]; .var arr = new Ar ...

  10. 安装SQL Server 2005 - 初学者系列 - 学习者系列文章

    初学者阶段,建议从数据库为基础入手进行学习. 下面介绍微软的SQL Server 2005数据库的安装. 首先,从下列地址获取SQL Server 2005的安装程序. ed2k://|file|cs ...