前端面试题

Appearance

性能优化指标 ​

  • FP（First Paint）：首次绘制时间，指浏览器首次在屏幕上渲染像素的时间，代表页面开始渲染的时间点。它是评估页面渲染速度的重要指标。
  • FCP（First Contentful Paint）：首次内容绘制时间，是页面首次绘制任何有内容的像素到屏幕上的时间，代表页面首屏加载的时间点。
  • LCP（Last Contentful Paint）： 最大内容绘制时间，指页面上最大的可见元素（文本、图像、视频等）绘制完成的时间，代表用户视觉上感知到页面加载完成的时间点。它是评估页面内容加载速度的重要指标之一。
  • FMP（First Meaningful Paint）： 首次有意义绘制
  • DCL（DOM Content Loaded）：表示浏览器完成解析 DOM 树并完成加载页面的时候。它通常用于评估页面脚本的加载性能。
  • TTI（Time to Interactive）：用户可交互时间，指页面加载完成并且用户能够与页面进行交互的时间，代表用户可以开始操作页面的时间点。
  • TBT（Total Blocking Time）：页面总阻塞时间，页面上出现阻塞的时间，指在页面变得完全交互之前，用户与页面上的元素交互时出现阻塞的时间。TBT应该尽可能小，通常应该在300毫秒以内。
  • SEO（Search Engine Optimization）：搜索引擎优化，网站在搜索引擎中的排名和可见性。评分范围从0到100，100分表示网站符合所有SEO最佳实践。
  • 请求次数和大小

FP 和 FCP 上面两个可以通过浏览器提供的 api 来实现 Performance api，FMP 一般都是 Mutation Observer 监听到 DOM 变化

具体指标 ​

DCL 和 L ​

  • DCL：DOMContentLoaded 事件，表示浏览器完成解析 DOM 树并完成加载页面的时候。（无需等待样式表、图标和子框架的完全加载）
  • L：Load 事件，表示浏览器完成加载页面，包括所有子框架（比如嵌套的 iframe）加载完成。（需要等待样式表、图标和子框架的完全加载）

由于目前大部分项目是 SPA 单页面应用，由 js 加载页面，所以 DCL 和 L 就不能够很好的衡量页面性能了。

FP、FCP 和 LCP ​

  • FP：首次绘制时间，指浏览器首次在屏幕上渲染像素的时间。（也就是白屏时间）
  • FCP：首次内容绘制时间，是页面首次绘制任何有内容的像素到屏幕上的时间。
  • LCP： 最大内容绘制时间，指页面上最大的可见元素（文本、图像、视频等）绘制完成的时间。

FP 可能会和 FCP 同时触发，不可能会晚触发。