zhentonglee
commented
3 years ago 性能指标：
FP（首次绘制） FCP（首次内容绘制 First contentful paint） LCP（最大内容绘制时间 Largest contentful paint） FPS（每秒传输帧数） TTI（页面可交互时间 Time to Interactive） HTTP 请求响应时间 DNS 解析时间 TCP 连接时间
性能数据采集需要使用 window.performance API ， JS库 web-vitals：import {getLCP} from 'web-vitals';
性能优化常用手段：文件体积、缓存技术、预加载技术、网络传输、渲染方案。
文件体积：tree shaking、路由懒加载、element-ui按需加载、不变的第三方插件抽离成公共文件缓存、gzip压缩、压缩混淆代码
网络传输：CDN部署静态资源
缓存 ：主要有 cdn、浏览器缓存、本地缓存以及应用离线包
预加载 ：资源预拉取（prefetch）则是另一种性能优化的技术。通过预拉取可以告诉浏览器用户在未来可能用到哪些资源。
prefetch支持预拉取图片、脚本或者任何可以被浏览器缓存的资源。
在head里 添加
渲染方案： 静态渲染（SR） 前端渲染（CSR） 服务端渲染（SSR） 客户端渲染（NSR）：NSR 数据请求，首屏数据请求和数据线上与 webview 的一个初始化和框架 JS 初始化并行了起来，大大缩短了首屏时间。
其他： 使用骨架屏 使用 lazyload 和 placeholder 提升加载体验。
提升页面性能的方法 1、资源压缩合并，减少HTTP请求 2、非核心代码异步加载 -> 异步加载的方式 -> 异步加载的区别 3、利用浏览器缓存 -> 缓存的分类 -> 缓存的原理 4、使用CDN 5、预解析DNS
异步加载 1、异步加载的方式 动态脚本加载（利用script标签动态创建加载） defer：是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行。 async：是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关。
浏览器缓存 缓存的分类 1、强缓存（直接用本地缓存，不问服务器） Expires: 服务器绝对时间（弊端：浏览器和服务器时间可能不一致） Cache-Control: max-age=3600 相对时间 以上两个字段同时存在，以后者为准。
2、协商缓存（使用前询问服务器是否过期了） Last-Modified（服务器给的） If-Modified-Since（浏览器带给服务器）两个值相同 （弊端：修改时间变了，但是内容可能没变） Etag（服务器给的） If-None-Match（浏览器带给服务器）两个值相同
from memory cache 和 from disk cache，前者指缓存来自内存，后者指缓存来自硬盘
在浏览器接收到服务器响应后，会检测响应头部（Header），如果有Etag字段，那么浏览器就会将本次缓存写入硬盘中。
拉取缓存会出现200、304两种不同的状态码，取决于浏览器是否有向服务器发起验证请求。 只有向服务器发起验证请求并确认缓存未被更新，才会返回304状态码。
配置缓存时一定要切记，浏览器在处理用户请求时，如果命中强缓存，浏览器会直接拉取本地缓存，不会与服务器发生任何通信，也就是说，如果我们在服务器端更新了文件，并不会被浏览器得知，就无法替换失效的缓存。所以我们在构建阶段，需要为我们的静态资源添加md5 hash后缀，避免资源更新而引起的前后端文件无法同步的问题。
----------------------更新---------------------
纯异步渲染
当前主流的 SPA 的应用的默认渲染方式
优化：
其他优化方法：
直出同构
服务端渲染
直出渲染的耗时的大头还是在 CGI 接口的拉取上
接口的动静分离 直出 Redis 缓存
参考链接：https://juejin.im/post/5c3ff18b6fb9a04a0a5f76aa
------------------------更新------------------------
参考链接：https://juejin.im/post/5b6fa8c86fb9a0099910ac91