前端首屏加载优化

1.首屏加载慢的原因

网络延迟
资源太大
服务器响应慢

1.网络延迟

首屏优化中网络延迟是一个重要的考虑因素，它直接影响到页面资源的加载速度和用户体验。
影响原因

后端服务器性能原因，导致响应速度慢，从而影响了首屏加载速度。
网络传输速度慢或网络状况较差，导致资源传输速度慢，从而影响了首屏加载速度。

解决方案

使用CDN（内容分发网络）,将静态资源部署到离用户最近的服务器上，用户在访问相关产品时可以就近获取资源，从而降低由于网络传输带来的部分延迟。这种方式在一定程度可以解决大多数因为距离而产生的网络延迟问题。（但值得注意的是，这种方式一般是需要更多的服务器资源，并且需要考虑服务器的负载均衡问题，会导致成本上升，需要综合考虑是否采用）
preload 资源预加载，提前加载关键资源，减少等待时间。这种方式在前端开发中主要体现为对js,css文件的预加载。

使用link标签的rel属性，设置为preload，可以告诉浏览器在解析HTML文档时，提前加载指定的资源。这种方式可以用来加载就是，css等文件。

prerender页面预渲染，通过预先生成完整的首页HTML文件，在用户访问时直接返回生成好的页面，前端无需再进行渲染，节省了前端渲染的操作，从而减少了首屏优化的时间。

使用webpack插件 prerender-spa-plugin来实现，该插件可以在构建时预渲染指定的页面，生成对应的HTML文件，并在用户访问时直接返回预渲染的页面。

2.资源太大

资源太大是首屏加载问题中的一个常见问题，它直接影响到页面的加载速度和用户体验。
影响原因

项目中的静态js文件，css文件过大，在首次加载时需要花费较长时间。
项目中的图片资源，多媒体资源等过大，在首次加载时需要花费较多的时间，从而影响了首屏加载速度。
项目使用的第三方库过大，在首次加载时需要花费较多的时间，从而影响了首屏加载速度。
首屏的http请求过多，导致浏览器需要花费较多的时间来处理这些请求，从而影响了首屏加载速度。

解决方案

chunk方案，一般指的是webpack的代码分割方案，在项目打包时将代码分割为多个chunk,在项目加载时每次只加载需要的chunk,从而减少首次加载的资源大小。
懒加载,特别适用于减少页面的初始加载时间和改善用户体验.懒加载是一种按需加载资源的技术，意味着资源只有在需要时才会被加载。这可以减少页面的初始负载，加快页面的显示速度，提升用户体验。

在项目中可以使用进入视口（Intersection Observer API）或滚动事件（scroll event）来检测元素是否进入视口，然后加载对应的资源。

缓存(强缓存，协商缓存，策略缓存)，使用缓存方式将一些必要的数据存储在本地，当下次访问时就可以通过本地读取，从而减少网络请求，加快页面加载速度。
SSR(服务端渲染)，通过服务端渲染框架，在服务端将页面的HTML渲染好，在用户端直接传输渲染好的HTML文件，从而减少客户端的数据请求和资源下载的时间。（这种方式也是性能优化的终极方案）
局部SSR(C端的一些广告页，活动页)，局部SSR是指在应用的某些部分或页面上实施服务端渲染的技术。与全站SSR不同，局部SSR只针对特定的页面或组件进行服务端渲染，这样可以减少服务器的负载，同时对用户体验和搜索引擎优化（SEO）有积极影响。
PWA（渐进式网络应用）,通过优化数据请求，首先满足基本功能的正常使用，现将基本数据和功能显示给用户，后续的其他功能可以通过异步的方式进行加载，从而减少首屏加载时间

2.首屏优化衡量指标

1. FP（首屏加载时间）

首屏加载时间（FP）通常指的是从页面开始加载到浏览器渲染出第一个像素点的时间，这个指标也常被称为白屏时间（First Paint）。具体来说，FP是页面加载过程中的一个重要性能指标，它衡量的是用户从输入网址到浏览器开始显示内容这段时间的长度。FP包括了从用户请求页面开始，到页面上有任何内容被渲染出来的时间，这个过程涉及到DNS查询、建立TCP连接、发送HTTP请求、返回HTML文档、以及HTML文档的head部分解析完成等步骤。

2. FCP（首屏内容加载时间）

首屏内容加载时间（FCP，First Contentful Paint）是一个重要的网页性能指标，它衡量的是用户在网页加载过程中首次看到内容的时间点。具体来说，FCP指的是从网页开始加载到网页内容的任何部分（如文本、图片等）首次呈现在屏幕上所用的时间。FCP衡量的内容包括文本、图片（包括背景图片）、<svg>元素或非白色<canvas>元素。一个快速的FCP可以增强用户体验，让用户感知到页面正在加载内容。为了提供良好的用户体验，网站的FCP最好不超过1.8秒，较好的FCP值为1.8秒或更短，而超过3.0秒则需要改进。

