變數……
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 的部落格