文章目录
 
懒加载(Lazy Loading)
MyBatis中懒加载的使用
Spring中懒加载的使用
  
 

 
懒加载(Lazy Loading)
 
  懒加载也叫“延迟价值”，核心思想是把对象的实例化延迟到真正调用该对象的时候，这样做的好处是可以减轻大量对象在实例化时对资源的消耗，而不是在程序初始化的时候就预先将对象实例化。另外“懒加载”可以将对象的实例化代码从初始化方法中独立出来，从而提高代码的可读性，以便于代码能够更好地组织。
   特别是在web应用程序中，它能够在用户滚动页面的时候自动获取更多的数据，而新得到的数据不会影响原有数据的显示，同时最大程度上减少服务器端的资源耗用。(购买商品往下滑动才加载，一次只加载一部分，如果继续需要，再加载)【懒加载提高了系统响应时间，提升了系统性能】 - - [适用于单表查询提高效率，但是多表关联查询效率可能降低]
 
MyBatis中懒加载的使用
 
MyBatis中使用懒加载需要核心配置文件中的configuration下的settings中配置以下两行
 
<configuration>

    <!--settings配置全局变量，这个有顺序需要放在<environment>的前面才能起作用
        lazyLoadingEnabled 配置懒加载，这里配置的是全局允许或静止懒加载，配置之后所有的任务都可以懒加载
        具体使用懒加载就是通过fetchType=lazy实现懒加载
        aggressiveLazyLoading配置为false，实现按需加载
    -->
    <settings>
        <!-- 打开懒加载的开关 -->
        <setting name="lazyLoadingEnabled" value="true"/>
        <!-- 将积极加载改为消极加载(及按需加载) -->
        <setting name="aggressiveLazyLoading" value="false"/>
    </settings>
</configuration>    
 
在使用的时候(在映射文件XxxMapper.xml中使用)，通过在所需要懒加载的resultMap 的列上加上 fetchType="lazy" ，表明这个数据是懒加载实现的。
 
	<resultMap id="personMap" type="com.xgf.correlation.one_to_one.bean.Person" autoMapping="true">
       <id property="id" column="id"/>
       <result property="username" column="username"/>
		<!-- fetchType="lazy" 懒加载实现数据加载-->
       <association property="card" javaType="com.xgf.correlation.one_to_one.bean.Card" fetchType="lazy">
           <id property="id" column="id"/>
           <result property="code" column="code"/>
       </association>
    </resultMap>


	<resultMap id="orderMap" type="com.xgf.mybatis.correlation.many_to_many.bean.Order">
        <id column="oid" property="id"/>
        <result property="description" column="description"/>
        <!-- fetchType="lazy" 懒加载实现数据加载-->
        <collection property="productList"  fetchType="lazy" ofType="com.xgf.mybatis.correlation.many_to_many.bean.Product">
            <id column="pid" property="id"/>
            <result property="name" column="name"/>
        </collection>
    </resultMap>
 
Spring中懒加载的使用
 
 
 
  在Spring中，默认情况下在容器被初始化的过程中，就会去解析xml和注解，将其创建为单例的bean并存到一个map集合中。如果需要创建的bean很多，spring在启动的过程中就需要花费大量的时间去解析xml和注解来创建bean ，并花费大量的空间去存储bean，以供使用，但是在很多情况下，大部分的bean可能很久都使用不上， 所以Spring提供了懒加载机制。Spring的懒加载机制让bean不在启动容器的时候就创建，而是在第一次使用时才创建，减轻在启动容器过程中对时间的浪费和内存的消耗。
   懒加载机制只对单例bean起作用，多例bean是在使用的时候才会由容器创建，所以对于多例bean设置懒加载是没有意义的。
 
 
spring的懒加载配置方式有两种：
 
注解配置懒加载(@Lazy)
xml中配置懒加载
 
注解配置懒加载(@Lazy)
   就是在类/成员变量/方法上加@Lazy注解，表示这个类/成员变量/方法是懒加载的，在容器启动的时候不会初始化为bean，只有在使用到的时候，才会创建。
 

//懒加载  --  类上
@Lazy
public class User {
    private Integer id;
    private String username;
    private String password;

	//懒加载 -- 方法上
    //@Lazy
    public User(){
        System.out.println("初始化User的bean");
    }
}
 

 
xml配置懒加载
   xml文件里面，通过配置 lazy-init="true"来启用懒加载。
 2.1 配置全局懒加载(直接在核心配置文件的beans头里面加入default-lazy-init="true")
 
<!-- 全局懒加载，在applicationContext.xml核心配置文件里面的beans里加default-lazy-init="true"-->
<?xml version="1.0" encoding="UTF-8"?>
<beans default-lazy-init="true"
       xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mybatis="http://mybatis.org/schema/mybatis-spring" xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://mybatis.org/schema/mybatis-spring http://mybatis.org/schema/mybatis-spring.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">

</beans>
 
2.2 配置局部懒加载(在bean里面加入lazy-init="true")
 
<bean id="User" class="com.xgf.bean.User" lazy-init="true"></bean>
 
 
 
