性能优化面试题
preload（预加载） 和 prefetch 的区别
preload 是页面加载前加载，
prefetch 异最低优先级 lowest 来提前加载
preload 加载资源一般是当前页面需要，它告诉浏览器预先请求当前页面需要的资源
prefetch 一般是其他页面需要用到的资源
defer 或者 async
使用 Preload/Prefetch 优化你的应用
如何做页面的性能优化
1.减少体积（打包优化、babel 优化）
webpack 打包，使用 webpack content-hash
文件指纹是打包后输出的文件名的后缀
Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改Chunkhash：和 webpack 打包的 chunk 有关，不同的入口会有不同的 chunkhashContenthash：根据文件内容来定义 hash，文件内容不变，则 contenthash 不变2.延迟加载（资源的异步加载）
react 懒加载
3.网络加速（cdn、dns 预解析、http 并发数）
4.首屏渲染 （ssr、骨架图）
5.利用缓存（http 缓存）
本文看点
如何监控页面加载速度，指标是什么
如何对应用提速，性能优化的点有哪些
页面监控的指标有哪些
FCP（First Contentful Paint)：白屏时间（第一个文本绘制时间）
Speed Index：首屏时间
TTI（Time To Interactive）：第一次可交互的时间
lighthouse score（performance）：Chrome 浏览器审查工具性能评分
FCP（白屏时间）：是指从用户进入网站（输入 url、刷新、跳转等方法）的时刻开始计算，一直到页面有内容展示出来的时间节点
这个过程包括 dns 查询、建立 tcp 连接、发送首个 HTTP 请求、返回 html 文档、html 文档 head 解析完毕
有哪些软件可以监控到
百度、google...
如何提速
说白了是如何做性能优化，这里不说废话，从四个角度切入
前端工程化角度思考（以 webpack 为例）
webpack 方面的
构建时压缩图片、使用 webp 图片、优化 SVG 图标
框架角度
Vue 我不熟，仅 React 而言，可以从这几个方面来做功夫
如果是类组件的话，使用 pureComponent、shouldComponentUpdate
如果是函数式组件的话，可以使用 useMemo、useCallback、memo
useMemo 和 useCallback 的区别
memo 应该和 useMemo 结合
优化 UI 代码体积
使用 React.lazy 做代码分割
如果遇到列表，使用 key 做关键字，并可使用虚拟列表
关于虚拟列表的解决方案，我在这篇文章都写了
具体为懒加载、IntersectionObserver、getBoundingClientRect
HTTP 方面
使用 HTTP 缓存
升级为 HTTP2
服务器使用 gzip 压缩
OSS+CDN 加速
页面构建方面
CSS 放顶部、JS 放底部
减少回流和重绘
回流和重绘
script defer、async