前端性能优化

性能优化策略：

多使用内存，缓存(前端没有对硬盘(IO:对硬盘读写)的操作)

减少CPU计算，减少网络请求，

1. 加载页面和静态资源(拿下来)

eg

静态资源合并压缩 webpack构建工具(??)

静态资源缓存(webpack build后会给文件名+hash)

使用cdn让资源加载更快(常见库有cdn)

使用SSR(???)数据输入到html页面，不需要ajax请求数据

3. 页面渲染(操作)

eg

css放前面，js放后面

lazy-load(图片先不加载，什么时候用，什么时候加载；下拉加载更多)

减少dom查询，对dom查询做缓存(???)

减少dom操作，多个dom操作尽量合并在一起执行(???)

事件节流(很频繁的操作合并到一个操作上)

尽早执行操作(如DOMContentLoaded)dom渲染完立即执行，不管静态资源

// 对dom查询做缓存
// 未缓存dom操作，每次循环都要进行dom查询
let i
for(i = 0;i < document.getElementsByTagName('p').length;i++){
  // todo
}

// 缓存了dom操作,查询了一次缓存在PList中
var PList = document.getElementsByTagName('p')
for(let i=0;i<PList.length;i++){
  // todo
}

*******************************************************
// 减少dom操作

// 插入10个li标签，
// 未减少dom操作
// 10次循环，每次把li标签插入到listNode中(10次dom插入)

// 减少dom操作
var listNode = document.getElementById('list')

var frag = document.createDocumentFragment()
var i,li
for(i=0;i<10;i++){
  li = document.createElement('li')
  li.innerHTML = ''
  frag.appendChild(li)
}
listNode.appendChild(frag)
*******************************************************
// keyup
// 事件节流

var textarea = document.getElementById('text')
var timeoutId

textarea.addEventListener('keyup',function(){
  if(timeoutId){ //如果还
    clearTimeout(timeoutId)
  }
  timeoutId = setTimeout(function(){
    // 触发change事件
  },100) //100ms后再触发
})