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异步. ...
随机推荐
- C语言qsort函数算法性能测试
对于该算法的复杂性.一个直接的方法是测量的一定量的算法级数据的执行时间的感知. 随着C语言提供qsort对于示例.随着100一万次的数据,以测试其计算量.感知O(nlg(n))时间成本: C码如下面: ...
- ASP.NET MVC中加载WebForms用户控件(.ascx)
原文:ASP.NET MVC中加载WebForms用户控件(.ascx) 问题背景 博客园博客中的日历用的是ASP.NET WebForms的日历控件(System.Web.UI.WebControl ...
- 怎样下载并编译Android4.0内核源代码goldfish(图文)
关于怎样下载Android4.0源代码,请查看我的博客内还有一篇文章(相同是图文教程): http://blog.csdn.net/flydream0/article/details/7036156 ...
- Floodlight 在 ChannelPipeline 图
我们知道,在Netty架构,一个ServerBootstrap用于生成server端的Channel的时候都须要提供一个ChannelPipelineFactory类型的參数,用于服务于建立连接的Ch ...
- JQuery slideToggle 演示简单的 Slide Panel 效果。
------------------html--------------------------------- <html xmlns="http://www.w3.org/1999/ ...
- 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例
百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修 ...
- HDU 2079-课程时间(生成函数)
课程时间(标题已被修改,注意阅读题) Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- 告别alert,拥抱console
记得学习javascript的第一个demo就是alert("Hello World");可是学习接触javascript这么长时间了还是在alert,因为javascript调 ...
- javascript面向对象2
原文:javascript面向对象2 首先我们先创建一个对象 var user = Object(); user.name = "张三"; user.age = 20; user. ...
- Hypeiron Planning/Essbase修改规划类型名称
1.修改planning关系库 1.1--修改Plan_type,例如将type_name “Plan1”修改为”Plan1ts”,提交 SELECT * FROM hsp_plan_type FOR ...