运行环境：关于前端性能优化的原则及方法

性能优化目的

让网页加载更快，渲染更快，运行更流畅

性能优化原则

多使用内存、缓存或其他方法；
减少CPU计算量，减少网络加载耗时

性能优化方法

1. 让加载更快

• 减少资源体积：压缩代码（利用 webpack ）
• 减少访问次数：合并代码（利用 webpack ），SSR服务器端渲染，缓存
• 使用更快的网络：CDN

2. 让渲染更快

• CSS 放在 head 中，JS 放在 body 最下面

• 尽早开始执行JS，即用 DOMContentLoaded 触发事件

• 懒加载（图片懒加载、上滑加载等）

• 对 DOM 查询进行缓存

  将DOM查询一步操作存放到变量中，JS中通过变量来对DOM进行操作，节省了浏览器再次在DOM树中遍历查找同一个元素的时间

• 频繁 DOM 操作合并到一起再插入DOM结构

  利用 createDocumentFragment 文档片段，将多个DOM操作追加到文档片段中，之后再一次将文档片段插入到DOM树中，减少DOM操作

• 节流 throttle 、防抖 debounce
  节流及防抖知识点：手写防抖和节流以及二者的区别

关于缓存

在webpack中配置静态文件名加hash后缀，会根据文件内容计算hash值；

而文件内容不变，则hash不变，url也不变；

url和文件不变，就会自动触发http的缓存机制，服务器返回304状态码（内容为修改）。

（文件内容改变，则hash变，url变，服务器返回新的数据，文件重新加载）