<script>标签中的 defer 与 async区别

　　在html里，使用<script>标签对脚本进行外部或内部引用，<script>标签包含了两个特殊的属性：defer与async，他们的区别如下：

　　1.若<script>标签引用的是内部脚本，即如：

　　此时这两个属性不起任何作用，脚本会从上到下依次执行。

　　2.若<script>标签引用的是外部脚本，即如：

　　此时标签中引入defer="defer"，表明此脚本会立即下载，但会延迟到整个页面都解析完成后再依次运行（此处的依次是指下载完成的先后顺序）；而引入async(XHTML写法：async="async"),表明次脚本会立即下载，并再下载完成后立即执行，即使此时文本正在执行，也会暂停下来执行下载完的脚本，并且不能保证脚本执行的先后顺序；<script>标签默认情况下是不会引入这两个属性的，所以默认行为是从上到下执行，为了避免在执行操作元素的脚本找不到还未渲染的元素而产生逻辑问题，通常情况下会将<script>标签引用的脚本申明到<body>标签后；

　　（建议使用外部脚本引用，这样会有利于后期代码维护，并且可以对引用脚本进行缓存）

<script>标签中的 defer 与 async区别的更多相关文章

<script>标签里的defer和async属性区别（待补充）
defer与async的区别(表格显示): table th:first-of-type { width: 150px; } table th:nth-of-type(2) { } 区别 defer ...
javascript中的defer和async学习+javascript执行顺序
一.defer和async 我们常用的script标签,有两个和性能.js文件下载执行顺序相关的属性:defer和async defer的含义[摘自https://developer.mozilla. ...
script标签中的async、defer属性
Script标签是我们常用的引用js脚本的一种方式. 撸代码的时候,我们常常只写src属性,直接忽略其他属性. 最近发现了2个可以利用的属性:async.defer. 顾名思义async就是异步,在不 ...
脚本引用中的defer和async的用法和区别
之前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置defer.async,没有细说,这里展开一下,谈谈它们的作用和区别,先上张图来个针对没用过的小伙伴有个初始印象: 是的,就是在页面脚本 ...
script标签里的defer属性
入职新公司,看代码的时候注意到有的script标签中有一个defer属性,查了一下.在这里分享出来. 需要注意的有三点,其中前两点是在错误中分辨出来的: 错误来源:http://www.w3schoo ...
关于html中的 script标签中的代码写法有效性? easyui tabs的href不能载入内容页面
script标签, 即 html中的 js脚本区域中: 它其实就是一个普通的 html标签, 在 html 渲染器 parser 看来, 它跟其他任何的普通的 html标签 , 比如 p 标签, ...
javaScript中的小细节-script标签中的预解析
首先介绍预解析,虽然预解析字面意思很好理解,但是却是出坑出的最多的地方,也是bug经常会有的地方,利用好预解析的特性可以解决很多问题,并且提高代码的质量及数量,浏览器在解析代码前会把变量的声明和函数( ...
为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量?
<!DOCTYPE html> <!-- 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量? 在全局环境下的代码就是在页面加载阶段从上到下一边加载一边执 ...
script标签中type为"text/x-template"或"text/html"
写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...

随机推荐

Python自建logging模块
本章将介绍Python内建模块:日志模块,更多内容请从参考:Python学习指南简单使用最开始,我们用最短的代码体验一下logging的基本功能. import logging logger = ...
.netCore数据库迁移
程序包管理器控制台下Nuget 命令: 初始迁移命令: add-migration init -Context DAL.ProductContext 全称:migrations add Initial ...
Java中的SerialVersionUID
Java中的SerialVersionUID 序列化及SergalVersionUID困扰着许多Java开发人员.我经常会看到这样的问题,什么是SerialVersionUID,如果实现了Serial ...
JS的for循环小例子
1.输出1-100的和 var sum = 0; for(var i=1;i<=100;i++){ sum = sum + i; } document.write(sum); 2.输出1-100 ...
CColor类封装
CColor类封装 Color.h #pragma once #include <sstream> #include <string> using namespace std; ...
POI--HSSFSheet类
用POI来作成一个Sheet,可以用「HSSFSheet」类,该类构造器如下: 新建Sheet 从构造器可以看出,虽然它有两个构建器,但都是protected的,所以要新建Sheet,只能通过Work ...
UUID.randomUUID().toString()
UUID.randomUUID().toString()是javaJDK提供的一个自动生成主键的方法.UUID(Universally Unique Identifier)全局唯一标识符,是指在一台机 ...
Shader 入门笔记(一)
本笔记,是根据自己学习shader的笔记,主要是参照冯乐乐的<Shader 入门精要> 和游戏蛮牛shaderLad视频和网上一些博客. 为啥要学习这个呐? 自己其实之前学过一段时间的s ...
浅谈TreeMap以及在java中的使用
treemap结构是红黑树 1.先介绍一下平衡二叉树其特点是一棵空树或它的左右两个子树的高度差的绝对值不超过1,并且左右两个子树都是一棵平衡二叉树.也就是说该二叉树的任何一个子节点,其左右子树的高度 ...

<script>标签中的 defer 与 async区别

<script>标签中的 defer 与 async区别的更多相关文章

随机推荐

热门专题