<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. 《effective c++》读书笔记（上）

    最近在读<Effective C++>,确实是经典之作,但是有的条款也需要一些细节补充,所以都列在这篇文章里,希望能不断更新,个人阅读的是第三版,不包括C++ 11的内容. 条款1:视C+ ...

  2. spring----面试题

    1.什么是Spring beans? Spring beans 是那些形成Spring应用的主干的java对象.它们被Spring IOC容器初始化,装配,和管理.这些beans通过容器中配置的元数据 ...

  3. C# 程序启动最小化至任务栏及闪烁

    主要功能: C#让窗体最小化至任务栏,同时在系统托盘区的图标点击左键能显示窗体,并使窗体闪烁. 首先: 创建窗体应用程序,并添加控件NotifyIcon及ContextMenuStrip控件 Noti ...

  4. python多进程与协程

    1.进程的概念 什么是进程->CPU在同一时刻只能处理一个任务,只是因为cpu执行速度很快. cpu在各个任务之间来回的进行切换. 进程的概念:正在进行的一个过程或者说一个任务,而负责执行任务的 ...

  5. C#中的多线程 - 同步基础 z

    原文:http://www.albahari.com/threading/part2.aspx 专题:C#中的多线程 1同步概要Permalink 在第 1 部分:基础知识中,我们描述了如何在线程上启 ...

  6. GridControl 应用 z

    DevExpress学习系列(控件篇):GridControl的基本应用 一般属性设置 不显示分组框:Gridview->Option View->Show Group Panel=fal ...

  7. dedecms Ajax异步获取文章列表

    dedecms如何通过ajax(异步)动态获取文章列表数据. 第一步添加:服务端(PHP)代码 打开plus目录下面的list.php文件,在12行代码下面添加以下代码: if(isset($_GET ...

  8. 为什么S/4HANA的销售订单创建会触发生产订单的创建

    调用S/4HANA销售订单创建函数SD_SALES_DOCU_MAINTAIN创建一个销售订单时,会触发生产订单的创建. 销售订单的每个行项目对应一个独立的生产订单,SD_SALES_DOCU_MAI ...

  9. Task ‘run’ not found in root project

    问题现象: Task 'run' not found in root project 'springframework'. 问题原因: 没有在gradle.build文件中添加如下配置, mainCl ...

  10. 命令行参数技巧：__argc，__argv

    几个可以使用的全局变量: _CRTIMP extern int __argc; /* count of cmd line args */ _CRTIMP extern char ** __argv; ...