简介

向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. [leetcode]49. Group Anagrams重排列字符串分组

    是之前的重排列字符串的延伸,判断是重排列后存到HashMap中进行分组 这种HashMap进行分组的方式很常用 public List<List<String>> groupA ...

  2. python之scrapy篇(三)

    一.创建工程(cmd) scrapy startproject xxxx 二.编写item文件 # -*- coding: utf-8 -*- # Define here the models for ...

  3. Mono for android,Xamarin点击事件的多种写法

    (一)原本java的写法(相信很多是学过java的): 需要实现接口View.IOnClickListener,最好也继承类:Activity,因为View.IOnClickListener接口又继承 ...

  4. SpringSecurity配置文件

    @EnableWebSecurity public class seccurityConfig extends WebSecurityConfigurerAdapter { @Override pro ...

  5. Navicat Premium 12连接MySQL数据库出现Authentication plugin 'caching_sha2_password' cannot be loaded的解决方案

    1. 管理员权限运行命令提示符,登陆MySQL mysql -u root -p password 2. 修改账户密码加密规则并更新用户密码 ALTER USER 'root'@'localhost' ...

  6. Docker进行MySQL主从复制操作

    Docker的相关操作 与 Docker下MySQL容器的安装 https://www.cnblogs.com/yumq/p/14253360.html 本次实验我是在单机状态下进行mysql的主从复 ...

  7. llinux文件相关指令

    一---导读 首先我们来看这样一个小案例,假设张三要出差,按照 这样的路线进行 北京->上海,之后回到北京.再按照北京->天津->石家庄这样的路线进行出差(北京是根据地).假设现在张 ...

  8. python实现99乘法表

    for x in range(1,10): for y in range(1,10): if x>=y: print("%d*%d=%d\t"%(y,x,x*y),end=' ...

  9. 使用python做一个IRC在线下载器

    使用python做一个IRC在线下载器 1.开发流程 2.软件流程 3.开始 3.0 准备工作 3.1寻找API接口 3.2 文件模块 3.2.1 选择文件弹窗 3.2.2 提取文件名 3.2.2.1 ...

  10. FastApi 进阶

    前言 终于有了第一个使用 FastApi 编写的线上服务, 在开发的过程中还是遇到了些问题, 这里记录一下 正文 目录结构 我们知道, FastApi 的启动方式推荐使用 uvicorn, 其启动方式 ...