Open dave-wind opened 1 year ago
ssr 篇 一个通常的ssr项目 可以通过 LightHouse 在低网速情况下 去分析 跑分:
ssr 篇
一个通常的ssr项目 可以通过 LightHouse 在低网速情况下 去分析 跑分:
一般ssr 项目 可以解决spa项目的 fcp(First Contentful Paint) : 首屏渲染 lcp(Largest Contentful Paint): 最大内容绘制,是用来测量加载的性能: 阻塞lcp 的原因有:
缓慢的服务器响应速度 阻塞渲染的 JavaScript 和 CSS 缓慢的资源加载速度 客户端渲染
但是决定解决不了 (ttl)Time to Interactive 交互时间: 简而言之就是, 服务端渲染的弊端:导致页面看似具备交互性(可展示所有的内容)但是 并不能进行交互. 因为主线程 被阻塞,或者绑定控制dom的js事件并没有加载完或者注册成功 都会影响ttl ttl的评判标准 就是 页面长任务不能超过50ms,不能阻塞,js绑定事件都注册好
解决方法: 尽量减少 fcp lcp 时间
> 静态资源 优化 ```js link标签: // 俩连用 preconnect: 浏览器通过预先启动该资源域名 并建立连接 // 域名 dns-prefetch : 预获取,尝试请求资源之前解析域名, 可能是后面需要加载的文件。// 域名 prefetch :预请求 用户有可能未来需要加载的资源 script: 1.什么都不行 一般是比较重要的资源可以放在header头 比如 react ssr 需要加载vue runtime 可以放头部 会阻塞; 内部在异步 new Vue 2.async 加载完脚本 不执行 等到 浏览器空闲时间 在执行 3. defer 加载完脚本 等html dom都加载完 再执行 最后执行
https://developer.aliyun.com/article/773015 1.qps: 服务器每秒处理查询次数,用户发起查询请求到服务器做出响应这算一次 2.吞吐量 3.内存泄露问题: 使用memlab https://facebook.github.io/memlab/docs/getting-started
https://developer.aliyun.com/article/773015
1.qps: 服务器每秒处理查询次数,用户发起查询请求到服务器做出响应这算一次 2.吞吐量 3.内存泄露问题: 使用memlab https://facebook.github.io/memlab/docs/getting-started
前端性能优化
一般ssr 项目 可以解决spa项目的 fcp(First Contentful Paint) : 首屏渲染 lcp(Largest Contentful Paint): 最大内容绘制,是用来测量加载的性能: 阻塞lcp 的原因有:
缓慢的服务器响应速度 阻塞渲染的 JavaScript 和 CSS 缓慢的资源加载速度 客户端渲染
但是决定解决不了 (ttl)Time to Interactive 交互时间: 简而言之就是, 服务端渲染的弊端:导致页面看似具备交互性(可展示所有的内容)但是 并不能进行交互. 因为主线程 被阻塞,或者绑定控制dom的js事件并没有加载完或者注册成功 都会影响ttl ttl的评判标准 就是 页面长任务不能超过50ms,不能阻塞,js绑定事件都注册好
解决方法: 尽量减少 fcp lcp 时间