假设您有 75 个具有 data-id="{some number}" 属性的 div。不幸的是，整体页面大小很大，非常大。
我的 HTML 文档中有许多重复的 HTML 片段，例如图像标签或链接。这些图像/链接的唯一变化部分是 id。
HTML 文档很长，这些片段会影响文档的整体大小。
当 dom 准备好时，我可以运行 javascript，但用户体验将是： - 等待页面加载，然后开始查看节点等， - 页面加载， - 显示额外的片段。
我可以让顶部容器 DIV 隐藏，直到页面加载，但是 - 担心谷歌搜索机器人会意识到 div 被隐藏并跳过内容（或者是这样吗？） - 用户将无法看到内容，而页面正在加载。
理想的做法是在不为谷歌搜索机器人添加太多额外标记的情况下以 HTML 格式加载页面，并在加载 javascript 时添加额外的元素。
我可以尝试的任何技巧来实现您的想法？
谢谢你。
最好的性能和用户体验是在服务器上做尽可能多的工作，然后发送高效的 HTML 并允许浏览器在收到页面时显示页面。发送一个 DIV 容器，然后使用脚本将其克隆 70 或 80 次会更慢（对于某些用户来说可能会慢很多）。
在脚本完成之前完全隐藏内容是最糟糕的解决方案 - 用户会留下一个空白（或最少内容）页面，等待某些事情发生。
大多数页面大部分是脚本和图像，用脚本替换 HTML 确实处于边缘地位。例如，这个页面有 90KB 的 HTML 和 264KB 的脚本、图像和 css。Apple 的主页有 12KB 的 HTML 和大约 800KB 的脚本、css 和图像。
浏览器会在收到内容时逐步显示内容，因为这就是它们多年来在网络上发展的方式。用户更喜欢看到一些东西而不是什么都没有，并在加载其余内容时开始查看内容（这完全是关于内容，而不是关于花哨的布局或效果）。尝试使用浏览器行为和功能，而不是反对它们。
您可以通过指定图像的大小和有效的布局来极大地帮助浏览器。这样，在收到新内容时布局不会发生太大变化。
根据其他页面内容，您可以在 DocumentReady 上运行脚本，而不是 onload。
DocumentReady 在页面下载和 DOM 渲染之后运行，但在检索图像之前运行。
我相信某处有一个官方的 DocumentReady 事件，但我仍然需要在我的页面上支持IE6，所以我使用忙循环来观看 DOM。