用script标签引入脚本的引入位置大致有两种情况：

1，在head中引入；

2，在body末尾引入；

浏览器由上到下解析代码，正常情况下，先解析head中的代码，在解析body中的代码；放在head中的好处是统一管理、方便维护，但是，要知道解析js代码也就是遇到script标签会阻塞加载，如果js代码文件较大，页面会出现一个明显的空白期，造成用户体验不好（事实上js会被缓存，所以这种情况造成的影响很小），一般通用类的调用可以放在head中（其中需要操作dom的可以ready后操作）；而对于内部引用（在script标签中写js代码）一般会放在body中；在head中的js会在调用的时候执行，在body中的js会在页面加载时候执行。

理论上来说js标签放在html文档的任何位置都可以，规范起见，推荐放到body结束标签的末尾，包含到body标签内：
<body>
    <!-- 这里是其他的HTML标签 -->
    <script> // 这里是代码 </script>
</body>
这样处理的好处是无需担心因页面未完成加载，造成DOM节点获取不到，使脚本报错的问题，而且能避免因脚本运行缓慢造成页面卡死的问题。另外，Yahoo的前端优化指南里就有这一条。

参考
链接：https://www.jianshu.com/p/0c3af5731e2a
https://blog.csdn.net/tianrangdejiehuo/article/details/51818673

script标签引入脚本的引入位置与效果的更多相关文章

  1. [转]Script标签和脚本执行顺序

    Script标签和脚本执行顺序 这里详细聊聊和script标签相关的脚本执行顺序. Script标签的默认行为 几个首要特性: script标签(不带defer或async属性)的会阻止文档渲染.相关 ...

  2. script标签所应放的位置

    一般放置的位置:<head>标签内,<body>标签内,<body>标签后(建议放在body标签后,利于页面的优化,优化页面结构加载的速度) 1.<head& ...

  3. js中的script标签

    在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址">&l ...

  4. script标签加载顺序(defer & async)

    script 拥有的属性 async:可选,表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示通过 src 属性指 ...

  5. <script>标签中的 defer 与 async区别

    在html里,使用<script>标签对脚本进行外部或内部引用,<script>标签包含了两个特殊的属性:defer与async,他们的区别如下: 1.若<script& ...

  6. 前端之script标签注意事项

    在一对script 标签中一旦有错误,其后续的代码都不会执行 一对script标签有问题,不会影响其他script标签代码的执行 当一对script标签的作用是引入外部的js文件的时候,就不要在其内部 ...

  7. 移除script标签引起的兼容性问题

    一.应用场景: 有时候我们需要动态创建script标签实现脚本的按需加载,我们会为script标签绑定onload或者onreadystatechange事件,用于检测动态脚本是否加载并执行完毕,在事 ...

  8. JavaScript <script>标签的位置、延迟脚本（defer属性）与 异步脚本（async属性）

    一.<script>标签的位置 传统的做法是将<script>元素放在<head>元素中,例如: <!DOCTYPE html><html > ...

  9. js 引入外部文件之 script 标签

    在我的理解看来,html 就是一个单纯的管显示问题,js就是单纯的管动作问题,css就是单纯的管布局问题,这三个构成了一个网页 在HTML中,经常会用到引入js 文件. 引入js的方法很简单: 1. ...

随机推荐

  1. php面试笔记（2）-php基础知识-常量和数据类型

    本文是根据慕课网Jason老师的课程进行的PHP面试知识点总结和升华,如有侵权请联系我进行删除,email:guoyugygy@163.com 面试是每一个PHP初学者到PHP程序员必不可少的一步,冷 ...

  2. iptables 实例

    开启ip段192.168.1.0/24端的80口 开启ip段211.123.16.123/24端ip段的80口 # iptables -I INPUT -p tcp --dport 80 -j DRO ...

  3. [转]adbkey与adbkey.pub

    转载至:https://blog.csdn.net/caibaihui/article/details/46862591 error: device unauthorized. Please chec ...

  4. 跨域打开页面：Uncaught DOMException: Blocked a frame with origin

    Uncaught DOMException: Blocked a frame with origin 使用postMessage()方法可以解决跨域传值的问题 Api: https://develop ...

  5. 刷题94. Binary Tree Inorder Traversal

    一.题目说明 题目94. Binary Tree Inorder Traversal,给一个二叉树,返回中序遍历序列.题目难度是Medium! 二.我的解答 用递归遍历,学过数据结构的应该都可以实现. ...

  6. .Net core webapi使用httpClient发送异步请求遇到TaskCanceledException: A task was canceled

    前言:本人最近较多使用.net core的项目,最近在使用httpClient发送请求的时候,遇到服务器处理时间较长时,就老是会报异常:TaskCanceledException: A task wa ...

  7. PyCharm专业版激活＋破解到期时间2100年

    PyCharm专业版激活+破解到期时间2100年 转载文章:https://blog.51cto.com/13696145/2464312?source=dra 到2020年5月激活码: N7UR85 ...

  8. wifite硬核破解WiFi密码

    如题 楼主在这里分享下如何使用工具破解附近的WiFi 今天使用的工具是 wifite 现在都有WiFi万能钥匙了 暴力破解还有市场吗? 首先他俩的破解思路就不一样 wifi万能钥匙是根据云端数据库内容 ...

  9. 转载：字符编码简介 ASCII UTF-8 ISO8859-1

    字符编码简介 ASCII UTF-8 ISO8859-1 博客分类: 电脑综合知识 XP数据结构Windows  计算机中的一切都是以数字来表示的,字符同样如此.字符编码就是将字符集编码成为数字序列, ...

  10. 在视觉可视化中如何使用ScaleBreaks-比例中断

    从lightningChart V8开始,这项图表控件产品开始支持X轴的Scale break功能. 这个功能的主要作用是排除选定的X轴范围,例如互动交易时间/日期或者机器停产时间等.如果有一部分的数 ...