javascript - 使用 javascript 动态加载元素的性能？

Question

我正在研究使用 javascript 动态加载 css 样式表、javascript 脚本、html 元素。一切似乎都很好，但我想知道以这种方式加载的缺点是什么？这样做的优点和缺点是什么？如果我以这种方式加载整个页面会怎样？

页面加载速度是否变慢？

这是否使页面加载更加同步/异步？

这会使服务器充满请求吗？ (例如延迟加载器)

这会占用服务器或客户端的资源吗？

Answer 1

Does the page load slower?

Does this flood the server with requests? (e.g. lazy loader)

是和否。

如果内容很少，页面加载速度会非常快。通常您只想加载必要的，因此“延迟加载”。对于第一个页面加载，您可能想要加载必要的 CSS。至于 JS，您可能希望最后加载它们(就在 </body> 之前)，因为加载脚本在浏览器中不一致(一些并行加载，一些串行加载。但它们按定义的顺序执行)。这也是为了安全起见，当您执行这些脚本时，您需要在这些脚本中操作的元素就存在了(但我们现在被 jQuery 的 .ready() 拯救了)

至于淹没服务器……呃……更像是霸占“管道”。浏览器有大约 2-8 个“管道”来下载文件。例如，IE6 有 2 个管道。如果你已经有一个视频流，它需要一个管道，这意味着其余的东西必须使用另一个管道加载，现在它们是连续加载的 - 使其变慢。缓解这种情况的一种方法是缩小(收缩)和合并(放入一个)您的文件。就个人而言，我合并库(jQuery 和其他库)，因为它们根本不会改变。不经常更改的 CSS，我压缩并合并。不仅它们更小，而且文件更少——不会占用管道

Does this make the page loading more synchronous/asynchronous?

网页总是从上到下解析，但它们的下载取决于它们在浏览器中的处理方式。一些浏览器并行加载文件，一些串行加载文件(如 IE 中的脚本)，但它们是从上到下执行的。这就是为什么脚本应该最后加载的原因，因为解析会阻碍执行线程。页面中间的无响应脚本将在页面中途停止处理。

Does this hog the server's or client's resources?

服务器资源，是的。如果您要请求的文件太多，它确实会给您的服务器带来压力。这就是为什么你需要有一个缓存系统，包括脚本和浏览器缓存。浏览器缓存，我指的是存储 CSS、JS、图像等的自然缓存。然而，AJAX 没有被缓存(据我所知)，这就是为什么你需要在 JS 中实现你自己的缓存。

让我们以 Twitter 为例。您查看某人的推文。流程是您单击，AJAX 请求帖子，加载以查看并完成。现在，你想看另一个人。同样的程序。 现在你想回到另一个人身边。作为程序员/服务器维护者，您是否想再次加载该内容？你想再次请求吗？不，相反，程序员使用对象/本地存储来存储数据。这样，就没有不必要的请求。至于过期..你必须弄清楚。

总的来说，它有利也有弊。这不像是解决所有问题的方法。就像有一把枪，你可以保护自己但伤害别人，反之亦然。只是找到使一切顺利的平衡点。