提升前端性能：深入了解前端性能分析与优化

提升前端性能：深入了解前端性能分析与优化

前端性能的重要性和影响

1. 用户体验：

   快速加载时间和流畅的用户体验是用户对网站或应用程序的首要期待。优化前端性能可以显著加速页面加载速度，减少等待时间，提高用户满意度。

2. 用户留存率和转化率：

   用户在面对加载缓慢的网站时往往会选择离开，这会导致较高的跳出率。通过提升前端性能，可以降低跳出率，提高用户留存率，增加转化率。

3. 搜索引擎优化（SEO）：

   搜索引擎对网站的加载速度有一定程度的考量，加载速度快的网站更有可能在搜索结果中获得更好的排名。通过优化前端性能，可以提升网站的 SEO 表现。

4. 移动设备体验：

   在移动设备上访问网站的用户越来越多，而移动设备的网络连接和处理能力通常相对较弱。因此，优化前端性能对移动设备用户体验至关重要。

5. 节约成本：

   随着用户对网站性能的要求提高，性能较差的网站可能会导致用户流失和损失的收入。通过前端性能优化，可以提高网站的效率，减少服务器负载，节约服务器成本和流量费用。

6. 品牌形象：
   网站的性能直接影响用户对品牌的印象。一个加载缓慢的网站可能会给用户留下不良印象，反之，一个加载快速、响应迅速的网站有助于提升品牌形象。

前端性能分析的几个重要指标

页面渲染流程图：

1. First Contentful Paint (FCP)
   首次内容绘制，表示浏览器从用户的角度首次渲染出有意义的内容的时间。这个时间点通常是页面中第一个文本、图片或其他 DOM 元素的显示时间。FCP 的时间越短，用户越早能看到页面内容，感知到页面开始加载。

2. Largest Contentful Paint (LCP)
   最大内容绘制，表示页面加载过程中最大的可见内容（如图片或大块文本）被渲染完成的时间。这个指标反映了页面的主要内容什么时候加载完成，通常是影响用户感知页面加载速度的关键指标。LCP 理想时间应小于 2.5 秒。

3. Time to Interactive (TTI)
   可交互时间，表示页面完全加载并可以响应用户交互的时间。这是页面从开始加载到完全准备好处理用户输入的时间段。如果 TTI 时间过长，用户虽然看到了内容，但可能点击按钮或链接时不会有响应。

4. Total Blocking Time (TBT)
   总阻塞时间，指的是页面的加载过程被长任务阻塞的时间（超过 50ms 的任务）。长任务通常是导致用户交互迟缓的原因，因此减少 TBT 是提升页面响应速度的关键。

5. Cumulative Layout Shift (CLS)
   累积布局偏移，用于衡量页面上元素的视觉稳定性。页面内容加载时，可能会因为图片、广告或字体加载导致布局发生变化。如果页面内容频繁移动，会导致用户体验差。CLS 越低越好，通常建议保持在 0.1 以下。

6. First Input Delay (FID)
   首次输入延迟，指的是用户第一次尝试与页面进行交互（如点击按钮、链接）到浏览器能够响应这个交互之间的时间。FID 反映了页面的交互性，较低的 FID 说明用户体验更流畅，理想的 FID 应小于 100 毫秒。

7. Speed Index (SI)
   速度指数，用于衡量页面内容在视窗内的加载速度。Speed Index 反映了页面加载的视觉进度，它越低，页面加载看起来越快。这个指标结合了多个时间节点来确定用户看到完整页面内容的时间。

8. DOM Content Loaded (DCL)
   DOM 内容加载完成时间，指的是 HTML 文档被完全解析且不包括样式表、图片等资源的加载时间。当 DCL 事件触发时，页面的结构已经构建完成，但可能还有其他外部资源未完全加载。

9. JavaScript Execution Time
   这个指标反映了页面加载过程中，JavaScript 代码的执行时间。如果 JavaScript 执行时间过长，可能会导致页面加载和交互变慢。

window.performance 的 timing 属性

