加快JS檔案載入速度

• 最有效的減少初始載入的檔案體積和載入次數
• 延遲載入：避免程式碼載入和執行過程阻止頁面的解析
• 儘量把js放在body的底部
• 使用成熟的載入框架HeadJS，RequireJS，LABjs
• 最佳實踐提高效能：
  
  • 少用for-in迴圈
  • 謹慎使用eval
  • 正確使用陣列
  • 儘量不使用全域性變數
  • 確保解除已經不需要的事件監聽，如要那些要移除的DOM物件上繫結的事件
  • 不要在閉包中返回外部不需要的物件
  • 減少變數訪問時在作用域鏈上查詢的層級，最好定義為區域性變數

高效的DOM操作

• 在瀏覽器中DOM和ES的實現是分離的
• 在IE中ES在jscript.dll中，而DOM在mshtml.dll中
• 在chrome中，使用webkit中的webcore處理DOM和渲染，在V8中處理ES
• 減少DOM操作的最佳實踐：
  
  • 合併多次的DOM操作為單次的DOM操作
  • 把DOM元素離線或隱藏後修改
    
    • 使用文件片段
      var fragment = document.createDocumentFragment();
      document.getElementById(‘myElement’).appendChild(fragment);
    • 通過設定DOM元素的display樣式來設定none來隱藏元素
      var myElement = document.getElementById(‘Myelement’);
      myElement.style.display = ‘none’;
      …..DOM操作
      myElement.style.display = ‘display’;
    • 克隆DOM元素到記憶體中
      var myElement = document.getElementById(‘Myelement’);
      var clone = myElement.cloneNode(true);
      …..DOM操作
      myElement.parentNode.replaceChild(clone,myElement);
  • 謹慎取得DOM元素的佈局資訊
    
    • 把佈局資訊提取出來，在連續對DOM進行操作，這樣會優化連續的DOM操作，這樣只會重排一次
• 使用事件託管方式繫結事件
  
  • 繫結事件會佔用事件
  • 瀏覽器儲存事件繫結會佔用記憶體
  • 採用冒泡機制，只在父元素上繫結事件，用於處理所有的子元素
    document.getElementById(‘list’).addEventListener(“click”,function(e){
    if(e.target && e.target.nodeName.toUpperCase == “LI”){
    //針對子元素進行處理
    …..}})
• 高效能網頁，達到理想要求60幀/秒,30幀/秒
• Timeline：黃色佔有很大的部分，則效能瓶頸在JS上，如果記憶體有異常，則要仔細檢查記憶體溢位
• 使用測試工具：線上jsPerf，JSLitmus

高效能的JS

• xss:跨站點指令碼攻擊
• CSRF:跨站請求偽造，誘導使用者發出請求
• 介面操作劫持：點選劫持和拖放劫持
• DDos攻擊：藉助於客戶/伺服器技術，將多個計算機聯合起來作為攻擊平臺，對一個或多個目標發動DDoS攻擊，從而成倍地提高拒絕服務攻擊的威力
• 使用html5中的CORS，或者使用白名單或者CookieToken來進行限制
• 安全使用cookie，js不安全，儲存資料最好使用localStorage
• 如果cookie含有敏感資訊，使用Cookie的Secure設定
• Cookie中的Domain（域）和path（路徑），設定這兩個屬性把範圍縮小，避免不相關的路徑或者域中訪問到cookie
• 防止網頁被其他網站內嵌為iframe
• 從瀏覽器相容性上來說，指令碼的方式是目前用來阻止網頁被內嵌的最佳方式
• X-Frame-Options:DENY,SAMEORIGIN,ALLOWFROM uri分別表示禁止，允許相同及特定域頁面
• 僅僅禁止被內嵌，設定X-Frame-Options是最簡單有效的方案