用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. 无线网络WPA加密算法基础

    2013-11-13 23:08 (分类:网络安全) 对无线没什么认识,总听说有人蹭网,还有卖蹭网器的,于是补充一下知识. 无线加密有两类:WEP WAP,目前采用WEP加密的非常少了,WEP应该只是 ...

  2. 一个故事看懂Linux文件权限管理

    前情回顾: 我通过open这个系统调用虫洞来到了内核空间,又在老爷爷的指点下来到了sys_open的地盘,即将开始打开文件的工作. 详情参见:内核地址空间大冒险:系统调用 open系统调用链 我是一个 ...

  3. 珠峰-架构6-es6

    let aa = ; { console.log(aa); } // ----- let aa = ; { console.log(aa); // 报错 aa is not defined let a ...

  4. C# DateTime 工具类

    项目gitHub地址 点我跳转 今天给大家带来一个C#里面的时间工具类,具体的直接看下面代码 using System; namespace ToolBox.DateTimeTool { public ...

  5. c#---Socean.Rpc之EasyProxy

    目录 1.高性能RPC框架:Socean.RPC 2.Socean.RPC框架实测 3.Socean.Rpc之EasyProxy 简介 这几天给Socean.RPC加上了动态代理,简称EasyProx ...

  6. Mysql 字符串转数字类型

    使用场景: 在数据库中进行数字比较,但是数字的存储格式是varchar的时候可以使用以下方法进行转换,然后进行比较 方法一:SELECT CAST('123' AS SIGNED); 方法二:SELE ...

  7. linux文件、文件夹操作

    1. pwd   查看当前所在的路径 2. ls   显示文件列表 ls -l   显示文件列表以及详情 ls -la   显示所有文件列表以及详情(包含隐藏文件) 注意:ls -l 相当于ll 例如 ...

  8. 内网学习之MySQL服务提权

    利用MySQL提权原理: 1.具有mysql的root权限,且mysql以system权限运行. 2.具有执行sql语句的权限,webshell或者外连皆可 UDF提权 UDF(user define ...

  9. em和rem区别

    em大小依据父元素的字体大小的倍数 rem大小依据与根元素,即html标签的font-size大小

  10. AGC014-F Strange Sorting

    题意 \(n\)-排列,反复进行:将序列中为前缀最大值的数全部移动到序列末(两种数不改变相对位置),问经过多少次后第一次全部升序排列 做法 定义:用high表示为前缀最大值,low则反之 考虑忽略\( ...