一篇搞定前端面试的性能优化

前端性能优化的意义

目标提升用户体验。
它的重要性体现在：更快的加载速度可以提高用户满意度，增加转化率，同时也能减少带宽消耗和服务器压力。

如何分析前端性能？

可以使用各种工具进行性能分析，如Chrome DevTools的Performance面板、Lighthouse、WebPageTest等，它们可以帮助我们检测页面加载时间、DOMContentLoaded事件触发时间、Time to Interactive(TTI)等关键性能指标，并给出针对性的优化建议。

前端性能指标 Web Vitals

在Chrome开发者工具的Performance面板中，有几个关键性能指标对评估网站性能和用户体验至关重要：

DOMContentLoaded（首次可交互时间）

表示初始HTML文档被完全加载和解析完成的时间点，此时DOM树已经构建完成，大部分脚本可以开始执行，但可能尚有图片、样式表、异步请求未完成加载。

First Paint（首次绘制）First Contentful Paint（首次内容绘制）

FP 用户可以看到浏览器首次绘制内容的时间点，标志着浏览器开始渲染页面的第一个像素。
FCP 表示页面渲染出第一个实质内容（如文本、图像、SVG等）的时间点，它是用户体验的一个重要里程碑。

FCP和白屏是一个概念吗

不是同一个概念，但它们紧密相关。

First Contentful Paint (FCP) 是一个网页性能指标，它衡量的是从页面开始加载到浏览器首次成功渲染任意类型的内容（例如文本、图像（包括svg）、非空白canvas元素等）所需的时间。这是用户感受到页面开始加载的一个明显视觉反馈点，标志着页面不再是一片空白。

而“白屏时间”通常指的是用户在打开网页到看到任何实质性内容之前的这段时间，页面呈现为白色或未渲染的状态。在某些情况下，FCP时间和白屏时间可能重叠，即当FCP发生时，意味着白屏状态结束，用户看到了页面上的第一个内容元素。

因此，优化FCP时间是减少白屏时间的一种有效手段，确保用户能尽早看到网页上有意义的内容。

Time to Interactive

（TTI，可交互时间）是提升网页性能和用户体验的重要环节

指的是页面的主要内容和界面已经足够稳定，用户可以开始与页面进行交互的时间点，这是一个综合性的性能指标，反映了页面的初步加载和执行JavaScript后达到稳定状态所需的时间。

Largest Contentful Paint

表示页面上最大的图像或文本块加载并渲染完成的时间点，常用于评估视觉加载的完成度。

衡量加载性能。 为了提供良好的用户体验，LCP 应在网页首次开始加载后的 2.5 秒内发生。

Resource Loading（资源加载）

Network面板显示了每个网络请求的详细信息，包括加载时间、大小、请求方法、响应状态码等，可以帮助优化资源加载顺序和减少加载时间。

以上指标都是评估页面性能的重要依据，通过分析这些指标，开发者可以针对性地进行性能优化，改善用户体验。

前端性能优化也就围绕着上面的问题展开。

降低TTI的方法，优化指标的方法，其他指标也都是这些策略

前端性能优化的基本策略

• 缩减和压缩资源（如CSS、JavaScript和图片）。
• 异步加载和延迟加载资源。
• 使用CDN加速静态资源访问。
• 代码分割与按需加载。
• 利用缓存机制，如HTTP缓存、Service Worker实现离线访问和预缓存。
• 优化CSS选择器和JavaScript执行效率，避免阻塞渲染。
• 服务端渲染（SSR）或静态站点生成（SSG）以改善首屏加载速度。
• 使用骨架屏或者占位图改善视觉加载效果。
• 考虑使用Web Workers处理复杂的后台计算任务。

请解释Critical Rendering Path（关键渲染路径）

并提出优化方案。关键渲染路径是指浏览器从接收到HTML文档开始，解析、构建DOM树、CSSOM树，最终合成渲染树并绘制到屏幕上的这一系列过程。优化方案包括：

• 将关键CSS内联在HTML中，保证首次渲染时样式可用；
• 尽量避免CSS和JavaScript阻止渲染的内容加载；
• 使用异步加载非关键资源；
• 合理组织CSS选择器，降低计算复杂度。

你如何处理长列表的渲染优化？

使用虚拟滚动技术，只渲染可视区域内的元素，减少DOM节点数量。
采用懒加载策略，当用户滚动接近底部时加载更多数据。
对于大量重复的UI元素，考虑使用复用（recycling）技术，如React中的shouldComponentUpdate、React.memo或Vue中的v-if配合key值管理等。

谈谈你对Service Worker的理解以及它在性能优化中的作用

Service Worker是一种运行在浏览器后台的脚本，它可以拦截网络请求、处理离线缓存，实现离线访问、预缓存关键资源等功能，极大提升了网页的加载速度和可用性。

其他更加具体的方案

Image Optimization

根据Web年鉴，图片占据了典型网站页面重量的很大部分，并且可能对您网站的LCP性能产生重大影响。
nestjs官网提出了对于网站图片资源的优化方法，他们封装了Image组件，是对的包装：

• 为不同设备提供不同尺寸的图片，使用性能更好的图片格式如：WebP and AVIF
• 避免图片在加载时页面抖动
• 图片懒加载

Font Optimization

为什么要用 SSR？

与客户端的单页应用 (SPA) 相比，SSR 的优势主要在于：

• 更快的首屏加载
• 更好的 SEO：搜索引擎爬虫可以直接看到完全渲染的页面

SSG

静态站点生成 (Static-Site Generation，缩写为 SSG)，也被称为预渲染，是另一种流行的构建快速网站的技术。

SSG 保留了和 SSR 应用相同的性能表现：它带来了优秀的首屏加载性能。SSG 仅可以用于消费静态数据的页面，即数据在构建期间就是已知的，并且在多次部署期间不会改变。每当数据变化时，都需要重新部署。

参考链接

优化网页速度

解决内存问题

https://developer.chrome.com/docs/devtools/memory-problems?hl=zh-cn

DevTools

https://developer.chrome.com/docs/devtools/?hl=zh-cn

分析工具

https://www.webpagetest.org/