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. HDU 4006 The kth great number AVL解

    提供动态更新数据.第实时QK大量的值什么? 使用AVL统计数据结构做,比较先进的数据结构的内容. 不知道给出的数据为准值是否有反复.下面的程序是因为我能够处理重复数据出现的情况下,. 了repeat的 ...

  2. 【百度地图API】如何快速创建带有标注的地图？——快速创建地图工具+如何标注商家

    原文:[百度地图API]如何快速创建带有标注的地图?--快速创建地图工具+如何标注商家 摘要: 如果你不会程序,如果你不想写代码. 如果你想拥有一张自己的地图,如果你想在该地图上标注出你商店的位置. ...

  3. java基金会 之 HashMap统计csvWord文档

    一:知识的补充( 这个HashMap Map 和 c++的Map还是有非常大的区别,惊人的差异大的人,当然,两者的作用是相同的,但函数名出一个非常大的.即使iterator的差是非常大的 ) (1)H ...

  4. jquery_mobile.js+html5+css3打造手机平板等各种效果

    http://www.w3school.com.cn/jquerymobile/jquerymobile_events_orientation.asp

  5. 【软测试】（两）计算机组成原理-cpu

    cpu,中文名称中央处理单元,central processing unit.系统的核心,用于数据的处理,算术以及逻辑运算和控制程序的运行. 组成 运算器 从字面上就能够理解到.运算器主要用来对于逻辑 ...

  6. MonkeyImage API 实践全记录

    1.    背景 鉴于网上使用MonkeyImage的实例除了方法sameAs外很难找到,所以本人把实践各个API的过程记录下来然自己有更感性的认识,也为往后的工作打下更好的基础.同时也和上一篇文章& ...

  7. SQL点滴15—在SQL Server 2008中调用C#程序

    原文:SQL点滴15-在SQL Server 2008中调用C#程序 T-SQL的在执行普通的查询的时候是很高效的,但是在执行循环,判断这样的语句的时候效率就不那么的高了.这时可以借助CLR了,我们可 ...

  8. bundle install 出现 &#39;gem install mysql2 -v &#39;0.3.15&#39; succeeds before bunding &#39;

    bundle install 出现  'gem install mysql2 -v '0.3.15' succeeds before bunding ' 解决:sudo apt-get install ...

  9. Asp.net Identity 系列之 怎样修改Microsoft.AspNet.Identity.EntityFramework.IdentityUser 的 Id 字段的数据类型

    这篇博客我们来学习如何将AspNetUsers 表的Id 字段 的类型由nvarchar(128) 改为Int 并且子增长 1.为什么要修改 如果你运行过 Asp.net mvc 示例项目,你好会发现 ...

  10. 24个JavaScript初学者最佳实践

    这里面说到的一个就是使用循环新建一个字符串时,用到了join(),这个比较高效,常常会随着push(); 绑定某个动作时,可以把要执行的绑定内容定义为一个函数,然后再执行.这样做的好处有很多.第一是可 ...