本周黑板报 #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，示例代码如下：

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，代码如下：

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；

无标题 - 2024-08-10-1900