测量FCP的方法有多种，包括使用Chrome DevTools Performance面板、Lighthouse审计工具以及PageSpeed Insights等。这些工具可以帮助开发者了解和优化网页的FCP，从而提升网页性能和用户体验。

3. FMP(首次有效绘制时间)

**FMP（First Meaningful Paint，首次有效绘制时间）**是指页面主要内容开始呈现给用户的时刻。这个指标更关注于用户感知，即用户开始看到页面上他们认为“有意义”的内容。FMP是衡量用户看到网页主要内容的时间，是用户体验角度的一种重要的衡量指标。

FMP的计算方法较为复杂，没有现成的performance API，如果希望在监控中上报这个指标，可以自己使用MutationObserver计算。具体来说，FMP的计算涉及到**页面布局对象（Layout Object）逐步添加到布局树（Layout Tree）**上进行布局的过程。随着网页的加载与解析，浏览器会将布局对象逐步添加到布局树进行布局，FMP衡量的是用户看到网页主要内容的时间点。

FMP通常被认为是用户获取到了页面主要信息的时刻，也就是说此时用户的需求是得到了满足的，所以产品通常也会关注FMP指标。通常业界会将FMP的时间当成是首屏时间，虽然在绝对准确度方面不会相等，但是都可以精准的反映出当前页面的加载和渲染的性能情况

4. LCP(最大内容绘制时间)

LCP（Largest Contentful Paint，最大内容绘制时间）是衡量网页加载性能的关键指标之一，它指的是从页面开始加载到视口内最大的图片或文本块完全渲染的时间。LCP关注的是用户感知的主要内容加载速度，这通常包括页面上最显眼的元素，如大图像或文本块。

LCP测量的元素通常是用户视图范围内的元素，包括image、svg、video，通过url设置的背景，以及包含文本节点或内联子元素的块级元素。不包括不可见元素、全视口元素和低熵图片。根据谷歌的定义，一个良好的LCP得分是在2.5秒以内，这表示要求75%的用户能够在这个时间内看到页面的主要内容。如果LCP时间超过4秒，则被认为是“差”的用户体验。

测量LCP的方法有多种，包括使用Chrome的Performance面板、Chrome的Lighthouse、PageSpeed Insights以及使用PerformanceObserver API。LCP是Core Web Vitals中的一个关键指标，对于优化用户体验至关重要。

5. TTI(可交互时间)

**TTI（Time to Interactive，可交互时间）**是一个衡量网页性能的重要指标，它表示从页面开始加载到页面完全处于可交互状态所花费的时间。具体来说，TTI关注的是页面何时包含有用内容、主线程何时处于空闲状态并可以响应用户交互（包括注册事件处理器）。
页面达到完全可交互状态时，需要满足以下条件：

页面已经显示有用内容。
页面上的可见元素关联的事件响应函数已经完成注册。
事件响应函数可以在事件发生后的50ms内开始执行。

TTI的计算涉及到识别页面的首个5秒静默窗口期，即在这个窗口中，浏览器不应处理主线程上超过50毫秒的任何任务，也不应等待超过两个服务器响应请求。TTI的计量单位是秒，它通过利用长任务API中的信息推导出来，尽管某些性能监控工具中提供了TTI，但在撰写本文时，TTI并不是属于任何官方Web规范。

TTI是一个重要的性能指标，因为它不仅仅衡量页面的加载时间，同时也专注于页面的可交互性。一个良好的TTI分数可以降低CLS（累积布局偏移），并且TTI仍然是衡量用户在访问初期对网站的感知的相关指标
。尽管TTI可能不是核心网络指标（Core Web Vitals）的候选指标，并且可能不会直接影响我们在谷歌搜索中的排名，但仍然值得使用这个指标来提升用户体验。

注意：这个指标尤其在SSR（服务端渲染）中非常重要，因为SSR的页面在服务端渲染完成后，需要等待客户端的JavaScript代码加载并执行，才能达到可交互状态。

3.优化方案

1. 优化图片:推荐webp格式，在需求开发时控制图片的size。

使用WebP格式

WebP格式由Google开发，提供了比JPEG和PNG更好的压缩效率，这意味着在相同质量的情况下，WebP文件的大小可以更小。WebP支持无损压缩和有损压缩，可以根据不同的需求选择最合适的压缩方式。WebP格式支持透明度，这使得它在需要透明背景的场合比JPEG更为合适。
确保图片的尺寸适合其在页面中的显示大小，避免使用过大的图片，这样可以减少加载时间和带宽消耗。使用srcset和sizes属性提供不同分辨率的图片，让浏览器根据设备屏幕选择最合适的图片。
懒加载（Lazy Loading），对非首屏图片使用懒加载，即在图片进入可视区域时才开始加载，这样可以减少首屏加载时间，提升页面性能。

2. 延迟加载

延迟加载用于推迟非关键资源的加载时间，直到它们被实际需要时才加载。这可以提高应用的初始加载速度和性能，特别是在处理大型应用或页面时。

3. tree+shaking

Tree-shaking 是一个基于 ES Module 规范的 Dead Code Elimination（DCE）技术，它通过静态分析模块之间的导入导出，确定 ESM 模块中哪些导出值未被其他模块使用，并将其删除，以此实现打包产物的优化。

