javascript文档中的javascript和css,最佳实践?

时间:2012-11-07 11:29:43

标签: javascript css html5 include

我需要为我正在使用的框架实现javascript和css资源,但我有一个 BIG 关注。

如果您查看当前的网站,如Facebook,Google,Youtube和其他顶级网站,他们的源代码会在代码的各个位置显示他们对javascript的使用。我想到的第一个问题是......不应该在文档开头分配javascript源文件吗?您可以/应该能够将javascript命令放在脚本块中,但是......源文件也是如此?

我一直在阅读的书籍(作为最佳实践,我猜)所有源文件都应该在头部分配,同时将所有代码块移到页面末尾,就在关闭正文部分之前(当可能的)。

同样适用于CSS。我已经看到页面在页面中间找到源文件包含的页面,而正常的声明是在开头包含所有css文件(因为它比并行包含更有效,因为它们并行加载方式)。

在我的想法中,如果我要按照我一直在阅读的书籍,源文件(包括javascript和css)总是在顶部,脚本块(如果可能的话)转到文档的底部并且应该在适当的位置避免使用CSS包含(除非您想使用scope属性或者它是html标记内的样式声明,在可能的情况下也应该避免使用)。

是吗?

1 个答案:

答案 0 :(得分:7)

最佳实践因此决定:

CSS文件应该进入文档的<head>,尽可能靠近顶部。我经常在任何<meta>标签之后放置我的。

JavaScript文件应尽可能接近<body>的末尾,通常直接在</body>标记之前。

这是因为JavaScript文件是串行加载并且是阻塞的,因此如果JavaScript文件包含在页面的<head>中,则所有文件必须在文档主体加载之前完整加载,这通常是产生延迟的感觉。

实际上,JavaScript文件和JavaScript脚本块之间几乎没有区别。它们都使用<script>元素,只是外部引用的文件具有src属性。从解析器的角度来看,它们是相同的。

从有效性的角度来看,<script>个元素可以放在页面的<head><body>中的任何位置,有时候<script>个文件应该放在在<head>中,例如当使用类似typekit之类的东西时,因为这将确保字体文件及时加载,以便在页面加载后立即显示字体,从而防止FOUF(无格式字体的闪烁)< / p>