图片懒加载
- 图片懒加载是一种优化网页性能的技术，其原理是在页面加载时，先不加载图片资源，而是等到图片进入浏览器的可视区域时再进行加载。
- 实现方式通常是通过监听浏览器的滚动事件，结合
getBoundingClientRect()方法来判断图片是否在可视区内。当图片在可视区内时，将图片的src属性设置为真实的图片地址，从而触发图片加载。
节流和防抖（借助闭包实现）
-
节流
- 节流是指在一定时间内，只允许函数执行一次。即使在这段时间内触发了多次函数调用，也只会执行一次。
- 常用于处理频繁触发的事件，如滚动事件、鼠标移动事件等，避免因事件频繁触发导致的性能问题。
- 实现方式可以通过设置一个定时器，在规定的时间间隔内，只有当定时器到期后，才允许函数执行，并重新设置定时器。
-
防抖
- 防抖是指在一定时间内，如果事件被频繁触发，那么只执行最后一次触发的函数。
- 例如在搜索框输入时，用户可能会连续输入多个字符，我们希望在用户停止输入一段时间后再进行搜索，而不是每次输入都触发搜索请求。
- 实现方式是通过设置一个定时器，当事件触发时，先清除之前的定时器，然后重新设置一个新的定时器，延迟执行函数。如果在延迟时间内再次触发事件，则再次清除并重新设置定时器，这样就保证了只有在最后一次触发事件后的延迟时间结束时，才会执行函数。
SPA首屏加载慢点原因
- 资源体积大：SPA 应用通常包含大量的 JavaScript、CSS 和图片等资源。如果这些资源没有经过优化，体积可能会很大，导致首次加载时需要花费较长时间来下载。
- 路由懒加载未优化：如果没有对路由进行懒加载处理，所有的路由组件可能会在首屏加载时全部被加载，增加了首屏的加载负担。
- 数据获取延迟：首屏可能需要从后端获取大量的数据来渲染页面，如果数据请求过程中出现延迟或网络不稳定，会导致首屏加载缓慢。
- 渲染复杂：SPA 应用通常采用虚拟 DOM 等技术来进行页面渲染，当首屏的组件结构复杂，嵌套层次深时，渲染过程会比较耗时。
性能优化目的
- 提高用户体验：性能优化可以使页面加载更快，响应更及时，减少用户等待时间，提高用户对网站或应用的满意度和忠诚度。
- 降低跳出率：如果页面加载时间过长，用户很可能会离开网站，从而导致跳出率升高。通过性能优化，可以降低跳出率，提高网站的流量和转化率。
- 提升搜索引擎排名：搜索引擎通常会将页面性能作为排名的一个因素，性能好的网站更容易获得较高的排名，从而增加网站的曝光度和流量。
常见性能优化指标
- 首屏加载时间：指从页面开始加载到首屏内容完全显示出来的时间，是衡量用户体验的重要指标。
- 白屏时间：从浏览器开始加载页面到页面开始呈现内容的时间，白屏时间过长会让用户感到页面加载缓慢。
- 页面总加载时间：指整个页面包括所有资源（如图片、脚本、样式表等）都加载完成的时间。
- 交互时间：从用户操作到页面响应的时间，反映了页面的交互性能。
性能优化方式
-
资源优化
- 压缩和合并文件，如压缩图片、JavaScript 和 CSS 文件，减少文件体积，提高下载速度。同时，合并多个小文件，减少 HTTP 请求次数。
- 使用 CDN（内容分发网络），根据用户的地理位置缓存和分发资源，加速资源的访问。
-
代码优化
- 采用代码拆分和懒加载技术，将代码按需加载，避免一次性加载过多代码。
- 优化 JavaScript 代码，减少不必要的计算和 DOM 操作，合理使用事件委托等技术。
-
渲染优化
- 减少 DOM 元素数量和深度，避免过度嵌套，提高渲染性能。
- 使用 CSS3 的硬件加速特性，如
transform和opacity，提高动画和过渡效果的流畅度。
-
数据优化
- 优化数据请求，减少不必要的数据传输，对数据进行缓存，避免重复请求。
- 采用服务器端渲染（SSR）或静态站点生成（SSG），在服务器端生成 HTML 页面，减少客户端的渲染工作量，提高首屏加载速度。
