<script>标签的位置

HTML4规范允许<script>可以放在<head>或<body>中。

但是，放在<head>中会导致性能问题：浏览器在解释到<body>前，不会渲染页面任何内容，而把<script>放在<head>中会阻塞页面渲染，把<script>放在<head>的话，会等到<script>全部加载和执行后才会继续渲染页面，这样一来用户访问可能会先看到一段时间的空白页面。

由于脚本会阻塞页面其他资源的下载，所以推荐将所有<script>放在<body>标签的底部。

无阻塞的脚本

defer

HTML4为<script>引入defer属性，带有该属性的<script>可放在任何地方，相应的JavaScript文件在页面解释到该标签时开始下载，然后在DOM加载完成之后，window.onload事件执行之前，以及其他没有defer属性的<script>之后执行。

带有defer属性的<script>下载脚本并不会阻塞页面加载的其他进程，此类文件可以与其他资源并行下载。

当带有defer的<script>标签使用src引入外部脚本时，该script内嵌的脚本无效。

根据HTML5规范，只有在src被声明时，defer才有效。

使用示例：

<script src= "hello.js" defer="defer"></script>

或者

<script src="hello.js" defer></script>

async

async是HTML5加入的属性，类似于defer

只有在声明src时，async才生效。

标记为async的<script>立即下载脚本文件，同时并不会阻塞页面加载的其他进程，脚本将在下载完成后尽快执行。

标记为async的<script>一定会在window.onload前执行完毕。

标记为async的脚本并不保证按照指定的顺序来执行，eg：

<script async src="hello.js"></script>

<script async src="world.js"></script>

上面代码中，第二个脚本可能会在第一个前执行，所以，使用async加载的脚本文件间最好不要有依赖关系。

JavaScript脚本加载相关知识的更多相关文章

  1. 浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded

    在”浏览器环境下Javascript脚本加载与执行探析“系列文章的前几篇,分别针对浏览器环境下JavaScript加载与执行相关的知识点或者属性进行了探究,感兴趣的同学可以先行阅读前几篇文章,了解相关 ...

  2. 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...

  3. 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

    在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...

  4. 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序

    本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析 ...

  5. js文件加载太慢，JavaScript文件加载加速

    原文出自:https://blog.csdn.net/seesun2012 js脚本加载太慢,JavaScript脚本加载加速(亲测有效) 测试背景: JS文件大小:6.1kB 传统形式加载js文件: ...

  6. 【Hight Performance Javascript】——脚本加载和运行

    脚本加载和运行 当浏览器遇到一个<script>标签时,无法预知javascript是否在<p>标签中添加内容.因此,浏览器停下来,运行javascript代码,然后继续解析. ...

  7. 从 RequireJs 源码剖析脚本加载原理

    引言 俗话说的好,不喜欢研究原理的程序员不是好的程序员,不喜欢读源码的程序员不是好的 jser.这两天看到了有关前端模块化的问题,才发现 JavaScript 社区为了前端工程化真是煞费苦心.今天研究 ...

  8. Javascript 异步加载详解(转)

    本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...

  9. 不得不说的JavaScript异步加载

    同步加载的问题 默认的js是同步加载的,这里的“加载”可以理解成是解析.执行,而不是“下载”,在最新版本的浏览器中,浏览器对于代码请求的资源都是瀑布式的加载,而不是阻塞式的,但是js的执行总是阻塞的. ...

随机推荐

  1. DELPHI SOKET 编程--使用TServerSocket和TClientSocket

    本文采用delphi7+TServerSocket+TClientSocket; 笔者在工作中遇到对局域网中各工作站与服务器之间进行Socket通信的问题.现在将本人总结出来的TServerSocke ...

  2. androidcookie

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { webSettings.setAllowFileAccessFrom ...

  3. NS Simulation Basic

    这个网站上的一系列讲解NS2的内容真的是深入浅出,看完立刻豁然开朗.所以就接连转了几篇. Scheduling Events那篇里的例子特别好,看完就懂了. http://www.mathcs.emo ...

  4. JAVA程序员常用开发工具

    1.JDK (Java Development Kit)Java开发工具集 SUN的Java不仅提了一个丰富的语言和运行环境,而且还提了一个免费的Java开发工具集(JDK).开发人员和最终用户可以利 ...

  5. Eclipse启动JVM机制

    1.Eclipse启动的时候,会启动一个JVM来运行eclipse(因为Eclipse是Java代码实现的) 2.Eclipse启动一个带main的主类的时候,会单独启动一个JVM来运行他. 3.Ec ...

  6. js笔记 标签： javascript 2016-08-01 13:30 75人阅读 评论(0) 收藏

    typeof可以用来检测给定变量的数据类型,typeof是一个操作符而不是函数,所以圆括号可以省略. Undefined类型只有一个值,即特殊的undefined.在使用var声明变量但未对其加以初始 ...

  7. AutoHotkey批量L版代码转H2的vim脚本

    原脚本尽量用表达式的语法写,错误会比较少,比如"If a=", "fun(a=1)"这种语法在V2会出错文件放vim的autoload目录下,可使用以下map使 ...

  8. June 28th 2017 Week 26th Wednesday

    Anger begins with folly, and ends in repentance. 愤怒以愚蠢开始,以后悔告终. Learn to control your temper, don't ...

  9. NET平台微服务

    .NET平台微服务项目汇集   最近博客园出现了一篇文章<微服务时代之2017年五军之战:Net PHP谁先死>,掀起了一波撕逼,作者只是从一个使用者的角度来指点江山,这个姿势是不对的.. ...

  10. Powershell split file

    #网上所得非原创 function split($inFile, $outPrefix, [Int32] $bufSize){ $stream = [System.IO.File]::OpenRead ...