参考菜鸟教程学习和询问chatgpt的HTML5总结的笔记，写了一些理解（虽然不多）。在学习过程中逐渐了解了HTML5 规范的新特性和实现功能的常见技术 用来复习的一个笔记，有问题欢迎指出 0q0
HTML5是HTML最新的修订版本，HTML的设计目的是为了在移动设备上支持多媒体，目前大部分的浏览器已经具备了某些HTML5支持。
HTML5 添加了一些有趣的新特性，其中包括：用于绘画的canvas元素、用于媒体播放的video（音频）和audio（视频）元素、新的特殊内容元素（语义化标签）、新的表单控件（表单扩展）、优化本地离线缓存、完全支持CSS3、Web应用等。
在HTML5中，还可以直接使用自定义标签元素，并为自定义标签元素设置样式（如果不设置，则默认使用无标签状态的显示效果）。
1. canvas元素
HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
canvas标签只是图形容器，绘制图形必须通过脚本完成,绘图代码如下：
-
绘图逻辑
- 找到画布canvas元素
- 创建context对象
- 绘制图形
- fillStyle 属性可以是CSS颜色，渐变或图案（默认设置为黑色）
- fillRect（x，y，width，height）定义了当前矩形的填充方式
... <style> #myCanvas { border: solid 1px red; } </style> ... <canvas id="myCanvas" width="100px" height="100px"></canvas> ... <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d") ctx.fillStyle = "#FF0000" ctx.fillRect(0, 0, 150, 75); </script> -
Canvas 坐标 Canvas是一个二维网格。其左上角坐标是（0，0），可以在canvas标签内用属性width和height设置画布大小，绘制图案不能超过画布大小。
-
Canvas 路径
-
画线 在Canvas中画线可以使用moveTo（x，y）定义线条开始坐标，lineTo（x，y）定义线条结束坐标。
... ctx.moveTo(0, 0); ctx.lineTo(50, 70); ctx.stroke(); ... -
画圆
... var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); //x坐标，y坐标，直径， ctx.stroke(); ...
-
-
Canvas 文本
fillText和strokeText参依次是（描绘文本，文本左侧与x轴（画布左边缘）的距离，文本下侧与y轴（画布上边缘）的距离，... var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50); //绘制实心文字 ctx.strokeText("Hello World", 10, 50); //绘制空心文字 ... -
Canvas 渐变 渐变存在两种：
线性渐变(createLinearGradient)和径向/圆渐变(creatRadialGradient)。 创建渐变 需要考虑渐变形式和渐变停止颜色。... var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // 创建渐变 var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // 填充渐变 ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); ... -
Canvas 图像
Canvas还支持放置图像：
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);
2. SVG 元素
SVG 是可缩放矢量图形，HTML5 支持内联 SVG，提供**** 元素作为放置SVG 图形的容器。
SVG是使用XML格式来进行定义的图形。
在 SVG 中，允许三种图像对象存在，分别是矢量图像、点阵图像和文本。
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
对比SVG和Canvas的区别：
- SVG 是一种使用 XML 描述 2D 图形的语言；Canvas 通过 JavaScript 来绘制 2D 图形；
- 使用XML来描述的SVG DOM中每个元素都可用Javascript来处理，因为绘制的图像被视为对象，因此如果SVG对象属性发生变化，浏览器能自动重现图形。
- Canvas是逐像素渲染的，一旦绘制完成就不再被刘阿龙年起关注，如果位置信息发生变化，整个场景都需要重新绘制。
| Canvas | SVG |
|---|---|
| - 依赖分辨率 - 不支持事件处理器 - 弱的文本渲染能力 - 能够以 .png 或 .jpg 格式保存结果图像 - 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 | - 不依赖分辨率 - 支持事件处理器 - 最适合带有大型渲染区域的应用程序（比如谷歌地图） - 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） - 不适合游戏应用 |
3.MathML
MathML 是基于XML的数学标记语言，HTML5可以在文档中使用MathML来书写数学符号和公式。
目前HTML5的MathML元素只有FireFox和Safari浏览器支持。不过即使浏览器不支持，也可以提供第三方的样式库来支持数学标记。
4.拖放
在HTML5 中使用元素都支持拖放，他是HTML5标准的组成部分。
实现拖放需要按照以下步骤来设置：
-
设置目标元素可拖放
<img draggable="true"> -
设置拖动数据（ondragstart）
被拖动元素可以设置一个ondragstart属性，该属性调用一个规定了被拖动数据的函数drag（event）。使用dataTransfer.setData（{数据类型}，{值}）
其中数据类型包括
Text（文本）、URL、Image（图像）、Files（文件）function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id) } -
放置位置（ondragover）
ondragover规定在何处放置拖动的数据。 默认情况下，无法将元素/数据放置到其他元素中，如果要设置允许放置，必须组织对元素的默认处理方式。
function allowDrop(ev) { ev.preventDefault(); } -
进行放置（ondrop）
当放置被拖动数据/元素时，会触发ondrop回调。
一般drop事件会设置：
- preventDefault（） 阻止浏览器对数据的默认处理（drop事件默认行为是以链接形式打开）
- 通过dataTransfer.getData({数据类型})回去被拖拽的数据，该方法将返回在setData中设置为相同类型的任何数据。
总的实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖放</title>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id)
console.log(ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text")
console.log(123);
console.log(ev.target);
ev.target.appendChild(document.getElementById(data))
}
</script>
</head>
<body>
<div style="border: 1px solid red; width: 100px;height: 100px;" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="./image/bubble01.jpg " width="100 " height="100 " alt="无法查看 " draggable="true " ondragstart="drag(event) ">
</body>
</html>
5.Geolocation（地理位置）
HTML5 提供了Geolocation用于定位用户位置。
使用该特性的前提是获取用户同意，否则不可用。
一般使用流程如下：
- 检查是否支持地理定位，若支持则运行getCurrentPosition（）方法，若不支持则显示一段提示消息告诉用户"当前浏览器不支持地理定位服务"
- getCurrentPosition支持两个参数，第一个是正常运行的调用函数，第二个是处理错误函数；
- getCurrentPosition获取成功就调用相应的函数，进行地理位置显示处理；
- getCurrentPosition获取失败就调用相应的处理错误函数，使用switch case处理不同的错误类型，做不同的处理。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "该浏览器不支持定位。";
}
}
function showPosition(position) {
x.innerHTML = "纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML = "请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "未知错误。"
break;
}
}
</script>
</body>
</html>
注：当用户拒绝获取定位后，只能由用户在浏览器相应位置重新设置同意获取才能实现获取定位，否则即使刷新网页也仍然显示拒绝请求。
补充：
除了获取经纬度定位以外，geolocation还提供以下方法：
-
watchPosition(): 返回用户的当前位置，并继续返回用户移动时的更新位置（类似汽车上的 GPS） -
clearWatch(): 停止 watchPosition() 方法
6.Video 与 Audio（音视频播放）
HTML5 提供了 video和audio两个元素来显示视频和音频。
-
video（视频）video元素提供了
播放、暂停和音量控件来控制视频，提示提供了width、height来控制视频尺寸高宽。（如果不设置宽高，浏览器只能在加载后根据原始视频大小变化页面布局）在video标签之间可以设置
兼容提示文字，不能兼容video元素的浏览器会将这些文字显示出来。在video元素内支持多个source元素，而不同的source 元素可以链接不同的视频文件，浏览器默认使用第一个可识别格式。
<body> <video controls width="350" height="250"> <source src="./video/Tartaglia.mp4" type="video/mp4"> 该浏览器不支持video控件 </video> </body>需要注意的是：
目前video元素支持的视频格式有mp4、WebM、Ogg。而不同的浏览器对于这些视频文件的兼容不同，除了IE和Safari浏览器只支持WebM和Ogg，常见的浏览器都对于这些格式都支持。
（HTML5视频播放通常不直接支持FLV（Flash Video）文件格式，因为FLV是Flash播放器的一种格式。如果想在HTML5中播放FLV文件，你需要将FLV文件转换为HTML5支持的格式（例如MP4）或者使用专门的 JavaScript 库，即使使用js库去实现也会收到浏览器和平台的限制。使所以最好使用上述兼容的格式）
除了如上所述的video的基本使用，还可以在video标签内部设置诸如
autoplay（自动播放）、controls（显示控件）、loop（循环播放）等属性。 -
audio(音频)HTML5 规定了在网页上嵌入音频元素的标准，使用audio元素，目前IE9+、Firefox、Opera、Chrome、Safari都支持该元素（IE 8和更早版本的IE不支持）；
使用方法和video类似，如下：
<audio controls> <source src="./audio/PSYQUI - ヒステリックナイトガール (Awakening).mp3" type="audio/mpeg"> 该浏览器不支持audio控件 </audio>audio支持的音频格式的MIME类型为：
Format MIME-type MP3 audio/mpeg Ogg audio/ogg Wav audio/wav 7.新的Input类型
HTML5 中扩展了表单输入的input元素的类型，虽然这些类型并不是所有浏览器都支持，但正常使用是没有问题的，即使不被支持也会显示成常规的文本域。
这些input类型有：
-
color（选取颜色） -
date（日期选择器选择日期） -
datetime（手动输入日期[UTC时区]） -
datetime-local（日期时间选择器选择日期＋时间[无时区]） -
email（应该包含email地址的输入域） -
month（日期选择器选择到月为止的时间） -
number（应该包含数值的输入域） 其中该属性还能设置限制属性：- disabled：禁用当前输入字段
- max：规定输入最大值
- min：规定输入最小值
- maxlength：规定输入字段最大字符长度
- pattern：规定用于验证输入字段的模式（正则表法式）
- readonly：规定该字段无法修改
- required：规定该字段是必须的
- size：规定可见字符数
- value：规定默认值
- step：规定合法数字间隔
-
range（应该包含一定范围内数字值的输入域）其中该属性还能设置的限制属性为：
- min：规定最小值
- max：规定最大值
- step：规定合法的数字间隔
- value：规定默认值
-
search(搜索域) -
tel(输入电话号码) -
time(选择时间（无时区）) -
url(应该包含url地址的输入域) -
week(定义周和年（无时区）)
<form action=""> 选择颜色：<input type="color" name="favcolor"> <br/>（从日期选择器）选择日期： <input type="date" name="birthday"> <br/>选择日期(UTC时区)：<input type="datetime" name="date"> <br/>选择日期和事件（无时区）：<input type="datetime-local" name="date-local"> <br/>应该包含邮箱的输入域：<input type="email" name="email"> <br/>选择时间（到月份为止）：<input type="month" name="month"> <br/>应该包含数字的输入域：<input type="number" name="num" value="10" min="1" max="100" size="1" required> <br/>输入电话号码：<input type="tel" name="tel"> <br/>搜索域：<input type="search" name="search"> <br/>选择时间（无时区）：<input type="time" name="time"> <br/>应该包含url地址的输入域：<input type="url" name="url"> <br/>定义周和年（无时区）：<input type="week" name="week"> <br/>应该包含一定范围内数字值的输入域：<input type="range" name="range" min="50" max="150" step="20" value="50"> <input type="submit"> </form>注意：
在这些扩展类型里，只有email、number、url三个属性具有自动校验的功能，而且这些校验都是在表单提交的瞬间进行的（即只有包含在表单form标签内才会校验）
-
7.表单元素
在HTML5 中新增了<datalist> 、<keygen>、<output>表单元素
-
datalist
datalist规定了输入域的选项列表，通过在input元素内
设置list属性并设置相应的datalist数据列表可以在用户输入是自动显示填写选项。<input type="text" name="city" list="cities"> <datalist id="cities"> <option value="shanghai">上海</option> <option value="beijing">北京</option> <option value="guangzhou">广州</option> </datalist> -
keygen
keygen元素是一个用于生成密钥对，验证用户身份的HTML5元素。
keygen在HTML5已经被弃用，代替它的方法是使用Javascript和WebCrypto API执行密钥对生成和管理。
而且浏览器对keygen的支持有限，使用该元素可能导致兼容性问题。因此，现代Web应用程序通常使用其他方法来进行安全身份验证，如使用HTTPS、Cookies、Token等。
-
output
用于不同类型输出，例如计算或者脚本输出。
例如下方代码就算实时计算两数相加的结果值：
<form oninput="result.value = parseInt(x.value) + parseInt(y.value)"> <label for="x">数字1：</label> <input type="number" id="x" name="x" value="0"> <br> <label for="y">数字2：</label> <input type="number" id="y" name="y" value="0"> <br> <output name="result">0</output> </form>
8.新增表单属性
在HTML5 中form和input都有新增的表单属性，其中比较重要的是：
-
<form|input>autocomplete
autocomplete属性实现的是表单的记录功能。设置有该属性的表单和输入框回自动在表单提交后，记录填写过的内容。
注意：
- autocomplete有可能在form元素中式开启的，但在input元素中是关闭的。
- autocomplete 适用于 标签，以及以下类型的 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
-
<form|input> novalidate
novalidate是一个用于设置浏览器不对表单进行验证的
布尔属性（设置该属性后，类似email、number、url的验证会被略过）。主要是用来让开发者完全控制表单验证，使开发者可以通过js或其他方式自定义表单验证行为。
novalidate属性的使用方式(在form上使用还是在input上使用)决定了禁用验证的范围：在整个表单上使用将禁用整个表单的验证，而在单个字段上使用将仅禁用该字段的验证。这可以根据需要选择使用，以确保表单的验证与自定义逻辑一致。 -
<input> autofocus
autofocus 是一个用于规定页面加载时，自动获取焦点的域的
布尔属性。 -
<input> form form 用于规定输入域所属的一个或多个表单 当设置引用的表单超过一个时,应该使用空格分隔的列表
-
<input> formaction formaction用于描述表单提交的URL地址
设置了formaction后,form元素内设置的action属性会被覆盖.
-
<input> formmethod
formaction用于描述表单提交的方法
设置了formmethod后,form元素内设置的method属性会被覆盖.
-
<input> formtarget formtarget指定一个名称或者关键字来指明表单提交数据接收后的展示
设置了formtarget后,form元素内设置的target属性会被覆盖.
-
<input> height|width
height 和 width规定用于image类型的input标签的图像高度和宽度(用来指定图像大小,典型的应用场景是提交按钮的设置)
-
<input> list list用来绑定输入域的选项列表
-
<input> max|min|step max、min、step 用于为包含数字和日期的input类型规定约束（限定），具体可参考number类型中的限制属性的描述。 典型的类型有：date pickers（一个包括多种日期相关输入类型的集合，例如date、datetime...）number以及range
-
<input> multiple multiple是一个规定input元素中可选择多个值的
布尔属性，适用的input标签类型包括email、file -
<input> pattern pattern是用于设置验证获取值的正则表达式的模式的属性
-
<input> placeholder
placeholder能够提供显示在输入域上的描述输入域期待值的提示
适用类型：text、search、url、telephone、email以及password
-
<input> required required 是一个规定了提交前必须填写的输入域的
布尔属性适用类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file
9.语义元素（语义化）
语义元素能够清楚的描述其意义给浏览器和开发者。
对比无语义的元素和有语义的元素，可以发现语义元素放置的内容都是与其标签名相对应的（例如img、form、table等），而无语义元素则大多用在当作容器使用或者方便布局，放置什么内容与标签名没有关联（例如div、span等）
语义化元素的优势在于：
- 搜索引擎将其内容视为影响页面搜索排名的重要关键字（参见 SEO）。
- 屏幕阅读器可以将其用作指引，帮助视力受损的用户导航页面。
- 比起搜索无休止的带有或不带有语义/命名空间类的
div，找到有意义的代码块显然容易得多。 - 向开发人员建议将要填充的数据类型。
- 语义命名反映了正确的自定义元素/组件命名。
在HTML5 中新增了诸如header（网页头部）、nav（导航栏）、section（区段）、article（独立内容）、aside（内容主区之外的内容）、figcaption（和独立流内容figure相关的标题）、figure（独立的流内容）、footer（文档底部）
-
header
<header>标签通常用于表示文档或页面的顶部区域，包含了页面的标志、导航链接、搜索框等元素。它是页面的主要标识，通常出现在页面的开始位置。应用场景：网站顶部导航栏、标题栏、页眉等。 -
nav
<nav>标签用于包含页面的主要导航链接，帮助用户浏览和导航到不同的页面或部分。通常包括菜单、链接列表等。应用场景：网站主导航菜单、侧边栏导航、页内导航等。 -
**section
<section>标签用于标识页面的独立区段或主题内容，可以包含一组相关的内容，并使用标题来描述其内容。它有助于组织和结构化文档。应用场景：文章的各个部分、页面的主要区块等。 -
article
<article>标签表示页面中独立、完整的内容单元，通常是一篇文章、新闻、博客帖子或评论。每个<article>可以有自己的标题和内容。应用场景：新闻文章、博客文章、产品评论、新闻、评论等。 -
aside
<aside>标签用于包含与页面主要内容相关但不是必需的辅助内容，如侧边栏、广告、相关链接、引用等。它通常与主要内容分开显示。应用场景：侧边栏内容、引用块、广告栏等。 -
figcaption
<figcaption>标签用于为包含在<figure>元素中的图像、图表或其他独立流内容提供标题。它提供了与相关内容的标题相关的语义信息。应用场景：图像说明、图表标题等。 -
figure
<figure>标签用于包含与主要内容相关但可独立存在的流内容，通常与<figcaption>结合使用。这可以包括图像、图表、代码示例等。应用场景：插图、示例代码块等。 -
footer
<footer>标签表示文档或页面的底部区域，通常包含版权信息、联系方式、页面链接等。它用于标识文档底部的附加信息。应用场景：网页底部导航、联系信息、版权声明等。
补充：
-
以上语义元素除了figcaption均是块元素，为了使这些语义元素兼容所有版本的浏览器，需要在样式表设置：
header, section, footer, aside, nav, article, figure { display: block; } -
IE8 及更早IE版本无法在这些元素中渲染CSS效果，但可以通过HTML5 Shiv Javascript脚本来解决兼容问题
10.Web 存储
Web存储包括localStorage和sessionStorage两种方式，数据以键值对形式进行存储。因为Web存储相较于cookie性能更好、容量更大，所有比较适合存储非敏感的客户端数据。
下面是关于localStorage和sessionStorage的区别与对比：
| localStorage | sessionStorage | |
|---|---|---|
| 用途 | 用于存储持久性数据 | 用于存储会话级别的数据 |
| 存储期限 | 数据将一直存在，直到用户手动删除 | 数据在会话结束（关闭窗口或标签页）后将被清除 |
| 作用域 | 相同的协议、相同的主机名、相同的端口下 | 协议、主机名、端口外，且在同一标签页下 |
| 存储容量 | 可以存储多兆字节的数据（具体容量取决于浏览器和配置） | 容量较小，限制在几兆字节 |
localStorage 用法- 存储数据 ： localStorage.setItem（{key}，{value}）
- 读取数据 ： localStorage.getItem（{key}）
- 删除单个数据 ： localStorage.removeItem（{key}）
- 删除所有数据 ： localStorage.clear()
- 得到某个索引的key：localStorage.key（{index}）
sessionStorage用法- 存储数据 ： sessionStorage.setItem（{key}，{value}）
- 读取数据 ： sessionStorage.getItem（{key}）
- 删除单个数据 ： sessionStorage.removeItem（{key}）
- 删除所有数据 ：sessionStorage.clear()
- 检查是否包含某个键：sessionStorage.hasOwnProperty（{key}）
补充：
-
关于存储数据类型
在Web存储中，数据通常以字符串的形式进行存储，如果需要存储对象或者数组就需要通过JSON对象的stringify（）方法将其序列化成字符串，需要存储数字等其他基本类型时需要通过JavaScript的类型转换方法进行转换才能存储。
-
关于数据读取
当需要读取转换成字符串后存储的数据时，可以通过JSON.parse（）方法或者其他的类型转换方法将数据转换回原来的数据类型进行使用。
11. Web SQL数据库
Web SQL 是一个独立的规范，引入了一组使用SQL操作客户端数据库的API。
最新版的Safari、Chrome和Opera浏览器均支持Web SQL数据库。
-
核心方法
-
openDatabase通过该方法能够使用现有的数据库，若对应数据库不存在，则新建一个数据库对象。var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);参数：[{数据库名称},{版本号},{描述文字},{数据库大小},{创建回调}] 创建回调的参数会在数据库创建后被调用。
-
transaction接收一个回调函数作为参数，函数中包含了对数据库的操作。该回调函数接受事务对象作为参数，通过事务对象来执行SQL操作。 transaction用于创建和管理数据库事务，在该方法中包含一个事务对象和由该事务对象执行的多个SQL操作。db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); }); -
executeSqlexecuteSql是事务对象内执行SQL语句的方法，是执行单个SQL语句的途径。
-
12. 应用程序缓存
被弃用了，不推荐使用。
13.Web Worker
web worker 是运行在后台,不会影响页面的性能的 JavaScript。
在执行 JavaScript 代码期间，浏览器通常会阻塞页面的渲染和用户交互，因此在页面执行脚本时，页面状态是不可响应的，知道脚本已完成。
在页面中设置Worker来执行某些后台代码，使得不影响页面与用户的交互。
创建Worker需要传入执行的js代码的指向路径（需要找得到文件才能执行）
...
<p>计数：<output id="result"></output></p>
<button onclick="start()">开始</button>
<button onclick="end()">结束</button>
<script>
var w;
function start() {
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("demo_wokers.js")
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
}
} else {
document.getElementById("result").innerHTML = "浏览器不支持Web Worker"
}
}
function end() {
w.terminate();
w = undefined;
}
</script>
...
`demo_wokers.js`
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()", 500);
}
timedCount();
注意：
由于 Web Worker位于外部文件中，因此无法访问到这些Javascript对象：window对象、document对象、parent对象
14.服务器发送事件（Server-Sent Events）
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
除了 Internet Explorer以外，所有主流浏览器均支持服务器发送事件。
SSE是一种用于在服务器和客户端之间建立单向通信的Web技术，允许服务器向客户端推送实时数据，而客户端通过监听消息来接收数据。
SSE是轻量级的通信协议，通常用于构建实时通知、即时消息、实时监控等类型的应用程序。
const eventSource = new EventSource('sse_server.php'); // 指定 SSE 服务器端脚本的URL（通常用PHP、ASP编写）
//监听服务器发送的消息
eventSource.onmessage = function(event) {
const data = event.data; // 从事件对象中获取数据
console.log('Received message: ' + data);
};
//当SSE发生错误时调用的方法
eventSource.onerror = function(event) {
console.error('Error occurred:', event);
};
15.WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 与 SSE 的不同在于客户端与服务端是能实现双向通信的，因此通常被用在实时聊天、在线游戏等需要低延迟双向通信的应用。
在Web Socket中，浏览器和服务器只用完成一次握手就能创建持久性的连接，比起Ajax轮询（规定时间间隔发送HTTP请求，每次HTTP请求的有效部分都较短，会造成资源浪费）来实现推送，Web Socket能更好的节省服务器资源和带宽。
浏览器对服务器发起Web Socket请求，建立连接后，客户端和服务端之间就通过TCP连接直接交换数据。
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Example</title>
</head>
<body>
<h1>WebSocket Example</h1>
<input type="text" id="messageInput" placeholder="Enter a message">
<button onclick="sendMessage()">Send</button>
<div id="output"></div>
<script>
const socket = new WebSocket('ws://localhost:3000');
// 监听连接打开事件
socket.addEventListener('open', (event) => {
console.log('Connected to server');
});
// 监听接收消息事件
socket.addEventListener('message', (event) => {
const output = document.getElementById('output');
output.innerHTML += `<p>${event.data}</p>`;
});
// 监听连接关闭事件
socket.addEventListener('close', (event) => {
console.log('Connection closed');
});
// 发送消息
function sendMessage() {
const messageInput = document.getElementById('messageInput');
const message = messageInput.value;
socket.send(message);
messageInput.value = '';
}
//关闭已建立的连接
socket.close();
</script>
</body>
</html>
Web Socket关闭的流程：
- 客户端或服务器调用
close()方法来关闭连接。 - 发送关闭帧：关闭连接的一方会向另一方发送一个特殊的 WebSocket 帧，称为关闭帧（Close Frame），以表示其意图关闭连接。
- 接收关闭帧：接收到关闭帧的一方也会响应并发送一个关闭帧。
- 断开连接：一旦双方都发送和接收到关闭帧，连接将被断开。
