优化innerHTML操作(提高代码执行效率)

例子：我们要实现的效果是当用户点击鼠标的时候，就在旧数据上追加若干新数据。
　　如果使用标准DOM的话，完整代码如下：


代码如下:

<html>
<head>
<title>test</title>
</head>
<body>
<div>
<p>data<p>
</div>
<script>
document.onmousedown = function() {
for (var i = 0; i < 10; i++) {
var p = document.createElement("p");
p.appendChild(document.createTextNode(Math.random()));
document.getElementsByTagName('div')[0].appendChild(p);
}
};
</script>
</body>
</html>

注：一旦结构比较复杂的话，标准DOM需要编写冗长的代码。
　　如果使用innerHTML的话，部分代码如下：


代码如下:

<script>
document.onmousedown = function() {
var html = "";
for (var i = 0; i < 10; i++) {
html += "<p>" + Math.random() + "<p>";
}
document.getElementsByTagName('div')[0].innerHTML += html;
};
</script>

注：innerHTML没有标准DOM中的appendChild，所以使用了『+=』的方式，效率低下。
　　我们可以结合使用innerHTML和标准DOM，这样二者的优点就兼得了，部分代码如下：


代码如下:

<script>
document.onmousedown = function() {
var html = "";
for (var i = 0; i < 10; i++) {
html += "<p>" + Math.random() + "<p>";
}
var temp = document.createElement("div");
temp.innerHTML = html;
while (temp.firstChild) {
document.getElementsByTagName('div')[0].appendChild(temp.firstChild);
}
};
</script>

注：创建一个元素，然后注入innerHTML，接着在元素上使用标准DOM操作。
　　还不算完，Asynchronous innerHTML给出了更强悍的解决方法，部分代码如下：


代码如下:

<script>
document.onmousedown = function() {
var html = "";
for (var i = 0; i < 10; i++) {
html += "<p>" + Math.random() + "<p>";
}
var temp = document.createElement('div');
temp.innerHTML = html;
var frag = document.createDocumentFragment();
(function() {
if (temp.firstChild) {
frag.appendChild(temp.firstChild);
setTimeout(arguments.callee, 0);
} else {
document.getElementsByTagName('div')[0].appendChild(frag);
}
})();
};
</script>

注：使用setTimeout防止堵塞浏览器，使用DocumentFragment减少渲染次数。
　　另：代码在拼接字符串时还可以更快，详见：Fastest way to build an HTML string。

赞 (0)