timing: {
        // 同一个浏览器上一个页面卸载(unload)结束时的时间戳。如果没有上一个页面，这个值会和fetchStart相同。
	navigationStart: 1543806782096,

	// 上一个页面unload事件抛出时的时间戳。如果没有上一个页面，这个值会返回0。
	unloadEventStart: 1543806782523,

	// 和 unloadEventStart 相对应，unload事件处理完成时的时间戳。如果没有上一个页面,这个值会返回0。
	unloadEventEnd: 1543806782523,

	// 第一个HTTP重定向开始时的时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0。
	redirectStart: 0,

	// 最后一个HTTP重定向完成时（也就是说是HTTP响应的最后一个比特直接被收到的时间）的时间戳。
	// 如果没有重定向，或者重定向中的一个不同源，这个值会返回0.
	redirectEnd: 0,

	// 浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。
	fetchStart: 1543806782096,

	// DNS 域名查询开始的UNIX时间戳。
        //如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和fetchStart一致。
	domainLookupStart: 1543806782096,

	// DNS 域名查询完成的时间.
	//如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
	domainLookupEnd: 1543806782096,

	// HTTP（TCP） 域名查询结束的时间戳。
        //如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 fetchStart一致。
	connectStart: 1543806782099,

	// HTTP（TCP） 返回浏览器与服务器之间的连接建立时的时间戳。
        // 如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。
	connectEnd: 1543806782227,

	// HTTPS 返回浏览器与服务器开始安全链接的握手时的时间戳。如果当前网页不要求安全连接，则返回0。
	secureConnectionStart: 1543806782162,

	// 返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的时间戳。
	requestStart: 1543806782241,

	// 返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的时间戳。
        //如果传输层在开始请求之后失败并且连接被重开，该属性将会被数制成新的请求的相对应的发起时间。
	responseStart: 1543806782516,

	// 返回浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时
        //（如果在此之前HTTP连接已经关闭，则返回关闭时）的时间戳。
	responseEnd: 1543806782537,

	// 当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的 readystatechange事件触发时）的时间戳。
	domLoading: 1543806782573,

	// 当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的时间戳。
	domInteractive: 1543806783203,

	// 当解析器发送DOMContentLoaded 事件，即所有需要被执行的脚本已经被解析时的时间戳。
	domContentLoadedEventStart: 1543806783203,

	// 当所有需要立即执行的脚本已经被执行（不论执行顺序）时的时间戳。
	domContentLoadedEventEnd: 1543806783216,

	// 当前文档解析完成，即Document.readyState 变为 'complete'且相对应的readystatechange 被触发时的时间戳
	domComplete: 1543806783796,

	// load事件被发送时的时间戳。如果这个事件还未被发送，它的值将会是0。
	loadEventStart: 1543806783796,

	// 当load事件结束，即加载事件完成时的时间戳。如果这个事件还未被发送，或者尚未完成，它的值将会是0.
	loadEventEnd: 1543806783802
}

通过以上数据，我们能得到一些性能指标数据

// 重定向耗时
redirect: timing.redirectEnd - timing.redirectStart,
// DOM 渲染耗时
dom: timing.domComplete - timing.domLoading,
// 页面加载耗时
load: timing.loadEventEnd - timing.navigationStart,
// 页面卸载耗时
unload: timing.unloadEventEnd - timing.unloadEventStart,
// 请求耗时
request: timing.responseEnd - timing.requestStart,
// 获取性能信息时当前时间
time: new Date().getTime(),

还有一个比较重要的时间就是白屏时间，它指从输入网址，到页面开始显示内容的时间。

将以下脚本放在 </head> 前面就能获取白屏时间。

<script>
  whiteScreen = new Date() - performance.timing.navigationStart;
  // 通过 domLoading 和 navigationStart 也可以
  whiteScreen =
    performance.timing.domLoading - performance.timing.navigationStart;
</script>

前端性能优化的策略

1. 减少 HTTP 请求：

   减少页面中的资源文件（如 CSS、JavaScript、图片等）数量，可以通过合并文件、使用 CSS Sprites（CSS 精灵）、将多个脚本文件合并为一个等方式来减少 HTTP 请求次数，从而加快页面加载速度。

2. 压缩资源：

   压缩 CSS、JavaScript 和图片等资源文件，减小文件大小，可以通过工具如 Gzip、Brotli 等进行压缩，以减少文件传输时间和页面加载时间。

3. 使用缓存：

   启用浏览器缓存机制，设置合适的缓存策略，利用浏览器缓存静态资源，减少重复的网络请求，提高页面加载速度。

4. 代码优化：

   优化 JavaScript 代码，减少不必要的代码、避免过度深度嵌套、减少全局变量使用等，以提高代码的执行效率。

5. 异步加载资源：

   将不影响页面渲染的资源（如广告、统计代码等）使用异步加载或延迟加载的方式，避免阻塞页面渲染过程，提高用户体验。

6. 优化图片：

   选择合适的图片格式（如 WebP、JPEG、PNG）和优化图片大小，使用响应式图片，以减小图片文件大小，提高页面加载速度。

7. 延迟加载：

   对于长页面或需要滚动才能看到的内容，可以延迟加载图片和其他资源，延迟加载非关键资源，优先加载可见部分的内容，提高页面加载速度。

8. 减少重绘和回流：

   避免频繁的 DOM 操作和样式变更，合理使用 CSS 布局，尽量减少引起浏览器重绘和回流的操作，提高页面渲染性能。

9. 服务端渲染（SSR）：
   对于需要 SEO 优化的页面，考虑使用服务端渲染(SSR)，提高页面首屏加载速度和 SEO 表现。

小结：总之，前端性能优化至关重要，直接影响用户体验、留存率和品牌形象。通过分析关键性能指标如 FCP、LCP 和 TTI，我们可以深入了解加载过程的各个环节。优化策略包括减少 HTTP 请求、压缩资源、利用缓存、异步加载、图片优化等，旨在提高页面加载速度和响应能力。最终，通过系统的性能优化，网站不仅能提升用户满意度，还能在搜索引擎中获得更好的排名，实现可持续的发展。