用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. VFP CursorAdapter 起步一(作者：Doug Hennig 译者：fbilo)

    CursorAdapter 类是 VFP 8 中最重要的新功能之一,因为它提供了一种简单易用.接口统一的访问远程数据源方式.在这个月的文章里,Dung Hennig 将向你展示 CursorAdapt ...

  2. VFP 的 SPT 起跳 -- 陈纯(BOE数据网络工作室)

    细节描述 Visual FoxPro 的 SPT 技术快速入门 说在前面熟悉 Fox 的朋友都知道,在 VFP 里我们可以使用远程视图 (Remote View) 和 SPT(SQL Pass Thr ...

  3. struts2动态调用+Servlet过滤器+struts2拦截器

    周末真的是懒到心慌...... 本文是在完整s2sh项目基础上添加的,不太了解s2sh项目构建的朋友可以先参考一下这几篇文章: eclipse环境下基于tomcat-7.0.82构建struts2项目 ...

  4. Git安装与配置，以及pycharm提交代码到github

    1.下载git,安装 下载好后直接下一步到底,安装成功(选择组件页面,可以勾选上控制台窗口字体选项,如下图) 2.配置Git信息 1.打开窗口中,输入:git --version 查看已安装的git版 ...

  5. Foxmail for windows 客户端设置和 IMAP、POP3/SMTP 的设置

    Foxmail支持微信扫码.手机验证码.账号密码三种方式新建腾讯企业邮箱. 注意:目前仅foxmail 7.2.11版本支持微信扫码和手机验证码新建腾讯企业邮箱,可以foxmail官网https:// ...

  6. com.google.gson json字符串的序列化与反序列化

    经常做协议的时候用到json,个人习惯是定义协议文档,很少在这中场景中定义类,使用对象. 这里使用一个人物有名字,性别,有一个物品列表做个简单示例记录. 序列化 JsonObject jo=new J ...

  7. Android_向用户发送短信

    一段代码,用的时候copy就行 记得在manifest里声明send-sms和read-sms权限 public class SendMsgActivity extends AppCompatActi ...

  8. 【React Native】集成声网Agora语音通讯

    前言: 公司的产品是一款基于社交的内容聊天软件,需要集成语音通讯功能,在写iOS原生项目时,用到的就是Agora SDK,现在写React Native也直接采用了Agora的库. 集成iOS.And ...

  9. JS笔记之第一天

    JavaScript:简称JS JS的原名不是JavaScript,而是LiveScript JS分为三个部分 1.ECMAScript  标准→JS的基本的语法 2.DOM——Document Ob ...

  10. mac本地安装全局包报错npm WARN checkPermissions

    安装本地全局包时,本地报错 npm WARN checkPermissions Missing write access to /Users/xxx/.nvm/versions/node/v11.10 ...