相关推荐

  • i++循环与i-–循环的执行效率(递增与递减效率)

    昨天同事问了我一个问题,有两个循环语句: 复制代码 代码如下: for(i = n; i > 0; i--) { - } for(i = 0; i < n; i++) { - } 为什么前者比后者快? 我当时的解释是: i- -操作本身会影响CPSR(当前程序状态寄存器),CPSR常见的标志有N(结果为负), Z(结果为0),C(有进位),O(有溢出).i > 0,可以直接通过Z标志判断出来. i++操作也会影响CPSR(当前程序状态寄存器),但只影响O(有溢出)标志,这对于i <

  • 分享50个提高PHP执行效率的技巧

    1.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量, 单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的"函数"(译注:PHP手册中说echo是语言结构,不是真正的函数,故 把函数加上了双引号). 2.如果能将类的方法定义成static,就尽量定义成static,它的速度会提升将近4倍. 3.$row['id'] 的速度是$row[id]的7倍. 4.echo 比 print 快,并且使用echo的多重参数(译注:

  • 提高ASP页面执行效率的方法分析

    这些大都是与硬件相关.其实在软件上,好的程序设计的方法和正确的参数配置也可以提高程序的性能,有时 在同等情况下只要改变一个参数,程序执行效率就能大大提高.本文就试着在这方面做些探索. 一.影响性能的因素 ASP程序运行的性能主要决定于以下2个大方面: 1.HTML页面的执行效率 2.反应时间,其中反应时间主要受制于下面要素: (1).ASP页面的执行效率 (2).数据库因素 下面我们就来详细讨论一下. 二.详细讨论 1.影响HTML的因素 HTML页面的执行效率是一个纯客户端的问题.影响这个问题

  • JavaScript执行效率与性能提升方案

    如何提升JavaScript执行效率与性能在前端开发中位于一个很重要的地方,这节来研究下如何在平时做项目过程中,提升JavaScript性能与运行效率. 循环 循环是很常用的一个控制结构,大部分东西要依靠它来完成,在JavaScript中,我们可以使用for(;;),while(),for(in)三种循环,事实上,这三种循环中for(in)的效率极差,因为他需要查询散列键,只要可以就应该尽量少用.for(;;)和while循环的性能应该说基本(平时使用时)等价. 而事实上,如何使用这两个循环,则

  • PHP 函数执行效率的小比较

    就是把原来的数组中的数都"拆"成"单"位的. 下面是自己写的一个函数: 复制代码 代码如下: function splitStrToArray_mine($array) { $new_array = array(); foreach($array as $value) { $value = (string)$value; $len = strlen($value); for($i = 0; $i < $len; $i ++){ array_push($new_

  • 根据mysql慢日志监控SQL语句执行效率

    根据mysql慢日志监控SQL语句执行效率 启用MySQL的log-slow-queries(慢查询记录). 在Linux环境下先要找到my.cnf文件(一般在/etc/mysql/),然后可能会发现该文件修改后无法保存,原因是你没有相应的权限,可以从属性中看到该文件的所有者是root,这时要先以root的身份打开它: sudo nautilus /etc/mysql 接着再打开my.cnf文件然后找到[mysqld]标签在下面加上: log-slow-queries=/path/slow.lo

  • Oracle提高sql执行效率的心得建议

    复制代码 代码如下: -->FROM子句中包含多个表的情况下,选择记录条数最少的表作为基础表 -->解析WHERE子句是自下而上的 过滤条件要有顺序 -->ORACLE会将'*'转换成列名 -->DELETE会在rollback segment中存放可恢复信息,可以试试TRUNCATE -->COMMIT会释放:1.rollback segment 2.被程序语句获得的锁 3.redo log buffer -->把Alias前缀于每个Column上可以减少解析的时间

  • 查询mysql中执行效率低的sql语句的方法

    一些小技巧1. 如何查出效率低的语句?在MySQL下,在启动参数中设置 --log-slow-queries=[文件名],就可以在指定的日志文件中记录执行时间超过long_query_time(缺省为10秒)的SQL语句.你也可以在启动配置文件中修改long query的时间,如: 复制代码 代码如下: # Set long query time to 8 seconds    long_query_time=8 2. 如何查询某表的索引?可使用SHOW INDEX语句,如: 复制代码 代码如下

  • 优化innerHTML操作(提高代码执行效率)

    例子:我们要实现的效果是当用户点击鼠标的时候,就在旧数据上追加若干新数据. 如果使用标准DOM的话,完整代码如下: 复制代码 代码如下: <html> <head> <title>test</title> </head> <body> <div> <p>data<p> </div> <script> document.onmousedown = function() { fo

  • Task提高异步执行效率技巧

    Task提高异步执行效率技巧

    async Task 语法糖出来后,异步编程变得非常简单,适合需要耗费较长时间的任务. 有些小伙伴使用后可能会非常疑惑,使用异步和同步,在耗时上几乎没有差别. 下面我们看一个例子,场景是需要调用多个第三方的WebApi,分别是获取名称.年龄.性别,由于网络环境等原因,api响应时间可能会接近1秒 public async Task Test() { var sw = new Stopwatch(); sw.Start(); var userName = await GetUserNameAsyn

  • 有效提高JavaScript执行效率的几点知识

    有效提高JavaScript执行效率的几点知识

    为了提供新鲜.别致的用户体验,很多网站都会使用 JavaScript 来改善设计.验证表单.检查浏览器,以及Ajax请求,cookie操作等等,实现无刷新动态效果 .但是,要将大量内容在浏览器呈现,如果处理不好,网站性能将会急剧下降.所以我们有必要了解下,如何提高JavaScript的执行效率. JavaScript 函数 在JavaScript 中,函数在使用前会预编译.尽管有些时候下可以使用字符串代替函数,但是每次执行这段JavaScript 代码时都会重新解析,影响性能. 1.eval例子

  • 提高JavaScript执行效率的23个实用技巧

    本文向大家分享23种JavaScript提高执行效率的小技巧.最佳实践等非常实用的内容.当然JavaScript的实用技巧不止这些,还有很多即好玩又能提高程序运行效率的技巧,以后我们会继续分享给大家. 文中所提供的代码片段都已经过最新版的Chrome 30测试,该浏览器使用V8 JavaScript引擎(V8 3.20.17.15). 1.使用逻辑符号&&或者||进行条件判断 var foo = 10; foo == 10 && doSomething(); // 如果 f

  • 利用函数的惰性载入提高javascript代码执行效率

    在 javascript 代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的 if 语句,以检查浏览器特性,解决不同浏览器的兼容问题. 例如,我们最常见的为 dom 节点添加事件的函数: 复制代码 代码如下: function addEvent (type, element, fun) { if (element.addEventListener) { element.addEventListener(type, fun, false); } else if(element.a

  • Oracle提高SQL执行效率的3种方法

    Oracle提供了多种方法用于减少花在剖析Oracle SQL表达式上的时间,在执行带有大量执行计划的复杂查询时剖析过程会拖累系统的性能.现在我们来简要地看看这些方法中的几种. 1.使用ordered提示 Oracle必须花费大量的时间来剖析多表格的合并,用以确定表格合并的最佳顺序.如果SQL表达式涉及七个乃至更多的表格合并,那么有时就会需要超过30分钟的时间来剖析,因为Oracle必须评估表格合并所有可能的顺序.八个表格就会有40,000多种顺序.Ordered这个提示(hint)和其他的提示

  • Javascript执行效率全面总结

    Javascript是一门非常灵活的语言,我们可以随心所欲的书写各种风格的代码,不同风格的代码也必然也会导致执行效率的差异,开发过程中零零散散地接触到许多提高代码性能的方法,整理一下平时比较常见并且容易规避的问题 Javascript自身执行效率Javascript中的作用域链.闭包.原型继承.eval等特性,在提供各种神奇功能的同时也带来了各种效率问题,用之不慎就会导致执行效率低下. 1.全局导入我们在编码过程中多多少少会使用到一些全局变量(window,document,自定义全局变量等等)

  • 探寻Javascript执行效率问题

    Javascript是一门非常灵活的语言,我们可以随心所欲的书写各种风格的代码,不同风格的代码也必然也会导致执行效率的差异,开发过程中零零散散地接触到许多提高代码性能的方法,整理一下平时比较常见并且容易规避的问题 Javascript自身执行效率 Javascript中的作用域链.闭包.原型继承.eval等特性,在提供各种神奇功能的同时也带来了各种效率问题,用之不慎就会导致执行效率低下. 1.全局导入 我们在编码过程中多多少少会使用到一些全局变量(window,document,自定义全局变量等

随机推荐