作业帮 > Javascript > 教育资讯
JavaScript教程:优化javascript的innerHTML操作
来源:学生作业帮助网 编辑:作业帮 时间:2024/05/11 16:51:25 Javascript
JavaScript教程:优化javascript的innerHTML操作Javascript
【无忧考网-JavaScript教程:优化javascript的innerHTML操作】:
多数现代浏览器都实现了innerHTML操作,它的方便性让我们爱不释手,但如果使用不当,很容易出现效率问题,本文通过一个例子来说明如何优化innerHTML操作。
多数现代浏览器都实现了innerHTML操作,它的方便性让我们爱不释手,但如果使用不当,很容易出现效率问题,本文通过一个例子来说明如何优化innerHTML操作。
例子:我们要实现的效果是当用户点击鼠标的时候,就在旧数据上追加若干新数据。
如果使用标准DOM的话,完整代码如下:
test data
注:一旦结构比较复杂的话,标准DOM需要编写冗长的代码。
如果使用innerHTML的话,部分代码如下:
注:innerHTML没有标准DOM中的appendChild,所以使用了『+=』的方式,效率低下。
我们可以结合使用innerHTML和标准DOM,这样二者的优点就兼得了,部分代码如下:
注:创建一个元素,然后注入innerHTML,接着在元素上使用标准DOM操作。
还不算完,Asynchronous innerHTML给出了更强悍的解决方法,部分代码如下:
注:使用setTimeout防止堵塞浏览器,使用DocumentFragment减少渲染次数。
另:代码在拼接字符串时还可以更快,详见:Fastest way to build an HTML string。
Javascript