innerHTML 的些摘记
作者:手气不错 来源:gracecode.com 发布时间:2009-06-01 15:42:00
异步 innerHTML
innerHTML 插入节点的性能的问题,通常是我们最关注的。在回答这问题时,James Padolsey 给出了他的解决方案,看到上述代码不仅赞叹了下:
function asyncInnerHTML(HTML, callback) { var temp = document.createElement('div'), frag = document.createDocumentFragment(); temp.innerHTML = HTML; (function(){ if(temp.firstChild) { frag.appendChild(temp.firstChild); setTimeout(arguments.callee, 0); } else { callback(frag); } })();}
充分利用闭包解决 IE6 的内存溢出问题
使用延时 0 将操作从队列中拉出,防止浏览器假死
Document Fragment 给予我们个相当好的沙盘,只是我们经常忘记了它
回调的节点可以使用 DOM 标准的手法(appendChild)插入
了解了参数就很容易调用,例如
var htmlStr = '<div><p>...</p><p>...</p><div><div>...</div>';asyncInnerHTML(htmlStr, function(fragment){ document.body.appendChild(fragment);});
再次不禁赞叹下!
组织 innerHTML 字符串
说到 innerHTML ,通常在这操作之前会有大部分的字符串操作用于连接节点。考虑下面的三种做法,有何不同
方式一
var arr = ['item 1', 'item 2', 'item 3', ...];for (var i = 0, l = arr.length, list = ''; i < l; i++) { list += '<li>' + arr[i] + '</li>';}list = '<ul>' + list + '</ul>';
方式二
var arr = ['item 1', 'item 2', 'item 3', ...];for (var i = 0, l = arr.length, list = []; i < l; i++) { list[list.length] = '<li>' + arr[i] + '</li>';}list = '<ul>' + list.join('') + '</ul>';
方式三
var arr = ['item 1', 'item 2', 'item 3', ...];var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';
详细的对比测试在这里(没错,还是 James Padolsey 那小子的 Blog)。同时,PPK 也整理了份有关 innerHTML 的速度测试报告。
IE 的陷阱
对于 IE,innerHTML 有个不大不小的陷阱(via),就是在 tbody 中插入 innerHTML 时,会报莫名的“未知的运行错误”。
猜你喜欢
- 执行表扫描操作之前,将调用info()函数,以便为优化程序提供额外信息。优化程序所需的信息不是通过返回值给定的,你需填充存储引擎类的特定属性
- 如何用下拉列表显示数据库里的内容? 我们来看看实现这个功能的程序:<%Dim objDC, objRSS
- 如何同时处理数据库和页面错误? If Err.Number = 0 And ob
- Blog的全名应该是Web log,中文意思是“网络日志”,后来缩写为Blog,而博客(Blogger)就是写Blog的人。从理解上讲,博客
- 通过界面设计上是能手工操作的,无法达到我批量修改几千台服务器。 因为此了一个脚本来批量执行。 环境:redgate + mssql 2008
- 很简单,只需建立一个worksheet和Excel相关的信息就可以了具体代码见下:<%set xlApp =&nb
- asp之家注:学习javascript(js),免不了要用到打开新窗口,方法很多,总的来说是使用window.open。不同与HTML中的t
- 1 The syntax of the SQL statement is verified.SQL的语法检查2 The data dicti
- 【原文地址】New C# "Orcas" Language Features: Automatic Properties
- [pre]REPAIR [LOCAL | NO_WRITE_TO_BINLOG] TABLE[/pre][pre] tbl_name[,tb
- 如何终止浏览器的 CAHCE 页面?Function Redirect( NewURL ) If&n
- 对于一个内容页的文章来说,如果这个文章内容过长或是其中有分类(排行),那么进行分页阅读无疑是最好的选择。如果一个文章内容不涉及分类,比如小说
- 如果你已经理解了block formatting contexts那么请继续,否则请先看看这篇文章。Overflow能够做一些很牛掰的事情,
- Linux Journal 发表了一篇优化 Oracle 数据库的文章,感觉十分的有用。简要介绍其摘要和大家共同分享 Linux 在企业级数
- 某些杀毒软件会把正常的asp文件误认为是asp木马文件,而自动删除,影响正常使用。下面方法可能会有效避免被杀毒软件删除把dim t
- 照片尺寸 单位:cm1X1.5 (1寸) 2.6*3.9 一寸2.5*3.5 1.5X2 (2寸) 3.8*
- 有四个变量影响磁带备份设备的性能,并使 SQL Server 备份及还原性能操作得以在大体上随添加更多磁带设备而提高线性比例。◆软件数据块大
- 问:把数据从MySQL迁移到Oracle需要注意些什么?答:以下是MySQL迁到Oracle需要掌握的注意事项,希望对你有所帮助。1.自动增
- 译注:前两天看到一篇不错的英文文章,叫做 How browsers work,该文概要的介绍了浏览器从头到尾的工作机制,包括HTML等的解析
- Web Accessibility Initiative Accessible Rich Internet Applications认识AR