當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
优化JS代码性能
優化JS代碼性能
優化循環
我們來看一段段代碼
function LoopBad(){ var footballTeam={coach:"xiaohu",members:['羅納爾多','半澤直樹','費德勒']};for (var i = 0; i < footballTeam.members.length; i++) {console.log(footballTeam.members[i])}; }這段代碼循環footballTeam中的members數組，然后打印隊員。怎么優化呢？首先footballTeam.members.length可以緩存一下，footballTeam.members[i]也可以緩存一下，看一下下面的代碼就知道了。為什么要緩存呢，因為在循環中重復的去尋找屬性是沒有必要的，這里緩存一下是可以加快速度的。
function LoopGood(){ var footballTeam={coach:"xiaohu",members:['羅納爾多','半澤直樹','費德勒']};var members = footballTeam.members;for (var i = 0, Length = footballTeam.members.length; i < Length ; i++) {console.log(members[i])}; }html中如何加載js代碼
我們在html中引用js一般來說這么寫的
<!DOCTYPE html> <html ><head><meta charset="UTF-8"><title>Simple Map</title><link rel="stylesheet" href="css/style.css"><script type="text/javascript" src="js/index.js"></script></head><body><div>這里有很多內容</div></body> </html>這時候js加載會影響html的顯示，有什么方法可以讓非必要的js后加載呢？
<!DOCTYPE html> <html ><head><meta charset="UTF-8"><title>Simple Map</title><link rel="stylesheet" href="css/style.css"></head><body><div>這里有很多內容</div><script type="text/javascript" src="js/index.js"></script></body> </html>上面的代碼把js文件放在</body>前面，這樣html就會先被瀏覽器引擎渲染了。所以我們看到很多人都把js放在后面，不過放在前面畢竟復合閱讀習慣，好在現在有了async屬性，我們看看下面的代碼。
<!DOCTYPE html> <html ><head><meta charset="UTF-8"><title>Simple Map</title><link rel="stylesheet" href="css/style.css"><script type="text/javascript" src="js/index.js" async></script></head><body><div>這里有很多內容</div></body> </html>使用原型節省內存
我們來看看FootballTeam的構造函數怎么定義的。FootballTeam的構造函數有一個play函數，在里面打印一段話。這個構造函數有什么問題呢？問題就是play函數在每個對象中都會存在
，浪費內存啊，創建對象也更費時間。
最好移動到原型中，節省內存和創建對象的時間。
function FootballTeamBetter(name){this.members=25;this.name=name; } FootballTeamBetter.prototype = {play:function(){console.log(this.name+'喜歡張雨綺！');} } var realMadridBetter = new FootballTeamBetter('皇家馬德里'); var theBARCELONABetter = new FootballTeamBetter('巴薩'); realMadridBetter.play(); theBARCELONABetter.play();有效率的dom操作
我們來看下面一段代碼，這段代碼增加很多足球隊員到list中，功能上是沒問題的。但是在循環中，每次增加一個element到list中，都會讓瀏覽器reflow(重新載入)DOM樹。
var list=document.getElementById('mylist'); var members=['羅納爾多','半澤直樹','費德勒']; for (var i = 0; i < members.length; i++) {var element=document.createElement('li');element.appendChild(document.createTextNode(members[i]));list.appendChild(element); };如何改進這個代碼呢，我們只要緩存一下for循環中頻繁創建的li元素就可以了，看一下下面代碼。
var list=document.getElementById('mylist'),members=['羅納爾多','半澤直樹','費德勒'],fragment = document.createDocumentFragment(),element;; for (var i = 0; i < members.length; i++) {element=document.createElement('li');element.appendChild(document.createTextNode(members[i]));fragment.appendChild(element); }; list.appendChild(fragment);拼接string
js的字符串拼接直接用＋號就可以了。但是下面的情況有更好的方法。
var newPageBuild = [ "<!DOCTYPE html>", "<html>", "<body>", "<h1>", //***a hundred or more other html elements***, "</script>", "</body>", "</html>" ]; var page = ""; for(var i = 0, x = newPageBuild.length; i < x; i++){ page += newPageBuild[i]; }上面這段代碼可以這樣改進
page = newPageBuild.join("\n");如何測試性能
瀏覽器提供了很多工具測試性能，這里分享一個用代碼簡單測試性能的方法。
var SpeedTest = function(testImplement,testParams,repetitions) {this.testImplement = testImplement;this.testParams = testParams;this.repetitions = repetitions || 10000;this.average = 0; };SpeedTest.prototype = {startTest: function() {if (this.testImplement(this.testParams) === false) {alert('Test failed with those parameters.');return;}var beginTime, endTime, sumTimes = 0;for (var i = 0, x = this.repetitions; i < x; i++) {beginTime = +new Date();this.testImplement(this.testParams);endTime = +new Date();sumTimes += endTime - beginTime;}console.log('SumTimes execution across ' + sumTimes);this.average = sumTimes / this.repetitions;return console.log('Average execution across ' + this.repetitions + ': ' + this.average);} };我們看到SpeedTest類的構造函數有三個參數，第一個參數是需要測試的函數，第二個參數是被測試函數的參數，第三個是重復的次數。SpeedTest原型中定義了一個方法startTest,用來測試運行的時間，最后打印出運行總時間和平均時間。我們來看看如何使用它。
function LoopGood(){ var footballTeam={coach:"xiaohu",members:['羅納爾多','半澤直樹','費德勒']};var members = footballTeam.members;for (var i = 0, Length = footballTeam.members.length; i < Length ; i++) {console.log(members[i])}; } var speed = new SpeedTest(LoopGood,null,10000); speed.startTest();使用起來也很方便吧。
轉載于:https://www.cnblogs.com/xiaohu1986/p/5204190.html
總結
- 上一篇： Treesoft数据库管理系统使用说明
- 下一篇： Struts2+Spring+Hiber