懒加载 订阅
在Web应用程序中,系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣。因此,提高系统响应速度,是非常重要的。Web应用程序做的最多就是和后台数据库交互,而查询数据库是种非常耗时的过程。当数据库里记录过多时,查询优化更显得尤为重要。为了解决这种问题,有人提出了缓存的概念。缓存就是将用户频繁使用的数据放在内存中以便快速访问。在用户执行一次查询操作后,查询的记录会放在缓存中。当用户再次查询时,系统会首先从缓存中读取,如果缓存中没有,再查询数据库。缓存技术在一定程度上提升了系统性能,但是当数据量过大时,缓存就不太合适了。因为内存容量有限,把过多的数据放在内存中,会影响电脑性能。而另一种技术,懒加载可以解决这种问题。 展开全文
在Web应用程序中,系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣。因此,提高系统响应速度,是非常重要的。Web应用程序做的最多就是和后台数据库交互,而查询数据库是种非常耗时的过程。当数据库里记录过多时,查询优化更显得尤为重要。为了解决这种问题,有人提出了缓存的概念。缓存就是将用户频繁使用的数据放在内存中以便快速访问。在用户执行一次查询操作后,查询的记录会放在缓存中。当用户再次查询时,系统会首先从缓存中读取,如果缓存中没有,再查询数据库。缓存技术在一定程度上提升了系统性能,但是当数据量过大时,缓存就不太合适了。因为内存容量有限,把过多的数据放在内存中,会影响电脑性能。而另一种技术,懒加载可以解决这种问题。
信息
外文名
Load On Demand
效    果
最大程度减少服务器端的资源耗用
中文名
懒加载
背    景
系统的瓶颈常在于系统的响应速度
懒加载技术简介
懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。
收起全文
精华内容
下载资源
问答
  • 懒加载

    2021-01-20 14:16:09
    图片的懒加载原理及实现  首先我们要了解一下什么是图片的懒加载,所谓图片懒加载的意思就是说这张图片很懒,喜欢临时抱拂脚,等到出现在我们的视线内才会去加载。这种加载数据的方式可以优化网页,提高系统的响应...
  • 懒加载(Lazy Loading) - MyBatis懒加载 - Spring懒加载

    千次阅读 多人点赞 2020-09-27 14:35:57
    文章目录懒加载(Lazy Loading)MyBatis中懒加载的使用Spring中懒加载的使用 懒加载(Lazy Loading)   懒加载也叫“延迟价值”,核心思想是把对象的实例化延迟到真正调用该对象的时候,这样做的好处是可以减轻大量...

    懒加载(Lazy Loading)

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

    MyBatis中懒加载的使用

    1. MyBatis中使用懒加载需要核心配置文件中的configuration下的settings中配置以下两行
    <configuration>
    
        <!--settings配置全局变量,这个有顺序需要放在<environment>的前面才能起作用
            lazyLoadingEnabled 配置懒加载,这里配置的是全局允许或静止懒加载,配置之后所有的任务都可以懒加载
            具体使用懒加载就是通过fetchType=lazy实现懒加载
            aggressiveLazyLoading配置为false,实现按需加载
        -->
        <settings>
            <!-- 打开懒加载的开关 -->
            <setting name="lazyLoadingEnabled" value="true"/>
            <!-- 将积极加载改为消极加载(及按需加载) -->
            <setting name="aggressiveLazyLoading" value="false"/>
        </settings>
    </configuration>    
    
    1. 在使用的时候(在映射文件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中配置懒加载
    1. 注解配置懒加载(@Lazy)
        就是在类/成员变量/方法上加@Lazy注解,表示这个类/成员变量/方法是懒加载的,在容器启动的时候不会初始化为bean,只有在使用到的时候,才会创建。
    
    //懒加载  --  类上
    @Lazy
    public class User {
        private Integer id;
        private String username;
        private String password;
    
    	//懒加载 -- 方法上
        //@Lazy
        public User(){
            System.out.println("初始化User的bean");
        }
    }
    

    1. 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局部配置会覆盖全局配置。

    展开全文
  • vue项目实现路由按需加载(路由懒加载)的3种方式

    万次阅读 多人点赞 2019-03-06 11:36:43
    为什么需要懒加载?  像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户...

    想获取更多的前端技术-请专注公众号:胖梅web前端

     

    为什么需要懒加载?

        像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时

    1. vue异步组件
    2. es提案的import()
    3. 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'
            }
        ]
    })
     

     

     

    展开全文
  • 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。这篇文章主要介绍了vue路由懒加载及组件懒加载 ,需要的朋友可以参考下
  • 懒加载 懒加载

    千次阅读 2019-12-17 10:54:23
    懒加载也就是延迟加载。 具体表现为: 当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张占位图的路径,这样就只需请求一次,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径...

    懒加载也就是延迟加载。

    具体表现为:

    当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张占位图的路径,这样就只需请求一次,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。

    好处:

    很多页面,内容很丰富,页面很长,图片较多。比如瀑布流,图片数量多且大,如果一次性加载完毕,用户等待时间过长。 懒加载页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好。

    技术原理:

    页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。 懒加载的就是先在页面中把所有的图片统一使用一张占位图进行占位,把真正的路径存在元素的“pic-url”(自定义命名)属性里,要用的时候就取出来。

    实现步骤:

    1、不要将图片地址放到src属性中,而是放到其它属性中。

    2、页面加载完成后,根据scrollTop判断图片是否在用户的视野内,如果在,则将data-original属性中的值取出存放到src属性中。

    3、在滚动事件中重复判断图片是否进入视野,如果进入,则将data-original属性中的值取出存放到src属性中。

     

    图片加载技术-懒加载和预加载

     

    预加载也就是提前加载图片

    具体表现为:

    当用户需要查看时可直接从本地缓存中渲染

    好处:

    图片预先加载到本地中,访问者便可享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。

    实现预加载的方法:

    方法一:用CSS和JavaScript实现预加载

    方法二:仅使用javascript实现预加载

    方法三:使用Ajax实现预加载

    懒加载和预加载的区别

    两种技术行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。

    展开全文
  • js实现图片懒加载原理

    万次阅读 多人点赞 2019-05-24 17:21:47
    有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站...为了解决以上问题,提高用户体验,就出现了懒加载方式来减轻服务器的压力,优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能。...

    有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站,商品图片多只之又多,页面图片多,加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个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!

    展开全文
  • 转自:https://www.cnblogs.com/cornucopia/articles/4541621.html转自:...什么时候用懒加载呢,我只能回答要用懒加载的时候就用懒加载。至于为什么要用懒加载呢,就是当我们要访问的数据量过...
  • jQuery懒加载点击加载图片代码是一款加载更多代码,不兼容IE6,7,8。
  • 懒加载,按需加载

    2018-01-29 15:13:44
    懒加载 按需加载 lazyload 原生来写的,全匹配支持懒加载
  • fragment懒加载

    2018-12-03 10:49:22
    fragment懒加载,自己无聊写的小demo,方便以后开发,里面写了一个LazyFragment和一个BaseFragment,直接继承LazyFragment即可懒加载
  • 图片懒加载

    2017-05-19 08:54:38
    图片懒加载
  • angularjs懒加载

    2019-01-29 15:51:01
    angularjs懒加载模式,使页面能快速访问,简化资源的加载速率
  • 懒加载demo

    2017-06-01 00:37:21
    android懒加载demo
  • 一、什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。 二、为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容...
  • viewpager懒加载

    2018-09-20 22:50:02
    什么是懒加载:viewpager会默认预加载当前界面左右的fragment,为了防止其他需要预加载并且不可见的fragment与当前可见的fragment在加载数据时抢占cpu和内存资源,预加载的fragment只有当其可见时才去加载数据,这样...
  • Vue路由懒加载及组件懒加载

    千次阅读 2020-05-10 10:12:55
    一、为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。 二、定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。 三、使用 常用的懒加载...
  • DIV懒加载demo

    2018-06-26 13:53:41
    div懒加载区别于图片懒加载,模仿天猫 京东实现滚动动态加载div
  • Vue组件懒加载和Vue路由懒加载 这里只记录了router层面上的懒加载方法,还有在*.vue中各种懒加载的方法,例如:需要的时候import组件,用完destory等等。 Vue组件的懒加载 vue-router配置路由 , 使用vue的异步组件...
  • vue路由懒加载及组件懒加载 一、为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。 二、定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。 三、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 120,952
精华内容 48,380
关键字:

懒加载