IT工程師數位筆記本

變量......

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;