精华内容
下载资源
问答
  • 懒加载和预加载

    2019-09-30 04:53:08
    懒加载和预加载 Motivation 今天做拼多多的前端笔试的时候问到了这样一个问题: 图片懒加载和预加载的不同点?他们的应用场景?两种技术对服务器前端的影响。 好像只是听说过,没有具体了解和应用过。所以在这里赶紧...

    懒加载和预加载

    Motivation

    今天做拼多多的前端笔试的时候问到了这样一个问题:

    图片懒加载和预加载的不同点?他们的应用场景?两种技术对服务器前端的影响。

    好像只是听说过,没有具体了解和应用过。所以在这里赶紧总结一下

    本文参考了掘金浪里行舟的[懒加载和预加载]https://juejin.im/post/5b0c3b53f265da09253cbed0

    懒加载

    懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好的优化网页性能的方式。
    用户滚动到它们之前,可视区域外的图像不会加载。这与图像预加载相反,在长网页上使用延迟加载将使网页加载更快。
    在某些情况下,它还可以帮助减少服务器负载。
    懒加载通常适用于图片很多,页面很长的电商网站场景中。
    懒加载优点有:

    1. 能提升用户体验。例如在使用B站的时候,如果网页上所有的视频封面都一次性加载,由于图片数目较大,等待时间就会很长,严重影响用户体验。
    2. 减少无效资源的加载,这样能明显减少服务器的压力和流量,也能够减少浏览器的负担。
    3. 防止并发加载的资源过多会阻塞js的加载,影响网站的正常使用。

    懒加载的原理:首先将页面上的src属性设为空字符串,而图片的真实路径则设置在data-original属性中,当页面滚动的时候需要监听scroll事件,在scroll事件的回调中,判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的src属性设置为data-original值,这样就可以实现延迟加载。

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Lazyload</title>
        <style>
          .image-item {
              display: block;
              margin-bottom: 50px;
              height: 200px;//一定记得设置图片高度
            }
        </style>
    </head>
    <body>
      <img src="" class="image-item" lazyload="true"  data-original="images/1.png"/>
      <img src="" class="image-item" lazyload="true"  data-original="images/2.png"/>
      <img src="" class="image-item" lazyload="true"  data-original="images/3.png"/>
      <img src="" class="image-item" lazyload="true"  data-original="images/4.png"/>
      <img src="" class="image-item" lazyload="true"  data-original="images/5.png"/>
      <img src="" class="image-item" lazyload="true"  data-original="images/6.png"/>
      <img src="" class="image-item" lazyload="true"  data-original="images/7.png"/>
      <img src="" class="image-item" lazyload="true"  data-original="images/8.png"/>
      <img src="" class="image-item" lazyload="true"  data-original="images/9.png"/>
      <img src="" class="image-item" lazyload="true"  data-original="images/10.png"/>
      <img src="" class="image-item" lazyload="true"  data-original="images/11.png"/>
      <img src="" class="image-item" lazyload="true"  data-original="images/12.png"/>
    <script>
      var viewHeight =document.documentElement.clientHeight//获取可视区高度
      function lazyload(){
        var eles=document.querySelectorAll('img[data-original][lazyload]')
        Array.prototype.forEach.call(eles,function(item,index){
          var rect
          if(item.dataset.original==="")
            return
          rect=item.getBoundingClientRect()// 用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置
          if(rect.bottom>=0 && rect.top < viewHeight){
          !function(){
            var img=new Image()
            img.src=item.dataset.original
            img.onload=function(){
            item.src=img.src
          }
          item.removeAttribute("data-original")//移除属性,下次不再遍历
          item.removeAttribute("lazyload")
       }()
      }
     })
    }
      lazyload()//刚开始还没滚动屏幕时,要先触发一次函数,初始化首页的页面图片
      document.addEventListener("scroll",lazyload)
    </script>
    </body>
    </html>

    预加载

    资源预加载是另一个性能优化技术,可以用来预先告知浏览器某些资源可能在将来会被使用到。
    预加载就是将所有所需的资源提前请求加载到本地,这样后面再需要用到时就直接从缓存中获取资源。

    预加载的优点在于:在网页全部加载之前,对一些主要内容进行加载,以提供给用户更好的体验,减少等待的时间。否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,直到所有内容加载完毕。

    预加载有几种实现方式:

    1. 使用HTML标签
      <img src="http://pic26.nipic.com/20121213/lkajf.img" style="display:none">

    2. 使用image对象
      <script src="./myPreload.js"></script>

    var image = new Image();
    image.src = "http://pic26.nipic.com/20121213/lkajf.img";
    1. 使用XMLHttpRequest对象,虽然存在跨域问题,但会精细控制预加载过程。
    var xmlhttprequest = new XMLHttpRequest();
    xmlhttprequest.onreadystatechange = callback;
    xmlhttprequest.onprogress = progressCallback;
    xmlhttprequest.open("GET", "http://image.baidu.com/mouse.jpg", true);
    xmlhttprequest.send();
    function callback() {
      if(xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
        var responseText = xmlhttprequest.responseText;
      } else {
        console.log("Request was unsuccessful: " + xmlhttprequest.status);
      }
    }
    function progressCallback(e) {
      e = e || event;
      if (e.lengthComputable) {
        console.log("Received"+e.loaded+"of"+ e.total + "bytes");
      }
    }

    懒加载和预加载的对比

    两者都是提高页面性能有效的办法,两者主要区别是一个提前加载,一个迟缓甚至不加载。
    懒加载对服务器前端有一定的缓解压力作用,预加载会增加服务器前端压力。

    转载于:https://www.cnblogs.com/doggnol/p/11443077.html

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 662
精华内容 264
关键字:

懒加载和预加载