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的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
原生javascript获取元素样式属性值的方法
Dec 25 Javascript
js 利用className得到对象的实现代码
Nov 15 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 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
中篇:安装及配置PHP
2006/12/13 PHP
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
php 数组元素快速去重
2017/05/05 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
javascript轮播图算法
2016/10/21 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
一张图带我们入门Python基础教程
2017/02/05 Python
Django的models模型的具体使用
2019/07/15 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
前台文员我鉴定
2014/01/12 职场文书
学生打架检讨书
2014/02/14 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
国庆节慰问信
2015/02/15 职场文书
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python