1）、把<script>标签放在<head>中意味着必须等到全部的js代码都下载解析和执行完成以后，才开始展现页面内容，为避免这个问题一般把js代码全部放在<body>元素内容后面

2）、script标签不带defer和async属性：同步模式，脚本获取和执行都是同步，页面会被阻塞，浏览器都会按照<script>元素在页面中出现的先后顺序对他们依次进行解析

同步模式：又称阻塞模式，会阻止浏览器的后续执行，停止后续解析，只有当前加载完成才能进行下一步操作。

3）、async属性：html5的新属性，只适合用于外部脚本文件，异步模式

　　通过createElement创建的script标签其属性async默认为true

4）、defer属性：异步模式，只适合外部脚本文件，会被延迟到整个页面都解析完毕后再运行，脚本加载不阻塞页面的解析，同时带有defer的脚本彼此之间，能保证其执行顺序

补充：

<script>标签打开defer或async属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。

defer与async的区别是：defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

加载 es6模块的时候设置 type=module，异步加载不会造成阻塞浏览器，页面渲染完再执行，可以同时加上async属性，异步执行脚本（利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在 ES6 “模块”之中）

script标签的同步和异步的更多相关文章

  1. 动态script标签同步加载 ps：无打包编译，静态实现静态资源入口动态配置，无编译打包静态资源添加版本号

    /**功能:创建动态标签加载css ,js文件,重点是js文件,利用onloading加递归实现动态标签的同步加载用法:在html文件body底部script内部声明并调用下列函数,obj中写要加载的 ...

  2. 【javascript】script标签的async异步解析

    <script src="script.js"></script> 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染 ...

  3. JavaScript <script>标签的位置、延迟脚本（defer属性）与 异步脚本（async属性）

    一.<script>标签的位置 传统的做法是将<script>元素放在<head>元素中,例如: <!DOCTYPE html><html > ...

  4. Javascript之<script>标签

    把javascript代码插入到HTML页面中需要使用<script>标签,使用这个元素可以使javascript和html标记混合在一个页面中,也可以引入外部的javascript文件. ...

  5. js同步、异步、延时、无阻塞加载

    一.同步加载 平常默认用的都是同步加载.如:<script src="http://yourdomain.com/script.js"></script> ...

  6. script标签

    script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件.默认情况下script标签的会阻止文档渲染,相关脚本会立即下载并执行. 属性 在HTML5中script主要有以下几个属 ...

  7. script标签加载顺序(defer & async)

    script 拥有的属性 async:可选,表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示通过 src 属性指 ...

  8. script 标签的defer,async的作用，及拓展浏览器多线程，DOMContentLoaded

    前端优化有一点就是优化js的执行时机,一般做法是将script放置于body的结束标签,以避免加载执行js 文件导致页面渲染阻塞的问题这种做法确实能防止页面阻塞,但是在页面渲染完成之后才去加载js文件 ...

  9. [转]Script标签和脚本执行顺序

    Script标签和脚本执行顺序 这里详细聊聊和script标签相关的脚本执行顺序. Script标签的默认行为 几个首要特性: script标签(不带defer或async属性)的会阻止文档渲染.相关 ...

随机推荐

  1. netty---------write flush两个方法到底做了什么？

    上一篇已经看到:unsafe的read方法,把channel中的数据read到byteBuff中的byteBuffer里.那么根据猜想,下面要进行的应该是nio 的 channel的write(byt ...

  2. thinkphp5.1学习笔记

    由于新公司使用的框架是thinkphp5.1,有必要进一步学习,看来我要把php框架使用完全了,之前就用过laravel和CI框架了. 现在打算只是一个学习的记录,结构会比较凌乱,基本我估计只能自己看 ...

  3. 《统计学习方法》笔记（3）：k近邻

    k近邻(KNN)是相对基本的机器学习方法,特点是不需要建立模型,而是直接根据训练样本的数据对测试样本进行分类. 1.k近邻的算法? 算法对测试样本进行分类的一般过程如下: 1)根据给定的k值,搜索与测 ...

  4. JAVA中的Set

    Set中存放的是没有重复的数据,下说记录一下使用中的小细节. 1.HashSet 区分大小写: Set<String> set1 = new HashSet<String>() ...

  5. 前端笔记 （2.CSS）

    知识点借鉴于慕课网,菜鸟教程和w3shool CSS方面: CSS全称为“层叠样式表”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 使用CSS样式的一个好处是通过 ...

  6. 关于DDOS的主动与智能防御

    -   善守者藏于九地之下    - -  狡兔九窟 - 一.分配足够多的网关服务器 让用户总一个终点,可以进入游戏.多分配,动态分配,定期更新 二.用户分组分级 分组可以根据用户的生成时间, 在线时 ...

  7. A + B 问题

    要求: 问题:给出两个整数a和b, 求他们的和, 但不能使用 + 等数学运算符. 示例: 如果 a=1 并且 b=2,返回3 代码: package main import ( "fmt&q ...

  8. http协议与websocket协议（转）

    一.WebSocket是HTML5中的协议,支持持久连接:而Http协议不支持持久连接. 首先HTMl5指的是一系列新的API,或者说新规范,新技术.WebSocket是HTML5中新协议.新API. ...

  9. 【c++基础】遍历目录并写入txt文件-linux

    前言 /****************************************************************************** * File: get_train ...

  10. 求强连通分量Tarjan算法

    ]; // 时间戳 ; // 时间 ]; // 节点u所能访问到的最小时间戳 ]; // 节点u是否在栈中. ]; ; // 我们维护的信息. ]; // 给节点染色, 同一个连通块的节点应该是同一个 ...