javascript
优化JS代码性能
優(yōu)化JS代碼性能
優(yōu)化循環(huán)
我們來(lái)看一段段代碼
function LoopBad(){ var footballTeam={coach:"xiaohu",members:['羅納爾多','半澤直樹(shù)','費(fèi)德勒']};for (var i = 0; i < footballTeam.members.length; i++) {console.log(footballTeam.members[i])}; }這段代碼循環(huán)footballTeam中的members數(shù)組，然后打印隊(duì)員。怎么優(yōu)化呢？首先f(wàn)ootballTeam.members.length可以緩存一下，footballTeam.members[i]也可以緩存一下，看一下下面的代碼就知道了。為什么要緩存呢，因?yàn)樵谘h(huán)中重復(fù)的去尋找屬性是沒(méi)有必要的，這里緩存一下是可以加快速度的。
function LoopGood(){ var footballTeam={coach:"xiaohu",members:['羅納爾多','半澤直樹(shù)','費(fèi)德勒']};var members = footballTeam.members;for (var i = 0, Length = footballTeam.members.length; i < Length ; i++) {console.log(members[i])}; }html中如何加載js代碼
我們?cè)趆tml中引用js一般來(lái)說(shuō)這么寫的
<!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>這里有很多內(nèi)容</div></body> </html>這時(shí)候js加載會(huì)影響html的顯示，有什么方法可以讓非必要的js后加載呢？
<!DOCTYPE html> <html ><head><meta charset="UTF-8"><title>Simple Map</title><link rel="stylesheet" href="css/style.css"></head><body><div>這里有很多內(nèi)容</div><script type="text/javascript" src="js/index.js"></script></body> </html>上面的代碼把js文件放在</body>前面，這樣html就會(huì)先被瀏覽器引擎渲染了。所以我們看到很多人都把js放在后面，不過(guò)放在前面畢竟復(fù)合閱讀習(xí)慣，好在現(xiàn)在有了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>這里有很多內(nèi)容</div></body> </html>使用原型節(jié)省內(nèi)存
我們來(lái)看看FootballTeam的構(gòu)造函數(shù)怎么定義的。FootballTeam的構(gòu)造函數(shù)有一個(gè)play函數(shù)，在里面打印一段話。這個(gè)構(gòu)造函數(shù)有什么問(wèn)題呢？問(wèn)題就是play函數(shù)在每個(gè)對(duì)象中都會(huì)存在
，浪費(fèi)內(nèi)存啊，創(chuàng)建對(duì)象也更費(fèi)時(shí)間。
最好移動(dòng)到原型中，節(jié)省內(nèi)存和創(chuàng)建對(duì)象的時(shí)間。
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操作
我們來(lái)看下面一段代碼，這段代碼增加很多足球隊(duì)員到list中，功能上是沒(méi)問(wèn)題的。但是在循環(huán)中，每次增加一個(gè)element到list中，都會(huì)讓瀏覽器reflow(重新載入)DOM樹(shù)。
var list=document.getElementById('mylist'); var members=['羅納爾多','半澤直樹(shù)','費(fèi)德勒']; for (var i = 0; i < members.length; i++) {var element=document.createElement('li');element.appendChild(document.createTextNode(members[i]));list.appendChild(element); };如何改進(jìn)這個(gè)代碼呢，我們只要緩存一下for循環(huán)中頻繁創(chuàng)建的li元素就可以了，看一下下面代碼。
var list=document.getElementById('mylist'),members=['羅納爾多','半澤直樹(shù)','費(fèi)德勒'],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的字符串拼接直接用＋號(hào)就可以了。但是下面的情況有更好的方法。
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]; }上面這段代碼可以這樣改進(jìn)
page = newPageBuild.join("\n");如何測(cè)試性能
瀏覽器提供了很多工具測(cè)試性能，這里分享一個(gè)用代碼簡(jiǎn)單測(cè)試性能的方法。
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類的構(gòu)造函數(shù)有三個(gè)參數(shù)，第一個(gè)參數(shù)是需要測(cè)試的函數(shù)，第二個(gè)參數(shù)是被測(cè)試函數(shù)的參數(shù)，第三個(gè)是重復(fù)的次數(shù)。SpeedTest原型中定義了一個(gè)方法startTest,用來(lái)測(cè)試運(yùn)行的時(shí)間，最后打印出運(yùn)行總時(shí)間和平均時(shí)間。我們來(lái)看看如何使用它。
function LoopGood(){ var footballTeam={coach:"xiaohu",members:['羅納爾多','半澤直樹(shù)','費(fèi)德勒']};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();使用起來(lái)也很方便吧。
轉(zhuǎn)載于:https://www.cnblogs.com/xiaohu1986/p/5204190.html
總結(jié)
- 上一篇： Treesoft数据库管理系统使用说明
- 下一篇： Struts2+Spring+Hiber