PHP程序员小白到大牛集训(12期免息)
首页 >web前端 >前端问答 > 正文

script标签一般写在html的什么位置

原创2022-09-16 16:20:23483 + Vue前端学习QQ群(点击入群)

script标签的位置:1、放在head标签内部,浏览器解析HTML,解析到script标签时,会先下载完所有script,再往下解析其他的HTML;因此会使网页内容呈现滞后,用户体验差。2、放在body标签内部,浏览器会先解析完整个HTML页面,再下载并解析js。3、放在body闭标签之后,浏览器会忽略之前的“”,所以实际效果和写在body闭合标签之前没有区别。

前端(vue)入门到精通课程:进入学习
API 文档、设计、调试、自动化测试一体化协作工具:点击使用

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

一般script标签会被放在头部或尾部,头部就是head标签里,尾部就是body里,也有放在body闭合标签之后。

1、script标签放在head标签内部


    获取DOM元素
    


    

一个标签

登录后复制

打印结果:

在这里插入图片描述
当script标签放在head标签里时,浏览器解析HTML,解析到script标签时,会先下载完所有script,再往下解析其他的HTML。在浏览器下载js时,是不能多个js一起下载的,且浏览器下载js时,会阻塞解析其他的HTML。因此,将script标签放在头部,会使网页内容呈现滞后,用户体验差。

2、script标签放在body标签内部


    

一个标签

登录后复制

在这里插入图片描述

将script标签放在body尾部,浏览器会先解析完整个HTML页面,再下载js,这样的话,如果js执行出错了,最起码页面中的元素还可以加载出来,因为DOM文档是从上往下的顺序执行的。 但是对于一些高度依赖于js的网页,这样就会显得很慢。

3、script标签放在body闭标签之后


    

一个标签

登录后复制

在这里插入图片描述

虽然放在body闭合标签之前和之后的打印结果是一样的,但是从HTML 2.0起放在body闭标签之后就是不合标准的。之所以浏览器不会报错,是因为如果在body标签之后再出现script或任何元素的开始标签,都是prase error(语法错误),浏览器会忽略之前的</body>,即视作仍旧在body内部,所以实际效果和写在body闭合标签之前是没有区别的。

怎样实现边解析页面边下载js呢?

asyncdefer

async

async的设置,会使得script脚本异步的加载并在允许的情况下执行,但是并不会按照在script在页面中的顺序来执行,而是谁先加载完谁执行。


登录后复制

如果script01.js较大,下载慢,则会导致script02.js可能先于script01.js执行。

defer

defer的设置,会是浏览器异步的下载该文件并且不会影响到DOM的渲染,如果有多个设置了defer的script标签存在,则会按照顺序执行所有的script,即先下载script01.js,再下载script02.js

【推荐学习:javascript视频教程

以上就是script标签一般写在html的什么位置的详细内容,更多请关注php中文网其它相关文章!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:script html
  • 程序员必备接口测试调试工具:点击使用

    Apipost = Postman + Swagger + Mock + Jmeter

    Api设计、调试、文档、自动化测试工具

    后端、前端、测试,同时在线协作,内容实时同步

    支持grpc,http,websocket,socketio,socketjs类型接口调试

    相关文章

    相关视频


    视频教程分类

    专题推荐

    官方公众号

    php中文网课程

    扫码关注官方公众号
    回复“phpcn01”领取php学习资料课程
    全套工具、电子书、脑图、内部课程等

    推荐视频教程

    开通VIP会员课 0元学

    热门推荐