假设您有 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 和图像。
浏览器会在接收到内容时逐渐显示内容，因为这就是它们在网络上多年发展的方式。用户更喜欢看到一些东西而不是什么都没有，并且在加载其余内容时开始查看内容(一切都与内容有关，而不是花哨的布局或效果)。尝试使用浏览器的行为和功能，而不是反对它们。
您可以通过指定图像的大小和高效的布局来极大地帮助浏览器。这样布局就不会随着收到新内容而发生太大变化。
关于javascript - 在加载文档时修改 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12168745/