第二章:在html中使用javascript

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文件

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

中金:龙湖基本面稳健,股价超跌具备配置价值

恒大2.4万亿元的天量债务爆出后&#xff0c;让本就信心不足的房地产行业&#xff0c;越发雪上加霜&#xff0c;房企股价遭遇集体下挫&#xff0c;业内公认的万科、龙湖、保利、中海等“优等生”也不免被波及。多家证券机构提醒&#xff0c;行业预期降至冰点的情况下&#xff0c…

预付费电表收费系统

预付费电表收费系统是一种先进的电表管理系统&#xff0c;它能够帮助电力公司更加高效地管理电表收费&#xff0c;提高用电效率&#xff0c;降低能源浪费。本文将从以下几个方面介绍预付费电表收费系统的特点和优势。 一、预付费电表收费系统的原理 预付费电表收费系统是指用户…

京东自动化功能之商品信息监控是否有库存

这里有两个参数,分别是area和skuids area是地区编码,我这里统计了全国各个区县的area编码,用户可以根据实际地址进行构造skuids是商品的信息ID填写好这两个商品之后,会显示两种状态,判断有货或者无货状态,详情如下图所示 简单编写下python代码,比如我们的地址是北京市…

2023无监督摘要顶会论文合集

2023无监督摘要顶会论文合集 写在最前面ACL-2023Aspect-aware Unsupervised Extractive Opinion Summarization 面向的无监督意见摘要&#xff08;没找到&#xff09;Unsupervised Extractive Summarization of Emotion Triggers *情绪触发(原因)的 *无监督 *抽取式 摘要&#…

postgresql 内核源码分析 表锁relation lock的使用,session lock会话锁的应用场景,操作表不再困难

​专栏内容&#xff1a; postgresql内核源码分析 手写数据库toadb 并发编程 个人主页&#xff1a;我的主页 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 表锁介绍 当表打开&#xff0c;或者操作表时&#xff0c;都需要…

CDA数据分析系01 anaconda

简介 数据处理集成包&#xff0c;不局限于python 创建一个新的environment conda create --name python34 python3.4 激活一个environment activate python34 # for windows conda的package管理 类似pip&#xff0c;conda install xxxx 查看已安装的python包 conda list…

【计算机视觉】DINOv2(视觉大模型)代码四个不同模型的对比,以 28 * 28 的图像为例(完整的源代码)

文章目录 一、ViT-S/14二、ViT-B/14三、ViT-L/14四、ViT-g/14 一、ViT-S/14 import torch import torchvision.transforms as T import matplotlib.pyplot as plt import numpy as np import matplotlib.image as mpimg from PIL import Image from sklearn.decomposition im…

opencv 05 彩色RGB像素值操作

opencv 05 彩色RGB像素值操作 RGB 模式的彩色图像在读入 OpenCV 内进行处理时&#xff0c;会按照行方向依次读取该 RGB 图像的 B 通道、G 通道、R 通道的像素点&#xff0c;并将像素点以行为单位存储在 ndarray 的列中。例如&#xff0c; 有一幅大小为 R 行C 列的原始 RGB 图像…

React和Vue生命周期、渲染顺序

主要就是命名不同 目录 React 组件挂载 挂载前constructor() 挂载时render() 挂载后componentDidMount()&#xff1a;初始化节点 更新 更新时render()&#xff1a;prop/state改变 更新后componentDidUpdate() 卸载 卸载前componentWillUnmount()&#xff1a;清理 V…

王道计算机网络学习笔记(4)——网络层

前言 文章中的内容来自B站王道考研计算机网络课程&#xff0c;想要完整学习的可以到B站官方看完整版。 四&#xff1a;网络层 ​​​​​​​​​​​​​​在计算机网络中&#xff0c;每一层传输的数据都有不同的名称。 物理层&#xff1a;传输的数据称为比特&#xff08;Bi…

字节跳动面试挂在2面,复盘后,决定二战.....

先说下我基本情况&#xff0c;本科不是计算机专业&#xff0c;现在是学通信&#xff0c;然后做图像处理&#xff0c;可能面试官看我不是科班出身没有问太多计算机相关的问题&#xff0c;因为第一次找工作&#xff0c;字节的游戏专场又是最早开始的&#xff0c;就投递了&#xf…

OpenCv色彩空间

目录 一、RGB 二、图像处理入门 三、色彩空间的转换 一、RGB 在表示图像时&#xff0c;有多种不同的颜色模型&#xff0c;但最常见的是红、绿、蓝(RGB) 模型RGB 模型是一种加法颜色模型&#xff0c;其中原色 (在RGB模型中&#xff0c;原色是红色 R、绿色 G 和蓝色 B)混合在…

青岛大学_王卓老师【数据结构与算法】Week05_08_顺序栈的操作2_学习笔记

本文是个人学习笔记&#xff0c;素材来自青岛大学王卓老师的教学视频。 一方面用于学习记录与分享&#xff0c; 另一方面是想让更多的人看到这么好的《数据结构与算法》的学习视频。 如有侵权&#xff0c;请留言作删文处理。 课程视频链接&#xff1a; 数据结构与算法基础…

【C++初阶】list的模拟实现 附源码

一.list介绍 list底层是一个双向带头循环链表&#xff0c;这个我们以前用C语言模拟实现过&#xff0c;->双向带头循环链表 下面是list的文档介绍&#xff1a; list文档介绍 我们会根据 list 的文档来模拟实现 list 的增删查改及其它接口。 二.list模拟实现思路 既然是用C模拟…

HDFS Hadoop分布式文件存储系统整体概述

HDFS 整体概述举例&#xff1a; 包括机架 rack1、rack2 包括5个Datanode,一个Namenode(主角色)带领5个Datanode(从角色)&#xff0c;每一个rack中包含不同的block模块文件为分块存储模式。块与块之间通过replication进行副本备份&#xff0c;进行冗余存储&#xff0c;Namenode…

基于Nonconvex规划的配电网重构研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

数仓学习---8、数仓开发之ODS层

星光下的赶路人star的个人主页 大鹏一日同风起&#xff0c;扶摇直上九万里 文章目录 一、数仓开发之ODS层1.1 日志表1.2 业务表1.2.1 活动信息表&#xff08;全量表&#xff09;1.2.2 活动规则表&#xff08;全量表&#xff09;1.2.3 一级品类表&#xff08;全量表&#xff09;…

Docker基础(二)

1、Docker工作原理 Docker是一个Clinet-Server结构的系统&#xff0c;Docker守护进程运行在主机上&#xff0c;然后通过Socket连接从客户端访问&#xff0c;守护进程从客户端接受命令并管理运行在主机上的容器。 容器&#xff0c;是一个运行时环境&#xff0c;就是我们前面说的…

Linux6.1 Docker 基本管理

文章目录 计算机系统5G云计算第四章 LINUX Docker 基本管理一、Docker 概述1.概述2.Docker与虚拟机的区别3.容器在内核中支持2种重要技术4.Docker核心概念1&#xff09;镜像2&#xff09;容器3&#xff09;仓库 二、安装 Docker三、Docker 镜像操作四、Docker 容器操作 计算机系…

【软件测试面试】腾讯数据平台笔试题-接口-自动化-数据库

数据库题 答案&#xff1a; Python编程题 答案&#xff1a; 接口参数化题 答案&#xff1a; 接口自动化题 答案&#xff1a; 以下是我收集到的比较好的学习教程资源&#xff0c;虽然不是什么很值钱的东西&#xff0c;如果你刚好需要&#xff0c;可以评论区&#…