js中的预加载与懒加载（延迟加载）

js加载分两种：预加载和延迟加载

预加载

增强用户的体验，但会加载服务器的负担，一般会使用多种CSS(background)、JS(Image)、HTML(<img />)。

什么是预加载
提前加载图片，当用户需要查看时可以直接从本地缓存中渲染。

实现方法
1、单纯的css实现
可通过CSS的background属性将图片预加载到屏幕外的背景上，只要这些图片的路径保持不变，当它们在web页面的其他地方被调用，浏览器就会在渲染中使用预加载（缓存）的图片。简单、高效、不需要任何JavaScript。

#preload{
  background:url(http://domain.tld/image-01.png) no-repeat -9999px -9999px;
}

2、单纯的js预加载图片

<script>
var images = new Array()
function preload () {
  for (var i = 0; i < preload.arguments.length; i++) {
    images[i] = new Image()
    images[i].src = preload.arguments[i];
   }
}
preload(
   "http://domain.tld/gallery/image-001.jpg",  
  "http://domain.tld/gallery/image-002.jpg",  
  "http://domain.tld/gallery/image-003.jpg"
)
</script>
// 使用append 添加到页面中显示。

3、使用ajax实现预加载

widow.onload = function(){
  setTimeout(function(){
    var xhr = new new XMLHttpRequest();
    xhr.open('GET', 'http://domain.tld/preload.js');
    xhr.send('');
    xhr = new XMLHttpRequest();
    xhr.open('GET','http://domain.tld/preload.css')
    xhr.send('');
    new Image().src = 'http://domain.tld/preload.png'
  },1000)
}

延迟加载（懒加载）

1、什么是懒加载
懒加载又称延迟加载
当访问一个页面时，先把img元素或者其他元素的背景图图换成一张大小1*图片的路径（只需要请求一次的占位图），只有当图片出现浏览器的可视区域内时，才设置图片的真正的路径，让图片显示出来这就是图片的懒加载。

2、懒加载的实现原理：
页面中img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过js设置图片路径，浏览器才会发送请求；
懒加载的原理是先在页面中把所有的图片统一使用一张占位图进行占位，把真正的路径元素的'data-url'属性中，要使用的时候，再设置。

3、懒加载的实现步骤
（1）不要将图片地址放到src属性中，而是放到其他属性(data-original)中。
（2）页面记载完成后，根据scrollTop判断图片时候在用户的视野内，如果在，则将data-original属性中的值取出来放到src属性中。
（3）在滚动事件中重复判断图片时候进入视野，如果进入，则将data-original属性中的值取出来存放到src属性中。

4、懒加载的优点
页面加载速度快，可以减缓服务器的压力节约了流量用户体验好

懒加载与预加载的对比

1、概念
懒加载：也叫延迟加载，js图片延迟加载，延迟加载图片或者符合某些条件时才加载图片；
预加载：提前加载图片，当用户需要查看时可以直接从本地缓存中渲染。（base64小图片可以通过css保存）

2.区别
本质：行为相反，一个是提前加载，一个是迟缓加载甚至不加载。懒加载会对前端一定的缓解压力作用，预加载则会加载前端的压力

3、懒加载的意义及实现方式
懒加载的主要目的是优化前端性能，减少请求数或延缓请求数。
方法：
1).纯粹的延迟加载，使用setTimeout或者setInterval进行就艾滋啊延迟；
2).条件加载，符合某些条件，或者触发了某些事件才开始异步下载；
3).可视区加载，即仅加载可以到的区域，监控滚动条实现

4、预加载的意义及实现方式
预加载是牺牲前端性能，换区用户体验，使用户的操作得到最快的反映。
方法：
用CSS和JavaScript实现预加载，仅适用JavaScript实现预加载，适用Ajax实现预加载。
常用的是new Image()；设置其src来实现加载，再使用onload() 方法回调预加载完成事件。只要浏览器把图片下载到本地，src就会缓存，这只最基本的方法，当image下载完成后，会得到宽和高。因此，可以在预加载前得到图片的大小（方法使用计时器轮循环宽高变化）。

function loadImage(url,callback) {
    var img = new Image();
    img.src = url;
    if(img.complete) {  // 如果图片已经存在于浏览器缓存，直接调用回调函数
        callback.call(img);
        return; // 直接返回，不用再处理onload事件
    }
    img.onload = function(){
        img.onload = null;
        callback.call(img);
    }
}

vue中的懒加载

vue中的延迟加载是通过webpack代码拆分组件实现的。
在vue中，有3块不同的延迟加载和代码拆分，使用动态导入：
（1）组件又称为异步组件
（2）路由器
（3）vue模块

vue组件的延迟加载

通过将import函数包装到箭头函数中，Vue将仅在请求时执行它，并在该模块时刻加载模块。（也称为按需加载）

Vue.component('AsyncCmp',() =>import('./AsyncCmp'))

vue路由器中的延迟加载

vue路由器内置支持延迟加载

const Login = () => import('./login')
new VueRouter ({
  routes:[
    {path:'/login',component:Login}
  ]
})

延迟加载vuex模块

Vue有一种registerModule方法可以让我们动态创建Vuex模块。

const store = new Vuex.Store()
..
// Assume there is a "login" module we wanna load
import('./store/login').then(loginModule => {
  store.registerModule('login', loginModule)
})