支持移动和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

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

1）支持noscript和移动场景是否必然始终存在冲突目标？

不，您可以将移动设备和noscript与响应式图像结合使用。将默认src设置为移动分辨率图像，然后使用JS将其切换为更大的版本（如果需要）。这种方式即使禁用JS，也可以节省带宽。这是移动优先发展的原因之一。

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

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

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

是。我建议结合上面提到的所有内容，使用响应式图像和移动的第一个默认src以及页面上的延迟加载，并假设HTML的<noscript>副本中的带宽较低。这样，如果启用或禁用JS，则仅加载所需的最小图像。

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

是的。尝试从this fidle中删除noscript，然后查看devtools网络监视器中发生的情况。