第二章:在html中使用javascript

news2024/11/24 17:54:47

1、在html页面中插入js的主要方法就是使用<script>元素

2、html4.01为<script>定义了以下6个属性:【language已经废弃,其他5个属性都是可选的】

async  表示应该立即下载脚本,但不应该妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本,仅对外部文件有效【指定async属性的目的是不让页面等待脚本下载和执行,从而异步加载页面其他内容,为此,建议异步脚本不要在加载期间修改DOM】

charset  表示通过src属性指定的代码的字符集,由于大多数浏览器会忽略它的值,因此该属性很少有人使用

defer  【立即下载,延迟执行】表示脚本可以延迟到文档完全被解析和显示之后再执行。仅对外部文件有效

language  已废弃

src 表示包含要执行代码的外部文件

type 可以看作language 的替代属性;表示 编写代码使用的脚本语言的内容类型(也称为MIME类型)  默认值:text/javascript

3、使用script 元素的方式有两种:

3.1、直接在页面中嵌入js代码

3.2、包含外部的js文件

4、通过<script> 元素的src属性还可以包含来自外部域的js文件,需要注意的是,在访问自己不能控制的服务器上的js文件一定要多加小心,如果不幸遇到了怀有恶意的程序员,那他们随时都可能替换该文件中的代码,因此,如果想包含来自不同于域的代码,则要么你是那个域的所有者,要么那个域的所有者值得信赖

5、只要不存在defer和async属性,浏览器都会按照<script>元素在页面中出现的先后顺序对他们依次进行解析。换句话说,在第一个<script>元素包含的代码解析完成后,第二个<script>包含的代码才会被解析,然后是第三个,第四个....

6、标签的位置

传统的做法,所有<script>元素都放在<head>元素中,这样做的目的就是把所有外部文件(包括css文件和js文件)的引用都放在相同的地方,可是文档的<head>元素中包含所有的<script>元素,就意味着必须等到全部的js代码都被下载,解析和执行完成以后,才能开始呈现也免得内容(浏览器在遇到<body>标签时才开始呈现内容)。对于那些需要很多js代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题,现代web应用程序一般都把全部js引用放在<body>元素中页面内容的后面。

7、嵌入代码和外部文件

在html中嵌入js代码虽然没有问题,但是一般认为最好的做法还是尽可能的使用外部文件来包含js代码,不过没有硬性规定必须使用外部文件。使用外部文件的优点:

可维护性,把所有js文件放在一个文件夹中,维护起来轻松很多,

可缓存,浏览器能够根据具体的设置缓存链接的所有外部js文件,也就是说,如果有两个页面都使用同一个文件,那么这个文件只需要下载一次。因此,最终的结果就是能够加快页面的加载速度

8、总结:asnyc和defer区别和适用场合

加了asnyc属性,浏览器在渲染页面的同时,偷偷的下载js脚本文件,下载下来后立马执行里面的js,这时候页面渲染中断

以前html4规范里,有defer属性,加了这个属性,浏览器也偷偷的下载js文件,但是下载下来后,等着浏览器渲染把html标签全部渲染完,才执行js文件

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/744044.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

.NET Core 数据库DB First自动生成,Sqlite,sql server,Mysql

文章目录 前言数据库ORM代码自动添加前期准备安装Nuget Sql serverMysqlSqlite查询结果 前言 .NET Core是C# .NET 未来发展的必然趋势&#xff0c;C# 要像Java一样跨平台运行。这里解决一个.NET core 会遇到的问题&#xff0c;如何添加ORM框架。 ORM是数据库对象映射关系模型…

Anaconda的安装和配置

对于自学Python的小伙伴来说&#xff0c;在刚开始&#xff0c;我们就得要安装Python以及python的库&#xff0c;但是我们可以通过安装Anaconda很好地解决这一难题&#xff0c;给我们初学者节省很多令人头疼的环境安装问题&#xff0c;今天我就为大家分享下Anaconda的介绍&#…

什么是加密领域的 Web 3.0?

随着科技的不断进步和互联网的发展&#xff0c;我们正逐渐迈入数字经济时代。在这个时代中&#xff0c;加密领域的Web 3.0成为了一个备受关注的话题。从区块链技术到加密货币&#xff0c;从去中心化应用程序到智能合约&#xff0c;这些新兴技术正在改变着我们对互联网的认知。本…

仓库24代拣货标签——功能特点

1. 通过无线方式快速刷新屏幕&#xff1b; 2. 移动式功能用法&#xff08;自动切换基站进行通信&#xff09;&#xff1b; 3. 电量低于 50%的情况下&#xff0c;提供外接供电&#xff0c;可以对电池进行充电&#xff0c;充电时会亮红灯&#xff0c;充满后亮绿灯&#xff08;如果…

Vue3挂载全局方法及组件中如何使用

文章目录 前言一、在mian.ts&#xff08;mian.js&#xff09;中配置全局变量1、如何封装 二、如何调用1.template中调用2.在script标签中如何拿到 前言 在Vue3项目中&#xff0c;需要频繁使用某一个方法。配置到全局感觉会方便很多。 例如&#xff1a;因为很多页面都需要对时…

openEuler 22.03 LTS登录AWS Marketplace

openEuler 22.03 LTS镜像正式登录AWS Marketplace&#xff0c;目前在亚太及欧洲15个Region开放使用&#xff0c;后续将开放更多版本和区域&#xff0c;openEuler 22.03 LTS AMI(Amazon Machine Images)由openEuler社区提供支持。 点击查看具体使用指导&#xff1a;https://www…

