性能优化与调试技巧---图片优化｜豆包MarsCode AI 刷题性能优化与调试技巧,三种方法进行图像优化，让低带宽的

性能优化与调试技巧---图片优化｜豆包MarsCode AI 刷题

最近小编在部署网页的时候就发现了问题,租了一个免费的服务器,结果带宽只有1M,那么多的照片,如果同时访问的话,服务器可吃不消,结果就是服务器崩掉咯,那怎么解决这样的问题呢?

方法1:运用图片懒加载技术

通过自己封装图片懒加载插件,进行多次重复的利用

解决流程

用户进入网站=>检测用户是否访问=>进行图片加载=>开发中进行绑定

检测用户是否访问

通过vueuse实用函数合集API，我们可以找到 useIntersectionObserver(vueuse.nodejs.cn/core/useInt…)*，它可以监听用户是否访问到指定的区域，然后进行反馈。

下面是 useIntersectionObserver的用法

xml 代码解读复制代码<script setup>
import { useIntersectionObserver } from '@vueuse/core' //进行方法导入
import { ref } from 'vue'

const target = ref(null)
const targetIsVisible = ref(false)

const { stop } = useIntersectionObserver(
  target, //target是你需要检测的元素
  ([{ isIntersecting }], observerElement) => {
    targetIsVisible.value = isIntersecting
  },
    //isTntersecting是检测该元素是否出现在视图=>如果出现返回"True",否则"false"
)
</script>

<template>
  <div ref="target">
    <h1>Hello world</h1>
  </div>
</template>

通过上述例子的分析，你将可以知道，它拥有访问对象target，判断是否浏览的isIntersecting 以及，停止监听的stop() ,掌握这三种，你将可以简单的监听用户是否访问到指定的元素。

下面是 useIntersectionObserver的例子

xml 代码解读复制代码<script setup lang="ts">
import { vIntersectionObserver } from '@vueuse/components'
import { ref } from 'vue'

const root = ref(null)

const isVisible = ref(false)

function onIntersectionObserver([{ isIntersecting }]: IntersectionObserverEntry[]) {
  isVisible.value = isIntersecting
}
</script>

<template>
  <div>
    <p>
      Scroll me down!
    </p>
    <div v-intersection-observer="onIntersectionObserver">
      <p>Hello world!</p>
    </div>
  </div>

  <!-- with options -->
  <div ref="root">
    <p>
      Scroll me down!
    </p>
    <div v-intersection-observer="[onIntersectionObserver, { root }]">
      <p>Hello world!</p>
    </div>
  </div>
</template>

进行图片懒加载

到这一步，你已经可以检测用户是否访问到图片区域了，剩下的就是如何进行图片加载了

图片加载我们将利用vue的自定义指令

我们命名一个名为lazyPlugin的插件，并将其导出。

javascript 代码解读复制代码//lazyPlugin.vue
import { useIntersectionObserver } from '@vueuse/core'
export const lazyPlugin={
  install(app){
//自定义全局指令
//el是目标元素，bindling类似于:src="" =右边的赋值
app.directive('img-lazy',{
  mounted(el,bindling){
    const {stop}=useIntersectionObserver(
      el,
      ([{ isIntersecting }]) => {
        if(isIntersecting){
          el.src=bindling.value
          stop()//加载完后停止监听=>性能优化
        }
      },
    )
  }
})
  }
}

提醒： 在代码中，我们可以发现stop()。因为useIntersectionObserver会一直进行监听，所以无论加载是否，只要访问一次指定区域就会触发相对于的事件，所以避免性能浪费，我们在第一次加载结束时候，就可以停止它的监听，优化性能

在主文件中进行挂载

javascript 代码解读复制代码//main.js
import {lazyPlugin} from '@/directives/index'
app.use(lazyPlugin)

在具体开发中进行绑定

javascript 代码解读复制代码 //xxx.vue
 <img v-img-lazy="item.picture" alt="">

那么到这一步，你将拥有了图片懒加载的功能，成功让浏览器性能得到了优化！！！

方法2:通过CSS引入图片

直接使用background-image属性： 这是最常用的方法之一。你可以在一个CSS规则中，使用background-image: url('图像的路径');来为一个元素设置背景图像。
使用CSS Sprite： 这是一种将多个小图像合并成一个大的图像文件的技术。然后，你可以使用background-position属性来显示你需要的那部分图像。这样可以减少服务器的请求次数哦！
使用Base64编码： 将图像转换为Base64编码的字符串，然后直接嵌入到CSS文件中。这样也可以减少服务器请求，但可能会增加CSS文件的大小哦。

方法3:通过调用GPU,缓解服务器压力

利用GPU硬件加速： 现代的浏览器和CSS都支持GPU硬件加速。通过使用CSS的某些属性，如transform、opacity和filter等，可以触发GPU加速，从而减轻CPU的负担，提高渲染效率。
优化图像资源：使用合适的图像格式（如WebP），以及压缩图像文件的大小，可以减少服务器的带宽消耗和传输时间。同时，也可以降低GPU的渲染负担哦。
减少重绘和回流： 频繁的DOM操作会导致浏览器的重绘和回流，这会增加CPU和GPU的负担。因此，应该尽量减少不必要的DOM操作，或者使用一些技术来合并和优化DOM操作。

不过要注意哦，虽然GPU加速可以带来性能上的提升，但也要合理使用，避免过度消耗GPU资源导致设备过热或其他问题。

至于服务器能耗方面呢，其实主要是通过优化网站的整体性能和资源使用来降低的。比如使用高效的服务器硬件、优化网站代码和图像资源、实施缓存策略等，都可以有效地减少服务器的能耗。

性能优化与调试技巧---图片优化｜ 豆包MarsCode AI 刷题