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

  • 懒加载

     2017-07-11 20:38:47
    懒加载 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懒加载</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        #outer{
            width: 800px;
            margin:50px auto;
            overflow: hidden;
        }
        h1{
            text-align: center;
        }
        #outer img:nth-of-type(2n){
            float:right;
            margin-bottom:20px;
        }
        #outer img:nth-of-type(2n-1){
            float:left;
            margin-bottom: 20px;
        }
        img{
            width: 350px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="outer">
        <h1>这里是懒加载(延迟加载)图片</h1>
        <img src="" alt="" loadRc="img/1.jpg">
        <img src="" alt="" loadRc="img/2.jpg">
        <img src="" alt="" loadRc="img/3.jpg">
        <img src="" alt="" loadRc="img/4.jpg">
        <img src="" alt="" loadRc="img/5.jpg">
        <img src="" alt="" loadRc="img/6.jpg">
        <img src="" alt="" loadRc="img/7.jpg">
        <img src="" alt="" loadRc="img/8.jpg">
        <img src="" alt="" loadRc="img/9.jpg">
        <img src="" alt="" loadRc="img/10.jpg">
        <img src="" alt="" loadRc="img/11.jpg">
        <img src="" alt="" loadRc="img/12.jpg">
        <img src="" alt="" loadRc="img/13.jpg">
        <img src="" alt="" loadRc="img/14.jpg">
        <img src="" alt="" loadRc="img/15.jpg">
        <img src="" alt="" loadRc="img/16.jpg">
        <img src="" alt="" loadRc="img/17.jpg">
        <img src="" alt="" loadRc="img/18.jpg">
        <img src="" alt="" loadRc="img/19.jpg">
        <img src="" alt="" loadRc="img/20.jpg">
        <img src="" alt="" loadRc="img/21.jpg">
        <img src="" alt="" loadRc="img/22.jpg">
    </div>

    <script>
        var imgs = document.getElementsByTagName('img');
        // window.onload当前页面的（视频 音频 图片 文本）加载完毕执行
        // window.onload = function(){

        // }
        // 创建函数计算目标元素到body顶部的距离
        function getTL(obj){
            var t = 0;
            var l = 0;
            var start = obj;
            while(obj){
                if(obj == start){
                    t += obj.offsetTop;
                    l += obj.offsetLeft;
                    obj = obj.offsetParent;
                }else{
                    t += obj.offsetTop + obj.clientTop;
                    l += obj.offsetLeft + obj.clientLeft;
                    obj = obj.offsetParent;
                }
            }
            return {left:l,top:t};
        }
        window.onload = window.onscroll = function(e){
            var e = e || window.event;
            var h1 = document.documentElement.scrollTop || document.body.scrollTop;
            // 获取浏览器窗口高度
            var h2 = document.documentElement.clientHeight;
            for(var i=0; i<imgs.length; i++){
                // 遍历所有img判断img顶部到body顶部的距离是否大于h1与h2的和
                if(getTL(imgs[i]).top < h1+h2){
                    imgs[i].src = imgs[i].getAttribute('loadRc');
                }
            }
        }
    </script>
</body>
</html>
    收起
    展开全文

  • 懒加载 懒加载

     千次阅读 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实现预加载
    


    懒加载和预加载的区别
    


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

  • 懒加载(Lazy Loading) - MyBatis懒加载 - Spring懒加载

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

    懒加载(Lazy Loading)
    

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

    MyBatis中懒加载的使用
    

      

    1. MyBatis中使用懒加载需要核心配置文件中的configuration下的settings中配置以下两行
      2. 

    

    <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" ，表明这个数据是懒加载实现的。
      2. 

    

    	<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，只有在使用到的时候，才会创建。
      2. 

    

    
//懒加载  --  类上
@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")
      2. 

    

    <!-- 全局懒加载，在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局部配置会覆盖全局配置。
    收起
    展开全文
    Lazy

  • vue实现路由懒加载及组件懒加载的方式

     2020-10-16 20:22:16
    懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。这篇文章主要介绍了vue路由懒加载及组件懒加载 ,需要的朋友可以参考下 
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                

            


            

                

                

                    
                    
空空如也

                

            


            

                

                

                    
                    
空空如也

                

            


            

                


 

 
 
         

            
                     


                    
                        1 
                    
                    
                        2 
                    
                    
                        3 
                    
                    
                        4 
                    
                    
                        5 
                    
                        ... 
                    
                        20 
                    

                    
            
        

   

                

                

            


        

    

    

        

            

                收藏数
                    19,891
            

            

                精华内容
                    7,956
            

        

        

            
热门标签

            
        


        


        

            关键字：
懒加载