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

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

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

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

　　

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

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

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

  1. <script>标签里的defer和async属性 区别（待补充）

    defer与async的区别(表格显示): table th:first-of-type { width: 150px; } table th:nth-of-type(2) { } 区别 defer ...

  2. javascript中的defer和async学习+javascript执行顺序

    一.defer和async 我们常用的script标签,有两个和性能.js文件下载执行顺序相关的属性:defer和async defer的含义[摘自https://developer.mozilla. ...

  3. script标签中的async、defer属性

    Script标签是我们常用的引用js脚本的一种方式. 撸代码的时候,我们常常只写src属性,直接忽略其他属性. 最近发现了2个可以利用的属性:async.defer. 顾名思义async就是异步,在不 ...

  4. 脚本引用中的defer和async的用法和区别

    之前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置defer.async,没有细说,这里展开一下,谈谈它们的作用和区别,先上张图来个针对没用过的小伙伴有个初始印象: 是的,就是在页面脚本 ...

  5. script标签里的defer属性

    入职新公司,看代码的时候注意到有的script标签中有一个defer属性,查了一下.在这里分享出来. 需要注意的有三点,其中前两点是在错误中分辨出来的: 错误来源:http://www.w3schoo ...

  6. 关于html中的 script标签中的 代码写法有效性? easyui tabs的href不能载入内容页面

    script标签, 即 html中的 js脚本区域中: 它其实就是一个 普通的 html标签, 在 html 渲染器 parser 看来, 它跟其他任何的普通 的 html标签 , 比如 p 标签, ...

  7. javaScript中的小细节-script标签中的预解析

    首先介绍预解析,虽然预解析字面意思很好理解,但是却是出坑出的最多的地方,也是bug经常会有的地方,利用好预解析的特性可以解决很多问题,并且提高代码的质量及数量,浏览器在解析代码前会把变量的声明和函数( ...

  8. 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量?

    <!DOCTYPE html> <!-- 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量? 在全局环境下的代码就是在页面加载阶段从上到下一边加载一边执 ...

  9. script标签中type为"text/x-template"或"text/html"

    写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...

随机推荐

  1. Mac下用SSH连接远程Linux或Mac服务器

    1.打开Mac终端 2.切换到root登录 输入命令:sudo -i,然后输入本机密码 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px &qu ...

  2. ASP.net core 2.0.0 中 asp.net identity 2.0.0 的基本使用（四）—用户注册

    修改用户注册 1.修改用户名注册规则. 打开Controllers目录下的AccountController.cs. 在控制器中找到 public async Task<IActionResul ...

  3. mybatis配置多个数据源事务(Transaction)处理

    当mybatis配置文件中只有一个数据源的时候,按照正常的事务注解形式@Transaction是没有问题的,但是当配置文件中有多个数据源的时候发现事务不起作用了,怎么解决这个问题呢?看下面的案例:

  4. 重温MFC

    1. Button控件 2. 旋转和高级编辑控件 3. 标签控件和属性页 4. 列表控件 5. 树控件 6. 进度条控件和滑动条控件 7. 滚动条 8.工具栏和状态栏

  5. Linux指令--wget

    Linux系统中的wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,我们经常要下载一些软件或从远程服务器恢复备份到本地服务器.wget支持HTTP,HTTPS和FTP协 ...

  6. hibernate 基础

    Hibernate:是开源的ORM框架技术,对jdbc进行了非常轻量级的对象封装,处于业务逻辑层和数据库层之间,称作持久化层. 持久化层的作用:把程序生成的对象持久化到数据库,也就是保存到数据库.   ...

  7. 【ASP.NET Core】MVC中自定义视图的查找位置

    .NET Core 的内容处处可见,刷爆全球各大社区,所以,老周相信各位大伙伴已经看得不少了,故而,老周不考虑一个个知识点地去写,那样会成为年度最大的屁话,何况官方文档也很详尽.老周主要扯一下大伙伴们 ...

  8. LCA(最近公共祖先）之倍增算法

    概述 对于有根树T的两个结点u.v,最近公共祖先LCA(T,u,v)表示一个结点x,满足x是u.v的祖先且x的深度尽可能大. 如图,3和5的最近公共祖先是1,5和2的最近公共祖先是4 在本篇中我们先介 ...

  9. 通过traceroute追踪并打印成图片

    #!/usr/bin/evn python #-*-coding:utf-8 -*- import time import logging,warnings import subprocess imp ...

  10. cordova+vue 项目打包成Android（apk）应用

    现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题.现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只 ...