有什么理由不动态加载网站内容答案

【问题标题】：Is there any reason not to dynamically load a website content有什么理由不动态加载网站内容
【发布时间】：2015-01-06 13:16:12
【问题描述】：

现在 (V8)Chrome 和 (SpiderMonkey)Firefox 的 JS Dom 遍历速度相对较快：有什么理由不通过 javascript 动态加载网站内容吗？

我正在考虑在显示加载栏时使用 Javascript 请求大文件（图像等）。有什么理由不动态加载大型 JS/JPG 文件？

我不经常看到它并且想这样做这不是一个大错误。

【问题讨论】：

禁用 JavaScript 的浏览器。
没错，但我已经到了无论如何我只显示“查看此页面所需的Javascript”的地步。
不太清楚你在这个问题上的目的。
搜索引擎不会加载动态内容，因此对于 SEO，这是绝对最糟糕的事情。随后，您描述的方法没有提供任何好处，因此没有理由不正常加载内容。
如果您的页面加载速度太慢以至于您需要加载栏，那么它太慢了。

标签： javascript jquery html ajax

【解决方案1】：

这取决于它是客户端还是服务器端，例如 node.js。

如果是客户端，取决于同时发出多少双向请求调用，它可以使用访问者计算机上的大量 RAM。

您基本上将大量图像/数据/流处理卸载到用户的计算机/平板电脑/手机与服务器。

【讨论】：

从我的测试来看，使用 node.js 我什至没有看到性能影响......但是客户端支持document.getElementById(id).innerHTML 调用确实会影响加载时间
我不明白这个答案试图做出的区别。在传统网页中，html 指定图像源，浏览器加载它们。 OP 正在谈论让 JS 加载图像，这再次导致浏览器请求它们。如何将处理从服务器卸载到客户端？

【解决方案2】：

如果您特别担心图像，有很多方法可以将加载推迟到需要图像时。在图像出现之前，您可以避免加载源代码。例如，使用一个微小的透明图像作为来源，并将真实来源存储在数据属性中：

<img src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' data-src='/path/to/real/image.jpg' />

然后使用 jQuery inview 插件加载出现在屏幕上的图像：https://github.com/protonet/jquery.inview

$('img').on('inview', function(e, isInView) {
  if ( ! isInView ) return;

  $(this)
    .unbind('inview')
    .attr( 'src', $(this).data('src') );
});

我不知道您为什么要推迟 javascript；如果您有数百千字节的 javascript 文件，那么您可能做错了。

【讨论】：

【解决方案3】：

另一个是延迟。我们习惯了能够ping通世界的另一端并很快收到响应。我在 600 毫秒内收到来自 SO 的 ping 响应。

C:\Users\enhzflep>ping www.stackoverflow.com

Pinging stackoverflow.com [198.252.206.140] with 32 bytes of data:
Reply from 198.252.206.140: bytes=32 time=809ms TTL=38
Reply from 198.252.206.140: bytes=32 time=501ms TTL=38
Reply from 198.252.206.140: bytes=32 time=493ms TTL=38
Reply from 198.252.206.140: bytes=32 time=630ms TTL=36

使用卫星连接，您可以查看超过一秒钟的时间 - 这意味着您希望尽可能多地批量处理您的请求。即使页面为 200 字节，AJAX 内容为 200 字节，您也会看到超过 2 秒的页面加载时间。冲浪听起来很有趣？

【讨论】：

这是一个很好的观点，听起来动态页面方法在 NODE.JS 环境中会更好。