文章目录

随着互联网的迅速发展，现在我们前端应用能做的事情也越来越多了。随之而来的便是复杂和大数据内容的网页渲染，因此很多时候我们为了尽快给用户看到网页内容，会将页面加载拆分成首屏和其他内容。

当首屏内容渲染完后，我们会进行后续内容的预加载处理。

页面预加载

对于重文本、列表、表格等网页内容来说，当内容过多、过长时都会考虑进行分页。

一般来说，由于浏览器页面都是根据屏幕宽度进行加载和换行，因此加载过程基本都是从页面最上方开始，然后往下滚动和加载。很多时候，性能优化都会简单地考虑两个方面：

对于长列表、长文本的页面来说，不管是屏幕外资源回收，还是屏幕外数据预拉取、预加载，都会比较简单，因为只有垂直方向。

这里我们即将讨论的预加载顺序设计，场景则是更加大一些的窗口画布场景。比如在线文档、在线表格、画板绘制等较大的画布，且具备各个方向滚动滑动的场景，我们的屏幕仅能展示其中的一部分，如下图：

用户浏览行为参考

显然，对于画布类的页面来说，数据量可能会无限大，因此数据的分片/分页/分块几乎是必备的。至于如何加载和计算这些数据，之前我在《复杂渲染引擎架构与设计》系列中也有介绍过，包括分片渲染、增量渲染、离屏渲染等等，这里不再赘述。

当我们在优先加载和渲染完屏幕内范围的数据之后，还需考虑后续其他数据该如何处理加载顺序。而屏幕外的各个方向都有未加载数据，我们可以结合用户行为来调整加载的优先顺序。

关于用户在网页阅读时的行为模式和视觉关注的研究，有不少相关的文献和数据。参考一些用户的研究报告，我们会发现用户的阅读习惯包括但不仅限于以下方式：

F 形模式：许多用户在阅读网页时会遵循 F 形模式，即先水平扫描页面的顶部，然后向下移动，进行第二次水平扫描，最后在左侧进行垂直扫描。这种模式表明用户在页面的上部和左侧区域更容易获得注意。
Z 形模式：在某些情况下，用户可能会遵循 Z 形模式，尤其是在页面布局较为简单时。用户从左上角开始，水平移动到右上角，然后斜向下到左下角，最后水平移动到右下角。这种模式适用于较短的内容或广告。
中心聚焦：用户的注意力往往集中在页面的中心区域，尤其是当内容以图像、视频或重要信息块的形式呈现时。重要信息通常会放置在页面的中心，以吸引用户的注意。
边缘注意：页面边缘的内容（如侧边栏、广告或导航菜单）通常会获得较少的关注，但在某些情况下，用户会浏览这些区域以寻找额外的信息或链接。
滚动行为：用户在阅读长页面时，通常会向下滚动。研究表明，用户在滚动时的注意力会逐渐减少，尤其是在页面的底部。因此，重要信息应尽量放在用户最初可见的区域（即“首屏”）。
视觉层次：页面设计中的视觉层次（如标题、字体大小、颜色对比等）会影响用户的阅读方向和注意力分布。较大的标题和醒目的颜色通常会吸引更多的注意。

这些研究很多是采用“使用眼动追踪技术”来分析用户的视觉关注，如下图则是针对一名中国人的研究结果：

从这些研究结果中，我们可以获得一些可借鉴参考的点，包括：

考虑到在大画布页面布局下，用户的垂直滚动行为会比水平滚动行为更常见，并且向下比向上、向右比向左的行为可能性更高，我们可以设计以下的数据加载顺序：

简单粗暴的如图：

这种方式加载，其实有点像棋盘走棋的距离，比如：

当然，如果页面结构有其他布局变化的话，这种优先顺序显然是不满足的，比如表格考虑冻结、筛选等场景，长文页面布局考虑分栏、图片、标题、副标题等，各种场景下的优先顺序会有影响。

最好的方式，便是可以在页面中埋个点，验证一下用户在打开首屏后，接下来的行为顺序。同时收集页面中的各种要素，来大致得到用户的行为习惯，并以此来调整页面加载和渲染的优先顺序，给到用户更好的体验。

本文介绍了用户的一些常见阅读习惯，其实除了说在做数据预加载、预处理的时候可以用到，在更多的场景我们都能使用。比如，调整页面的布局，使得用户可以符合预期地注意到某些内容。

比如，写文章的时候，也可以使用一些小技巧（分段、标题和副标题、加粗、分组等），来减少阅读用户的流失率。

查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