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异步. ...
随机推荐
- Exception dispatching input event. use XlistView
今天上午解决Bug,一个上午的时间: log: 11-01 14:49:14.826: E/InputEventReceiver(30810): Exception dispatching input ...
- JS对文档进行操作
对文档进行操作 创建节点 追加节点 删除节点 任务及例子 总结 对DOM的修改是,构建动态网页的关键.使用下面列举的方法,我们可以创建新的网页并且动态进行更改. 更多的DOM操作方法请查 DOM1 ...
- C语言宏的高级应用
原文:C语言宏的高级应用 关于#和##在C语言的宏中,#的功能是将其后面的宏参数进行字符串化操作(Stringfication),简单说就是在对它所引用的宏变量通过替换后在其左右各加上一个双引号.比如 ...
- Postman (Chrome插件)
接口测试从未如此简单 - Postman (Chrome插件) Posted on 2015-01-16 15:50 WadeXu 阅读(468) 评论(7) 编辑 收藏 接口测试从未如此简单 - P ...
- java 中关于json的使用方法
json在数据传输起了很大的作用,下面说说java中json的使用方法. 文章参考:http://www.codes51.com/article/detail_99574.html json串示例 [ ...
- IE低版本下实现html5的placeholder(表单提示)功能
placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...
- 【SSRS】入门篇(二) -- 建立数据源
原文:[SSRS]入门篇(二) -- 建立数据源 通过 [SSRS]入门篇(一) -- 创建SSRS项目 这篇,我们建立了一个SSRS项目: 接下来,我们以 AdventureWorks2012 示例 ...
- Android Fragement学习笔记(三)----PreferenceFragment使用
我相信每个人都Perference大家都比较熟悉,这就是我们常说的偏好,首选项设置,一些数据可以保存.例如,一些元件的,我们使用上次.希望下次启动后仍然生效,烦.一般这个时候我们便会使用perfere ...
- php中session和cookie
cookie 每次请求页面的时候进行验证,如果用户信息存储在数据库中,每次都要执行一次数据库查询,给数据库造成多余的负担.cookie可以被修改的,所以安全系数太低. session是存储在服务器端面 ...
- 在MVC中使用SignalR
在MVC中使用SignalR 接着上一篇:<ASP.NET SignalR系列>第四课 SignalR自托管(不用IIS) 一.概述 本教程主要阐释了如何在MVC下使用ASP.NET Si ...