前端性能优化 懒加载和预加载

Posted 2020-11-24 wzndkj

懒加载

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

浏览器解析的过程中，遇到image里面有src，他就会去请求 src 里面的资源，在真实场景中，我们希望图片进入可视区域之后，src 才会被设置进去，而不是一开始可视区域之外的 img 就设置了 src ,如果已经设置了，显然没在可是区域就去加载了。所以一开始不在可视区域的图片只是一个占位符，他真正的 url 存放在 data-url 上面。这个地址因为没放在 src 上，所以不会造成去请求图片相关的资源。通过 js 监听 scroll 事件，监听到这个图片到可视区域之后，将 data-url 放置到 src ，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;
    
    // getBoundingClientRect 返回元素的大小及其相对于视口的位置。
    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)

 

预加载方式

1、display:none

2 new Image的方式。js执行到的时候已经被加载下来，实际上还没有被使用

var image = new Image()

image.src = "http://pic26.nipic.com/20121213/6168183_004444903000_2.jpg"

3、xmlhttprequest

// 使用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")
  }
}

 

缺陷是有跨域问题，优点是可以更加精细的控制预加载过程