简介

向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>元素的更多相关文章

  1. 【HTML5 】<script>元素async,defer异步加载

    原文地址:HTML5′s async Script Attribute原文日期: 2010年09月22日翻译日期: 2013年08月22日 (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再 ...

  2. HTML5 <script>元素async,defer异步加载

    原文地址:HTML5′s async Script Attribute原文日期: 2010年09月22日翻译日期: 2013年08月22日 (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再 ...

  3. 《JavaScript高级程序设计》笔记(1):<script>元素

    使用<script>元素内部的JavaScript代码将从上至下依此解释.在使用<script>嵌入的JavasCript代码时,代码任何地方不能出现"</sc ...

  4. 你有所不知的<script>元素

    向html页面中插入javascript的主要方法,就是使用<script>元素. <script>定义了下列6个属性: async:可选.表示应该立即下载脚本,但不应妨碍页面 ...

  5. 第二章 script元素

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

  6. 2.1 <script>元素【JavaScript高级程序设计第三版】

    向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素.这个元素由 Netscape 创造并在 Netscape Navigator 2 中首先实现.后来 ...

  7. 找到你的位置(JS在页面中的位置)最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分

    找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分 最常用的方式是在页 ...

  8. <script>元素的位置

    脚本元素会组织下载网页内容,浏览器可以同时下载多个组件,但一旦遇到一个外部脚本文本后,浏览器会停止进一步下载,知道这个脚本文件下载,解析并执行完毕.这会严重影响网页载入的总时间,特别是在网页在入时会发 ...

  9. 使用Script元素发送JSONP请求

    // 根据指定URL发送一个JSONP请求 //然后把解析得到的相应数据传递给回调函数 //在URL中添加一个名为jsonp的查询参数,用于指定该请求的回调函数的名称 function getJSON ...

随机推荐

  1. IntelliJ IDEA如何用maven命令打jar包

    IntelliJ IDEA如何用maven命令打jar包?下面给大家详细介绍一下具体步骤及说明. 工具/原料   IntelliJ IDEA maven 方法/步骤     第一步在CMD命令窗口输入 ...

  2. Object[] cannot be converted to String[]

    原因: 你应该是想把List数组转 String数组吧! 然后想当然的调用list.toArray()方法. 结果 该方法返回的是Object[]数组,导致类型不匹配! 解决办法: 还在乖乖的用循环吧 ...

  3. Mysql Workbench查询成功但是不显示

    先来看看MysqlWorkbench的一个bug: 当执行SQL语句成后显示结果在屏幕下方,但是当你拖动结果拦边框往下移动到与Action Output时两者就会合并,再也拖不上来!!!! 回归正题: ...

  4. MQ关于实现最终一致性分布式事务原理解析

    本文讲述阿里云官方文档中关于通过MQ实现分布式事务最终一致性原理 概念介绍 事务消息:消息队列 MQ 提供类似 X/Open XA 的分布式事务功能,通过消息队列 MQ 事务消息能达到分布式事务的最终 ...

  5. Thymeleaf语法总结 | 笔记分享

    Thymeleaf语法总结 一.Thymeleaf介绍 Thymeleaf是Spring boot推荐使用的模版引擎,直接以html显示,前后端可以很好的分离.   二.Thymeleaf语法(Thy ...

  6. 多线程,线程类三种方式,线程调度,线程同步,死锁,线程间的通信,阻塞队列,wait和sleep区别?

    重难点梳理 知识点梳理 学习目标 1.能够知道什么是进程什么是线程(进程和线程的概述,多进程和多线程的意义) 2.能够掌握线程常见API的使用 3.能够理解什么是线程安全问题 4.能够知道什么是锁 5 ...

  7. pydub "Couldn't find ffmpeg or avconv - defaulting to ffmpeg" 问题解决

    我通过 命令行安装了pydub库,运行报了如下错误 RuntimeWarning: Couldn't find ffmpeg or avconv - defaulting to ffmpeg, but ...

  8. 整合.NET WebAPI和 Vuejs——在.NET单体应用中使用 Vuejs 和 ElementUI

    .NET简介 .NET 是一种用于构建多种应用的免费开源开发平台,例如: Web 应用.Web API 和微服务 云中的无服务器函数 云原生应用 移动应用 桌面应用 1). Windows WPF 2 ...

  9. saltstack批量管理文件和计划任务

    简介 saltstack是由thomas Hatch于创建的一个开源项目,设计初衷是为了实现一个快速的远程执行系统.用来管理你的基础架构,可轻松管理成千上万台服务器. 关于saltstack更多功能本 ...

  10. Phoneix(二)HBase集成Phoenix安装

    一.软件下载 1.访问:http://phoenix.apache.org/ 2.点击: 3.进入以下内容:点击 4.跳转到 5.跳转到 6.点击安装包,进入 点击进行下载: 二.安装 phoneni ...