在加载文档时修改HTML

Question

假设您有75个具有data-id =“{some number}”属性的div。不幸的是，整体页面大小很大，非常大。

我的HTML文档中有许多重复的HTML代码段，如图片代码或链接。这些图像/链接仅改变部分是id。

HTML文档很长，这些片段有助于文档的整体大小。

我可以在dom准备就绪时运行javascript，但用户体验将是： - 等待页面加载，并开始看到节点等， - 页面加载， - 额外的片段显示。

我可以让顶部容器DIV隐藏，直到页面加载为止 - 担心谷歌搜索机器人能够意识到div被隐藏并跳过内容（或者是吗？） - 用户在加载页面时将无法看到内容。

在没有为谷歌搜索机器人添加额外标记的情况下加载HTML页面是理想的，并且在使用javascript加载时添加额外的元素。

我能想到的任何技巧都可以实现这个目标吗？

谢谢。

Answer 1

最佳性能和用户体验是在服务器上尽可能多地完成工作，然后发送有效的HTML并允许浏览器显示收到的页面。发送说单个DIV容器，然后使用脚本来克隆它70或80次将会更慢（对于某些用户来说可能慢得多）。

完全隐藏内容直到您的脚本完成是最糟糕的解决方案 - 用户留下一个空白（或最小内容）页面，等待某些事情发生。

大多数页面都是脚本和图像，用脚本替换HTML实际上是在边缘播放。例如这个页面有90KB的HTML和264KB的脚本，图像和CSS。 Apple的主页有12KB的HTML和大约800KB的脚本，CSS和图像。

浏览器会逐渐显示内容，因为这是他们多年来在网络上的演变方式。用户更愿意看到某些东西而不是什么，并且在其余内容加载时开始查看内容（这完全取决于内容，而不是花哨的布局或效果）。尝试使用浏览器行为和功能而不是反对它们。

您可以通过指定图像大小和高效布局来极大地帮助浏览器。这样，随着新内容的接收，布局不会发生太大变化。

Answer 2

根据其他页面内容，您可以在DocumentReady上运行脚本而不是onload。

DocumentReady在下载页面和渲染DOM后运行，但在检索图像之前运行。

我相信在某个地方有一个官方的DocumentReady事件，但我仍然需要在我的页面上支持 IE6 ，所以我使用一个繁忙的循环来观察DOM。