innerHTML对比DOM方法，哪个性能好？有什么区别？

innerHTML对比DOM方法，哪个性能好？有什么区别？是个老生常谈的问题！跟浏览器版本与发展有关！

innerHTML是w3c制定的行业标准，几乎所有浏览器都做了支持；
作为原生支持，innerHTML在各主流浏览器下的执行效率是很高的；
但是他有他的缺陷，特别是在ie低版本浏览器下，不支持html5、还有一些其他的标签属性。

直接测试的话，速度明显innerHTML比DOM方法要快很多（包括撸代码的速度）,但是有说在webkit内核的浏览器中DOM方法比innerHTML要快。

平时采用jquery框架，对比了html()和append相应的源码，并做了测试，发现在火狐和ie6下，都是html速度快于append。因此建议使用html，当然，涉及事件绑定的话，就没那么方便了。

时间： 2024-10-10 02:25:31

innerHTML对比DOM方法，哪个性能好？有什么区别？的相关文章

使用httpclient实现http链接池与使用HttpURLConnection发送http请求的方法与性能对比

使用httpclient实现http链接池与使用HttpURLConnection发送http请求的方法与性能对比在项目中需要使用http调用接口,实现了两套发送http请求的方法,一个是使用apache的httpclient提供的http链接池来发送http请求,另一个是使用java原生的HttpURLConnection来发送http请求,并对两者性能进行了对比. 使用httpclient中的链接池发送http请求使用最新的4.5.2版httpclient进行实现.在maven中引入 <

DOM操作的性能优化

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; color: #454545 } span.s1 { font: 12.0px Helvetica } DOM操作的真正问题在于每次操作都会出发布局的改变.DOM树的修改和渲染. React解决了大面积的DOM操作的性能问题,实现了一个虚拟DOM,即virtual DOM,这个我们一条条讲. 所以关于DOM操作的性能优化主要包括: 1.查找元素的优化

【转】console.time 简单分析javascript动态添加Dom节点的性能

本文代码约定 1 el: 指的是增加直接点的DOM节点 2 totalNum: 为100000(值越大越能体现差距)指的是循环创建的DOM节点 3 for(var i=0;i<totalNum;i++){}: 我们用for来表示就好了,简写代码如果叫你用javascript动态增加DOM节点,你有哪几种思路呢? 1 .使用innerHTML和字符串拼接 console.time("time1"); var str = ""; for{ str += &quo

console.time 简单分析javascript动态添加Dom节点的性能

Bullshit 本来想每天都更新下博客的,但是最近要考试,还有就是自己还是停留在暗自窃喜中吧(这种想法要改变).其实最近总在想,自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改.昨天把自己的电脑重装了,确实很多软件的存放要改地方了,之前不知道怎么去管理软件安装,所以放得乱七八糟的.说好一大堆废话之后,我最后再说一遍,管好自己的时间.数据真的比你学习东西重要. Method 本文代码约定 1 el: 指的是增加直接点的DOM节点 2 totalNum: 为100000(值越大越能

before(),after(),prepend(),append()等新DOM方法简介

一.DOM API也在不断升级 web前端标准一直在不断升级,比方说,说了很多年的HTML5.CSS3,以及天天见的ES6. 然后,似乎就没有然后了.实际上,除了HTML5/CSS3/ES6+,关于DOM标准也是在不断升级进步,而且浏览器也在悄悄地进行跟进与支持. 然而,这种跟进与支持呢非常的低调与隐讳:加上行业的话语权大部分集中在JS工程师身上,同时DOM这种东西比较"低级"撑不起场面,因此各种什么技术大会啊,分享会议啊绝对不会讲这玩意儿的. 于是都叫他注意力很容易被带走,而没有意识

HTML DOM 方法

方法是我们可以在节点(HTML 元素)上执行的动作. 编程接口可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问. 所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性. 方法是您能够执行的动作(比如添加或修改元素). 属性是您能够获取或设置的值(比如节点的名称或内容). getElementById() 方法 getElementById() 方法返回带有指定 ID 的元素: 例子 <!DOCTYPE html> <html> <

五种URL参数解析方法的性能比较

因为在最近项目中需要解析日志中的 URL 的参数,所以我对比了一下五种不同的 URL 参数解析方法的性能.URL 参数解析方法: httpclient org.apache.http.client.utils.URLEncodedUtils URLEncodedUtils.parse(query, Charset.forName("UTF-8"));jettyUtil org.eclipse.jetty.util.UrlEncoded MultiMapvalues = new Mul

【js常用DOM方法】

介绍几个js DOM的常用方法获取元素节点 getElementById getElementsByTagName getElementsByClassName 先写一个简单的网页做测试: /* test.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body&g

OpenCV：Mat元素访问方法、性能、代码复杂度以及安全性分析

欢迎转载,尊重原创,所以转载请注明出处: http://blog.csdn.net/bendanban/article/details/30527785 本文讲述了OpenCV中几种访问矩阵元素的方法,在指定平台上给出性能比较,分析每种矩阵元素访问方法的代码复杂度,易用性. 一.预备设置本文假设你已经正确配置了OpenCV的环境,为方便大家实验,在文中也给出了编译源程序的Makefile,其内容如代码段1所示. 采用如代码段2所示的计时函数,这段代码你可以在我之前的博文中找到,abtic()