<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. 常用APDU指令错误码

    状态码 性质 错误解释 9000 正常 成功执行 6200 警告 信息未提供 6281 警告 回送数据可能出错 6282 警告 文件长度小于Le 6283 警告 选中的文件无效 6284 警告 FCI ...

  2. 使用Axure管理团队项目以及分享原型

    第一部分:使用Axure管理团队项目 首先,你要有一个Axure账户 呵呵哒.注册地址:http://share.axure.com 发起团队项目 在浏览器登录 Axure share(网速很卡很卡) ...

  3. CSS/LESS tips and snippets

    如何style line-through? <style type="text/css"> span.inner { color: green; } span.oute ...

  4. windows中实现有相同的程序运行就不在运行新的程序。

    主要是通过互斥量内核对象来实现程序间互斥. // CEcopClientApp 初始化HANDLE m_hMutexMark = NULL;BOOL CEcopClientApp::InitInsta ...

  5. vsphere的P2V工具做的物理机迁移到虚拟机报错out of memory

     vsphere的P2V工具做的物理机迁移到虚拟机  迁移成功,但是启动报错  进入rescue模式后发现是sysctl.conf文件的参数设大了因为虚拟机的内存没有物理机内存大 kernel.shm ...

  6. c++中左值的含义

    <<cpp primer plus 6th edition>>中的原文(Chapter 8 Adventures in Functions): What is an lvalu ...

  7. python UI自动化实战记录三：pageobject-基类

    脚本思路: 使用pageobject模式,写一个basepage基类,所有页面的通用方法封装到基类中.比如打开页面,关闭页面,等待时间,鼠标移到元素上,获取单个元素,获取一组元素,获取元素的子元素,截 ...

  8. c++由string组成的struct初始化崩溃

    struct _UserInfo { string username; string password; string ip; string port; } _UserInfo str={}; 这样就 ...

  9. List的 并集、交集、差集操作

    package com.zheting.collection.list; import java.util.ArrayList; import java.util.Arrays; import jav ...

  10. SpringMVC 如何定义类型转换器

    举例说明, 将一个字符串转换成的 User 类型. 例如将字符串 1-zcd-1234-zcd@163.com-1999/12/12  转换成User 类型. 一.实体类 public class U ...