前端性能优化的意义
目标提升用户体验。
它的重要性体现在:更快的加载速度可以提高用户满意度,增加转化率,同时也能减少带宽消耗和服务器压力。
如何分析前端性能?
可以使用各种工具进行性能分析,如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/