對JavaScript優化及規範的一些感想

發表於2015-01-06
JavaScript優化

變數……

1.一個變數只存一種型別的資料，
2.儘量減少對隱式轉換的依賴，這樣可增強程式的可讀性，日後修改程式時不至於混亂，
3.使用匈牙利命名法，
4.使用區域性變數時記得加 var 進行宣告，不然會與全域性變數衝突，

網站效能優化方面

1.在對當前DOM進行操作之前，儘可能多的做一些準備工作，保證N次建立，1次寫入。

2.在對DOM操作之前，把要操作的元素，先從當前DOM結構中刪除：

  • 通過removeChild()或者replaceChild()實現真正意義上的刪除。
  • 設定該元素的display樣式為“none”。

修改操作完成後，將上面這個過程反轉過來，建議使用第2種方式。

3.CSS部分
另外一個經常引起迴流操作的情況是通過style屬性對元素的外觀進行修改，如element.style.backgroundColor = “blue”;
每次修改元素的style屬性，都肯定會觸發迴流操作，要解決這個問題可以：

  • 使用更改className的方式替換style.xxx=xxx的方式。
  • 使用style.cssText = ”;一次寫入樣式。
  • 避免設定過多的行內樣式
  • 新增的結構外元素儘量設定它們的位置為fixed或absolute
  • 避免使用表格來佈局
  • 避免在CSS中使用JavaScript expressions(IE only)

4.將獲取的DOM資料快取起來。這種方法，對獲取那些會觸發迴流操作的屬性（比如offsetWidth等）尤為重要。

5.當對HTMLCollection物件進行操作時，應該將訪問的次數儘可能的降至最低，最簡單的，你可以將length屬性快取在一個本地變數中，這樣就能大幅度的提高迴圈的效率。
一、避免大字串字面量物件操作，如 字串.lenth，儘量轉換為new String(字串)後再進行操作
二、在做字元查詢替換等操作時善用正規表示式快速掌握ECMAScript正規表示式。
三、減少語句，利用運算子優先順序實現if else表示式，使用三元表示式，使用連續表示式（看情況，將損失程式可讀性）
四、將CSS，JS檔案合併到一個檔案（非BT愛好者還是不要玩了^_^）
五、避免Javascript事件繫結出現記憶體洩漏”These memory leaks often occur as a result of circular references between JavaScript objects and objects within IE’s DOM (document object model).” Microsoft GPDE Team Blog
六、使用WEB Workers技術（支援html5的瀏覽器）Web Workers為JavaScript提供了一種能在後臺程式中執行的方法，Web Workers程式能夠在不影響使用者介面的情況下處理任務。
七、Y!14條（14 Rules for Faster-Loading Web Sites）
* Rule 1 – Make Fewer HTTP Requests
* Rule 2 – Use a Content Delivery Network (Server端)
* Rule 3 – Add an Expires Header (Server端)
* Rule 4 – Gzip Components (Server端)
* Rule 5 – Put Stylesheets at the Top
* Rule 6 – Put Scripts at the Bottom
* Rule 7 – Avoid CSS Expressions
* Rule 8 – Make JavaScript and CSS External
* Rule 9 – Reduce DNS Lookups (Server端)
* Rule 10 – Minify JavaScript
* Rule 11 – Avoid Redirects (Server端)
* Rule 12 – Remove Duplicate Scripts
* Rule 13 – Configure ETags (Server端)
* Rule 14 – Make AJAX Cacheable
* Rule 15 – Use Iframes Wisely
八、微軟早期的DHTML優化建議 * 使用陣列push替代字串累加

javascript的and運算子的操作

邏輯AND運算的運算數可以是任何型別的，不止是Boolean值，如果某個運算數不是原始的Boolean型值，邏輯AND運算並不一定返回Boolean值
1）如果一個運算數是物件，另一個是 Boolean 值，返回該物件。
2）如果兩個運算數都是物件，返回第二個物件。
3）如果某個運算數是 null，返回 null。
4）如果某個運算數是 NaN，返回 NaN。
5）如果某個運算數是 undefined，發生錯誤。
6）如果兩個運算數都是boolean型別，則返回boolean值

javascript小知識點……

1、==和===的區別：”==” 只要求值相等; “===” 要求值和型別都相等
2、isFinite() 函式用於檢查其引數是否是無窮大，如果 number 是有限數字（或可轉換為有限數字），那麼返回 true。否則，如果 number 是 NaN（非數字），或者是正、負無窮大的數，則返回 false。
3、判斷空值用 val === null 即可

4、|0和~~是很好的一個例子，使用這兩者可以將浮點轉成整型且效率方面要比同類的parseInt,Math.round 要快.順便說句，
//!!將一個值方便快速轉化為布林值 !!window===true 。

5、不宣告第三個變數的值交換

6、對於傳統的if語句，如果執行體程式碼超過了1 條語句，則需要加花括號，而利用逗號表示式，可以執行任意條程式碼而不用加花括號。

7、&&的妙用

8、禁止別人以iframe載入你的頁面

相關文章