HTML文件脚本和CSS放置

时间:2015-03-03 01:57:38

标签: javascript html css dom browser

我正在观看Doug Crockford's Theory of DOM视频,在16:50,他谈到了<script>代码和CSS <link>的展示位置。他提到<script src>尽可能靠近身体的底部,<link>尽可能高。由此,我有几个问题:

1)我通过教程学习了JavaScript。许多程序将JavaScript放在CSS <head>标记之后的<style>标记中。他(2006?)视频中的信息现在已经过时了吗?

2)这些规则也适用于JavaScript <script type="text/javascript">和CSS <style>标记。如果是,为什么,以及这些代码与<script src><link>代码之间有何区别?

3)他说&#34;尽可能减少脚本文件的数量&#34; ...但如果我编写一个大型项目,我想远离将所有JavaScript聚集在一起...而我更喜欢将我的代码分成有意义的文件。这有多大影响?

他提到展示位置会影响效果,因为浏览器进行增量加载的方式对这些资产的展示位置非常敏感。&#34;然而,尽管我还没有进行严格的性能测试,但我还没有注意到放置差异导致的性能发生了很大变化。他没有进一步解释这会如何影响绩效以及它为何如此重要。

2 个答案:

答案 0 :(得分:1)

1)不,信息不一定过时,但很多人只是一次性加载所有资源。通常建议在<body>的末尾加载脚本,因为浏览器会停止加载引用的文件,从而延长加载时间。样式表包含在文件的开头,以便元素在文档加载时设置样式,而不是在结尾处一次完成。

2)<script src><link>代码需要打开新连接,从而减慢加载时间。 <script type><style>标记是内联的,因此不需要打开和等待新的连接。

3)每个脚本文件都是必须打开的另一个连接。打开的连接越少,网站加载的速度就越快。

总的来说,这些规则对于减少较慢连接或较大项目的加载时间更为有效。

答案 1 :(得分:-1)

1)当您处理大型项目时,如果在许多页面中使用了js代码和css,那么您不会将这些代码放在每个页面中,每个页面都只包含页面中的文件。

2)如果你的代码会缩小,那么它将有助于快速加载。

3)你可以使用&lt; link&gt;包括css和&lt; script&gt;对于javascript。