<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. 第6课 仿Siri机器人-语音朗读和语音识别

    一.功能设计 输入文本,单击“朗读”按钮,由手机读出该文本(如果没有输入文本,则弹出消息框警告“请输入文本):单击“识别”按钮,读入语音,从文本框中输出文字.(另,增加识别的视觉效果,如果读入的文本含 ...

  2. JavaScript JSON AJAX 同源策略 跨域请求

    网页和Ajax和跨域的关系 1 Ajax使网页可以动态地.异步地的与服务器进行数据交互,可以让网页局部地与服务器进行数据交互 2 Ajax强调的是异步,但是会碰到跨域的问题. 3 而有很多技术可以解决 ...

  3. Python学习系列-----第二章 操作符与表达式

    2.1 数学运算和赋值的简便方法 例如: 2.2 优先级 在python中运算符有优先级之分,高优先级的运算符先执行,低优先级的运算符后执行.下面是运算符优先级:(同一行的运算符具有相同的优先级) 2 ...

  4. Android中如何在Eclipse中关联源代码?(图文)

    关联源代码 1.删除工程里面的Android Depandencies,删除后会报错,不要理会.看下面 2.添加libs目录下的Android-support-v4.jar包 选中-->右键-- ...

  5. windows server 2003安装Oracle webtier 32位因环境变量原因报错

    在服务中启动Oracle processer manager时报错:错误1053:服务没有及时响应启动或控制请求 原因是本系统还安装过BI和Oracle数据库等产品 解决方法:删除和本次安装无关的环境 ...

  6. Linux汉化(Cent Os汉化)

    在腾讯云上购买了Cent Os7.1的云服务器,是英文版啊,有没有?对于我这种英文的渣渣啊,所以我要用中文版,我就是这么low,怎么着呢? Ok ,在汉化之前,先查看系统的语言环境, echo $LA ...

  7. IOS 上传下载

    下载地址:https://github.com/samsoffes/ssziparchive 注意:需要引入libz.dylib框架 // Unzipping NSString *zipPath = ...

  8. 在前端页面展示Markdown文件

    常我们都会在GitHub上浏览很多的readme文件,这些都是Markdown语法写成的Markdown文件,HTML中并没有用于展示Markdown文件的元素,那么为什么可以在前端展示呢? 有别于G ...

  9. Layer Trees Reflect Different Aspects of the Animation State

    https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/CoreAnimation_guide/CoreA ...

  10. 1.Jdeveloper打印出完整日志(-Djbo.debugoutput=console)

    有时候在JDeveloper中需要打印出来比较系统和完整的ADF运行时日志 例如,想查看VO当前执行的是哪个View Criteria,运行的完整SQL语句到底如何 以及当前Binding Varia ...