减少无用资源的加载：使用懒加载明显减少了服务器的压力和流量，同时也减小了浏览器的负担。提升用户体验:如果同时加载较多图片，可能需要等待的时间较长，这样影响了用户体验，而使用懒加载就能大大的提高用户体验。防止加载过多图片而影响其他资源文件的加载：会影响网站应用的正常使用。

图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源。根据这个原理，我们使用HTML5的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。注意：data-xxx中的xxx可以自定义，这里我们使用data-src来定义。懒加载的实现重点在于确定用户需要加载哪张图片，在浏览器中，可视区域内的资源就是用户需要的资源。所以当图片出现在可视区域时，获取图片的真实地址并赋值给图片即可。使用原生JavaScript实现懒加载：知识点：（1）window.innerHeight是浏览器可视区的高度（2）document.body.scrollTop||document.documentElement.scrollTop是浏览器滚动过的距离（3）imgs.offsetTop是元素顶部距离文档顶部的高度（包括滚动条的距离）（4）图片加载条件：img.offsetTop<window.innerHeight+document.body.scrollTop;图示：<divclass="container"><imgsrc="loading.gif"data-src="pic.png"><imgsrc="loading.gif"data-src="pic.png"><imgsrc="loading.gif"data-src="pic.png"><imgsrc="loading.gif"data-src="pic.png"><imgsrc="loading.gif"data-src="pic.png"><imgsrc="loading.gif"data-src="pic.png"></div><script>varimgs=document.querySelectorAll('img');functionlozyLoad(){varscrollTop=document.body.scrollTop||document.documentElement.scrollTop;varwinHeight=window.innerHeight;for(vari=0;i<imgs.length;i++){if(imgs[i].offsetTop<scrollTop+winHeight){imgs[i].src=imgs[i].getAttribute('data-src');}}}window.onscroll=lozyLoad();</script>复制代码

hash模式location.hash的值实际就是URL中#后面的东西它的特点在于：hash虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。可以为hash的改变添加监听事件window.addEventListener("hashchange",funcRef,false);每一次改变hash（window.location.hash），都会在浏览器的访问历史中增加一个记录利用hash的以上特点，就可以来实现前端路由“更新视图但不重新请求页面”的功能了特点：兼容性好但是不美观history模式利用了HTML5HistoryInterface中新增的pushState()和replaceState()方法。这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go的基础之上，它们提供了对历史记录进行修改的功能。这两个方法有个共同的特点：当调用他们修改浏览器历史记录栈后，虽然当前URL改变了，但浏览器不会刷新页面，这就为单页应用前端路由“更新视图但不重新请求页面”提供了基础。特点：虽然美观，但是刷新会出现404需要后端进行配置(一般是将页面配置重定向到首页路由)总结hash模式是开发中默认的模式，如果想要切换到history模式，就要进行以下配置（后端也要进行配置）：constrouter=newVueRouter({mode:'history',routes:[...]})