电脑软硬件应用网
当前位置: 电脑软硬件应用网 > 设计学院 > 网络编程 > javascript > 正文
javascript处理HTML元素必须避免使用的一种方法
javascript处理HTML元素必须避免使用的一种方法
2010-1-12 9:05:40  文/佚名   出处:电脑软硬件应用网   

我们在编写前台页面的时候,可能经常会用到“javascript+数据”生成页面元素的方法,但当我们要处理的数据量较大,导致页面需要展现过多的控件的时候,页面的响应速度也会直线下降,我们可能往往会去排查问题的缘由,其实,在排查掉冗余的循环和精简了控件数量后,我们发现性能还是不乐观,于是继续排查,一个偶然的修改,却大大改善了效率,就是类似如下的修改:

电脑软硬件应用网(http://www.45its.com)告诉大家修改前:

objDiv.innerHTML += ‘<img id=”picture” src=”back.gif”>’;


电脑软硬件应用网(http://www.45its.com)告诉大家修改后:
view plaincopy to clipboardprint?
var imga = document.createElement("img");
imga.setAttribute("src","back.gif");
imga.setAttribute("id","picture");
objDiv.appendChild(imga);
var imga = document.createElement("img");
imga.setAttribute("src","back.gif");
imga.setAttribute("id","picture");
objDiv.appendChild(imga);

之前可能因为书写的便利,所以没有采用创建页面元素,再分别赋值,最后进行嵌套的方法,而是直接通过字符串赋值innerHTML的方法,这种方法就是比较简单和便捷,但是在性能方面还是有所损失的,因为这中间必然涉及到一个将字符串转换为正确的页面控件的的一个过程,这其中的性能损失可能比较大,所以造成了页面相应的迟缓。

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    js或jquery获取网页控件的offset值的…
    验证JS中Object和Function的关系的代…
    不支持ASP的空间能用JS吗?
    关于20个Ajax关键问题的疑问及解答
    extjs重新设置按钮button的text的方…
    58项经典的JS代码
    使用JS自动切换背景音乐的方法
    一些常用正则表达式语法参考(数字、…
    JavaScript框架的实用函数
    推荐一些实用JS测试和验证工具给大家
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号