用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. centos7.5下yum安装php-5.6.40（LNMP环境）

    cd /etc/yum.repos.d/ yum -y install epel-release #<===安装centos7下php5.6的epel和remi源 rpm -ivh http:/ ...

  2. iptables服务器主机防火墙

    iptables参数说明: Commands: Either long or short options are allowed. --append -A chain 链尾部追加一条规则 --dele ...

  3. PYTHON 学习笔记4 模块的使用、基本IO 写入读取、JSON序列化

    前言 若在之前写代码的方式中,从Python 解释器进入.退出后再次进入,其定义的变量.函数等都会丢失.为了解决这个为,我们需要将需要的函数.以及定义的变量等都写入一个文件当中.这个文件就叫做脚本 随 ...

  4. js 递归总结

    1.根据子id 递归查找所有父级 id  主要用于vue  element 中 Cascader 级联选择器展示 在编辑中回显默认展示 tree 数据 var arr = [{ "label ...

  5. springcloud 项目源码 微服务 分布式 Activiti6 工作流 vue.js html 跨域 前后分离

    1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...

  6. 常量, char[], const char[], char*, const char*, char* const以及const char* const的详解

    注意,这里用char类型只是举了一个例子,其他的int之类的也通用. 1: 常量: 例子: char str[] = "Hello world!"; char ch = 'a'; ...

  7. 网页DIV+CSS布局与ifame传统布局对比

    通常我们从设计师手上拿到设计稿,按照功能划分为很多小块,然后再利用div+css写成静态页面按照设计稿排列还原,最后把具体内容填充到小块里面.网页布局就是你想要的页面功能在你拿到设计图切块完成重新排列 ...

  8. 【python基础语法】第7天作业练习题

    import keyword ''' # 第一题:简单题 1.什么是全局变量? 2.什么是局部变量? 3.函数内部如何修改全局变量(如何声明全局变量 )? 4.写出已经学过的所有python关键字,分 ...

  9. 安装 mysqlclient 报 mysql_config not found

    安装 mysqlclient 报 mysql_config not found raise EnvironmentError("%s not found" % (mysql_con ...

  10. 爬取豆瓣网图书TOP250的信息

    爬取豆瓣网图书TOP250的信息,需要爬取的信息包括:书名.书本的链接.作者.出版社和出版时间.书本的价格.评分和评价,并把爬取到的数据存储到本地文件中. 参考网址:https://book.doub ...