延迟加载在web开发中的应用心得

□ 何焱欣

一、引言

广西网络广播电视台网站采用Microsoft SQLServer（以下简称SQLServer）数据库管理系统管理网站数据库，具有安全性高、不易被攻击等优点。网站要求后端开发人员优化SQLServer 语句和数据库结构，为用户提供快速、流畅的访问体验。优化数据库可以从硬件、网络、操作系统、数据库管理系统、前端开发工具、索引、镜像、存储过程等多个方面考虑，本文仅讨论应用延迟加载减少数据库访问频率的方法。

二、延迟加载的两种实际应用方式

大型门户网站的首页、二级页广泛存在着屏数多、信息量大的特点。当用户打开一个多屏页面时，需要多次向数据库翻出请求，并接收大量的相应数据。如果页面未进行相应优化，就需要等到所有数据接收完毕才开始显示页面内容。这种情况下，网络条件欠佳的用户往往得忍受数秒的白屏等候，用户体验不佳。为了优化用户体验，降低响应时间对用户网络质量的依赖，可以采用延迟加载的方式对页面进行优化处理。广西网络广播电视台在实际应用中主要采用了图片延迟加载和异步加载两种方法。

（一）图片延迟加载

图片延迟加载被称为“按需加载”，即网页按照用户的浏览需要来加载对应图片，这种方法适用于多屏图片列表页面，如网站首页、频道列表页和视频列表页等。

当开发者需要调用某些图片资源时，区别于引用实体资源，此时改为引用一个小占位符。当用户打开该网页时，浏览器会缓存实际资源，并在用户浏览到该位置的时候替换占位符，显示实体资源。如果用户加载网页后不向下滚动网页而是直接关闭网页，则不会加载除网页顶部以外的任何内容。

作为一种按需加载的优化方式，延迟加载能够大幅度提升资源利用率，避免资源浪费，减轻服务器负担。但是与此同时，由于页面中会用占位符替代真实资源，可能会影响搜索器爬虫对关键词的抓取与识别，需要针对性地进行调整。另外，占位符也会降低代码的可读性，在团队开发中需要做好注释说明，以便其他团队成员进行维护。

（二）异步加载

用户在浏览网站时，绝大部分的时间会停留在详情页（也叫内容页），因此详情页的响应速度很大程度上会影响用户的浏览体验。详情页虽然屏数少，但是由于功能模块多，加上很多需要加载视频，需要多次访问服务器，其响应速度有时比列表页更长。针对这种情况，应将详情页分割成不同的功能模块，优先加载重要的部分，延后加载次要的部分，这样可以显著提高响应速度，缩短用户白屏等待的时间。

首先要区分页面中哪些模块是主要的，哪些是次要的。以广西网络广播电视台新闻内容页为例，内容标题、视频和图文部分显然是用户的主要浏览目标，作为主要内容。而侧边栏、相关阅读和评论区用户通常在浏览完主体以后才会浏览，因此作为次要内容。

次要的内容模块全部使用JS 进行异步加载，并要求页面在加载完页面的主体内容以后再加载JS，这样就可以保证用户最感兴趣的内容能在极短的时间加载出来。经测试，图1 中的页面如果同时加载全部内容需要6～10 秒，但是采用异步加载的方式主题内容在2 秒之内就可以加载完毕，而其他内容也可以在用户浏览完主体内容前加载完毕。

图1 广西网络广播电视台网站截图

异步加载最显著的优点是大幅改善了用户体验，通过减少短时间内数据交互的量，降低响应时间对用户网络条件的依赖，使绝大多数用户都能拥有良好的浏览体验。但是使用异步加载也会使源代码变得复杂，调试难度变大，因此要考虑其适用场景，不可滥用。

三、结语

作为十分常用的两种网页优化手段，延迟加载和异步加载广泛应用于各种网站开发项目中。虽然它们可以显著改善用户的浏览体验，但是也要注意其对项目复杂性和可读性带来的影响，要充分评估应用场景是否适宜使用后方可实施。