作者：懒羊羊
哎呀呀，是不是又遇到那种让人想砸键盘的龟速网站？放心，今儿个咱们就聊聊怎么用懒加载和预加载这对好基友，让你的网站飞起来！
想象一下，有两位超级英雄分别叫 “懒懒” 和 “预预” ，它们的使命就是让你的网站如闪电般疾速。首先，登场的是“懒懒”：这位懒洋洋的英雄坚信，在正确的时间出现才是最省力的打开方式。于是，它巧妙地只让用户的眼睛所及之处的内容加载出来，看不见的？等你快到了再说！怎么做到的呢？
来源：疯狂动物城
简简单单方式： 轻轻松松在和上写上loading="lazy" ，像施了魔法一样，不见的图片就会变"懒"，等到该露脸时才懒洋洋地加载出来。
高级潜伏术： 交给Intersection Observer API这个监视者，它会像侦探一样默默注视元素何时步入视线，然后偷偷促使“懒懒”行动。
神仙助手： 要是手懒不愿意自己动手，来个lozad.js或者lazysizes小精灵，保驾护航，一键帮你省心省力。
来源：Lozad.js
再来是“预预”啦：这位英雄有预知未来的超能力，它悄无声息地在你需要之前，就把一切准备就绪，像是在说：“来吧，看我的！”
预知未来术： 在标签下， 就像是它的魔法棒，提前加载那些CSS、JavaScript、字体文件等“玩意儿”，让你一打开就能“哇塞”连连。
幕后英雄： 使用Service Worker这个幕后黑手，它在PWA里就像囤积家一样存好所有资源，或者背后默默同步，让你的网站表现就像个永远在线的优等生！
嘿嘿，秘诀别忘了哦：选哪个英雄捉摸得看场合。比如电商网站里的商品画册，就让“懒懒”上，而那些单页应用的底层脚本，就让“预预”准备着。
“懒懒”温馨提醒：别忘了给它搭个摆摆样子的占位符，要不然页面会突然跳一下，吓人不好。同时，要让搜索引擎也能看见懒加载的内容，不然它会孤单孤单地错过。
“预预”小提示：别太贪心，过度预加载会让用户的网费瞬间蒸发哦，特别是手机用户。权衡要预缓哪些货，确保不堵了网站的大动脉。小小小贴士：动手之前，别忘了好好观察下用户的行走轨迹，结合页面分析结果，调整优化你的“懒预”策略，就能让网站性能更上一层楼！
最后，拿起你的小斗篷，让我们一起呼朋唤友，为懒加载“懒懒”和预加载“预预”打CALL，让网页的速度和用户心里的小鹿一样，乱撞破界限！
关注Mapmost，持续更新GIS、三维美术、计算机技术干货
Mapmost是一套以三维地图和时空计算为特色的数字孪生底座平台,包含了空间数据管理工具(Studio)、应用开发工具(SDK)、应用创作工具（Alpha）。平台能力已覆盖城市时空数据的集成、多源数据资源的发布管理，以及数字孪生应用开发工具链，满足企业开发者用户快速搭建数字孪生场景的切实需求，助力实现行业领先。
欢迎进入官网体验使用：Mapmost——让人与机器联合创作成为新常态
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。微信公众号：Mapmost
