javascript 处理HTML元素必须避免使用的一种方法
作者:bea
我们可能往往会去排查问题的缘由,其实,在排查掉冗余的循环和精简了控件数量后,我们发现性能还是不乐观,于是继续排查,一个偶然的修改,却大大改善了效率,就是类似如下的修改: 修改前: 代码如下: objDiv.innerHTML += ‘<img id=”picture” src=”back.gif”>'; 修改后: 代码如下: var imga = document.createElement("img"); imga.setAttribute("
我们可能往往会去排查问题的缘由,其实,在排查掉冗余的循环和精简了控件数量后,我们发现性能还是不乐观,于是继续排查,一个偶然的修改,却大大改善了效率,就是类似如下的修改:
修改前:
代码如下:
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的方法,这种方法就是比较简单和便捷,但是在性能方面还是有所损失的,因为这中间必然涉及到一个将字符串转换为正确的页面控件的的一个过程,这其中的性能损失可能比较大,所以造成了页面相应的迟缓。
有用 | 无用
修改前:
代码如下:
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的方法,这种方法就是比较简单和便捷,但是在性能方面还是有所损失的,因为这中间必然涉及到一个将字符串转换为正确的页面控件的的一个过程,这其中的性能损失可能比较大,所以造成了页面相应的迟缓。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 利用javascript实现一些常用软件的下载导航
- [原创]javascript 定时广告显示(两个时间段)
- jQuery 隔行换色 支持键盘上下键,按Enter选定值
- 一句话JavaScript表单验证代码
- JavaScript 关键字屏蔽实现函数
- Javascript 验证上传图片大小[客户端]
- Javascript 汉字字节判断
- JS 输入字数判断实现代码
- JS 面向对象的5钟写法
- JS 事件冒泡 示例代码
- Document 对象的常用方法
- javascript getElementsByName()的用法说明
- extjs 列表框(multiselect)的动态添加列表项的方法
- JavaScript 学习小结(适合新手参考)
- JavaScript 创建对象和构造类实现代码
- Javascript 类的继承实现代码
- Javascript 学习笔记 错误处理
- JS 学习笔记 防止发生命名冲突
- 网页全屏显示代码说明分析