本周黑板报 #2

减少抱怨，积极地去想问题的解决办法，问题与解决问题的办法总是同时存在的。这周开始看《写给大家看的设计书》，希望能入门提高下自己的产品审美

性能优化

图片格式优化

优化 LCP。通过将图片转 Base64 格式，可节省图片的解析、建连、下载时间。当然，Base64 字符串字节数增加导致 html 体积增大，继而网络传输数据量变多，会让 TTFB 指标恶化，需要权衡两者

web-vitals 上报存在问题

web-vitals 是 Chrome 官方定义的网页性能度量指标，如 FCP、LCP、CLS、TTFB 等，从客观数据维度上评价网页用户体验好坏，给予更好的 SEO 权重
其中 LCP 是最关键的指标，Largest Contentful Paint，顾名思义，最大内容绘制，指的是网页中最大的元素绘制在屏幕上的时间，官方要求 75 分位情况下，进入 2.5s 以内才算优秀：

它的原理就是利用标准 Web APIs 去计算，提供相应的库可上报各项性能数据 web-vitals，示例代码如下：

Copy
import {onCLS, onINP, onLCP} from 'web-vitals';

function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

还可安装 Web Vitals 插件轻松检测当前浏览网页的性能表现

可以开启配置在控制台打印、直接展示：

话说 b 站 ttfb 怎么这么差（doge

console 信息可以说是数据非常详尽。但是我发现一个问题，多开 Tab 浏览情况下，尽管新开页面已加载并预渲染完成，切到新页面后内容秒出，但 web-vitals 计算出来的 FCP、LCP 却与实际情况存在较大偏差，复现录屏如下：

只要新开页面，过一会儿再切换过去，就能复现。我打算后面给 chrome 或 web-vitals 提一个 issue 修掉，我提供一个思路，拿到用户实际首次进入页面的时间，为计时起始点，算 LCP，代码如下：

Copy
if (typeof document.hidden !== 'undefined') {
// 当前页面直接刷新时，计时起点
if (!document.hidden) {
window.firstInViewTime = 0;
console.log(
`Page is visiable in ${window.firstInViewTime} ms, right now.`
);
} else {
// 页面在后台加载
document.addEventListener(
'visibilitychange',
() => {
// 切换tab进页面
if (document.visibilityState === 'visible') {
window.firstInViewTime =
new Date() - window.performance.timing.navigationStart;
console.log(
`Page is visiable in ${window.firstInViewTime} ms, delayed.`
);
}
},
// 只触发一次，不反复触发
{
once: true,
}
);
}
} else {
console.warn('Page visibility API is not supported in the browser.');
}

这段临时代码托管在 StackBlitz，那么是否可以用 onLCP 回调中 LCP 值减去该值作为正确的 LCP 上报值呢？🤔

摸鱼收获

内容驱动 Web 开发框架

Astro 框架里有个 “Island architecture” 的概念，与 SPA 应用相反，SPA 依赖所有 bundle js 的执行去创建完整页面内容，而 js 是解析 + 渲染双阻塞资源拖慢网页性能。Astro 将页面看作一片海，所有页面模块 / 组件都漂浮在上面，其中可交互 / 存在交互的模块就是 “Island”，岛屿🏝️，不同岛屿之间相互隔离，可相互通信，因此 Astro 同时支持多框架模块同时在一个页面上存在

按需加载。“Island” 基于 partial & selective hydration 技术，利于性能优化，网页中大部分静态模块以 fast static html 形式存在，仅针对有交互的需要的模块按需加载 js；

并行加载，如下图中较为繁重的低优先级 Carousel island 不会阻塞高优先级 Header island，两者并行独立加载，Header 将更快具有交互性响应用户操作；

支持指令，明确声明模块各自的加载策略，详见 Template Directives Reference；

一款开源图标库

lucide 为开发者 / 设计师提供快速图标引入方案，不同前端框架都有相应的package支持

代码层面也考虑到了性能优化，对 SVG 做了压缩同时，支持tree-shaking能力

一款开源组件集

shadcn/ui 提供了众多设计好的组件集合，可通过 CV 大法 or CLI 轻松在项目中引入，高度可定制化，可打造属于自己的组件库。与 npm 包形式组件库相比，只提供基本实现，具体的交互、样式，开发者可自己进行修改

有趣的事

不同途径收获知识量比较

本周订阅 阮一峰的网络日志 中提到一个如何快速学习获取知识的一种方法，如上图所示。理论 + 实践可以收获部分知识，更多的知识将在实践中遇到的问题中学习，这让我想起了错题本、BUG。出现错误说明认知和理论不符有偏差，改正错误将加深对理论的理解

免费免登录摄影作品

pexels一个免登免费下载无水印视频 / 图片的摄影作品网站，提供热搜、排行榜、摄影大赛、博客与摄影故事等

设计工具集

freepik 有非常多的在线设计工具、图片处理工具，以及提供 icon 下载，不过免费版只能下 png 格式

海底电缆图

从 海底电缆图 这个网站可以看到全球海底电缆图的部署，全世界各个大陆就像电路板芯片，海底电缆就像是引线，两端的城市地点就像是引脚

查看 github 仓库 stars 趋势

star-history 是一个查看 github 仓库 stars 趋势的在线网站，支持嵌入 Markdown

同时也提供了 Chrome 插件

安装之后，打开任意仓库，单机插件即可看到 stars 趋势

React Digest

A carefully curated weekly newsletter for React developers.
为 React 开发者精心策划的每周通讯 —— React Digest

看了一篇 Understanding SSR with Hydration: Pros, Cons, and Scenarios for Software Architects 专门讲了与 SSR 相关的 Hydration，还不错，值得有事没事翻两篇文章阅读学习，有助于加深对 React 的了解