javascript - 动态加载 : Pass back url to script or pass back script itself?

标签 javascript performance lazy-loading

我一直想知道是否有正确的方法来执行此操作:当我使用 AJAX 动态加载脚本时,我可以选择将 url 传回服务器上的脚本,然后运行:<script src = response.url ></script>或者只是传回脚本本身。

我采用了传回内容脚本本身的方法,因为我认为我只进行一次往返而不是两次。也因为我想传回一些 css 或其他 Assets 。但是我注意到 facebook 将 url 传回 CDN 资源,所以我想知道我的方法是否会产生一些我忽略的后果。

谢谢! 马特

最佳答案

当您使用 Facebook 时,您会看到一些相当独特的流量模式。发回 20KB 的脚本与从动态服务器发送 30 个字符相比,这些服务器的负载会增加很多。此外,他们可能无法那么快地提供大型内容。

相比之下,CDN 服务器是美化的静态代理,专为速度和规模而设计。所以从 Facebook 的 Angular 来看,额外的往返是有道理的,因为它仍然可以提高整体页面速度,并且肯定会改善他们的服务器流量模式。

现在回到你身边。如果您要从与站点其余部分相同的服务器加载脚本,则此方法没有意义。如果您确实也可以访问 CDN,那么您必须使用关于您的用户的各种假设(延迟、位置)、关于您的站点的事实(脚本的大小、脚本加载的时间)进行计算,并比较让您的主服务器提供这些脚本,而不是额外的往返和您的 CDN 服务器分发这些脚本。

关于往返的另一个想法:如果我是 Facebook,我可能会在页面实际需要加载脚本之前尽早分发这些 CDN URL。理想情况下,我会顺应另一个请求偷偷加入一点点额外数据。这将使额外的往返问题变得毫无意义。

关于javascript - 动态加载 : Pass back url to script or pass back script itself?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4846150/

相关文章:

ruby-on-rails-3 - Mongoid:如何仅加载通过引用延迟加载的对象的某些字段?

javascript - 如何在 React 16.6.3 中调试 Lazy、Suspense 回退

c++ - 编写程序获取 CPU 缓存大小和级别

javascript - 使用 JavaScript 禁用 HTML 所需输入 onchange 单选按钮

asp.net - 页面加载时文本框中的默认文本

javascript - 更改母版页中菜单项的类别

python - 为什么这个 tensorflow 训练需要这么长时间?

javascript - 在 Drupal 7 中缩小 CSS 和 JS 文件的最佳方法是什么?

angular - 无需延迟加载即可路由到子路由模块

javascript - React Hooks : how to properly map an array with nested arrays and objects inside a select element?(新编码器)