<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. Unity资源管理机制

    转载:https://unity3d.com/learn/tutorials/topics/best-practices/assets-objects-and-serialization Assets ...

  2. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    viewport:移动设备上用来显示网页的那部分区域,但其大小并不局限于那部分可视区域 width设置layout viewport  的宽度,为一个正整数,或字符串"device-widt ...

  3. Mac下终端自动补全功能

    记录一下终端的一些使用命令,跟自动补全的配置,主要怕以后忘记了. 1.终端自动补全的配置 打开终端,输入 : nano .inputrc 在文件里面写上: set completion-ignore- ...

  4. jquery mobile开发中常见的问题(转载)

    1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 处理方法: 在head标签内加入: <meta name="viewport" content="w ...

  5. SVNKit学习——wiki+简介（二）

    这篇文章是参考SVNKit官网在wiki的文档,做了个人的理解~ 首先抛出一个疑问,Subversion是做什么的,SVNKit又是用来干什么的? 相信一般工作过的同学都用过或了解过svn,不了解的同 ...

  6. Python3.x 安装Scrapy框架

    先判断pip是否已经安装 pip --version 确认已经安装后,使用pip安装库 pip3 install PackageName eg: pip3 install Scrapy 报错解决方案 ...

  7. 【Leetcode】【Medium】Subsets

    Given a set of distinct integers, S, return all possible subsets. Note: Elements in a subset must be ...

  8. c# 知识学习

    1.C#基础知识梳理系列 2.详解C#委托,事件与回调函数 3.C#制作Windows service

  9. Python学习---进程 1225

    进程创建 进程创建: 第一种:直接创建 第二种:利用类来实现 第一种:直接创建 from multiprocessing import Process import time def f(name): ...

  10. .NET事务

    概述 事务ACID特性 事务将一系列的工作视为一个工作单元,它具有 ACID 特性: A:Atomicity 不可分性也就是说事务中有多项工作,如果有一项工作失败了,整个事务就算失败了. C:Cons ...