延迟加载HTML标记

Question

我的组织是一家电子商务公司，有许多页面显示很长的产品列表，有些页面可以包含20种产品，而其他页面则可以包含多达100种产品！ -不要问我为什么！

我的任务是改善这些页面的加载时间，分析显示大部分加载时间来自标记-太多了！！ 由于信息量很大，企业必须显示加价幅度的确无法减少。

这使我开始寻找替代方案，其中之一就是当用户向下滚动屏幕时（我们目前将这种技术用于产品图片）延迟加载产品标记。

有没有人做过这样的事情可以分享的经验？ -担心这可能会影响页面内的性能

任何替代方法也将被倾听

期待任何意见

Answer 1

您可以在滚动时动态加载内容 。

您可以将所有关键数据加载到准系统HTML中，然后使用Javascript添加必要的标记。

另外，您可以发送一个紧凑的XML文档，如果客户端接受它，则在客户端应用XSLT转换（请参见“ Accept：”标头）。

Answer 2

我使用以下方法来隐藏化妆时间来渲染/创建内容（android，jq和jq-mobile）

a）内容是在后台生成的。 总是创建小块（持续时间20-30ms）并将其插入dom。 在大约50ms（setTimeout）之后，将创建下一块并将其插入dom

b）特定于Android：我注意到第一次选择DOM元素（例如$（'＃xyz'））需要相对较长的时间（大约10毫秒）。 如果第二次访问该元素，则只需1毫秒（S3）。 希望这可以帮助

Answer 3

要看的一件事是在浏览器发送的内容中添加压缩。 这将大大减少页面有效负载。

就像其他人提到的那样，加载页面内容可能会导致许多问题，尤其是对于具有可访问性需求的用户（这个百分比比大多数人认为的要大得多）