我想知道是否建议将网页所需的所有CSS和JavaScript嵌入（内联）到标签中，而不是让浏览器下载这些文件。这种做法是否可取？
我的“应用程序”是一个SPA，我已经设法将所有内容，甚至图像和字体图标（作为base64）编译成单个index.html，但我不确定这是否是一种常见做法。
提前致谢。
答案 0 :(得分：4)
你忽略了一些关键的事情：
这是一个非常基本和简化的概述，这里有很多事情需要考虑。而且，实际上在实践中使用的是更大的块。说，通常所有js资源都捆绑在一起。但绝对试图摆脱任何额外的http请求将使您的架构不那么灵活，可缓存性降低等等。所以，这太过分了。
答案 1 :(得分：1)
最佳做法是将每个资源（脚本，CSS，图像等）拆分为单独的文件。这将允许浏览器下载和缓存每个资源以供将来重用（即使对于其他页面）。但浏览器每个源的并行连接限制为六个（写入时）。这就是为什么页面上的大量外部资源会导致页面加载性能下降而导致页面加载性能不佳{/ 3}}。
有很多技术可以提高性能，例如：捆绑，域分片，图像精灵等。对于某些关键资源，您可以使用内联技术。它允许浏览器立即使用此资源而无需其他请求。例如，您可以嵌入加载指示器所需的所有资源（图像，CSS，脚本），浏览器将在没有其他请求的情况下呈现它。
为了获得最佳开发风格，请不要嵌入资源并使用单独的文件。如果您关心性能，则应调查页面的瀑布（例如waterfall或任何浏览器的开发人员工具中的网络选项卡），并使用一些技术来改进它。如果您对此领域感兴趣，我建议您阅读以下书籍：
请注意，此技术仅适用于HTTP 1.1。对于HTTP 2.0，它只会有害，因为新版本旨在提高性能。
答案 2 :(得分：0)
不，始终避免使用内联样式和脚本来减少html文件的页面加载。此外，将html，css和js分开可以使编码保持清晰，语义和可重用，以用于可能需要通用css属性或脚本的其他外部页面或应用程序。
答案 3 :(得分：0)
所有关于管道中的哪个部分你需要CSS，就像我看到的那样。
优点：非常适合快速修复/原型设计和简单测试，无需在.css文档和实际HTML文件之间来回切换。
优点：许多电子邮件客户端不允许使用外部.css引用，因为可能存在垃圾邮件/滥用行为。嵌入可能有所帮助。
缺点：填充HTML空间/占用带宽，而不是跨页面可恢复 - 甚至不是IFRAMES。
优点：与原型相同，但更容易切割出最终原型并在模板完成时放入外部文件。
缺点：某些电子邮件客户端不允许[head]中的样式，因为大多数Webmail客户端都删除了head-tags。
优点：易于维护和重复使用超过1页的网站。
优点：可缓存=减少带宽=第二页加载后页面渲染速度更快
优点：包括.css在内的外部文件可以托管在CDN上，从而减少了托管HTML页面的防火墙/网络服务器的请求（如果在不同的主机上）。
优点：可编辑，您可以自动从最终版本中删除所有未使用的空间，就像jQuery有开发人员版本和压缩版本=更快的下载=更快的用户体验+更少的带宽使用=更快的互联网！ （我们喜欢!!!）
缺点：通常从HTML邮件中删除=凌乱的HTML布局。
缺点：每个文件发出额外的HTTP请求=防火墙/路由器中使用的资源更多。
来源/参考：here
答案 4 :(得分：0)
将所有HTML，CSS和JavaScript代码保存在一个文件中可能会使其难以使用。样式表和JavaScript文件必须分别包含和标记，因为它们是HTML片段而不是纯.css或.js文件。
许多Web开发人员建议在页面底部加载JavaScript代码以提高响应速度，这对于HTML服务来说更为重要。在NATIVE沙箱模式下，您加载的所有脚本都会在客户端进行扫描和清理，这可能需要几秒钟。将标记移动到页面末尾将允许在处理JavaScript之前呈现HTML内容，从而允许您向用户呈现微调器或其他消息。
当你在标记上努力工作时，有时可能很容易采取简单的方法并潜入一些造型。
我要把这个文字变成红色，以便它真正脱颖而出，让人们注意到！
当然 - 它看起来很无害。但是，这表明您的编码实践中存在错误。 相反，完成标记，然后从外部样式表中引用该P标记。
请记住 - 主要目标是尽快为用户加载页面。加载脚本时，浏览器无法继续，直到整个文件加载完毕。因此，用户必须等待更长时间才能注意到任何进展。
如果您有JS文件，其唯一目的是添加功能 - 例如，在单击按钮后 - 继续将这些文件放在底部，就在关闭正文标记之前。这绝对是一种最佳做法。