2. 性能优化.md

性能优化

原则

• 多实用内存、缓存或者其他方法

• 减少 CPU 计算、减少网络

从哪里入手

1. 加载页面和静态资源

2. 页面渲染

加载资源优化

• 静态资源的压缩合并（将多个文件合并为一个文件，减少请求）

• 静态资源缓存

• 使用 CDN 让资源加载更快

• 使用服务端渲染 ( SSR ) ，数据直接输入到 HTML 中

渲染优化

• CSS 放前面，JS 放后面

• 懒加载（图片懒加载、下拉加载更多）

• 减少DOM查询，对DOM查询做缓存

• 减少DOM操作，多个操作尽量合并在一起执行

• 事件节流

• 尽早执行操作（如 DOMCotentLoaded）

示例

• 缓存

  通过链接名称控制缓存，只有内容改变的时候，链接名称才会改变

  <script src="abc_1.js"></script>
  <script src="abc_2.js"></script>

• CDN

  从最近的服务器获取资源

• 使用 SSR 后端渲染

  将数据直接输入到HTML中，浏览器拿到HTML后直接渲染数据，不需要ajax请求，提高性能。

• 懒加载

  给浏览器赋值缓存过的很小的图片，当用户滑动网页到该位置时才加载图片。

  <img id="img1" src="preview.png" data-realsrc="abc.png"/>
  <script>
  	var img1 = document.getElementById('img1')
      img1.src = img1.getAttribute('data-realsrc')
  </script>

• 缓存DOM查询

  var pList = document.getElementByTagName('p')
  // 多次用到的DOM元素赋值给变量进行缓存

• 合并DOM插入

  var listNode = documnet.getElementById('list')
  // 插入10个 li 标签
  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) // 10个li同时插入DOM结构中

• 事件节流

  var textarea = document.getElementById('text')
  var timeouId
  textarea.addEventListener('keyup', function(){
      if(timeoutId)
          clearTimeout(timeoutId)
      timeoutId = setTimeout(function(){
          // 触发change事件
      }, 500)
  })
  // 当用户输入间隔大于0.5s时触发事件，对于打字快的人，节省了很多事件，提升了性能

• 尽早操作

  window.addEventListener('load', function(){
      // 页面的全部资源加载完才会执行，包括图片、视频等
  })
  document.addEventListener('DOMContentLoaded', function(){
      // DOM 渲染完即可执行，此时图片、视频可能还没有加载完
  })
  // 一般情况下，应DOM渲染完时就开始执行js