JavaScript脚本加载相关知识
<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脚本加载相关知识的更多相关文章
- 浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded
在”浏览器环境下Javascript脚本加载与执行探析“系列文章的前几篇,分别针对浏览器环境下JavaScript加载与执行相关的知识点或者属性进行了探究,感兴趣的同学可以先行阅读前几篇文章,了解相关 ...
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...
- 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...
- 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序
本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析 ...
- js文件加载太慢，JavaScript文件加载加速
原文出自:https://blog.csdn.net/seesun2012 js脚本加载太慢,JavaScript脚本加载加速(亲测有效) 测试背景: JS文件大小:6.1kB 传统形式加载js文件: ...
- 【Hight Performance Javascript】——脚本加载和运行
脚本加载和运行 当浏览器遇到一个<script>标签时,无法预知javascript是否在<p>标签中添加内容.因此,浏览器停下来,运行javascript代码,然后继续解析. ...
- 从 RequireJs 源码剖析脚本加载原理
引言 俗话说的好,不喜欢研究原理的程序员不是好的程序员,不喜欢读源码的程序员不是好的 jser.这两天看到了有关前端模块化的问题,才发现 JavaScript 社区为了前端工程化真是煞费苦心.今天研究 ...
- Javascript 异步加载详解(转)
本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...
- 不得不说的JavaScript异步加载
同步加载的问题 默认的js是同步加载的,这里的“加载”可以理解成是解析.执行,而不是“下载”,在最新版本的浏览器中,浏览器对于代码请求的资源都是瀑布式的加载,而不是阻塞式的,但是js的执行总是阻塞的. ...
随机推荐
- 第6课 仿Siri机器人-语音朗读和语音识别
一.功能设计 输入文本,单击“朗读”按钮,由手机读出该文本(如果没有输入文本,则弹出消息框警告“请输入文本):单击“识别”按钮,读入语音,从文本框中输出文字.(另,增加识别的视觉效果,如果读入的文本含 ...
- JavaScript JSON AJAX 同源策略 跨域请求
网页和Ajax和跨域的关系 1 Ajax使网页可以动态地.异步地的与服务器进行数据交互,可以让网页局部地与服务器进行数据交互 2 Ajax强调的是异步,但是会碰到跨域的问题. 3 而有很多技术可以解决 ...
- Python学习系列-----第二章 操作符与表达式
2.1 数学运算和赋值的简便方法 例如: 2.2 优先级 在python中运算符有优先级之分,高优先级的运算符先执行,低优先级的运算符后执行.下面是运算符优先级:(同一行的运算符具有相同的优先级) 2 ...
- Android中如何在Eclipse中关联源代码？（图文）
关联源代码 1.删除工程里面的Android Depandencies,删除后会报错,不要理会.看下面 2.添加libs目录下的Android-support-v4.jar包 选中-->右键-- ...
- windows server 2003安装Oracle webtier 32位因环境变量原因报错
在服务中启动Oracle processer manager时报错:错误1053:服务没有及时响应启动或控制请求 原因是本系统还安装过BI和Oracle数据库等产品 解决方法:删除和本次安装无关的环境 ...
- Linux汉化（Cent Os汉化）
在腾讯云上购买了Cent Os7.1的云服务器,是英文版啊,有没有?对于我这种英文的渣渣啊,所以我要用中文版,我就是这么low,怎么着呢? Ok ,在汉化之前,先查看系统的语言环境, echo $LA ...
- IOS 上传下载
下载地址:https://github.com/samsoffes/ssziparchive 注意:需要引入libz.dylib框架 // Unzipping NSString *zipPath = ...
- 在前端页面展示Markdown文件
常我们都会在GitHub上浏览很多的readme文件,这些都是Markdown语法写成的Markdown文件,HTML中并没有用于展示Markdown文件的元素,那么为什么可以在前端展示呢? 有别于G ...
- Layer Trees Reflect Different Aspects of the Animation State
https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/CoreAnimation_guide/CoreA ...
- 1.Jdeveloper打印出完整日志（-Djbo.debugoutput=console）
有时候在JDeveloper中需要打印出来比较系统和完整的ADF运行时日志 例如,想查看VO当前执行的是哪个View Criteria,运行的完整SQL语句到底如何 以及当前Binding Varia ...