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

發表於2015-01-06

變數……

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載入你的頁面

相關文章