本文章適合于與作者一樣想要學習JavaScript的的"非前臺專業"的大學生或者后臺工程師.

如果,你想進行進一步的優化,那么請點擊JavaScript性能優化小知識點總結

個人筆記整理:


一.縮短代碼下載時間?
源碼 如下:



window.οnlοad=function love(){var words=new Array("這是一個數組");var str=words.join("")var i= 0;var arr=str.split("");var timer = document.getElementById("text").innerHTML(function (){document.getElementById("text").innerHTML = document.getElementById("text").innerHTML +arr[i];i++;}},200); }

A.將之前為了提高可讀性命名的長的變量名，函數名重新命名.(這一步建議放在較后位置)?
個人推薦一個在線工具網站: 在線工具箱

window.onload = function L() {var w=new Array("這是一個數組");var w=words.join("")var i= 0;var a=s.split("");var t = setInterval(function() {if (i < s.length) {document.getElementById("text").innerHTML = document.getElementById("text").innerHTML + a[i];i++;}}, 200); }



B. 使用JavaScript的簡略語法?
1. 減少語句聲明.將布爾值改為1&0，?
2. 將new Array() ?& ?new Object用“[]” and “{}”替代等等(其實這樣也可以縮短運行時間).?
3. 在條件非語句中使用邏輯非操作符“！”來替代.?
4. 合理使用”+=”,以及”-=”


window.onload = function L() {var w = ["這是一個數組"],s = w.join(""),i = 0,a = s.split(""),t = setInterval(function() {if (i < s.length) {document.getElementById("text").innerHTML += a[i];i++;}}, 200);}if(s!=null) 可以改為 if(!s)

C.let與var的區別?
手冊：使用 let 來聲明常量,使用 var 來聲明變量。一個常量的值在編譯時并不需要獲取,但是你只能為它賦值一次。也就是說你可以用常量來表示這樣一個值:你只需要決定一次,但是需 要使用很多次。

window.onload = function L() {let w = ["這是一個數組"];var s = w.join(""),i = 0,a = s.split(""),t = setInterval(function() {if (i < s.length) {document.getElementById("text").innerHTML += a[i];i++;}}, 200);}



D.去除不必要的字符，包括注釋，不必要的空格，換行.可以使用格式化工具,現實中,這是優化的最后一步.?
個人推薦: 在線工具箱


window.οnlοad=function L(){let w=["這是一個數組"];var s=w.join(""),i=0,a=s.split(""),t=setInterval(function(){if(i<s.length){document.getElementById("text").innerHTML+=+a[i];i++}},200)}



二.合理聲明變量


注意:Javascript是執行前對整個文件的聲明部分做完整分析(包括局部變量)，從而確定實變量的作用域。


直接上代碼


function fuTestConsoleLog(){var intTestA=0;intTestB=0; }funtion test1(){console.log(intTestA);//未聲明//因為顯式聲明為局部變量,函數執行之后,銷毀. }funtion test2(){console.log(intTestB);//可以,因為隱式聲明為全局變量,瀏覽器關閉后銷毀. }



下面是一段引用,來自前端開發指南|菜鳥教程


過分依賴全局變量是我們組所有人 – 特別是我自己 –特別有負罪感的一件事。
關于為啥全局變量不好的討論是相當直接的：這增加了腳本和變量沖突的概率，而且源文件和命名空間本身都會充斥著數不清的命名模糊的變量。 Douglas Crockford 堅信一個Javascript應用的代碼質量可以用其中使用的全局變量數來評價，越少越好。
由于并不是什么都可以定義成local的（不過要誠實，其實你現在考慮的那個是可以的，別偷懶），你需要想辦法整理你的變量以避免沖突，并把命名空間的膨脹減到最小。最簡單的方法就是采用單變量或者把用到這些全局變量的模塊盡可能減少。?
Crockford提到YUI只用了一個全局變量，YAHOO。他在他的博文 “全局統治” 中討論了更多的細節問題。 考慮這種情況：對于小型web應用，全局變量通常用于保存應用級的設置，可以用你的項目名或者settings作為命名去定義一個對象，這樣總的來說會更好
// 被污染的全局命名空間?
ar settingA = true; ?
var settingB = false;?
var settingC = "test"; ?
var settings = { settingA: true, settingB: false, settingC: "test" }?
我們可以通過避免使用全局變量來減少沖突概率，但是把命名空間標準化成一樣的，豈不是會增加各個應用之間產生沖突的概率么？呃，這個擔憂確實有道理。所以，建議你用自己特定的應用名作為全局變量的命名空間，或者用和jQuery采取的$.noConflict() 模式相同的方法重新分配你的命名空間. ?
var myAppName = { settings: { settingA: true } }?
//訪問全局變量 ?
myAppName.settings.settingA;?

// true

三.使用內置函數縮短編譯時間


JavaScript內置函數庫使用無需編譯,而開發者編寫的函數需要在運行前進行編譯,所以內置函數要比自己編寫的函數快得多.


四.合理使用if,switch語句?
1. 判斷超過兩種時,switch快于if,而且其case分句,支持任何類型的數據.?
2. if語句,應當按照各種情況按可能性大小排列?
3. 及時”break”&”continue”跳出,避免運行無用語句?
4. 循環的性能,提前緩存,避免重復計算.(其實,在其他地方提前緩存也很重要,此處一提,不再重復.如需學習,自行百度).


舉個栗子:

var aTest = new Array(1024);for (var i = 0; i < aTest.length; i++) {// 長度計算1024次}for (var i = 0, len = aTest.length; i < len; i++) {// 計算一次}



個人推薦?
本文引用?
本文中引用來自于一篇很好的文章,個人比較推薦,更多細節請點擊前端開發指南|菜鳥教程 觀看,原文javascript部分目錄如下:


1. 代碼留空和格式
2. 注釋
3. 總是使用 === 比較符
4. 使用 .parseInt() 的時候，總是指定第二個 'radix' 參數
5. 避免比較 true 和 false
6. 避免污染全局命名空間
7. 駝峰法變量命名
8. 循環的性能 - 緩存數組長度
9. 循環的性能 - 使用 'break;' 和 'continue;'
10. 函數調用不要傳輸太多的參數
11. 把 'this' 映射為 'self'
12. 我能用 Boolean 嗎？
13. 盡量減少重新繪制和重新布局
14. 不要用微秒來產生唯一的ID
15. 檢測特性，而不是檢測瀏覽器類型
16. 使用可讀的毫秒數
關于高級篇?
當然其實還有一篇更詳細,更干貨的JavaScript性能優化高級篇(“JavaScript性能優化小知識總結”,不是我寫的),值得你看看JavaScript性能優化小知識點總結

總結

以上是生活随笔為你收集整理的JavaScript优化基本篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。