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

xFeedBeta

@alifeiliu

alifeiliu·3 months ago

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

性能优化

图片格式优化

优化 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