持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情
在日常写项目时，会有对页面性能提升的需求，比如页面卡顿。一般会用以下步骤来排查：
网络
- 查看网络是否通畅，可以通过ping网址和端口号来检查
- 查看DNS解析是否正常，cname指向是否正常
服务器
- 检查服务器代理是否正常，负载均衡是否正常
- 检查代理服务器的入口是否正常
- 检查服务器响应是否正常
- 服务器是否出错、宕机
- 数据库是否出错、宕机
页面渲染
- 弱网环境
- 使用长连接，使用gzip压缩传输，减少接口数量
- JavaScript报错
- 可在开发者工具中查看具体保存信息
- CSS阻塞
- 需要注意JavaScript和CSS的加载顺序
- 请求文件资源数量多，或者文件大
- 优化加载资源顺序，通过懒加载、骨架屏来进行优化
- 如果要加载大量的多媒体资源，可以预先进行压缩
- 有较多的JavaScript控制CSS的写法，导致浏览器不断layout和repaint导致卡顿
- 减少JavaScript的这类控制
- JavaScript线程长时间被占用
- 比如同步获取资源时，占用js进程，GUI就不能渲染，页面会白屏
- 出现了死循环的代码片段
- 比较可能出现在路由部分，尤其是路由守卫需要检查相关逻辑
- 内存泄漏
- 内存泄漏主要是代码运行时，使用的内存没有被及时释放，导致内存使用量不断累积造成的
- 可能发生内存泄漏的代码：
- 全局变量
- 闭包
- 没有及时清除定时器
- 循环引用
- 删除DOM时没有解除绑定事件
- DOM节点或内事件占用内存过大
- JavaScript执行时间过长
- 使用web worker开辟新线程，避免主线程阻塞
- 使用generator迭代器对任务进行分片
- JavaScript动画卡顿
- 使用requestAnimationFrame进行优化
总结
在经过问题排查得出结论并且优化后，可以通过开发者工具的performance和memory来对比前后变化，可能只有一个点的优化，可能会收获一个惊喜的性能提升。
