前端性能优化之懒加载

路由懒加载

​当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效

在router.js中

传统的路由加载：

import Home from "@/views/Home"
{
   path:"/home",
   component:Home,
}

路由懒加载

const foo = ()=>{
    console.log(1111)
    return import ("@/views/Home")
}
{
   path:"/home",
   component:foo,
}

简化写法：

{
   path:"/home",
   component:()=>import ("@/views/Home")
}

图片懒加载

​ 图片是非常占用页面渲染时间的，尤其是一些图片比较多的页面，过多的图片可能会造成页面的卡顿，降低流畅度影响用户体验，我们在实际开发中，对于处于视口外的图片，在用户没有滚动到位置的时候没必要渲染，此时我们就需要用到懒加载，让图片延后渲染。

​懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载

一个插件vue-lazyload - npm (npmjs.com)

npm i vue-lazyload -S

vue3：

npm i vue3-lazy-D

在main.js中

import VueLazyload from 'vue-lazyload' //引入插件
import atm from '@/assets/1.gif'
Vue.use(VueLazyload，{     //注册插件
       //懒加载默认的图片
        loading:atm
      })

切换页面的懒加载

就可以使用它了，在懒加载页面使用v-lazy代替 :src

 <img v-lazy="img.src" />

同一页面上下滑动的懒加载

原理实现

当在浏览器可视区域外,则加载本地的小图片,进入可视区域,则加载属性上保存的真实图片地址

方式一:通过浏览器可视区域高度+已经滑动的距离>图片距离文档顶部的距离,则进行懒加载

方式二:getBoundingClientRect（）：获取元素的大小及位置

Top属性代表当前DOM节点距离浏览器窗口顶部的高度,只需判断top值是否小于当前浏览器窗口的高度(window.innerHeight) 若小于说明已经进入用户视野，然后替换为真正的图片即可

offsetTop-scroolTop<clientHeight，表示进入可视区域

懒加载其实就两个重点，一个是元素到各个边距的距离，二个就是判断元素是否在可视区域内。

具体代码实现

​ 首先获取图片列表，然后执行懒加载函数进行初始化，接着监听滚动事件，一旦发生滚动就触发懒加载函数，检查是否有图片需要加载

<img data-src="./zjh.jpg" alt="">
<img data-src="./zjh2.jpg" alt="">
// 获取图片列表，即img标签列表
const images = document.getElementsByTagName("img")
// 懒加载实现
 const lazyImg1 = ()=>{
     window.addEventListener("scroll",()=>{
         [...images].forEach(image =>{
             //获取图片的相对顶部的高度
             const top = image.getBoundingClientRect().top;
             console.log("相对高度",top)
             if(top<window.innerHeight){
                 //如果露出来，就把图片加载出来
                 const data_src = image.getAttribute("data-src")
                 image.setAttribute("src",data_src)
             }
         })
     })
 }
//执行懒加载函数进行初始化
lazyload(imgs);
debounce(lazyImg1,3000)

​