优化首屏体验——Lazy-Load 初探
首先要告诉大家的是,截止到上个章节,我们需要大家绞尽脑汁去理解的“硬核”操作基本告一段落了。从本节开始,我们会一起去实现一些必知必会、同时难度不大的常用优化手段。
这部分内容不难,但很关键。尤其是近期有校招或跳槽需求的同学,还请务必对这部分内容多加留心,说不定下一次的面试题里就有它们的身影。
图片加载时机的优化
Lazy-Load 初相见
Lazy-Load,翻译过来是“懒加载”。它是针对图片加载时机的优化:在一些图片量比较大的网站(比如电商网站首页,或者团购网站、小游戏首页等),如果我们尝试在用户打开页面的时候,就把所有的图片资源加载完毕,那么很可能会造成白屏、卡顿等现象,因为图片真的太多了,一口气处理这么多任务,浏览器做不到啊!
但我们再想,用户真的需要这么多图片吗?不对,用户点开页面的瞬间,呈现给他的只有屏幕的一部分(我们称之为首屏)。只要我们可以在页面打开的时候把首屏的图片资源加载出来,用户就会认为页面是没问题的。至于下面的图片,我们完全可以等用户下拉的瞬间再即时去请求、即时呈现给他。这样一来,性能的压力小了,用户的体验却没有变差——这个延迟加载的过程,就是 Lazy-Load。
现在我们打开掘金首页:
家留意一栏文章右侧可能会出现的图片,这里咱们给个特