script标签的位置:1、放在head标签内部,浏览器解析html,解析到script标签时,会先下载完所有script,再往下解析其他的html;因此会使网页内容呈现滞后,用户体验差。2、放在body标签内部,浏览器会先解析完整个html页面,再下载并解析js。3、放在body闭标签之后,浏览器会忽略之前的“”,所以实际效果和写在body闭合标签之前没有区别。
本教程操作环境:windows7系统、HTML5版、Dell G3电脑。
一般script标签会被放在头部或尾部,头部就是head标签里,尾部就是body里,也有放在body闭合标签之后。
<title>获取DOM元素</title> <script> var myElement = document.getElementById("atag"); console.log(myElement); </script> <div> <p>一个标签</p> </div>
打印结果:
当script标签放在head标签里时,浏览器解析HTML,解析到script标签时,会先下载完所有script,再往下解析其他的HTML。在浏览器下载js时,是不能多个js一起下载的,且浏览器下载js时,会阻塞解析其他的HTML。因此,将script标签放在头部,会使网页内容呈现滞后,用户体验差。
<div> <p>一个标签</p> </div> <script> var myElement = document.getElementById("atag"); console.log(myElement); </script>
将script标签放在body尾部,浏览器会先解析完整个HTML页面,再下载js,这样的话,如果js执行出错了,最起码页面中的元素还可以加载出来,因为DOM文档是从上往下的顺序执行的。 但是对于一些高度依赖于js的网页,这样就会显得很慢。
<div> <p>一个标签</p> </div> <script> var myElement = document.getElementById("atag"); console.log(myElement); </script>
虽然放在body闭合标签之前和之后的打印结果是一样的,但是从HTML 2.0起放在body闭标签之后
就是不合标准的。之所以浏览器不会报错,是因为如果在body标签之后
再出现script或任何元素的开始标签,都是prase error
(语法错误),浏览器会忽略之前的
以上就是script标签一般写在html的什么位置的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号