[Javascript]3. Improve you speed! Performance Tips
JavaScript you performance Tips Improve speed
2023-09-14 08:59:20 时间
/** Let inheritance help with memory efficiency */ function SignalFire(ID, startingLogs){ this.fireID = ID; this.logsLeft = startingLogs; } SignalFire.prototype = { addLogs: function(numLogs){ this.logsLeft += numLogs; } lightFire: function(){ alert("Whooosh!"); } smokeSignal: function(message){ if(this.logsLeft < this.message.length / 10){ alert("Not enough"); }else{ this.lightFire(); var x = this.message.length; for(var i = 0; i < x; i++){ alert("((("+this.message[i]+")))"); if(i % 10 == 0 && i != 0){ this.logsLeft--; } } } } } var fireOne = new SignalFire(1, 20); var fireTwo = new SignalFire(2, 18); var fireThree = new SignalFire(3, 14); fireOne.addLogs(8); fireTwo.addLogs(10); fireThree.addLogs(14); fireThree.smokeSignal("Goblins!"); //The addLogs method is found in one useful place, instead of being //replicated across all signalFires. /** Adding individual dom elements ain't always speedy */ // //**BAD** // var list = document.getElementById("kotwList"); var kotw = ["Jenna Rangespike", "Neric Farthing", "Darkin Stonefield"]; for(var i = 0, x = kotw.length; i < x; i++){ var element = document.creatElement('li'); element.appendChild(document.createTextNode(kotw[i])); list.appendChild(element); } //appendChild(); function each time this list is appened, we access the DOM //and cause an entire document reflow. Not as speedy as we'd like, especially //if we list was huge... /* Improve: Use a document fragment to insert additions all at once */ var list = document.getElementById("kotwList"); var kotw = ["Jenna Rangespike", "Neric Farthing", "Darkin Stonefield"]; var fragment = document.createDocumentFragment(); for(var i = 0, x = kotw.length; i < x; i++){ var element = document.creatElement('li'); element.appendChild(document.createTextNode(kotw[i])); fragment.appendChild(element); } list.appendChild(fragment); /* Improve: declare variables as few times as possible */ // //**GOOD** // var list = document.getElementById("kotwList"), kotw = ["Jenna Rangespike", "Neric Farthing", "Darkin Stonefield"], fragment = document.createDocumentFragment(), element; for(var i = 0, x = kotw.length; i < x; i++){ element = document.creatElement('li'); element.appendChild(document.createTextNode(kotw[i])); fragment.appendChild(element); } list.appendChild(fragment); /** Efficient choices for string concatenation */ // //**OK** // var knight = "Jenna Rangespike", action = " strikes the dragon with a ", weapon = "Halberd", turn = ""; turn += knight; turn += action; turn += weapon; //It is ok because the code is short and clear // //**NOT GOOD ENOGUTH // var newPageBuild = ["<!DOCTYPE html>", "<html>", "<body>", "<h1>", *** a hundred or more other html elements***, "</script>", "</body>", "</html>"], page = ""; for(var i = 0, x = newPageBuild.length; i < x; i++){ page += newPageBuild[i]; } // //**GOOD** // page = newPageBuild.join("\n"); //Using join is much faster than using '+=' and looks simple and clear!!
相关文章
- javascript 基础_JavaScript高级编程
- 【说站】JavaScript垃圾回收的两种方法
- 【说站】javascript事件委托是什么
- JavaScript实现图片预加载详解编程语言
- JavaScript学习总结(十七)——Javascript原型链的原理详解编程语言
- 解javascript混淆加密收藏
- 关于document.cookie的使用javascript
- JavaScript动态调整TextArea高度的代码
- javascript获取鼠标位置部分的实例代码(兼容IE,FF)
- 利用noesis.Javascript开源组件.Net中执行javascript脚本
- 利用JavaScript检测CPU使用率自己写的
- Javascript学习笔记之对象篇(三):hasOwnProperty
- JavaScript利用append添加元素报错的解决方法
- 浅谈javascript中字符串String与数组Array