组件化在当今前端开发领域中是一个非常重要的概念。著名的前端类库,比如
React、Vue 等对此概念都倍加推崇。确实,组件化复用性(reusability)和模块性(modularization)的优点对于复杂场景需求具有先天优势。组件就如同乐高积木、建筑石块一般,一点点拼接构成了我们的应用。
同时,懒加载(Lazy-loading)按需加载概念至关重要。它对于页面性能优化,用户体验提升提供了新思路。在必要情况下,我们请求的资源更少、解析的脚本更少、执行的内容更少,达到效果也就越好。
这篇文章将从懒加载时机、组件复用手段、代码实例三方面来分析,happy
reading!
按需加载场景设计分析
一个典型的页面如下图:
它包含了以下几个区块:
一个头部 header;
图片展示区;
地图展现区;
页面 footer。
对应代码示例:
当用户来访时,如果不滚动页面,只能看见头部区域。但在很多场景下,我们都会加载所有的 JavaScript 脚本、 CSS 资源以及其他资源,进而渲染了完整页面。这明显是不必要的,消耗了更多带宽,延迟了页面 load 时间。为此,前端历史上做过很多懒加载探索,很多大公司的开源作品应势而出:比如 Yahoo 的 YUI Loader,Facebook 的 Haste, Bootloader and Primer等。时至今日,这些实现懒加载脚本的代码仍有学习意义。这里不再展开。
如下图,在正常逻辑情况下,代码覆盖率层面,我们看到 1.1MB/1.5MB (76%)
的代码并没有应用到。
另外,并不是所有资源都需要进行懒加载,我们在设计层面上需要考虑以下几点:
不要按需加载首屏内容。这很好理解,首屏时间至关重要,用户能够越早看到越好。那么如何定义首屏内容?这需要结合用户终端,站点布局来考虑;
预先懒加载。我们应该避免给用户呈现空白内容,因此预先懒加载,提前执行脚本对于用户体验的提升非常明显。比如下图,在图片出现在屏幕
100px 时,提前进行图片请求和渲染;
懒加载对 SEO
的影响。这里面涉及到内容较多,需要开发者了解搜索引擎爬虫机制。以
Googlebot 为例,它支持
IntersectionObserver,但是也仅仅对视口里内容起作用。这里不再详细展开,感兴趣的读者可以通过测试页面以及测试页面源码,并结合
Google 站长工具:Fetch as Google 进行试验。
React 组件复用技术
提到组件复用,大多开发者应该对高阶组件并不陌生。这类组件接受其他组件,进行功能增强,并最终返回一个组件进行消费。React-redux
的 connect 即是一个 currying 化的典型应用,代码示例:
同样,Function as Child Component 或者称为 Render Callback
技术也较为常用。很多 React 类库比如 react-media 和 unstated
都有广泛使用。以 react-media 为例:
Media 组件将会调用其 children 进行渲染,核心逻辑为:
这样,子组件并不需要感知 media query 逻辑,进而完成复用。
除此之外,还有很多组件复用技巧,比如 render props
等,这里不再一一分析。感兴趣的读者可以在我的新书中找到相关内容。
代码实战
下面让我们动手实现一个按需加载轮子。首先需要设计一个 Observer
组件,这个组件将会去检测目标区块是否在视口之中可见。为了简化不必要的逻辑,我们使用 Intersection Observer API,这个方法异步观察目标元素的可视状态。其兼容性可以参考这里。
如上,该组件具有 isVisible 状态,表示目标元素是否可见。this.io 表示当前
IntersectionObserver 实例;this.container 表示当前观察元素,它通过 ref
来完成目标元素的获取。
componentDidMount 方法中,我们进行 this.setState.isVisible
状态的切换;在 componentWillUnmount 方法中,进行垃圾回收。
很明显,这种复用方式为前文提到的 Function as Child Component。
注意,对于上述基本实现,我们完全可以进行自定义的个性化设置。IntersectionObserver
支持 margins 或者 thresholds 的选项。我们可以在 constructor
里实现配置项目初始化,在 componentWillReceiveProps
生命周期函数中进行更新。
这样一来,针对前文页面内容,我们可以进行 Gallery 组件和 Map
组件懒加载处理:
我们将 isVisible 状态进行传递。相应消费组件可以根据 isVisible
进行选择性渲染。具体实现:
只有当 Map 组件对应的 container 出现在视口时,我们再去进行第三方资源的加载。
同样,对于 Gallery 组件:
也可以使用无状态组件/函数式组件实现:
这样无疑更加简洁。但是当元素移出视口时,相应图片不会再继续展现,而是复现了placeholder。
如果我们需要懒加载的内容只在页面生命周期中记录一次,可以设置
hasBeenVisible 参数:
或者直接实现 ObserverOnce 组件:
更多场景
上面我们使用了 Observer 组件去加载资源。包括了 Google Map
第三方内容和图片。我们同样可以完成”当组件出现在视口时,才展现元素动画”的需求。
仿照 React Alicante 网站,我们实现了类似的按需执行动画需求。具体可见codepen 地址。
IntersectionObserver polyfilling
前面提到了 IntersectionObserver API 的兼容性,这自然就绕不开 polyfill
话题。
一种处理兼容性的选项是”渐进增强”(progressive
enhancement),即只有在支持的场景下实现按需加载,否则永远设置 isVisible
状态为 true:
这样显然不能实现按需的目的,我更加推荐 w3c 的 IntersectionObserver
polyfill:
当浏览器不支持 IntersectionObserver 时,我们动态 import 进来
polyfill,这就需要支持 dynamic import,此为另外话题,这里不再展开。
最后试验一下,在不支持的 Safari 浏览器下,我们看到 Network 时间线如下:
总结
这篇文章介绍涉及到组件复用、按需加载(懒加载)实现内容。更多相关知识,可以关注作者新书。
同时这篇文章截取于 José M. Pérez 的 Improve the Performance of your Site with Lazy-Loading and Code-Splitting,部分内容有所改动。
领取专属 10元无门槛券
私享最新 技术干货