本週黑板報 #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