JavaScript中易犯的小错误-------常见错误五:低效的DOM操作

JavaScript中易犯的小错误-------常见错误五:低效的DOM操作
js中的DOM基本操作非常简单,但是如何能有效地进行这些操作一直是一个难题。这其中最典型的问题便是批量增加DOM元素。增加一个DOM元素是一步花费很大的操作。而批量增加对系统的花销更是不菲。一个比较好的批量增加的办法便是使用 document fragments :
var div = document.getElementsByTagName("my_div");
var fragment = document.createDocumentFragment();
for (var e = 0; e < elems.length; e++) {

fragment.appendChild(elems[e]);

}

div.appendChild(fragment.cloneNode(true));
直接添加DOM元素是一个非常昂贵的操作。但是如果是先把要添加的元素全部创建出来,再把它们全部添加上去就会高效很多。

时间: 2024-08-02 15:12:27

JavaScript中易犯的小错误-------常见错误五:低效的DOM操作的相关文章

JavaScript中易犯的小错误-------常见错误三:内存泄露

国庆放假,今天开始继续!!!!!!!!!!! JavaScript中易犯的小错误-------常见错误三:内存泄露 内存泄露在js变成中几乎是一个无法避免的问题.如果不是特别细心的话,在最后的检查过程中,肯定会出现各种内存泄露问题.下面我们就来举例说明一下:var theThing = null;var replaceThing = function () {     var priorThing = theThing;     var unused = function () {       

JavaScript中易犯的小错误-------常见错误四:比较运算符

JavaScript中易犯的小错误-------常见错误四:比较运算符JavaScript中一个比较便捷的地方,便是它可以给每一个在比较运算的结果变量强行转化成布尔类型.但是从另一方面来考虑,有时候它也会为我们带来很多不便,下面的这些例子便是一些一直困扰很多程序员的代码实例:console.log(false == '0');console.log(null == undefined);console.log(" \t\r\n" == 0);console.log('' == 0);

JavaScript中易犯的小错误-------常见错误七:原型继承问题

JavaScript中易犯的小错误-------常见错误七:原型继承问题 很大一部分的js开发者都不能完全掌握原型的继承问题.下面具一个例子来说明:BaseObject = function(name) {if(typeof name !== "undefined"){ this.name = name; }else{ this.name = 'default' } };这段代码看起来很简单.如果你有name值,则使用它.如果没有,则使用 ‘default’:var firstObj

JavaScript中易犯的小错误-------常见错误二:传统编程语言的生命周期误区

JavaScript中易犯的小错误-------常见错误二:传统编程语言的生命周期误区另一种易犯的错误,便是带着其他编程语言的思维,认为在JS中,也存在生命周期这么一说.请看下面的代码:for (var i = 0; i < 10; i++) { /* ... */ } console.log(i);如果你认为在运行console.log() 时肯定会报出 undefined 错误,那么你就大错特错了.我会告诉你其实它会返回 10吗.当然,在许多其他语言当中,遇到这样的代码,肯定会报错.因为i明

【转】十个JavaScript中易犯的小错误,你中了几枪?

在今天,JavaScript已经成为了网页编辑的核心.尤其是过去的几年,互联网见证了在SPA开发.图形处理.交互等方面大量JS库的出现. 如果初次打交道,很多人会觉得js很简单.确实,对于很多有经验的工程师,或者甚至是初学者而言,实现基本的js功能几乎毫无障碍.但是JS的真实功能却比很多人想象的要更加多样.复杂.JavaScript的许多细节规定会让你的网页出现很多意想不到的bug,搞懂这些bug,对于成为一位有经验的JS开发者很重要. 常见错误一:对于this关键词的不正确引用 我曾经听一位喜

十个JavaScript中易犯的小错误,你中了几枪?

序言 在今天,JavaScript已经成为了网页编辑的核心.尤其是过去的几年,互联网见证了在SPA开发.图形处理.交互等方面大量JS库的出现. 如果初次打交道,很多人会觉得js很简单.确实,对于很多有经验的工程师,或者甚至是初学者而言,实现基本的js功能几乎毫无障碍.但是JS的真实功能却比很多人想象的要更加多样.复杂.JavaScript的许多细节规定会让你的网页出现很多意想不到的bug,搞懂这些bug,对于成为一位有经验的JS开发者很重要. 常见错误一:对于this关键词的不正确引用 我曾经听

十个JavaScript中易犯的小错误

在今天,JavaScript已经成为了网页编辑的核心.尤其是过去的几年,互联网见证了在SPA开发.图形处理.交互等方面大量JS库的出现. 如果初次打交道,很多人会觉得js很简单.确实,对于很多有经验的工程师,或者甚至是初学者而言,实现基本的 js功能几乎毫无障碍.但是JS的真实功能却比很多人想象的要更加多样.复杂.JavaScript的许多细节规定会让你的网页出现很多意想不到的 bug,搞懂这些bug,对于成为一位有经验的JS开发者很重要. 常见错误一:对于this关键词的不正确引用 我曾经听一

springMVC 配置中易犯的小错误

搭建springMVC环境时有可能遇到:'警告: No mapping found for HTTP request with URI [/WEB-INF/pages/helloWorld.jsp] in DispatcherServlet with name 'dispatcher'',可能有几种情况: 1.确实没有对应的jsp. 2.web.xml中配置可能存在错误. <servlet> <servlet-name>dispatcher</servlet-name>

编程中易犯错误汇总:一个综合案例.md

# 11编程中易犯错误汇总:一个综合案例 在上一篇文章中,我们学习了如何区分好的代码与坏的代码,如何写好代码.所谓光说不练假把式,在这篇文章中,我们就做一件事——一起来写代码.首先,我会先列出问题,然后要求读者自己写一份答案:然后,我会给出我写的代码:最后,我们还会以这个问题为例,讨论编程中常见的错误. ## 1 问题描述 在[这个](http://wiki.openhatch.org/index.php?title=Scrabble_challenge)页面中,有一道Python相关的练习题,