今天群里有人问为什么会出现脚本的加载顺序与定义脚本顺序不一致的问题，这个问题引起了我的好奇，经过一番调研，有了这篇文章。
这是一个伪命题吗？
首先，W3C 推荐 script 脚本应该被立即加载和执行，其次，经过网络搜索，我只发现了 1 例相同的问题，所以这个问题的真伪其实还有待进一步验证，但是从逻辑上说，浏览器会并行加载静态资源，对于 Chrome，可以并行加载 6 个资源，如果其中一个资源获取的比较缓慢，那么会影响串行的下 6 个请求的发送，如果能够预先测试出 6 个通畅的请求，一并发送，那么就可以提升网络加载的整体性能。但浏览器是否有这一层优化呢？目前我只见到这篇文章提到过浏览器似乎有这个优化算法，但是并没有在其他地方得到确认。
标签的价值
我们有两种方式使用 <script> 标签：
- 通过设置
src属性引入外部 JavaScript 静态资源； - 执行
<script>开闭标签内的 JavaScript 脚本；
但其实本质上这两种方式是一回事，其最终的目的就是让浏览器在当前页面执行 JavaScript 脚本，只不过对于前者而言多了一道工序：将服务器返回的 JavaScript 脚本内容插入 <script> 标签内部，然后在执行它。
因此，对于 <script> 标签，我们唯一关心的只有一点：JavaScript 脚本被执行的时机。
标签的加载顺序
在页面中，我们有两处地方可以放置 <script> 标签：
-
<head> ... </head>head 标签内部； -
<body> ... </body>body 标签内部；
在 <head> 标签中插入引用外部 JavaScript 会导致 <body> 标签内的内容在 JavaScript 被完全下载，解析，执行完毕后才会被解析，这期间用户会看到浏览器一片空白，因此会影响用户体验。（这是由于浏览器从上至下解析 HTML 文档，而 JavaScript 的下载，解析和执行会中止浏览器的解析过程）。
因此业界通行的做法是，将 script 标签放置 <body> 底部，从而避免 JavaScript 阻塞页面渲染。
但无论如何，我们的 JS 脚本的执行顺序是相同的：根据其在页面中的位置决定先后顺序。
但是我们可以通过两个属性改变这一顺序。
script 常用属性：defer 和 async
async 属性
async 属性是 HTML5 规范新推出的一个属性，用来告知浏览器应该尽可能的异步加载脚本。所有的浏览器都支持
该属性。具有该属性的脚本我们既无法得知它下载的时间，也无法得知它执行的时机，我们唯一知道的只有两点：
- 脚本会被异步下载；
- 脚本下载完毕后会立即执行，此时会阻止 HTML 的渲染；
⚠️ 注意，script 标签必须有 src 属性，且属性值有效。
defer 属性
defer 属性向浏览器指明了脚本被执行的时机：“文档解析之后，DOMContentLoaded 事件被触发之前（即 HTML 文档被完全加载和解析，不管样式表，图片或 iframe 是否加载完毕。恩，一个很微妙的时间
script 加载顺序问题的延展研究的更多相关文章
-
script标签加载顺序(defer &; async)
script 拥有的属性 async:可选,表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示通过 src 属性指 ...
-
DOM加载顺序
最近一直在困扰dom的加载顺序问题,经常会遇到以为绑定好的事件不响应等情况,一头雾水,直到请教了周围的同事,才发现了解dom的加载顺序是多么的重要. 关于这个问题,其实网上已经有一些介绍,但是我觉得并 ...
-
详解web.xml中元素的加载顺序
一.背景 最近在项目中遇到了启动时出现加载service注解注入失败的问题,后来经过不懈努力发现了是因为web.xml配置文件中的元素加载顺序导致的,那么就抽空研究了以下tomcat在启动时web.x ...
-
html页面元素加载顺序
一般来说,添加背景图片有三种办法: 直接写在标签的style里面,如: <div style="background-image:url('images/Css.JPG')" ...
-
jsp页面中的代码执行加载顺序介绍
1. java是在服务器端运行的代码,jsp在服务器的servlet里运行,而javascript和html都是在浏览器端运行的代码.所以加载执行顺序是是java>jsp>js. 2. j ...
-
javascript加载顺序
javascript加载顺序 <script type="text/javascript" src="jquery.js"></script& ...
-
(转)JS加载顺序
原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)——第一篇 Javascrip ...
-
JS 和 CSS 的位置对其他资源加载顺序的影响
JS 和 CSS 在页面中的位置,会影响其他资源(指 img 等非 js 和 css 资源)的加载顺序,究其原因,有三个值得注意的点: JS 有可能会修改 DOM. 典型的,可能会有 document ...
-
Ckeditor 的加载顺序
我们的只用在文件里面引用一个CKEditor的js文件--CKEditor目录下的ckeditor.js文件, 该文件会完成后续的所有的CKEidtor依赖的js文件的加载. 所依赖的js文件加载顺序 ...
随机推荐
-
hdu 1517 博弈 **
博弈题: 题意:2 个人玩游戏,从 1 开始,轮流对数进行累乘,直到超过一个指定的值. 解题思路:如果输入是 2 ~ 9 ,因为Stan 是先手,所以Stan 必胜如果输入是 10~18 ,因为Oll ...
-
iOS开发——真机调试证书—发布证书
(最近准备考试,空闲整理成博客……)
-
Citrix 服务器虚拟化之六 Xenserver虚拟机创建与快照
Citrix 服务器虚拟化之六 Xenserver虚拟机创建与快照 在Xenserver上可以创建Windows和Linux等虚拟机,Xenserver支持大部分的主流操作系统,可以使用 XenCe ...
-
Java第六周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
-
AppScan 工作原理
Rational AppScan(简称 AppScan)其实是一个产品家族,包括众多的应用安全扫描产品,从开发阶段的源代码扫描的 AppScan source edition,到针对 Web 应用进行 ...
-
MP实战系列(四)之DAO讲解
说到DAO不得不提一个开发名词"三层架构",所谓的三层架构是什么呢?简单的可以概括为数据访问层,业务逻辑层,界面层(又称表现层). 这也是我们Java开发常用的手段,经常有人将三层 ...
-
关于封装了gevent的request grequest库的使用与讨论
最近迷上了gevent所以研究很多gevent相关的东西. 但是我现在不想写相关gevent和greenlet的东西.因为这一块内容实在太多太大太杂,我自己也还没有完全弄明白,所以等我完全搞清楚测试也 ...
-
为什么用svg放弃了iconfont？
svg替代iconfont的好处(无论是基于Vue.Jquery),都推荐svg http://www.woshipm.com/pd/463866.html svg图标库,svg图标在线制作 http ...
-
2018/09/05《涂抹MySQL》【权限管理】学习笔记(二)
读 第四章<管理MySQL库与表> 第五章<MySQL的权限管理> 总结 1:当配置好 MySQL 数据库后,发现有几个默认的库,他们的意义和作用?(这里只做简单了解,之后用到 ...
-
Proud Merchants（01背包变形）hdu3466
I - Proud Merchants Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u ...