码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-12-07 16:15:08      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:origin   ase   data   send   log   ora   pen   rem   get   


懒加载
图片进入可视区域之后请求图片资源。对于电商等图片很多,页面很长的业务场景适用。减少无效资源的加载。并发加载的资源过多会阻塞 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")
  }
}
 
缺陷是有跨域问题,优点是可以更加精细的控制预加载过程


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

标签:origin   ase   data   send   log   ora   pen   rem   get   

原文地址:https://www.cnblogs.com/wzndkj/p/12001855.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!