javascript 处理HTML元素必须避免使用的一种方法

我们在编写前台页面的时候，可能经常会用到“javascript+数据”生成页面元素的方法，但当我们要处理的数据量较大，导致页面需要展现过多的控件的时候，页面的响应速度也会直线下降.

我们可能往往会去排查问题的缘由，其实，在排查掉冗余的循环和精简了控件数量后，我们发现性能还是不乐观，于是继续排查，一个偶然的修改，却大大改善了效率，就是类似如下的修改：
修改前：

代码如下:

objDiv.innerHTML += ‘<img id=”picture” src=”back.gif”>';

修改后：

代码如下:

var imga = document.createElement("img");
imga.setAttribute("src","back.gif");
imga.setAttribute("id","picture");
objDiv.appendChild(imga);

之前可能因为书写的便利，所以没有采用创建页面元素，再分别赋值，最后进行嵌套的方法，而是直接通过字符串赋值innerHTML的方法，这种方法就是比较简单和便捷，但是在性能方面还是有所损失的，因为这中间必然涉及到一个将字符串转换为正确的页面控件的的一个过程，这其中的性能损失可能比较大，所以造成了页面相应的迟缓。

http://www.jb51.net/article/19442.htm

转载于:https://www.cnblogs.com/qiangupc/p/4193600.html

javascript 处理HTML元素必须避免使用的一种方法相关推荐

js计算数组中每个元素出现的次数（2种方法）
js计算数组中每个元素出现的次数(2种方法) js动态生成唯一id Javascript生成全局唯一标识符(GUID,UUID)的方法
python列表统计每个元素出现次数_python 统计list中各个元素出现的次数的几种方法...
利用字典dict来完成统计举例: a = [1, 2, 3, 1, 1, 2] dict = {} for key in a: dict[key] = dict.get(key, 0) + 1 pr ...
javascript控制页面控件隐藏显示的两种方法
javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位方法一: document.all<"PanelSMS">.styl ...
知识点2:js（javascript）中检测是否为数组的两种方法【翻转数组案例】
javascript基础知识文章目录 javascript基础知识前言一.翻转数组案例二.检测数组的两种方法 1.如果传输的参数不是数组 2.instanceof 运算符可以用来检测是否满足 ...
JavaScript判断对象是否为空对象的几种方法
判断是否为空对象在实际开发中很常见,今天就让我们来整理一下有哪些方法吧. 1.空对象对应的字符串为 "{}" var data = {}; var b = JSON.stringi ...
输出该数二进制表示中1的个数。求取十进制数字元素1的个数（3种方法）
/* ***求取十进制数字元素1的个数 */int fun(int x) {int count = 0;int i, j, k;/***方法2 负数不可计算,需要改进*/while (x != 0){ ...
python统计字典里面value出现的次数_python 统计list中各个元素出现的次数的几种方法...
利用字典dict来完成统计举例: a = [1, 2, 3, 1, 1, 2] dict = {} for key in a: dict[key] = dict.get(key, 0) + 1 pr ...
JavaScript 中检查数组是否包含值的 5 种方法
在 JavaScript 中,有多种方法可以检查数组是否包含项目.您始终可以使用for 循环或Array.indexOf()方法,但 ES6 添加了许多更有用的方法来搜索数组并轻松找到您要查找的内容. ...
Javascript ES6中数组去重最简便的两种方法（大概）
1.Set 先利用Set创建类数组数据结构实例set,利用set会自动去重的特性,最后用扩展运算符将set赋值给新数组var arr = ['a', 'b', 'c', 'a']var set = n ...

javascript 处理HTML元素必须避免使用的一种方法

javascript 处理HTML元素必须避免使用的一种方法相关推荐

最新文章

热门文章