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.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
优化javascript的执行速度
Jan 23 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 Javascript
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
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Python简易版停车管理系统
2019/08/12 Python
python实现TCP文件传输
2020/03/20 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
介绍一下Java中的Class类
2015/04/10 面试题
幼儿园教师心得体会范文
2016/01/21 职场文书
初二物理教学反思
2016/02/19 职场文书