如果同时设定全局懒加载和局部懒加载(bean的懒加载机制)，且配置不相同的时候，则bean局部配置会覆盖全局配置。
 

想获取更多的前端技术-请专注公众号：胖梅web前端
 
 
 
 
为什么需要懒加载？
 
　　　　像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
 
vue异步组件
es提案的import()
webpack的require,ensure()
1 . vue异步组件技术 ==== 异步加载 
 
vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 . 
 但是,这种情况下一个组件生成一个js文件
 
/* vue异步组件技术 */
 
{ path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) },
 
{ path: '/index', name: 'Index', component: resolve => require(['@/components/index'],resolve) },
 
{ path: '/about', name: 'about', component: resolve => require(['@/components/about'],resolve) }
 
非懒加载：
 
 
懒加载
 
 
 
 
2.组件懒加载方案二 路由懒加载(使用import)
 
const 组件名=() => import('组件路径');
 
// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
 
/* const Home = () => import('@/components/home')
 
const Index = () => import('@/components/index')
 
const About = () => import('@/components/about') */
 
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
 
把组件按组分块
 
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
 
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
 
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')
 
 
 
{ path: '/about', component: About }, { path: '/index', component: Index }, { path: '/home', component: Home }
 
3.webpack提供的require.ensure() 
 
vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。 
 这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
 
/* 组件懒加载方案三: webpack提供的require.ensure() */
 
{ path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') },
 
{ path: '/index', name: 'Index', component: r => require.ensure([], () => r(require('@/components/index')), 'demo') },
 
{ path: '/about', name: 'about', component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01') }
 
 
 
// r就是resolve
 const list = r => require.ensure([], () => r(require('../components/list/list')), 'list');
 // 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
 const router = new Router({
     routes: [
         {
            path: '/list/blog',
            component: list,
            name: 'blog'
         }
     ]
 })
  
 
 
 
 

懒加载也就是延迟加载。
 
具体表现为：
 
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张占位图的路径，这样就只需请求一次，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。
 
好处：
 
很多页面，内容很丰富，页面很长，图片较多。比如瀑布流，图片数量多且大，如果一次性加载完毕，用户等待时间过长。 懒加载页面加载速度快、可以减轻服务器的压力、节约了流量，用户体验好。
 
技术原理：
 
页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。 懒加载的就是先在页面中把所有的图片统一使用一张占位图进行占位，把真正的路径存在元素的“pic-url”（自定义命名）属性里，要用的时候就取出来。
 
实现步骤：
 
1、不要将图片地址放到src属性中，而是放到其它属性中。
 
2、页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。
 
3、在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。
 
 
 
 
 
 
预加载也就是提前加载图片
 
具体表现为：
 
当用户需要查看时可直接从本地缓存中渲染
 
好处：
 
图片预先加载到本地中，访问者便可享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。
 
实现预加载的方法：
 
方法一:用CSS和JavaScript实现预加载
 
方法二:仅使用javascript实现预加载
 
方法三:使用Ajax实现预加载
 
懒加载和预加载的区别
 
两种技术行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

有时候一个网页会包含很多的图片，例如淘宝京东这些购物网站，商品图片多只之又多，页面图片多，加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片，并发情况下，达到1000并发，即同时有1000个人访问，就会产生1个G的带宽。
 
为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。
 
vue项目中的打包，是把html、css、js进行打包，还有图片压缩。但是打包时把css和js都分成了几部分，这样就不至于一个css和就是文件非常大。也是优化性能的一种方式。
 效果动图如下：
 
 
进入正题------懒加载
 
1.懒加载原理
 
一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。
 
2.懒加载思路及实现
 
实现懒加载有四个步骤，如下：
 1.加载loading图片
 2.判断哪些图片要加载【重点】
 3.隐形加载图片
 4.替换真图片
 
1.加载loading图片是在html部分就实现的，代码如下：
 
 2.如何判断图片进入可视区域是关键。
 引用网友的一张图，可以很清楚的看出可视区域。
 
 如上图所示，让在浏览器可视区域的图片显示，可视区域外的不显示，所以当图片距离顶部的距离top-height等于可视区域h和滚动区域高度s之和时说明图片马上就要进入可视区了，就是说当top-height<=s+h时，图片在可视区。
 这里介绍下几个API函数：
 页可见区域宽： 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;
 
HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。
 window.innerHeight：浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。
 
具体实现的js代码为：
 
// onload是等所有的资源文件加载完毕以后再绑定事件
window.onload = function(){
	// 获取图片列表，即img标签列表
	var imgs = document.querySelectorAll('img');

	// 获取到浏览器顶部的距离
	function getTop(e){
		return e.offsetTop;
	}

	// 懒加载实现
	function lazyload(imgs){
		// 可视区域高度
		var h = window.innerHeight;
		//滚动区域高度
		var 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
						// 隐形加载图片或其他资源，
						//创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载
						var 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);
	}
}
 
效果如下：
 
 随着鼠标向下滚动，其余图片也逐渐显示并发起请求。
 
 效果动图如下：
 
 
每天进步一点点、充实一点点、加油！Girl！