search

dave-wind / blog

native javascript blog
0 stars 0 forks source link

前端性能优化 #15

Open dave-wind opened 1 year ago

dave-wind commented 1 year ago

前端性能优化

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都加载完 再执行 最后执行
dave-wind commented 1 year ago

性能指标

https://developer.aliyun.com/article/773015

1.qps: 服务器每秒处理查询次数,用户发起查询请求到服务器做出响应这算一次
2.吞吐量
3.内存泄露问题:
使用memlab
https://facebook.github.io/memlab/docs/getting-started