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 - JNI加入标准C++文件

    JNI加入标准C++文件 本文地址: http://blog.csdn.net/caroline_wendy 其余參考: http://blog.csdn.net/caroline_wendy/art ...

  2. http层负载均衡之haproxy

    http层负载均衡之haproxy实践篇(一) 方案 上篇文章讲到了负载均衡的相关理论知识,这篇文章我打算讲讲实践方法以及实践中遇到的问题 方案:haproxy http层负载均衡 安装一个hapro ...

  3. [CLR via C#]1.2 将托管模块合并成程序集

    原文:[CLR via C#]1.2 将托管模块合并成程序集 1.CLR是不和托管模块一起工作的,CLR是和程序集一起工作的. 2. 程序集是一个或多个托管模块/资源文件的逻辑性分组.   3. 程序 ...

  4. Spark集群搭建简配+它到底有多快？【单挑纯C/CPP/HADOOP】

    最近耳闻Spark风生水起,这两天利用休息时间研究了一下,果然还是给人不少惊喜.可惜,笔者不善JAVA,只有PYTHON和SCALA接口.花了不少时间从零开始认识PYTHON和SCALA,不少时间答了 ...

  5. NET 平台下的插件化开发内核

    .NET 平台下的插件化开发内核(Rabbit Kernel)   每个程序猿都有一个框架梦,曾经在2013年8月15日写过一篇“Koala Framework是什么?我为什么要写这个框架?”的文章, ...

  6. SURF分析算法

    SURF分析算法 一个.整体形象     这个概念是积分图像Viola和Jones建议.随机位积分图像(i.j)的值原始图象的左上角随机点(i,j)级配相应的重点领域值的总和,其数学公式如图1所看到的 ...

  7. 表单元素的外观改变（webkit and IE10）

    1.禁止表单默认外观: input,select{ -webkit-appearance:none; appearance:none; }2.伪元素改变ie10表单元素默认外观 select::-ms ...

  8. WCF中队列服务详解

    WCF中队列服务详解 一.引言 在前面的WCF服务中,它都要求服务与客户端两端都必须启动并且运行,从而实现彼此间的交互.然而,还有相当多的情况希望一个面向服务的应用中拥有离线交互的能力.WCF通过服务 ...

  9. LeetCode之Reverse Words in a String

    1.(原文)问题描述 Given an input string, reverse the string word by word. For example, Given s = "the ...

  10. 【MS SQL】数据库维护计划之数据库备份(一)

    原文:[MS SQL]数据库维护计划之数据库备份(一) 在做数据库备份之前,一定会听到:完整备份.差异备份.增量备份.事务日志备份...等词:下面配图进行说明. 完整备份:完整数据库备份包含数据库中的 ...