歡迎光臨
每天分享高質量文章

對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 。

var foo = (12.4 / 4.13) | 0;//結果為3

var bar = ~~(12.4 / 4.13);//結果為3

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

var a = 1, b = 2; a = [b, b = a][0];

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

if (conditoin) alert(1), alert(2), console.log(3);

7、&&的妙用

var day = (new Date).getDay() === 0;

//傳統if陳述句

if (day) {

alert(‘Today is Sunday!’);

};

//運用邏輯與代替if

day && alert(‘Today is Sunday!’);

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

if (window.location != window.parent.location) window.parent.location = window.location;

原文出處: YouYaInsist 的部落格

贊(0)

分享創造快樂