在最近的一次采访中，我被问到以下问题：CSS最好放在哪里-顶部，主体还是底部？JS最好放在哪里-顶部，主体还是底部？我只是假设，因为标准的建议，把这些元素放在头标签（当然，不包括内联CSS），这是最好的方式，但是，我的面试官告诉我，对于CSS -这是最好的放在页面的顶部，因为它允许HTML呈现与CSS已经加载;而JS放在页面的底部，因为它只会在DOM加载后运行。这是正确的吗？有什么地方我可以阅读更多关于这个（和其他未知的怪癖）？非常好奇了解更多。谢谢
r55awzrz1#
CSS应该放在head标签中，这样DOM元素就可以在出现的时候就被设置样式。JS应该放在结束body标记之前，这样可以确保DOM元素可以立即加载到视图中，而不会在JS文件加载时被阻止。
eit6fx6z2#
这是真的- CSS在头部呈现页面，而不必解析通过js，你应该放在页面的底部，除非它是至关重要的呈现。
ftf50wuq3#
沿着把CSS放在最上面，你还应该考虑缓存。把CSS存储在样式表中允许它被用户的浏览器重用和缓存。JS也是同样的方式，最好用普通的CDN来托管。例如，从Google或www.example.com加载JQueryjquery.com因为它很可能已经缓存在用户浏览器中了。如果它还没有缓存，您还可以从CDN的速度中获益，因为它们的服务器往往比标准Web服务器更靠近客户端。
zsbz8rwp4#
下面我想给大家展示一下我们公司的一些做法。我不得不承认，它严重偏向于谷歌的PageSpeed工具。恶意的流言会说：“它是通过谷歌的眼镜观看的”;- ）重要提示：在部署中我们只应用以下规则。2我们的开发环境保持整洁，结构化和良好的组织。
1.内联上述文件夹内容所需的所有CSS：
<head> ... <style> /* CSS goes here */ </style> </head>
尽可能地稀疏！1.将外部CSS链接到文档的head部分--一切照旧--但尽量将所有剩余的CSS合并到至少一个外部文件中。浏览器必须下载每个CSS文件才能显示页面。避免那些不必要的往返时间！
1.内联折叠上方的页面需要立即使用/交互的所有代码：
<head> ... <script type="text/javascript"> /* Javascript goes here */ </script> </head>
1.延迟加载剩下的javascript。下面的代码是Google推荐的纯速度代码。将下面的代码放在HTML中的结束标记之前。它说：“等待整个文档加载”，然后获取外部内容-如我的示例中的“defer.js”。
... <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) { window.addEventListener("load", downloadJSAtOnload, false); } else if (window.attachEvent) { window.attachEvent("onload", downloadJSAtOnload); } else { window.onload = downloadJSAtOnload; } </script> </body>
4条答案
按热度按时间r55awzrz1#
CSS应该放在head标签中，这样DOM元素就可以在出现的时候就被设置样式。
JS应该放在结束body标记之前，这样可以确保DOM元素可以立即加载到视图中，而不会在JS文件加载时被阻止。
eit6fx6z2#
这是真的- CSS在头部呈现页面，而不必解析通过js，你应该放在页面的底部，除非它是至关重要的呈现。
ftf50wuq3#
沿着把CSS放在最上面，你还应该考虑缓存。把CSS存储在样式表中允许它被用户的浏览器重用和缓存。JS也是同样的方式，最好用普通的CDN来托管。例如，从Google或www.example.com加载JQueryjquery.com因为它很可能已经缓存在用户浏览器中了。如果它还没有缓存，您还可以从CDN的速度中获益，因为它们的服务器往往比标准Web服务器更靠近客户端。
zsbz8rwp4#
下面我想给大家展示一下我们公司的一些做法。我不得不承认，它严重偏向于谷歌的PageSpeed工具。恶意的流言会说：“它是通过谷歌的眼镜观看的”;- ）
重要提示：在部署中我们只应用以下规则。2我们的开发环境保持整洁，结构化和良好的组织。
CSS
1.内联上述文件夹内容所需的所有CSS：
尽可能地稀疏！
1.将外部CSS链接到文档的head部分--一切照旧--但尽量将所有剩余的CSS合并到至少一个外部文件中。浏览器必须下载每个CSS文件才能显示页面。避免那些不必要的往返时间！
Javascript
1.内联折叠上方的页面需要立即使用/交互的所有代码：
1.延迟加载剩下的javascript。下面的代码是Google推荐的纯速度代码。将下面的代码放在HTML中的结束标记之前。它说：“等待整个文档加载”，然后获取外部内容-如我的示例中的“defer.js”。