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 时,会报莫名的“未知的运行错误”。
猜你喜欢
- 今天研究了个开源项目,数据库是mysql的,其中的脚本数据需要备份,由于本人的机器时mac pro,而且mac下的数据库连接工具都不怎么好用
- Scrapy 结构概述:一、下载器中间件(Downloader Middleware)如上图标号4、5处所示,下载器中间件用于处理scrap
- 前言最近在学习Python的面向对象编程,以前是没有接触过其它的面向对象编程的语言,因此学习这一部分是相当带劲的,这里也总结一下。概述pyt
- 本节在这里主要说的是URLError还有HTTPError,以及对它们的一些处理。1.URLError首先解释下URLError可能产生的原
- 在工作中,我们经常会写出这种代码:import MHeader from '../../components/m-header/m-
- 0x01 生成shellcode首先通过下列命令生成一个shellcode,使用msfvenom -p选项来指定paylaod,这里选用wi
- 前言作为一个数据库,作为数据库中的一张表,随着用户的增多随着时间的推移,总有一天,数据量会大到一个难以处理的地步。这时仅仅一张表的数据就已经
- 前言本文主要给大家介绍了关于SQL Server中bit类型字段增删查改的一些事,话说BIT类型字段之前,先看“诡异”的一幕,执行Updat
- python删除缓存文件的方法:首先输入“find.-name '__pycache__' -type d -exec rm
- 在工作实践和学习中,如何开启 MySQL 数据库的远程登陆帐号算是一个难点的问题,以下内容便是在工作和实践中总结出来的两大步骤,能帮助DBA
- 日期的转换及计算对于日期,有时需执行不同时间单位的转换,或者接受字符串格式的日期,转换为 datetime 对象。有时需计算日期的范围,以及
- 文章主要描述的是SQL Server到DB2连接服务器的正确实现过程,以及对其在实际操作中所要用到的实际操作环境的描述,以下就是对SQL S
- 如下所示:from PIL import Image########获取图片指定像素点的像素def getPngPix(pngPath =
- 阅读上一章:Css布局Chapter 13 为文字指定样式我想以一章的篇幅来讨论用CSS设定文字样式的做法是个好点子.一般处理文字内容大概是
- 正则表达式,又称正规表示法、常规表示法(英语:Regular Expression,在代码中常简写为regex、regexp或RE),计算机
- Oracle数据库以其高可靠性、安全性、可兼容性,得到越来越多的企业的青睐。如何使Oracle数据库保持优良性能,这是许多数据库管理员关心的
- 本文实例讲述了PHP使用JpGraph绘制折线图操作。分享给大家供大家参考,具体如下:下载jpgraph类库,使用的是src目录下的类文件。
- 描述一下场景UC(User-Center)是单独的一个项目,包括Spring Cloud + Vue, 服务项目是另一个项目,也是Sprin
- 导言Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌
- 这是我以前发表在经典论坛的帖子,现在转贴回来。仿淘宝网站的导航效果。此方法有几个优点:根据字数自适应项目长度不同的项目使用不同的颜色来区分无