性能优化-懒加载（图片 组件 路由）

Posted 2021-06-02 肥晨

为什么需要懒加载？

      组件、图片、路由对页面加载速度影响非常大。比如，当一个页面内容比较多的时候，加载速度就会大大的降低，极大的影响到用户体验 。更有甚者，一个页面可能会有几百个图片，但是页面上仅仅只显示前几张图片，那其他的图片是否可以晚点加载用于提高性能。

 

什么是懒加载？

      懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。在vue中组件懒加载又称为代码分割，也叫延迟加载，即在需要的时候进行加载，随用随载。

 

图片懒加载的实现原理

一张图片就是一个<img>标签，而图片的来源主要是依靠src属性。浏览器是否发起请求根据是否有src属性决定。在没有进到可视区的时候，就不给<img>赋src属性，这样就不会发起请求。下面重点就是对可视区的判断：

网页可见区域：

                        宽： document.body.clientWidth;                       高： document.body.clientHeight;

              包括边线的宽： document.body.offsetWidth;     包括边线的高： document.body.offsetHeight ;

网页正文全文：

                        宽： document.body.scrollWidth;                        高： document.body.scrollHeight;

网页被卷去部分：

                               高： document.body.scrollTop;                            左： document.body.scrollLeft;

网页正文部分

                               上： window.screenTop;                                       左： window.screenLeft;

屏幕分辨率：

                               高： window.screen.height;                                  宽： window.screen.width;

屏幕可用工作区高度： window.screen.availHeight;

 

了解这些我们先完成html的代码部分：

 

//src存放的是加载图片 data-src存放的才是真正的图片地址     

<img src="img/load.png" data-src="img/img.png" />

 

 实现javascript部分：

 

       // onload是等所有的资源文件加载完毕以后再绑定事件

       //imgs为图片列表

        window.onload = function () {

 

            // 获取到浏览器顶部的距离

            function getTop(e) {

                return e.offsetTop;

            }

            // 懒加载实现

            function lazyload(imgs) {

                // 可视区域高度

                let h = window.innerHeight;

                //滚动区域高度

                let s = document.documentElement.scrollTop || document.body.scrollTop;

                for (var i = 0; i < imgs.length; i++) {

                    //图片距离顶部的距离大于可视区域和滚动区域之和时懒加载

                    if ((h + s) > getTop(imgs[i])) {

                        // 真实情况是页面开始有2秒空白，所以使用setTimeout定时2s

                        (function (i) {

                            setTimeout(function () {

                                // 不加立即执行函数i会等于9

                                // 隐形加载图片或其他资源，

                                //创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载

                                let temp = new Image();

                                temp.src = imgs[i].getAttribute(\'data-src\'); //只会请求一次

                                // onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点

                                temp.onload = function () {

                                    // 获取自定义属性data-src，用真图片替换假图片

                                    imgs[i].src = imgs[i].getAttribute(\'data-src\')

                                }

                            }, 2000)

                        })(i)

                    }

                }

            }

            lazyload(imgs);

            // 滚屏函数

            window.onscroll = function () {

                lazyload(imgs);

            }

        }

 

 现在我们常用的vue也有专属的方式：Vue-Lazyload

路由加载：

        为什么要使用组件懒加载？

             为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。

          路由懒加载的实现

     主要方式：resolve => require([\'资源路径\'], resolve)

         具体实现：

 

//没有使用路由懒加载   

import Vue from \'vue\'
import Router from \'vue-router\'
import HelloWorld from \'@/components/HelloWorld\'
Vue.use(Router)
export default new Router({
       routes: [
                 {
                      path: \'/\',
                      name: \'HelloWorld\',
                      component:HelloWorld
                  }
               ]
})

 

 

//使用路由懒加载

import Vue from \'vue\'
import Router from \'vue-router\'
　　/* 此处省去之前导入的HelloWorld模块 */
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: \'/\',
      name: \'HelloWorld\',
      component: resolve=>(require(["@/components/HelloWorld"],resolve))
    }
  ]
})

 

组件懒加载

相同与路由懒加载

 

//原来组件中写法

<template>
  <div>
  <One-com></One-com>
  </div>
</template>
<script>
import One from \'./one\'
export default {
  components:{
    "One-com":One
  }
}
</script>

 

 

 

//const方法

<template>
  <div>
  <One-com></One-com>
  </div>
</template>
<script>
import One from \'./one\'
export default {
  components:{
    "One-com":One
  }
}
</script>

 

 

 

//异步方法

<template>
  <div>
  <One-com></One-com>
  </div>
</template>
<script>
export default {
  components:{
    "One-com":resolve=>([\'./one\'],resolve)
  }
}
</script>