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

作者: Ethan__Hunt | 来源:发表于2018-10-10 22:03 被阅读0次

web优化之懒加载和预加载
Web性能优化-懒加载和预加载
如何实现图片懒加载，预加载！！
面试题
浅谈性能优化实践篇
HTTP缓存详解
web性能优化－预加载
不能错过的web前端性能优化总结
Vue路由异步组件
前端性能优化之懒加载，预加载

懒加载使用场景

图片进入可视区域之后请求图片资源
对于电商等图片很多,页面很长的业务场景适用
减少无效的资源的加载
并发加载的资源过多会阻塞js 的加载,影响网站的正常使用

预加载的使用场景

图片等静态资源在使用之前就提前请求
资源使用到的时候能从缓存中加载, 提升用户体验
页面展示的依赖关系维护

比如Angular中就提供了懒加载主要通过路由配置#module . 预加载,是一种预加载PreloadStrategy 服务. Angular 中更多的是模块之间的懒加载和预加载的过程

懒加载

懒加载的原生实现
当我们的图片进入可视区域,去请求资源
需要去监听scroll事件,在scroll事件的回调中,去判断我们的懒加载的图片是否进入可视区域.

js代码

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;
            console.log(item);
            console.log(item.dataset);//原生js 写的不多,原来还有这样用法
            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);

学习到两句话:
第一句: 是item.dataset 本身取到的是DOMStringMap 对象
新的HTML5标准允许你在普通的元素标签里，嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由javascript动态修改，也支持CSS选择器进行样式设置。

其实这么写 data-original就是给元素设置了一个属性, getAttribute 和 setAttribute 同样可以用 . 因为data 属性的支持情况在IE上很糟糕 ,呵呵, 因此，如果要考虑兼容性，可以考虑利用 getAttribute、setAttribute存取dataset

第二句话是
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

1.语法：这个方法没有参数。rectObject = object.getBoundingClientRect();
2.返回值类型：TextRectangle对象，每个矩形具有四个整数性质（上，右，下，和左）表示的坐标的矩形，以像素为单位。
rectObject.top：元素上边到视窗上边的距离;
rectObject.right：元素右边到视窗左边的距离;
rectObject.bottom：元素下边到视窗上边的距离;
rectObject.left：元素左边到视窗左边的距离;
这个支持比较好 ie4以上,

css 代码
重要的是给item 设置一个高度, 如果没有的话. 懒加载就不成功了.因为初始化的时候他们没有占位置, 高度都是零. 都满足了rect.top < viewHeight .全部都会加载出来.

.image-item{
            width:40%;
            margin-right:5%;
            display: inline-block;
            height:400px;
            background:grey;
        }
        .image-list {
            margin-left: 5%;
        }

html代码 ,图片我是从淘宝随便找的, 能显示出来就行.

<div class="image-list">
        <img class="image-item" src= "" lazyload="true" data-original="//img.alicdn.com/imgextra/https://img.alicdn.com/bao/uploaded/i4/1971631275/O1CN011LHzQvuBPlCLFdg_!!1971631275.jpg_430x430q90.jpg">
        <img class="image-item" src= "" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/38832490/O1CN011UGSeYa6uu2fbWJ_!!38832490.jpg_400x400.jpg_.webp">
        <img class="image-item" src= "" lazyload="true" data-original="//g-search1.alicdn.com/img/bao/uploaded/i4/i1/2300650542/O1CN011FsH8Ctmua87iKG_!!0-item_pic.jpg_360x360Q90.jpg_.webp">
        <img class="image-item" src= "" lazyload="true" data-original="//g-search3.alicdn.com/img/bao/uploaded/i4/i1/3262708088/O1CN0129cLqPxFvAzV4xr_!!0-item_pic.jpg_360x360Q90.jpg_.webp">
        <img class="image-item" src= "" lazyload="true" data-original="//g-search2.alicdn.com/img/bao/uploaded/i4/i1/2735225488/O1CN011qPY4L3OPAQeN9S_!!2735225488.jpg_360x360Q90.jpg_.webp">
        <img class="image-item" src= "" lazyload="true" data-original="//g-search1.alicdn.com/img/bao/uploaded/i4/i4/1646111836/O1CN011PQvdX5eLy7Oc90_!!1646111836.jpg_360x360Q90.jpg_.webp">
        <img class="image-item" src= "" lazyload="true" data-original="//g-search3.alicdn.com/img/bao/uploaded/i4/i2/2866189752/TB2BiKXX49YBuNjy0FfXXXIsVXa_!!2866189752.jpg_360x360Q90.jpg_.webp">
        <img class="image-item" src= "" lazyload="true" data-original="//g-search3.alicdn.com/img/bao/uploaded/i4/i4/520233987/TB2Usn1tamWBuNjy1XaXXXCbXXa_!!520233987.jpg_360x360Q90.jpg_.webp">
        <img class="image-item" src= "" lazyload="true" data-original="//g-search1.alicdn.com/img/bao/uploaded/i4/i2/14738023913022489/T1EBO0Xu0gXXXXXXXX_!!0-item_pic.jpg_360x360Q90.jpg_.webp">
        <img class="image-item" src= "" lazyload="true" data-original="//g-search1.alicdn.com/img/bao/uploaded/i4/i1/714469648/TB1SN9KXFyZBuNjt_jJXXbDlXXa_!!0-item_pic.jpg_360x360Q90.jpg_.webp">
        <img class="image-item" src= "" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/1330406085146611155/TB2jcQRBdRopuFjSZFtXXcanpXa_!!0-saturn_solar.jpg_200x200.jpg">
        <img class="image-item" src= "" lazyload="true" data-original="//g-search3.alicdn.com/img/bao/uploaded/i4/i3/872172049/TB2QxUFcwHqK1RjSZFPXXcwapXa_!!872172049-0-item_pic.jpg_360x360Q90.jpg_.webp">
    </div>
    <script src="./lazyload.js"></script>

预加载

四种方式

引用一个图片, display 设置为none
在js 中创建new Image() 然后给 img 设置src
xmlHttpRequest 异步请求. 优点: 可以监控Process 比如现在已经加载了多少.便于操控, 缺点有跨域问题.
4.使用其他库比如Preload.js , 这个其实原生也是用src 或者 xmlHTTPRequest实现,默认是XMLHTTPRequest,

第一个就不举例子了.
第二个在js 中这么写. 浏览器就会请求加载图片资源

var img = new Image();
img.src = "https://img.alicdn.com/imgextra/i4/38832490/O1CN011UGSeYa6uu2fbWJ_!!38832490.jpg_400x400.jpg_.webp";

第三个:

var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = callback;
xmlHttpRequest.onprogress = progressCallback;
xmlHttpRequest.open("GET","https://img.alicdn.com/imgextra/i4/1330406085146611155/TB2jcQRBdRopuFjSZFtXXcanpXa_!!0-saturn_solar.jpg_200x200.jpg",true);
xmlHttpRequest.responseType = "blob";
xmlHttpRequest.send();
function callback(){
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        var blob = this.response;
        var img = document.createElement("img");
        img.onload = function(e) {
            window.URL.revokeObjectURL(img.src);
            //在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，
            // 即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，
            // 每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们，
            // 但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。

        };
        img.src = window.URL.createObjectURL(blob); //创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。
        // 这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
        console.log(img);
        document.body.appendChild(img);

    }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");
    }
}

看一下
在html中的效果

生成的效果.png