載入資源優化

• 靜態資源的壓縮合並

  <script src="a.js"></script>
  <script src="b.js"></script>
  <script src="b.js"></script>
  //合併為以下檔案
  <script src="abc.js"></script>
  

• 靜態資源快取

  //通過連線名稱控制快取
  <script src="a_1.js"></script>
  //內容改變時，才改變連結名稱
  <script src="a.js"></script>
   
  
  

• 使用 CDN 讓資源載入更快
• 使用 SSR 後端渲染，資料直接輸出到 HTML 中

渲染優化

• CSS 放前面，JS 放後面

• 懶載入（圖片懶載入、下拉載入更多）

• 減少 DOM 操作，多個操作儘量合併在一起執行

  //快取查詢
  //未快取
  var i
  for (i = 0; i < document.getElementByTagName('p').length; i++) {
    //todo
  }
  //以快取
  var i
  var pList = document.getElementByTagName('p')
  for (i = 0; i < pList.length; i++) {
   
  
    //todo
  }
  

  //合併DOM
  var listNode = document.getElementById('list')
  var frag = document.createDocumentFragment()
  var x, li
  for (x = 0; x < 10; x++) {
    li = document.createElement('li')
    li.innerHTML = 'list item' + x
    frag.appendChild(li)
  }
  listNode.appendChild(frag)
  

• 事件節流

  var textarea = document.
   
  getElementById('text')
  var timeoutId
  textarea.addEventListener('keyup', function() {
    if (timeoutId) {
      clearTimeout(timeoutId)
    }
    timeoutId = setTimeout(function() {
      //todo
    }, 200)
  })
  

• 儘早執行操作（如：DOMContentLoaded）

  window.addEventListener('load', function() {
    //todo
  })
  document.addEventListener('DOMContentLoaded', function() {
    //todo
  })