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


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


posted @   wzndkj  阅读(716)  评论(0编辑  收藏  举报
编辑推荐:
· 几种数据库优化技巧
· 聊一聊坑人的 C# MySql.Data SDK
· 使用 .NET Core 实现一个自定义日志记录器
· [杂谈]如何选择:Session 还是 JWT?
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
阅读排行:
· 聊一聊坑人的 C# MySql.Data SDK
· Java 项目愚蠢的分层及解决办法
· 一个.NET开源、易于使用的屏幕录制工具
· C#中 Task 结合 CancellationTokenSource的妙用
· Superpower:一个基于 C# 的文本解析工具开源项目
历史上的今天:
2018-12-07 cookie
点击右上角即可分享
微信分享提示