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 相关文章推荐
JS 字符串连接[性能比较]
May 10 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
Vue-cli 移动端布局和动画使用详解
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
我的论坛源代码(六)
2006/10/09 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
用ADODB.Stream转换
2007/01/22 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
理解Javascript_03_javascript全局观
2010/10/11 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
护理专业大学生自我推荐信
2014/01/25 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
python实现简单的聊天小程序
2021/07/07 Python
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
Selenium浏览器自动化如何上传文件
2022/04/06 Python