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 相关文章推荐
跨域表单提交状态的变相判断代码
Nov 12 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
javascript实现简单的进度条
Jul 02 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
代码详解Vuejs响应式原理
Dec 20 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
使用js和canvas实现时钟效果
Sep 08 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
自己做矿石收音机
2021/03/02 无线电
真正的ZIP文件操作类(php)
2007/07/21 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
php的hash算法介绍
2014/02/13 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
一端时间轮换的广告
2006/06/26 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
vue.js的安装方法
2017/05/12 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
Python 文件处理注意事项总结
2017/04/10 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
NumPy排序的实现
2020/01/21 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
编辑找工作求职信范文
2013/12/16 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
安装工程师岗位职责
2015/02/13 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
golang特有程序结构入门教程
2021/06/02 Python