② 首屏加载
首屏加载,大概是优化的永恒话题,所有的优化都避不开这一个话题,因为只有它能最直观的让“大家”都感受到我们这次优化的成果。对于用户来说,认为网页首屏很快的标准其实很单一,就是一打开页面,看了多久的白屏。,围绕这一点,个人认为,首屏加载这一优化可以有两个方向:一个是速度,另一个是体验。
引入加载占位
其实这个就是前段时间很火的“骨架屏”,我们可以在页面真正被渲染出来之前,先给用户看到一个“假的”页面,等到某个时间节点(例如数据已经准备完毕…)就将真正的内容替换上去。这里有一个我写的很不走心的例子:)
在这个优惠券列表页面我的处理方案是,初始化页面的时候就渲染3个列表项骨架,等待接口数据返回就将真实内容替换上去。
在我们的首屏其实也是类似的,我们可以根据首屏的展示结构,做一个匹配的骨架组件,然后按需求进行展示即可,这样可以有效减少用户看到白屏的时间。下面是我这个骨架的代码,优化的空间很大,不过由于优先级不是很高,所以就没有进行迭代了。
大概结构就是这样,样式方面很粗暴,因为每一项都是独立的一个组件,直接可以用absolute定位堆砌一个简洁的占位列表项。里面那个类似进度条的效果则是通过css3的animation实现的,我们可以将每个block的背景色变成渐变的,然后通过background-positon的变化来达到图中的效果。
图片懒加载
这应该是个老生常谈的优化方向了,原理大概是将视图之外的图片都用同一个占位图进行占位,将其真正的图链接存在data-*中,通过监听滚动来判断图片是否进入视图中,来控制img标签src的值。具体的实现很多地方都能搜到,大家可以根据自身情况,按需选择。
不要将页面都放到一个篮子里(二)— 懒加载
其实在整个优化过程中我的重心是放在这个地方的,其他的都是半路上想到的…
让我们回想一下,上面我们讲过将低频页面分离,那么,必然就有会那么几个访问量十分高的页面,那么对于这几个页面应该怎么办呢?
因为访问频率高,所以我们可以认为这些页面与我们的核心业务是强相关的,所以将其分离就显得不那么划算了(很可能会出现维护多套代码的窘况)。
但是这样高频页面才是优化的重点区域呀,应该怎么办呢?面对这样页面我们还是可以使用懒加载大法(页面懒加载 || 组件懒加载 || 依赖懒加载)。
想要在js层面实现各类懒加载,我们都需要借助webpack中的特性Code Splitting,它可以将我们本来打包在一起的js分解成一块一块,并能达到按需加载并使用的效果。
页面懒加载
因为我们使用了react-router,所以我们可以使用react-router的getComponent轻松达到页面懒加载这一需求。如下图所示,将mainpage这样引入route的话,在打包的时候会将其分离成一个独立的js。
组件懒加载 && 依赖懒加载
组件和依赖的懒加载也是十分简单的,如下图这样写就能达到懒加载的效果,但如果我们使用了babel则需要修改一下babel的配置,让它能够顺利解析动态import()的语法。
领取专属 10元无门槛券
私享最新 技术干货