点击上方蓝字关注我们

图片懒加载原理

图片懒加载也叫延迟加载，只加载当前屏幕的图片，可视区域外的图片不会进行加载，只有当屏幕滚动的时候才加载。

特点：

提高网页加载速度
减少后台服务器压力
提升用户体验

原理

将图片地址存储到 data-xxx 属性上
判断图片是否在可视区域
如果在，就设置图片 src
绑定 scroll 监听事件

节流和防抖

节流

节流是一种常用的性能优化技术，它可以限制函数的执行频率，避免过多的重复操作，提升页面的响应速度。

函数在 n 秒内只执行一次，如果多次触发，则忽略执行。

应用场景：

拖拽场景
scroll场景
窗口大小调整


js
复制代码
function throttle(fn, wait) {
  let startTime = Date.now()

  return function () {
    const nowTime = Date.now()

    // 计算两次执行的间隔时间 是否大于 wait 时间
    if (nowTime - startTime >= wait) {
      startTime = nowTime
      return fn.apply(this, arguments)
    }
  }
}

防抖

防抖函数可以将多次高频率触发的函数执行合并成一次，并在指定的时间间隔后执行一次。通常在处理输入框、滚动等事件时使用，避免频繁触发事件导致页面卡顿等问题。

函数在 n 秒后再执行，如果 n 秒内被触发，重新计时，保证最后一次触发事件 n 秒后才执行。

应用场景：

输入框搜索
表单提交按钮
文本器保存


js
复制代码
function debounce(fn, wait, immediate = false) {
  let timer = null

  return function () {
    // 存在定时器 清空
    if (timer) {
      clearInterval(timer)
      timer = null
    }
    // 立即执行
    if (immediate) {
      // 判断是否执行过  如果执行过 timer 不为空
      const flag = !timer

      // 执行函数
      flag && fn.apply(this, arguments)

      // n 秒后清空定时器
      timer = setTimeout(() => {
        timer = null
      }, wait)
    } else {
      timer = setTimeout(() => {
        fn.apply(this, arguments)
      }, wait)
    }
  }
}

SPA首屏为什么加载慢？

SPA首屏加载慢可能有以下原因：

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

为什么要做性能优化

性能优化是为了提高网页的加载速度和相应速度，给用户带来更好的体验和用户满意度，同时还能减少服务器的负载压力，以此来提升程序的稳定性，具体有以下几个因素：

提高用户体验
增加页面访问量
提高搜索引擎排名
减少服务器压力
节约成本
提高用户留存率

常见性能优化有哪些关键指标？

首屏加载时间First Contentful Paint（FCP）：首次内容绘制时间，指浏览器首次绘制页面中至少一个文本、图像、非白色背景色的canvas/svg元素等的时间，代表页面首屏加载的时间点。
首次绘制时间First Paint（FP）：首次绘制时间，指浏览器首次在屏幕上渲染像素的时间，代表页面开始渲染的时间点。
最大内容绘制时间Largest Contentful Paint（LCP）：最大内容绘制时间，指页面上最大的可见元素（文本、图像、视频等）绘制完成的时间，代表用户视觉上感知到页面加载完成的时间点。
用户可交互时间Time to Interactive（TTI）：可交互时间，指页面加载完成并且用户能够与页面进行交互的时间，代表用户可以开始操作页面的时间点。
页面总阻塞时间Total Blocking Time (TBT)：页面上出现阻塞的时间，指在页面变得完全交互之前，用户与页面上的元素交互时出现阻塞的时间。TBT应该尽可能小，通常应该在300毫秒以内。
搜索引擎优化Search Engine Optimization (SEO)：网站在搜索引擎中的排名和可见性。评分范围从0到100，100分表示网站符合所有SEO最佳实践。