用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. javascript获取一个字符串的长度(包含中文)

    /* getStrLen(str):获取一个字符串的长度(包含中文) */ function getStrLen(str){ let len = 0, i, c; for (i = 0; i < ...

  2. oracle数据库的启动、关闭、连接

    登陆数据库 方法一: $ sqlplus / as sysdba [oracle@dev /]$ sqlplus / as sysdba SQL*Plus: Release Production on ...

  3. 小浩算法|一文让你学会如何用代码判断"24"点

    “24点”是一种数学游戏,正如象棋.围棋一样是一种人们喜闻乐见的娱乐活动.它始于何年何月已无从考究,但它以自己独具的数学魅力和丰富的内涵正逐渐被越来越多的人们所接受.今天就为大家分享一道关于“24点” ...

  4. RJM8L151F6P6温度枪方案对比

    疫情当下,温度计.呼吸机.监护仪.制氧机等医疗产品的生产供应至关重要,红外温度计属于非接触式测温,它是利用物体热辐射与物体温度之间的关系来工作的. 红外测温仪是一种将红外技术与微电子技术相结合的新型温 ...

  5. Zookeeper分布式协调即分布式锁机制

    主要用到的Zookeeper机制: 临时+有序节点,节点watch机制 过程: 发生分布式锁竞争时,参与竞争的各个客户端服务都到Zookeeper的同一父节点(代表着同一把锁)下建立自己的临时+有序子 ...

  6. LOJ #2877. 「JOISC 2014 Day2」交朋友 并查集+BFS

    这种图论问题都挺考验小思维的. 首先,我们把从 $x$ 连出去两条边的都合并了. 然后再去合并从 $x$ 连出去一条原有边与一条新边的情况. 第一种情况直接枚举就行,第二种情况来一个多源 bfs 即可 ...

  7. Centos7 安装Python3.7

    如果电脑自带的python2.7 先卸载 1.强制删除已安装python及其关联 rpm -qa|grep python|xargs rpm -ev --allmatches --nodeps 2.删 ...

  8. 何时使用异步或同步AJAX

    通常最好使用异步调用 通过优锐课核心java学习笔记中,我们可以看到,码了很多专业的相关知识, 分享给大家参考学习. AJAX代表异步JavaScript和XML,是一项允许异步更新网页的技术,这意味 ...

  9. 手动配置IP地址

    更改适配器属性 -> 选择一个网络,单击右键 -> 属性 -> Internet 协议版本 4 (TCP/IPv4)-> 属性 进入如下界面,开始配置: IP地址: IP地址用 ...

  10. MRAM技术进入汽车应用

    在整个地址空间范围内读写各种类型的数据.通常MRAM的操作和时序类似于32位微控制器的规范和时序.与DLFASH相比,当今的非易失性存储器可以接受MRAM设备的性能和吞吐量. 与当今的DFLASH相比 ...