懒加载、懒执行、预加载、预渲染

懒加载：

懒加载就是将不关键的资源延后加载。

懒加载的原理就是只加载自定义区域（通常是可视区域，但也可以是即将进入可视区域）内需要加载的东西。对于图片来说，先设置图片标签的src属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为src属性，这样图片就会去下载资源，实现了图片懒加载。

懒加载不仅可以用于图片，也可以使用在别的资源上。比如进入可视区域才开始播放视频等等。

懒执行：

懒执行就是将某些逻辑延迟到使用时再计算。该技术可以用于首屏优化，对于某些耗时逻辑并不需要在首屏就使用的，就可以使用懒执行。懒执行需要唤醒，一般可以通过定时器或者事件的调用来唤醒。

预加载：

在开发中，可能会遇到这样的情况。有些资源不需要马上用到，但是希望尽早获取，这时候就可以使用预加载。

预加载其实是声明式的fetch，强制浏览器请求资源，并且不会阻塞onload事件，可以使用以下代码开启预加载：

预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性不好。

预渲染：

可以通过预渲染将下载的文件预先在后台渲染，可以使用以下代码开启预渲染：

预渲染虽然可以提高页面的加载速度，但是要确保该页面百分百会被用户在之后打开，否则就白白浪费资源去渲染

懒加载和预加载的对比：

概念：

• 懒加载：也叫延迟加载，JS 延迟图片/视频等资源的加载（或符合某些条件时才加载）
• 预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染

区别： 两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载，懒加载对服务器前端有一定的缓解压力作用，预加载则是增加服务器前端压力来换取更好的用户体验。

实现方式：

• 懒加载

  • setTimeout, setInterval`延迟加载
  • 符合某些条件，或者触发某个事件后开始加载
  • 滚动至可视区域加载

• 预加载

  • 声明式 
  • CSS 样式引入，并且隐藏到非可视区域
  • Javascript new Image()，定义其src来实现预加载