script标签的位置

在我们编写代码的时候,会在页面内使用<script>标签来写JS,虽然理论上script标签的位置放在哪里可以,但是还是有一点区别的。

为什么很多人把script标签放在底部

初学者在学习JS的时候看见很多DEMO里面的script标签写在底部,但是却不是很清楚为什么,下面来解释一下:
虽然理论上放在哪里都是可以的,但是对于前端页面优化来讲,还是放在底部是最佳的,因为如果JS执行出现错误了,最起码页面中的元素还能加载出来,因为DOM文档是从上往下的顺序执行的。

按照传统的做法,所有script元素都应该放在页面的head元素中,这种做法的目的就是把所有外部文件(包括css和JavaScript文件)的引用都放在相同的地方,可是,在文档的head元素中包含所有JavaScript文件,意味着必须等到全部JavaScript代码都被下载、解析和执行完成之后,才能开始呈现页面内容(浏览器在遇到body标记时才开始呈现内容)。对于那些需要很多JavaScript代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白。为避免这个问题,现代web应用程序一般都把全部JavaScript引用放在<body>元素中页面内容的后面。

script标签在body标签内还是外

许多人认为只要放在底部了,无论是“body标签闭合之前”还是在“body标签闭合之后”都是一样的,其实还是有差别的,因为从HTML 2.0起放在“body标签闭合之后”就是不合标准的。之所以但是浏览器却不会报错,是因为如果在“body标签闭合之后”后再出现script或任何元素的开始标签, 都是parse error,浏览器会忽略之前的</body>,即视作仍旧在body内。所以实际效果和写在“body标签闭合之前”之前是没有区别的。

所以,只要是让浏览器做了多余的事都是不好的,虽然差别细微,但是还是应该按照标准来,放在body标签闭合之前。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,845评论 1 92
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,603评论 1 19
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 806评论 0 3
  • 琴弦上的相思 美丽动人的故事 就像悠悠的麦草 枕着金黄,透着翠绿 演绎着尘封的岁月 饱含着我无限的情思 渴望重逢在...
    冰玉寒石阅读 199评论 0 0
  • 我是一个不太喜欢一部电影看很多遍的人,唯独这部《大话西游》,我看了好几遍,每一遍的感觉都不一样,高中的时候,我只是...
    Q先生的日杂记阅读 345评论 0 0