前端性能优化笔记

一、性能优化的原则

• 多使用内存、缓存
• 减少CPU计算、减少网络请求

二、 性能优化入手点
2.1 页面和静态资源的加载

• 静态资源的压缩合并
  
  

  构建工具合并 ==> 
  

• 静态资源缓存
  静态资源由浏览加载一次后会有缓存，只要静态资源名字不改变，则访问浏览器的缓存。只有内容改变的时候，静态资源名字才会改变。

• 使用cdn让资源加载更快
  常用的cdn服务百度CDN库、360的CDN服务、新浪公共CDN库、BootCDN、又拍云CDN库、CDNJS.CN和开放静态文件CDN库。

• 使用ssr后端渲染
  好处：数据直接输出到html中进行渲染，而不需要使用ajax发送数据请求得到数据后再进行渲染。

2.2 页面的渲染

• css放在头部，js放在底部，因为js会阻塞页面渲染
  
  
  
  
  
  
  
  

• 懒加载（图片懒加载、下拉加载更多）
  实现原理：使用尺寸较小的图片作为预览图，在img的自定义数据属性data-realsrc里存储图片的真实src链接，当页面渲染到图片时再进行src的替换。

  
  
  
  

• 减少dom查询，对dom查询做缓存
  // 未优化
  for (var i = 0; i < document.getElementById('p').length; i ++) {
  // something to do
  }

  // 优化后
  var pList = document.getElementById('p')
  for (var i = 0; pList.length; i ++) {
    // something to do
  }
  

• 减少dom操作，多个操作尽量合并在一起执行
  var listNode = document.getElementById('list')
  // 要插入10个li标签
  var frag = document.createDocumentFragment()
  for (var x = 0; x < 10; x++) {
  li = document.createElement('li')
  li.innerHTML = 'List item' + x
  frag.appendChild(li)
  }
  listNode.appendChild(frag)

• 事件节流
  实现原理：设置事件的延迟执行，当用户快速持续地触发keyup事件时，只有最后一次触发才会执行。
  var input = document.getElementById('input')
  var timer
  input.addEventListener('keyup', function() {
  if (timer) clearTimeout(timer)
  timer = setTimeout(function() {
  // 触发事件
  }, 100)
  })

• 尽早执行操作
  window.addEventListener('load', function() {
  // 页面的全部资源加载完才会执行，包括图片、视频等，等待时间可能比较久
  })

  window.addEventListener('DOMContentLoaded', function() {
    // 渲染完即可执行，此时图片、视频可能还没有加载完。大部分框架使用此方法
  })