支持移动和noscript场景+保持性能

Question

我正在构建一个由多个部分组成的网站。我没有将我的内容分成多个 HTML 页面，而是计划对每个部分使用 URL 片段（主要是出于性能原因；我不希望为每个页面重新加载整页）。想象一下这样的事情：

<section id="portfolio">
  <a href="#project1">Link to Project 1</a>
  <a href="#project2">Link to Project 2</a>
  ....
  <a href="#project20">Link to Project 20</a>
</section>
<section id="project1>
  Content for Project 1 <img src="project1.jpg" />
</section>
<section id="project2>
  Content for Project 2  <img src="project2.jpg" />
</section>
...

这带来了一些明显的困难

1. 浏览器会加载整个网站的 HTML，这会减慢移动设备上的呈现速度
2. 浏览器将请求每个部分中的每个图像；否则我将不得不添加 JS，以便在看到该部分时延迟加载图像

为了至少部分解决这个问题，我计划将这些部分拆分为 HTML 部分。然后使用 AJAX 加载部分。然而，这意味着我现在依靠 JS 来为网站提供基本功能。

我的问题是：

1. 支持 noscript 和移动场景是否必然总是相互冲突的目标？
2. 我应该只接受每个部分的整页重新加载并制作单独的 HTML 文件吗？
3. 如果我采用现有方法，是否有办法优雅地处理 noscript 场景和加载性能？
4. 除非禁用 JS，否则 <noscript> 元素中的资源是否会被忽略？

Answer 1

在您的情况下，将 HTML 的副本包装在 <noscript> 标记中加载的所有部分就足够了。里面的资源和 DOM 只有在禁用 JS 的情况下才会被渲染，并且站点的其余部分仍然可以从 AJAX 中受益。缺点是您使用重复的 HTML 使文件膨胀。

1) 支持 noscript 和移动场景是否必然总是相互冲突的目标？

不，您可以将移动和 noscript 与响应式图像结合使用。将默认 src 设置为移动分辨率图像，然后根据需要使用 JS 将其切换为更大的版本。这样即使禁用了 JS，也节省了带宽。这就是移动优先开发成为现实的原因之一。

2) 我应该只接受每个部分的整页重新加载并制作单独的 HTML 文件吗？

使用上述解决方案，您不必这样做。但请记住，通过适当的缓存和良好的资源管理（即最少的请求数量、良好的压缩、可选的内联首屏内容），整个页面加载在移动设备上并不是那么糟糕。

3) 如果我采用现有方法，是否有办法优雅地处理 noscript 场景和加载性能？

是的。我建议将上述所有内容结合起来，使用响应式图像与移动优先默认 src 和页面上的延迟加载，并假设您的 HTML 的<noscript> 副本内的带宽较低。这样，如果启用或禁用 JS，则只会加载所需的最小图像。

4) 除非禁用 JS，否则元素内的资源是否会被忽略？

是的。尝试从 this fidle 中删除 noscript，看看 devtools 网络监视器中会发生什么。