栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

优化innerHTML操作(提高代码执行效率)

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

优化innerHTML操作(提高代码执行效率)

例子:我们要实现的效果是当用户点击鼠标的时候,就在旧数据上追加若干新数据。
  如果使用标准DOM的话,完整代码如下:
复制代码 代码如下:


test



data







注:一旦结构比较复杂的话,标准DOM需要编写冗长的代码。
  如果使用innerHTML的话,部分代码如下:
复制代码 代码如下:


注:innerHTML没有标准DOM中的appendChild,所以使用了『+=』的方式,效率低下。
  我们可以结合使用innerHTML和标准DOM,这样二者的优点就兼得了,部分代码如下:
复制代码 代码如下:


注:创建一个元素,然后注入innerHTML,接着在元素上使用标准DOM操作。
  还不算完,Asynchronous innerHTML给出了更强悍的解决方法,部分代码如下:
复制代码 代码如下:


注:使用setTimeout防止堵塞浏览器,使用documentFragment减少渲染次数。
  另:代码在拼接字符串时还可以更快,详见:Fastest way to build an HTML string。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/113886.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号