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的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 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 面向对象的一个例子
2011/04/12 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
Python中的多行注释文档编写风格汇总
2016/06/16 Python
基于Django用户认证系统详解
2018/02/21 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
python中Django文件上传方法详解
2020/08/05 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
优秀广告词大全
2014/03/19 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
本科毕业生求职信
2014/06/15 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
python基础之类方法和静态方法
2021/10/24 Python
Python装饰器详细介绍
2022/03/25 Python
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle