Web 性能优化

我们可以用 Stale-While-Revalidate 加速页面访问，策略分 3 步 在收到页面请求时首先检查缓存，如果命中缓存就直接从缓存中返回给用户 将缓存返回用户的同时，在后台异步发起网络请求

webpack 性能优化包括构建速度性能优化和打包结果页面性能优化，后者主要策略有 提出无用代码，减少构建体积 提取公共依赖，多脚本复用 首屏静态资源分离，异步加载 文件添加哈希，浏览器缓存复用 Tr

无限加载的商品瀑布流是电商最场景的最常用、最重要的组件，因此有一个高性能的瀑布流组件就变得无比重要 使用 Grid 布局，赢在起跑线 Grid 布局实现响应式非常简单，纯 CSS 实现，不依赖 JS

使用图片懒加载与异步解码、JavaScript 脚本异步加载、Dynamic import 组件按需加载、字体按需加载、content-visibility 延迟渲染等技术优化页面性能

你一定不知道还有这么多种预加载方式：dns-prefetch、preload、preconenct、Speculation Rules API、HTTP Link、HTTP/2 push、Early

说到性能优化前端同学肯定对雅虎军规特别熟悉，虽然随着网络技术的发展有些规则已经不合时宜，但其核心思想仍然在指导大部分 Web 开发者对页面进行性能优化 尽快建连（使用 CDN、预加载、减少 DNS 查

TTFB和FCP之间为什么这么大差距？CSS 应不应该内联？用户首次访问网站阻塞渲染的 X 因素是什么？

对电商网页的性能而言而言，图片优化是至关重要的事情，一个典型的电商网页加载的图片无论从数量还是字节数都不容小觑 而图片优化的思路非常清晰明了

一般情况下页面 LCP 元素是首屏最大的图片，可有时候发现 LCP 的元素竟然是文字区域。原来 web font 会影响页面的渲染