前端性能优化的目的:
- 从用户角度而言:优化能够让页面加载得更快、对用户的操作响应的更及时，能够给用户提供更为良好的体验。
- 从服务商角度而言:优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
一、图片优化
- 小图使用雪碧图，iconFont
这是减少图像请求的有效方法，把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分；合并后的图片会比分离的图片总和要小，这是因为它降低了图片自身的开销。 - 图片使用懒加载（只加载屏幕可视区域内的内容）
- webp代替其他格式
- 图片一定要压缩
- 可以使用的img的srcset，根据不同分辨率显示不同尺寸图片，这样既保证显示效果，又能节省带宽，提高加载速度
二、封装函数
把重复使用的代码块，封装成函数，使加载速度更快
三、 css优化
- css写在头部
- 避免css表达式（Expressions）
- 移除空置的css规则
- 避免行内style样式
四、首屏优化
原则：显示快，滚动流畅，懒加载，懒执行，渐进展现
- 代码分离，将首屏不需要的代码分离出去
- 服务端渲染或预渲染，加载完html直接渲染，减少白屏时间
- DNS prefetch，使用dns-prefetch减少dns查询时间，PC端域名发散，移动端域名收敛
- 减少关键路径css，可以将关键的css内联，这样可以减少加载和渲染时间
五、合并文件
将脚本文件和样式表文件分别合并到一个文件中，可以减少HTTP请求的数量并缩短最终用户响应时间。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。
六、把JavaScript和CSS都放到外部文件中
七、压缩 JavaScript 和 CSS
压缩是指从去除代码不必要的字符减少文件大小从而节省下载时间。
方法：
1.去除不必要的空白符（空格、换行、tab缩进）、格式符、注释符
2.简写方法名、参数名来压缩js脚本
在 JavaScript中，由于需要下载的文件体积变小了从而节省了响应时间。
八、避免重定向
301(永久重定向)和302(临时重定向),这两个重定向用的比较多。
但是要记住重定向会降低用户体验。在用户和HTML文档中间增加一个跳转，会拖延页面中所有元素的显示，因为在HTML文件被加载前任何文件（图像、Flash等）都不会被下载。
九、DOM优化
1、缓存DOM
const div = document.getElementById('div')
由于查询DOM比较耗时，在同一个节点无需多次查询的情况下，可以缓存DOM
2、减少DOM深度及DOM数量
HTML 中标签元素越多，标签的层级越深，浏览器解析DOM并绘制到浏览器中所花的时间就越长，所以应尽可能保持 DOM 元素简洁和层级较少。
3、批量操作DOM
由于DOM操作比较耗时，且可能会造成回流，因此要避免频繁操作DOM，可以批量操作DOM，先用字符串拼接完毕，再用innerHTML更新DOM
4、批量操作CSS样式
通过切换class或者使用元素的style.csstext属性去批量操作元素样式
5、在内存中操作DOM
使用DocumentFragment对象，让DOM操作发生在内存中，而不是页面上
6、DOM元素离线更新
对DOM进行相关操作时，例、appendChild等都可以使用Document Fragment对象进行离线操作，带元素“组装”完成后再一次插入页面，或者使用display:none 对元素隐藏，在元素“消失”后进行相关操作
7、DOM读写分离
浏览器具有惰性渲染机制，连接多次修改DOM可能只触发浏览器的一次渲染。而如果修改DOM后，立即读取DOM。为了保证读取到正确的DOM值，会触发浏览器的一次渲染。因此，修改DOM的操作要与访问DOM分开进行
8、事件代理
事件代理是指将事件监听器注册在父级元素上，由于子元素的事件会通过事件冒泡的方式向上传播到父节点，因此，可以由父节点的监听函数统一处理多个子元素的事件，利用事件代理，可以减少内存使用，提高性能及降低代码复杂度
9、防抖和节流
使用函数节流（throttle）或函数去抖（debounce），限制某一个方法的频繁触发
10、及时清理环境
及时消除对象引用，清除定时器，清除事件监听器，创建最小作用域变量，可以及时回收内存
