懒加载和预加载---性能优化

Posted jamie1032797633

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了懒加载和预加载---性能优化相关的知识,希望对你有一定的参考价值。

懒加载

认识

懒加载是一种按需延迟资源的方式。在加载显示页面时,并不一次性加载所有该页面所需要的图像,对于在可视区域之外的图像,可以等到用户scroll到该区域的时候,再进行加载

实现方式

1、目前已经有很多库实现了懒加载,例如lazysizes,可以考虑使用

2、使用库这样的操作,相当于增加一个需要请求的js文件,增加一次http请求。所以如果能够实现原生的懒加载,能够更好的优化性能;

原生js实现图片懒加载

原理:

  1. 页面上图片的src属性设置为空字符串;(也可以设置为一个占位位图)
  2. 将真实路径存放在data-original属性中;(以data-开头的html5属性,original可以自定义)
  3. 监听scroll事件,scroll回调函数中判断懒加载图片位置是否进入可视区域。如果是,则将data-original属性值赋值给src属性

代码

  

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)

 

预加载

预加载,提前告诉浏览器将会用到的资源(例如图片),提前加载缓存起来。需要的时候,直接从缓存中获得图片等资源

http请求并没有减少,而是在页面加载渲染的过程中,在网络不繁忙的时机发出请求。

实现方法:

  1. HTML方式
    <img src="./img/1.jpeg" style="display:none">
    <!--并不非常推荐的做法,因为虽然看不见元素,但是该元素的http请求,依然会在页面加载和渲染的过程中发出,反而加长了首屏显示时间 -->
  2. css方式
    <style>
    #demo
    { background:url("./img/demo.jpeg")
                   no-repeat -9999px -9999px;
    }
    </style>
    /* 以上代码可以作为内联样式直接加入到html文件中,浏览器在加载渲染页面过程中,遇到就会直接发出请求,
    -9999px -9999px 可以将图片隐藏起来,作用与html方式中的display:none相同*/
    /*同样没有减少http请求,并且运行在页面渲染过程中,首屏显示时间依然会增加*/
  3. Image元素
    使用Image元素,同使用html标签原理是相同的,不多是js实现
    //demo.js
    var
    img = new Image(); img.src = "./img/1.jpeg"
    <!-- src可以是相对路径或者绝对路径,还可以跨域。当然跨域就存在一定的安全性问题-->

    将脚本加入到页面中(js位置很重要,最好放在“</body>”之前‘’;或者放在head中,但是使用defer属性延迟脚本的执行)

    <script src="demo.js"></script>
  4. 以上三种方法的优化---运行时机的选择
    使用js代码生成img元素,style样式,以及Image元素。然后选择在window.onload时运行。
    window.onload事件是在页面所有资源都加载完毕之后才运行的,不会影响到首屏时间
    window.onload=function(){
                
                var img = document.createElement(‘img‘);    
                img.setAttribute(‘src‘,‘./img/1.jpeg‘);
                img.setAttribute(‘style‘,‘display:block‘);
    
                // 添加元素到body中,位于</body>之前,
                document.body.appendChild(img);
            }

     

  5. XMLHttpRequest
    使用ajax发出请求,可以精确的控制图片的下载过程,可以在请求成功之后回调运行其他需要操作。比如调整图片的大小等等

    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")
    }
    }
  6. PreLoadJS库
    PreloadJs官网

总结

懒加载与预加载,一个是延迟图片的加载,一个是提前加载图片并缓存起来。

懒加载,减少了http请求。预加载并没有减少请求。

懒加载非常直接明确的提升了性能。预加载相当于提前做牺牲为后来者做了性能优化,选择预加载的执行时机就显得非常重要。

 

以上是关于懒加载和预加载---性能优化的主要内容,如果未能解决你的问题,请参考以下文章

webpack性能优化- lzy loading(懒加载和预加载)

图片网站中的懒加载和预加载(转)

懒加载和预加载

图片懒加载和预加载

#yyds干货盘点#前端图片懒加载

懒加载与预加载