4. CDN + OSS

CDN（内容分发网络）和OSS（对象存储服务）是常用的优化方案，它们可以有效地提高网站的加载速度和性能。

CDN是一种将网站内容缓存到全球多个节点上的网络服务，通过将内容分发到离用户更近的节点，可以减少用户访问网站的时间，提高网站的加载速度和性能。CDN可以缓存静态资源，如图片、CSS、JavaScript等，也可以缓存动态内容，如API请求等。
OSS是一种对象存储服务，它可以将文件存储在云端，并提供全球访问能力。OSS可以存储任意类型和大小的文件，包括图片、视频、文档等，并且可以提供高可用性和高可靠性的存储服务。OSS可以与CDN结合使用，将静态资源存储在OSS上，并通过CDN进行分发，从而进一步提高网站的加载速度和性能。

5. 精简三方库，按需导入，国际化文件移除

精简三方库：
减少应用的体积，去除不必要的代码和功能，避免加载整个库中未使用的部分。分析项目依赖，移除不使用的库，或者替换为更轻量级的替代品。
按需导入：
仅加载应用中实际需要的代码，避免一次性加载整个库。使用ES6模块的导入语法（import），只导入需要的函数、组件或对象，而不是整个库。
国际化文件移除：
减少应用体积，特别是对于不需要多语言支持的应用，或者只保留应用需要的语言文件。

6. 缓存

缓存是一种常用的优化方案，它可以将静态资源存储在用户的浏览器中，从而减少对服务器的请求，提高网站的加载速度和性能。

HTTP缓存：
通过设置HTTP缓存头，如Cache-Control、Expires等，可以控制浏览器缓存静态资源，如图片、CSS、JavaScript等。当用户访问网站时，浏览器会检查缓存头，如果资源未过期，则直接从缓存中加载资源，而不需要再次向服务器请求。

Service Worker缓存：
Service Worker是一种运行在浏览器背后的脚本，它可以拦截网络请求，并缓存资源。当用户访问网站时，Service Worker会拦截请求，并检查缓存中是否有对应的资源。如果有，则直接从缓存中加载资源，而不需要再次向服务器请求。Service Worker还可以根据需要更新缓存，确保用户获取到最新的资源。

浏览器缓存：
浏览器缓存是一种自动的缓存机制，它将用户访问过的网站资源存储在用户的浏览器中，当用户再次访问这些资源时，浏览器会直接从缓存中加载资源，而不需要再次向服务器请求。浏览器缓存可以通过设置HTTP缓存头，如Cache-Control、Expires等，来控制缓存的策略和有效期。

7. 字体压缩font-spider ,webfont

字体压缩是前端性能优化中的一个重要方面，特别是对于使用自定义字体的网站来说。以下是两种常用的工具和方法：font-spider 和 WebFont 压缩。

font-spider：

font-spider 是一个智能的 WebFont 压缩工具，它能自动分析页面使用的 WebFont 并进行按需压缩。这个工具基于 HTML 和 CSS 的解析，智能地找出网页中用到的字体，并对其进行子集化处理，同时支持多种 WebFont 格式的转换，包括 woff2、woff、eot、svg 等。
font-spider 的工作原理包括构建 CSS 语法树，分析字体与选择器规则，使用包含 WebFont 的 CSS 选择器索引站点的文本，匹配字体的字符数据，剔除无用的字符，并编码成跨浏览器使用的字体格式。
使用 font-spider 时，首先需要在 CSS 中声明字体，然后通过命令行工具执行压缩操作。它还支持线上动态渲染页面和GBK编码文件的压缩。

WebFont 压缩：

WebFont 压缩通常指的是减少字体文件的大小，以加快网页的加载速度。这可以通过多种方式实现，包括使用更高效的字体格式（如 WOFF2），移除未使用的字符（字体子集化），以及使用压缩算法减少文件体积。
WebFont 压缩的一个关键点是按需加载，即只加载页面中实际用到的字体字符，这样可以显著减少字体文件的大小。

8. SSR,SSG

SSR（服务器端渲染）：

SSR是指在服务器上动态生成HTML页面的过程。这种方式下，服务器接收到客户端的请求后，会根据请求数据和模板文件生成完整的HTML页面，然后将这个页面直接发送给客户端。

这种方式的优势在于：SEO友好：搜索引擎更容易抓取服务端渲染的页面。
首屏加载快：用户无需等待所有JavaScript都加载执行完毕即可看到页面内容。
缺点包括：
服务器负载较高：因为每个页面请求都需要服务器计算和渲染。
TTFB（Time To First Byte）可能较长：由于需要在服务端渲染出更多的HTML片段
SSG（静态站点生成）：

SSG是将网站页面预渲染为静态HTML文件的过程。这种方式下，页面在构建时生成，并作为静态文件存储，通常部署在CDN上。SSG的优势包括：
更快的页面加载速度：静态页面可以被CDN缓存，并且不需要额外的服务器时间处理请求。