性能优化相关
1.如何优化首屏加载速度？
- 关键css内联：将首屏相关的css内联到html中，避免css渲染阻塞
- 图片懒加载：非首屏的相关图片配置懒加载，当需要时再加载，减少性能
- 合并压缩文件：通过构建工具合并js 和css文件，减小打包体积
- 通过代码分割,按需加载可以提高加载速度，包括：
- 路由分割-路由懒加载：通过配置动态语句import 实现路由懒加载，当跳转页面时再加载组件；
- 组件分割：vue2通过import 动态引入组件，vue3通过defineAsyncComponent；
- 第三方库分割：在config.js中配置
- 使用ssR服务端渲染：在服务端生成首屏HTML内容，减少客户端渲染的时间
- 开启Gzip压缩-服务器配置
2.如何利用浏览器缓存优化性能？
首先浏览器缓存机制包括了强缓存和协商缓存，都是通过配置HTTP缓存头控制的
强缓存：是通过ceche-control设置的；
协商缓存：当强缓存失效时，浏览器携带缓存标识想服务器发送请求验证资源是否过期？
优化策略：静态资源通过设置强缓存一年，并配置文件名哈希自动更新缓存实现；HTML文件配置no-cache,每次都要验证更新避免用户看到旧页面；
service-worker:通过前端配置js实现离线缓存
3.如何优化SPA应用的首屏加载速度？
主要是通过代码分割 按需加载：组件分割、路由分割
- 异步加载组件 在vue2中通过import 语法，vue3中通过defineasyncComponents异步加载组件
- 路由懒加载，也是通过import动态引入
- 预加载关键字体
- 关键css内联HTML 非关键css异步加载
- 对图片进行压缩处理、懒加载图片；
- 可以通过服务端渲染SSR 首屏HTML 提高加载速度；
- 骨架屏：提升用户的页面等待体验；
- 利用浏览器缓存，对静态资源设置长缓存
- 使用webpack 压缩js 和css,减小打包体积；
4.如何进行性能监控？
进行性能监控的目的是为了识别解决性能瓶颈，提高用户体验；性能监控分为了2种环境：
实验室监控：在预发布环境下通过lighthouse\webpageTest对应用进行全面的性能分析，后者可以实现可视化瀑布图；
真实用户监控：在生产环境下，通过web vitals+sentry 或者 chorme analytycs等工具采集真实用户的性能数据；还可以通过performance API获取性能数据
进行性能监控流程首先是
- 制定并确认核心性能的指标，包括；
- LCP：最大内容渲染的时长
- FID：首次输入的延迟
- CLS：累计布局的偏移
- FIN：交互的延迟
- 等。
- 在预发布环境下通过lighthouse 进行性能测试
- 发现并处理性能问题
- 验证处理后的性能效果
- 部署到生产环境下，采集真实用户的性能数据
- 发现性能问题收集问题在预发布环境复现并开始重复以上流程步骤；
性能监控是一个持续化的过程，要及时发现和解决，不断的改进和优化；
5.什么是reflow 重排和repaint 重绘？如何避免？
重绘：当元素的外观、样式改变但不影响布局时，浏览器会重新绘制元素叫重绘；
重排：元素的尺寸、布局隐藏等改变需要重新构建的过程叫重排，重排需要更新整个渲染树，性能成本很高；
常见的导致重排的操作有：
动态添加、删除、修改DOM节点；改变元素的位置、尺寸、字体大小；改变窗口大小；激活伪类等等。。
避免、优化的方法：
批量修改dom：使用documentfragment
避免逐条修改样式：使用class 代替style ,直接修改类选择器的样式，一次性修改多个样式
避免在频繁读取布局属性
使用transform和opcity 进行动画，不会触发重绘
6、如何优化渲染性能？
- 减少重绘和重排：
- 避免多次修改DOM，使用DocumentFragment批量修改dom
- 避免交替读写布局属性：offsetwidth；
- 使用transform,opcity做动画，触发GPU加速
- 优化JS的执行
- 避免长任务的执行，使用settimeout 分片或者 requestIdleCallback
- 使用节流和防抖
- 虚拟化长列表：针对大的数据，只渲染可视化区域，避免一次加载大量DOM；
- 优化CSS ：避免选择器嵌套过深
- 图片进行压缩处理，使用图片懒加载
- 关键资源内联HTML
- 路由懒加载
- 按需加载组件、UI库等；
- 减少HTTP请求：
- 使用webpack 合并js 和css文件；
- 对于静态资源可以使用长缓存策略；
高频面试题：
浏览器缓存机制的区别
虚拟dom为什么快？