在html中引入css和js标签的位置
以前在刚学java web的时候学了jsp的相关知识,其中重要的一点是在jsp中需要引入css和js,同来渲染页面的样式和增加页面中需要动态实现的功能,我记得当时老师教的时候,就是在<head>标签中引入两者,但是后来自己做项目之后,看见很多的jsp中都是讲<script>标签放在<body>尾部。所以那时候也在网上查了查相关的解释,网上说的挺好的,一般都是说把js标签放在前面是不必要的,因为js是加载页面之后才用到的,所以放在前面是一种浪费。那今天我再次学习juery UI的时候在《jqueryUI in action》中看到了这本书上的解释,我认为他解释的更加专业,所以我想翻译并记录下来:
style块和script块的位置是非常重要的,style块放在文档的<head>标签内以便HTML的<body>中的元素在在渲染的时候就生成样式。当style块放在<body>标签内元素的尾部时,用户会经历一次没有添加样式的内容的一次刷新。在这种情况下,元素的渲染是没有样式的,并且随后在样式块被加载之后由浏览器解析再加上去。
相反,script块放在<body>的最后,在html页面需要的元素后面。这么做有两个原因:首先,如果script块加载,解析,或者执行出错,或者用户让javascript失效的情况下,网页的内容依然能够呈现给用户。其次,因为<script>标签在网页尾部,你写的javascript不会依赖DOM是否准备好了(is ready)。
历史上,<script>被放在html文档的<head>标签内,当浏览器执行这些脚本时,<body>无法被渲染。因此,脚本在可以访问DOM元素之前,需要等待浏览器的DOMContentLoaded 事件。JQuery core 提供了一个方便的方式:
$(function() {
// The DOM is now ready.
});
因此,当脚本放在文档的结尾处(在</body>之前),$(function(){})就不再需要了