<script>元素
简介
向HTML页面中插入JavaScript的主要方法,就是使用‘<’script‘>’元素。
标签的位置
现代Web应用程序一般都把全部的JavaScript饮用放在'<'body'>'中页面内容的后面。
浏览器在遇到body标签时才开始呈现内容,把JavaScript脚本放到body标签后可以在解析包含的JavaScript代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
延迟脚本
HTML4.01为script标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。因此设置了该属性后,相当于告诉浏览器立即下载该脚本,但延迟执行。
延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded事件被触发前执行,因此最好只包含一个延迟脚本。
异步脚本
HTML5为script标签定义了async属性。这个属性与defer类似,都用于改变处理脚本的行为。设置该属性后,相当于告诉浏览器立即下载文件。但与defer不同的是,标记为async的脚本并不保证按照指定它们的先后顺序执行。
因此,确保脚本之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本的下载和执行,从而异步加载页面其他内容。建议不要在加载期间修改DOM。
异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。
<script>元素的更多相关文章
- 【HTML5 】<script>元素async,defer异步加载
原文地址:HTML5′s async Script Attribute原文日期: 2010年09月22日翻译日期: 2013年08月22日 (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再 ...
- HTML5 <script>元素async,defer异步加载
原文地址:HTML5′s async Script Attribute原文日期: 2010年09月22日翻译日期: 2013年08月22日 (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再 ...
- 《JavaScript高级程序设计》笔记(1):<script>元素
使用<script>元素内部的JavaScript代码将从上至下依此解释.在使用<script>嵌入的JavasCript代码时,代码任何地方不能出现"</sc ...
- 你有所不知的<script>元素
向html页面中插入javascript的主要方法,就是使用<script>元素. <script>定义了下列6个属性: async:可选.表示应该立即下载脚本,但不应妨碍页面 ...
- 第二章 script元素
<script>元素 async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示通过 ...
- 2.1 <script>元素【JavaScript高级程序设计第三版】
向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素.这个元素由 Netscape 创造并在 Netscape Navigator 2 中首先实现.后来 ...
- 找到你的位置(JS在页面中的位置)最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分
找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分 最常用的方式是在页 ...
- <script>元素的位置
脚本元素会组织下载网页内容,浏览器可以同时下载多个组件,但一旦遇到一个外部脚本文本后,浏览器会停止进一步下载,知道这个脚本文件下载,解析并执行完毕.这会严重影响网页载入的总时间,特别是在网页在入时会发 ...
- 使用Script元素发送JSONP请求
// 根据指定URL发送一个JSONP请求 //然后把解析得到的相应数据传递给回调函数 //在URL中添加一个名为jsonp的查询参数,用于指定该请求的回调函数的名称 function getJSON ...
随机推荐
- Redis基础篇(四)持久化:内存快照(RDB)
AOF好处是每次执行只需要记录操作命令,记录量不大.但在故障恢复时,需要逐一执行AOF的操作命令,如果日志很大,恢复就很慢. 今天学习另一种持久化方式:内存快照.内存快照,是Redis某一时刻的状态, ...
- JDBC(五)—— 批量插入数据
批量插入数据 @Test public void testInsert() throws Exception { Connection conn = null; PreparedStatement p ...
- hashmap有一个loadFactory为什么是0.75从泊松分布解析看看
简述: 写这篇文章是看到网上的一篇面试题,有面试官问hashmap有一个loadFactory为什么是0.75 我先解释一下 0.75上下文,当一个hashmap初始数组大小暂时不考虑扩容情况,初始 ...
- 敏捷史话(二):Scrum社区的悲剧性损失——Mike Beedle
2018年3月23日,在美国的芝加哥发生了一起意外刺杀事件.一名男子刺杀了一位首席执行官,而这位不幸的首席执行官就是<敏捷宣言>的合著者--Mike Beedle.Mike 的这场意外令 ...
- Head First 设计模式 —— 00. 引子
Head First 学习原则 P xxx 可视化:图片使得学习效率更高,更易懂 交谈式:第一人称交谈方式讲述学习内容更易引起注意 多思考:自主思考练习题和拓展知识的问题 保持注意力集中:将知识融合进 ...
- 关于一些视图的基本操作(结合YGGL.sql)
二.操作题 1.创建视图emp_view2,包含员工编号,姓名,所在部门名称和收入. mysql> create or replace view emp_view2 -> as -> ...
- .NET 云原生架构师训练营(模块二 基础巩固 RabbitMQ HelloWorld)--学习笔记
2.6.3 RabbitMQ -- HelloWorld 发送端 接收端 rabbitmq container 发送信息 https://www.rabbitmq.com/tutorials/tuto ...
- 直播预告 | 开源的云原生开发环境 —— Nocalhost
直播来啦!本次云原生学院邀请到腾讯云 CODING DevOps 后端工程师王炜为大家分享<开源的云原生开发环境 -- Nocalhost>. 直播信息 讲师:王炜 - 腾讯云 CODIN ...
- 【SpringBoot1.x】SpringBoot1.x 任务
SpringBoot1.x 任务 文章源码 异步任务 在 Java 应用中,绝大多数情况下都是通过同步的方式来实现交互处理的.但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使 ...
- 十八:SQL注入之堆叠及绕WAF
堆叠查询注入 (双查询注入) stacked injections(堆叠注入)从名词的含义就可以看到是一堆的SQL语句一起执行,而在真实的运用中也是这样的,我们知道在mysql中,主要是命令行中,每一 ...