JavaScript中的预加载和懒加载
预加载和懒加载的使用场景不同，可以先了解一下浏览器机制，有助于理解两者的原理。在网页中合理使用预加载和懒加载有效地减少用户的等待时间，提高用户体验。
目录
页面加载过程预加载懒加载该篇博客参考以下文章总结而成：
Javascript图片预加载详解
懒加载和预加载的实现
页面加载过程
简单说一下页面的加载过程，如果页面不是第一次访问，那么可能会出现浏览器缓存现象，在本地调试代码的时候也会遇到这种问题，所以在实在想不通页面为什么没有变化的时候，可以清除一下浏览器的缓存。
如果页面是第一次访问，浏览器向服务器http请求后，服务器返回html文件，在整个页面加载过程中，总的来说是按顺序从上到下执行，这是基于js的单线程机制，但是html和css是并行加载的，html生成dom树，css生成rule树，两者相结合生成render树。
接下来遇到js文件，则会造成堵塞，页面会一直等到js文件执行完才会进行下一步操作。
在进行html中body部分加载时，如果遇到图片的src，它会请求资源，此时图片还没下载完全，在页面上并不会留下图片的位置，而html不会堵塞，将会继续执行下去。
等到有图片请求下载完成，html又会重新渲染页面，将图片显示出来。
了解了页面的加载过程后更好理解预加载和懒加载，对页面进行更好的优化。
预加载
预加载的核心：
图片等静态资源在使用前提前请求。资源后续使用可以直接从缓存中加载，提升用户体验。几个误区：
预加载不是为了减少页面加载时间预加载只是提前加载除去首轮加载的图片以后要用到的图片，比如通过点击等事件才会用到的图片。预加载的三种方式
一、css+javascript
仅使用css的情况:
#preload-01 {background: url(img1.png); }#preload-02 {background: url(img2.png); }#preload-03 {background: url(img3.png); }
preload-01、preload-02、preload-03实际上是不会在页面上显示的，它们的作业就是为了预加载图片上面的图片。在执行了上面的css后，本地就已经有了上面的图片缓存，后面如果还需要该图片，则直接从缓存在读取，减少了用户的等待时间。
在前面提到，预加载不是为了减少页面加载时间，但是向上面那样写，预加载和页面上其他内容一起加载，还会加长页面的加载时间，用户在点进页面时，等待时间加长，并没有达到我们提高用户体验的目的，我们可以封装一个函数，推迟预加载时间，等页面加载完成后再预加载。
function preload(){if(document.getElementById){document.getElementById("preload-01").style.background = "url(img1.png)";document.getElementById("preload-02").style.background = "url(img2.png)";document.getElementById("preload-03").style.background = "url(img3.png)";}}function addLoadEvent(func){
如果觉得《JavaScript中的预加载和懒加载》对你有帮助，请点赞、收藏，并留下你的观点哦！
