懒加载与预加载

懒加载

1.什么是懒加载？

• 懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来，这就是图片懒加载。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。

2.为什么要用懒加载？

• 能提升用户的体验，不妨设想下，用户打开像手机淘宝长页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长，用户难免会心生抱怨，这就严重影响用户体验。
• 减少无效资源的加载，能明显减少服务器的压力和流量，也能够减小浏览器的负担。
• 防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用。

3.懒加载的实现:

• 首先将页面上的图片的 src 属性设为空字符串或占位图的路径，而图片的真实路径则设置在自定义属性中，比如：data-src；
• 当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-src的值，这样就可以实现延迟加载。

4.意义：
服务器前端的优化，减少请求数或延迟请求数，提升用户的体验。

//懒加载代码实现
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)

预加载

1.什么是预加载？

• 资源预加载是另一个网页性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

2.为什么要用预加载？

• 在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。

3.预加载实现方法：

• 用CSS和JavaScript实现预加载：
  html中img标签最初设置为display:none。
• 仅使用JavaScript实现预加载：
  js脚本中使用new Image()动态创建图片设置src来实现预载，再使用onload方法回调预载完成事件。
• 使用Ajax实现预加载：
  使用XMLHttpRequest对象可以更加精细的控制预加载过程。

4.意义:

• 牺牲服务器前端性能，换取更好的用户体验，让用户的操作得到最快的反映。

对比

两者都是提高页面性能有效的办法，两者主要区别：行为相反，一个是提前加载，一个是延迟甚至不加载(满足一定条件下)。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。