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


Posted in Javascript onJuly 30, 2009

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

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 相关文章推荐
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
构建一个JavaScript插件系统
Oct 20 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
javascript 写的一个简单的timer
Jul 30 #Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 #Javascript
Javascript this指针
Jul 30 #Javascript
javascript 进度条 实现代码
Jul 30 #Javascript
JS input 数字验证代码
Jul 30 #Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 #Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 #Javascript
You might like
杏林同学录(八)
2006/10/09 PHP
分享PHP入门的学习方法
2007/01/02 PHP
PHP求最大子序列和的算法实现
2011/06/24 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
详解vue路由
2020/08/05 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
python 中如何获取列表的索引
2019/07/02 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
openCV提取图像中的矩形区域
2020/07/21 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
连锁经营管理专业大学生求职信
2013/10/30 职场文书
文明倡议书范文
2014/04/15 职场文书
实践单位评语
2014/04/26 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers
Vue router配置与使用分析讲解
2022/12/24 Vue.js