简介

向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. AndroidSDK安装选项说明

    前言:本文的目的在于了解AndroidSDK相关安装选项,正确根据自身需要选择性安装,避免安装过多无用的东西导致硬盘爆满. 1. AndroidSDK安装选项说明,如上图. 2. 实际游戏打包使用到A ...

  2. 理解Tomcat工作原理

    WEB服务器 只要Web上的Server都叫Web Server,但是大家分工不同,解决的问题也不同,所以根据Web Server提供的功能,每个Web Server的名字也会不一样. 按功能分类,W ...

  3. 求你别再用swagger了,给你推荐几个在线文档生成神器

    前言 最近公司打算做一个openapi开放平台,让我找一款好用的在线文档生成工具,具体要求如下: 必须是开源的 能够实时生成在线文档 支持全文搜索 支持在线调试功能 界面优美 说实话,这个需求看起来简 ...

  4. Docker安装系列教程

    首先准备一台Centos7版本的虚拟机,它支持docker容器技术.本案例使用centos7虚拟机安装docker容器. 一.安装 1.启动虚拟机,配置虚拟机能够访问互联网 2. 安装支持软件包,提供 ...

  5. TurtleBot3 Waffle (tx2版华夫)(7)底盘测试

    说明:opencr本身带有自测底盘功能,通过按opencr的sw1和sw2来自检底盘是否正确安装和运行: 7.1.前进测试 1)测试前,先把小车架空,轮子不要着地: 2)接好电源后,打开opencr的 ...

  6. JDK动态代理案例与原理分析

    一.JDK动态代理实现案例 Person接口 package com.zhoucong.proxy.jdk; public interface Person { // 寻找真爱 void findlo ...

  7. Windows下使用Graalvm将Javafx应用编译成exe

    1 背景 Graalvm是Oracle推出的一款新型虚拟机,其中一个吸引人的功能是:它可以将Java代码编译成各个平台的本地代码,这些平台包括:linux.macOS.windows.iOS.andr ...

  8. jxl解析多个excel工作表-java代码

    @Override public ResultBean txImportDqKpi(String filePath) { ResultBean rb = new ResultBean(); int s ...

  9. Typora笔记上传到播客时图片不显示问题解决(已解决)

    前言: ​ 相信我们都遇到过,使用Typora做笔记是一件非常令人舒服的事,然而,它却有一个非常难受的地方,那就是我们在做完笔记想要将其上传到自己的博客时,复制粘贴的图片无法显示.因为Typora复制 ...

  10. JPEG解码--(1)JPEG文件格式概览

    由于懒和人的忘性,以前做的一些笔记再回过头看时又有些生疏了,我决定把一些内容整理出来,以供有需要的来参考. 了解的人知道其价值所在,不知道的人就弃之如废物吧. 本篇是JPEG解码系列的第一篇--JPE ...