在链接CSS文件不是一个好主意body吗?
我已经读过,如果浏览器在之外找到另一个CSS文件head,就会被迫重新开始CSS渲染,这仅仅是因为它可能需要将样式应用于已渲染的元素。另外,我认为HTML不会正确验证(我需要确认这一点)。
还有其他原因吗?
问题已经得到解答(是不是很糟糕,为什么......),但是如果您无法在标题中添加链接(或脚本),正确的方法是使用 javascript 动态插入它们。有时这也是提高代码速度的好主意。对于链接,您可以使用此功能:
function loadCss(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}Run Code Online (Sandbox Code Playgroud)
您应该为脚本使用像 require.js 这样的 JavaScript 文件加载器。
编辑奖励:提高页面加载速度的方法
在您的 HTML <head> 中,您有第一个小的 <style> 元素,其中包含例如正文背景 CSS 定义、一些通用元素、菜单元素以及可能的标题(也可能是等待 gif 的内容)。您还有第二个,一个指向非 JavaScript 相关 CSS 的链接。
然后,您必须刷新缓冲区以发送 HTML 的开头,直到 <body>。
然后您可以再次刷新菜单和标题。
最后,您将最后用 JS 刷新剩余的 HTML,以动态插入 CSS JS 相关链接(可能是另一个用于隐藏等待的 gif)和 JS 脚本链接。
这对于大量页面或服务器处理时间较长的情况特别有用。
我看到人们用来证明这样做的唯一原因是当他们使用某些模板引擎时,并且在加载新内容或特定视图时(在 MVC 的情况下),他们不能任意更改头部链接的样式表构架)。
无论哪种方式,都应该不惜一切代价避免这种情况,因为它是草率且不恰当的。相反,始终以这样的方式开发您的项目:您可以随时将任意样式表放入头部。我通常通过循环遍历头部的样式表数组来完成此操作。这样,如果我需要添加新的样式表,我只需将其路径名添加到要在头部打印的数组即可。
<?php
$styles = array();
$styles[] = "css/main.css";
$styles[] = "css/text.css";
?>
<head>
<?php foreach ($styles as $style) { ?>
<link href="<?php print $style; ?>" rel="stylesheet" type="text/css" />
<?php } ?>
</head>
Run Code Online (Sandbox Code Playgroud)