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