前端面试题

Appearance

首屏加载优化 ​

思考 ​

是什么原因首屏加载慢？

  • 网络延迟
  • 资源太大

原因 ​

  • JavaScript文件过大：SPA通常有很多 JavaScript 文件，如果这些文件的大小过大或加载速度慢，就会导致首屏加载缓慢。可以通过代码分割和打包、使用CDN等方式来优化加载速度。
  • 数据请求过多或数据请求太慢：SPA通过 AJAX 或 Fetch 等方式从后端获取数据，如果数据请求过多或数据请求太慢，也会导致首屏加载缓慢。可以通过减少数据请求、使用数据缓存、优化数据接口等方式来优化数据请求速度。
  • 大量图片加载慢：如果首屏需要加载大量图片，而这些图片大小过大或加载速度慢，也会导致首屏加载缓慢。可以通过图片压缩、使用图片懒加载等方式来优化图片加载速度。
  • 过多的渲染和重绘操作：如果在首屏加载时进行大量的渲染和重绘操作，也会导致首屏加载缓慢。可以通过尽可能少的DOM操作、使用CSS3动画代替JS动画等方式来优化渲染和重绘操作。
  • 网络问题：网络问题也会影响SPA首屏加载速度，比如网络延迟、丢包等。可以通过使用CDN、使用HTTP/2等方式来优化网络问题。

解决思路 ​

  • 网络延迟：

    • cdn
    • preload 预加载
    • prerender 预渲染

  • 资源太大：

    • 分包 chunk
    • 懒加载 lazyload
    • 公共资源 vender
    • 缓存
      • 强缓存
      • 协商缓存
      • 策略缓存 service worker
    • 服务端渲染
    • 局部 ssr（落地页、活动页、广告页）
    • pwa （结合 service worker 做离线缓存） 冷门

具体实现 ​

1. preload 预加载 ​

html
<link
  rel="preload"
  href="./a.js"
  as="script"
/>

在 vite / webpack 中，通过分包 chunk 的方式实现

vite 中，分包和不分包的区别 ​

路由懒加载(import())、第三方单独分包，就会在打包时，除入口文件外，都会使用 <link rel="preload"> 加载（分包主要还是缓存资源）

html
<script type="module" crossorigin src="/assets/index-BLCideB8.js"></script>
<link rel="modulepreload" crossorigin href="/assets/fast-deep-equal-BfsdOM8n.js">
<link rel="modulepreload" crossorigin href="/assets/json-schema-traverse-CSPPDTu_.js">
<link rel="modulepreload" crossorigin href="/assets/fast-uri-BIYmyj5I.js">
<link rel="modulepreload" crossorigin href="/assets/ajv-DYuNsTRa.js">
<link rel="modulepreload" crossorigin href="/assets/quill-nXBBh9Di.js">
html
<script type="module" crossorigin src="/assets/index-BxE-gmDE.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DtMSDXgb.css">

webpack 中，预加载采用魔法命名 ​

在动态导入语句中添加注释

js
import(/* webpackChunkName: 'count', webpackPreload: true */'./count')

2. 加载关键 css ​

什么是关键 css、如何提取关键 css

将提取到的 css 内联到 html 中，减少请求数，减少 css 加载时间

3. 开启 http2 server push ​

4. 延迟加载 ​

html
<script async></script> // 异步加载，不会阻塞页面渲染 加载完后立即执行
<script defer></script> // 延迟加载，不会阻塞页面渲染 会在所有元素解析完成之后执行

5. SSR 终极方案 ​

‌SSR（Server-Side Rendering）‌，即服务端渲染，是一种将页面渲染过程放在服务器端进行的技术。当服务器接收到用户请求后，通过后台模板引擎或服务器端框架将HTML模板与数据整合生成完整的HTML文件，然后将这份完整的页面内容一次性返回给用户。浏览器接收到这些HTML内容后，可以直接进行渲染，而不需要等待JavaScript的加载和执行，从而显著提升首屏加载速度和用户体验‌。

  • 优点
    • 提高首屏渲染速度：无需用户等待js加载和执行，即可看到完整内容，显著提升用户体验
    • seo优化：搜索引擎可以直接抓取完整的html内容
    • 共享链接时显示预览：在社交媒体上分享链接时，能够正确显示页面预览信息，增加内容的传播性
  • 缺点
    • 开发复杂度增加：需要服务器端和客户端的协同开发，增加了开发的复杂性和成本。
    • 服务器压力大： 每次请求都需要服务器生成HTML内容，增加了服务器的计算负担。
    • 状态管理复制（前后端共同管理状态）