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. Android结构分析Android智能指针（两）

    笔者:刘蒿羽 博客:http://blog.csdn.net/liuhaoyutz Android版本号:4.4.2 在上一篇文章中,我们分析了Android智能指针中的强指针sp,本文我们来分析弱指 ...

  2. [CLR via C#]5.3 值类型的装箱和拆箱

    原文:[CLR via C#]5.3 值类型的装箱和拆箱 在CLR中为了将一个值类型转换成一个引用类型,要使用一个名为装箱的机制. 下面总结了对值类型的一个实例进行装箱操作时内部发生的事: 1)在托管 ...

  3. Oracle Data Provider for .NET now on NuGet

    Oracle Data Provider for .NET now on NuGet 时间 2015-03-02 22:30:00  Oracle Bloggers原文  http://cshay.b ...

  4. DOS批处理的字符串功能

    原文:DOS批处理的字符串功能 DOS批处理的字符串功能 批处理有着具有非常强大的字符串处理能力,其功能绝不低于C语言里面的字符串函数集.批处理中可实现的字符串处理功能有:截取字符串内容.替换字符串特 ...

  5. Appium0.18.x迁移到Appium1.x须知事项

    英文原版:https://github.com/appium/appium/blob/master/docs/en/advanced-concepts/migrating-to-1-0.md Migr ...

  6. intellij idea 13&14 插件推荐及快速上手建议 （已更新！）

    原文:intellij idea 13&14 插件推荐及快速上手建议 (已更新!) 早些年 在外企的时候,公司用的是intellij idea ,当时也是从eclipse.MyEclipse转 ...

  7. java查找反复类/jar包/普通文件

    开发web应用时,有时更新了类却没有生效,事实上是由于jboss/tomcat中其它公布包下有同名类(包含全路径都同样). 于是萌发了做个程序来检查指定文件夹是否存在反复类(通过asm从类文件里取类的 ...

  8. ASP.NET WebForm路由模拟

    一.ASP.NET MVC 路由(一)--- ASP.NET WebForm路由模拟 2014-11-08 11:49 by 郝喜路, 232 阅读, 0 评论, 收藏, 编辑 ASP.NET Web ...

  9. js预解析问题总结

    //示例 1 alert(a) // undefind. alert(fn) // function 整个函数块. var a = 1; function fn(){ return falss; }; ...

  10. Scala从零开始：使用Intellij IDEA写hello world

    Scala从零开始:使用Intellij IDEA写hello world 分类: Scala |2014-05-23 00:39 |860人阅读   引言 在之前的文章中,我们介绍了如何使用Scal ...