我正在构建一个由多个部分组成的网站。我计划在每个部分使用URL片段，而不是将内容拆分为多个HTML页面(主要是出于性能原因；我不希望每个页面都重新加载完整的页面)。想象一下如下：
<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>
...
这给带来了一些明显的困难
- 浏览器将加载整个网站的HTML，这可能会减慢移动设备上的渲染速度
- 浏览器将请求每个部分中的每个图像；否则，我将不得不添加JS，当该部分进入视图时，该JS将延迟加载图像
为了至少部分解决这个问题，我计划将这些部分拆分为HTML部分。然后使用AJAX加载部分。然而，这意味着我现在依赖JS为网站提供基本功能。
我的问题是：
- 支持noscript和移动场景是否总是目标冲突
- 我应该只接受为每个部分重新加载整页并制作单独的HTML文件吗
- 如果我采用现有的方法，有没有一种方法可以优雅地处理noscript场景和加载性能
- 除非禁用JS，否则
<noscript>元素内的资源是否被忽略
在您的情况下，用<noscript>标记中加载的所有部分包装HTML副本就足够了。只有在禁用JS的情况下，才会呈现里面的资源和DOM，而网站的其他部分仍然可以从AJAX中受益。不利的一面是，重复的HTML会使文件膨胀。
1) 支持noscript和移动场景一定总是目标冲突吗
不可以，您可以将mobile和noscript与响应图像相结合。将默认src设置为移动分辨率图像，然后在需要时使用JS将其切换到更大的版本。这样，即使禁用JS，也可以节省带宽。这就是为什么移动优先开发成为一件事的原因之一。
2) 我应该只接受为每个部分重新加载整页并制作单独的HTML文件吗
有了上面的解决方案，你就不必这么做了。但请记住，有了正确的缓存和良好的资源管理(即最少的请求数、良好的压缩、可选的内联)，完整页面加载在移动设备上就没有那么糟糕了。
3) 如果我采用现有的方法，有没有一种方法可以优雅地处理noscript场景和加载性能
是的。我建议将上面提到的一切结合起来，使用响应图像和移动优先的默认src以及页面上的延迟加载，并假设HTML的<noscript>副本内的带宽较低。这样，如果启用或禁用JS，则只加载所需的最小图像。
4) 除非禁用JS，否则元素内的资源是否被忽略
是的。试着从这个fidle中删除noscript，看看devtools网络监视器中发生了什么。