软件高效自动化部署:华为云部署服务CodeArts Deploy

随着互联网、数字化的发展&#xff0c;公司机构与各类企业往往需要进行大量频繁的软件部署&#xff0c;部署设备类型多样&#xff0c;如&#xff1a;本地机器、云上裸金属服务器、云上虚拟机与容器等。 面对多种部署模式、分布式复杂运行环境&#xff0c;该如何用最短时间、高…

华为战略方法论:BLM模型之战略意图(限制版)

目录 前言 案例 BLM模型 专栏列表 CSDN学院 个人简介 前言 对于任何一家企业来说&#xff0c;即便你没有清晰的战略规划。 一般也都是会有战略意图的。 战略意图具体是指你主观想要达成什么样的期望或者是状态。 换句话说&#xff0c;如果没有这种期望&#xff0c;你…

记录--盘点前端实现文件下载的几种方式

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 前端涉及到的文件下载还是很多应用场景的&#xff0c;那么前端文件下载有多少种方式呢&#xff1f;每种方式有什么优缺点呢&#xff1f;下面就来一一介绍。 1. 使用 a 标签下载 通过a标签的download属…

STM32 Proteus仿真空气质量检测环境监测苯PM2.5 MQ135温度湿度 -0068

STM32 Proteus仿真空气质量检测环境监测苯PM2.5 MQ135温度湿度 -0068 Proteus仿真小实验&#xff1a; STM32 Proteus仿真空气质量检测环境监测苯PM2.5 MQ135温度湿度 -0068 功能&#xff1a; 硬件组成&#xff1a;STM32F103R6单片机 LCD1602显示器DHT11温度湿度多个按键蜂鸣…

简要介绍 | 通信感知一体化:探索信息与通信技术的新边界

注1&#xff1a;本文系“简要介绍”系列之一&#xff0c;仅从概念上对通信感知一体化技术进行非常简要的介绍&#xff0c;不适合用于深入和详细的了解。 通信感知一体化&#xff1a;探索信息与通信技术的新边界 通信感知一体化&#xff08;ISAC&#xff09;&#xff1a;从入门到…

H3C端口镜像

端口镜像简介 端口镜像通过将指定端口或CPU的报文复制到与数据监测设备相连的端口&#xff0c;使用户可以利用数据监测设备分析这些复制过来的报文&#xff0c;以进行网络监控和故障排除。 基本概念 镜像源镜像源是指被监控的对象&#xff0c;该对象可以是端口或单板上的CPU&am…

Vue-cli脚手架

文章目录 前言搭建Vue-Cli脚手架安装npm可能出现的报错及解决办法国内淘宝镜像服务器 全局安装 vue-cli创建 Vue-Cli工程创建 Vue 的基本模板 总结终端打开/关闭操作创建Vue-Cli工程过程 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; Vue CLI是一个基…

数字工厂管理系统如何解决汽配企业的管理痛点

在现代汽车产业中&#xff0c;汽车配件企业扮演着至关重要的角色。然而&#xff0c;许多汽配企业面临着管理痛点&#xff0c;如生产效率低下、库存管理困难、供应链不透明等。为了解决这些问题&#xff0c;越来越多的汽配企业转向数字工厂管理系统。本文将探讨数字工厂管理系统…

如何在Microsoft Word中快速对齐名字

对齐方式决定段落边缘的外观和方向:左对齐文本、右对齐文本、居中文本或对齐文本,这些文本沿左右边距均匀对齐。例如,在左对齐(最常见的对齐方式)的段落中,段落的左边缘与左边距齐平。 在 Microsoft Word 中,还有不少的人用敲空格的方式来对齐的目的,特别是两个字的姓名…

Blender初学者入门:做一个魔方

文章目录 安装和使用基本操作物体属性材质 安装和使用 由于Blender是开源免费的&#xff0c;所以可直接在官网下载&#xff0c;正常安装&#xff0c;没有坑点。 在打开Blender后&#xff0c;创建新文件&#xff0c;选择General&#xff0c;就会得到一个立方体&#xff0c;而界…

故障处理:执行 CreateHandle() 时无法调用值 Dispose()。

在关闭主窗体时&#xff0c;线程仍在运行&#xff0c;直接关闭主窗体可能报错&#xff0c;故直接关闭线程&#xff0c;并清空主进程内控件。

如果数据孤岛不打破,企业数字化终难实现

当前市场经济下&#xff0c;企业、品牌、商品的增多&#xff0c;使得市场竞争愈发激烈&#xff1b;用户和市场的需求也在日益发生改变&#xff0c;对企业提出了精细化、以用户为中心的新需求&#xff1b;人口增长减缓、物质生活富裕&#xff0c;让用户更加关注服务属性。这一切…

六、consumer源码解读

Consumer源码解读 本课程的核心技术点如下&#xff1a; 1、consumer初始化 2、如何选举Consumer Leader 3、Consumer Leader是如何制定分区方案 4、Consumer如何拉取数据 5、Consumer的自动偏移量提交 Consumer初始化 从KafkaConsumer的构造方法出发&#xff0c;我们跟踪到…

40.RocketMQ之高频面试题大全

消息中间件如何选型 RabbitMQ erlang开发&#xff0c;对消息堆积的支持并不好&#xff0c;当大量消息积压的时候&#xff0c;会导致 RabbitMQ 的性能急剧下降。每秒钟可以处理几万到十几万条消息。 RocketMQ java开发&#xff0c;面向互联网集群化功能丰富&#xff0c;对在线业…