前端语言串讲｜ 青训营

CSS in HTML

Javascript in HTML

这里其实有提到一个点，就是宏任务与微任务，所以我去查了一下，以下就根据这个点来展开

宏任务   微任务

宏任务（Macrotask）	微任务（Microtask）
setTimeout	Promise.[ then/catch/finally ]
setInterval	async
UI rendering	await
I/O，事件队列	MutationObserver（浏览器环境）
setImmediate（Node环境）	process.nextTick（Node环境）
script（整体代码块）	await queueMicrotask

//微任务执行时机比宏任务早 新生成的微任务也比晚的宏任务早(本来在排队的)

//同步代码最早  新生成的同步任务也比晚的微任务早

console.log(1); //1
setTimeout(()=>{
    console.log(2); //2
},0)
Promise.resolve().then(()=>{
    console.log(3); //3
})
console.log(4); //4

  


// 1 4 3 2

HTML in Javascript

CSS in Javascript

HTML5

音频与视频

Audio/Video 方法

方法名	描述
load()	重新加载音频/视频元素
play()	开始播放音频/视频
pause()	暂停当前播放的音频/视频

Audio/Video 事件

事件名	描述
loadstart	开始加载数据
progress	正在获取数据
suspend	在获取数据的过程中（已开始，未完成），暂停获取动作
abort	在获取数据的过程中（已开始，未完成），终止获取动作（但是并不是由错误引起的）
error	获取数据过程中出错
abort	在获取媒体数据的过程中（已开始，未完成），终止获取动作
stalled	尝试获取媒体数据失败
canplay	能够开始播放但可能因缓冲而需要停止
canplaythrough	能够无需因缓冲而停止即可播放至结尾
durationchange	duration 属性发生了变化。
emptied	媒体置空。比如在已经加载（或部分加载）的情况下调用 load() 方法，或网络错误、加载错误等
loadeddata	媒体的第一帧加载完成。
loadedmetadata	元数据加载完成（比如，时间长和字节数）。
pause	播放暂停。执行了 pause()。
play	即将播放开始。执行了 play()，或设置了 autoplay 属性。
waiting	由于得不到下一帧而暂停播放（例如下一帧尚未加载完毕），但很快就能够得到下一帧。
ended	播放到媒体的结束位置，而播放停止。
seeking	seeking 属性变为 true，浏览器正在请求数据
seeked	seeking 属性变为 false，浏览器停止请求数据
timeupdate	播放位置改变，可能是播放过程中的自然改变，或是被人为的改变，或由于播放不能连续而发生的跳变等
ratechange	defaultplaybackRate 属性（默认播放速率）或 playbackRate 属性（当前播放速率）被改变
volumechange	volume 属性（音量）被改变或 muted 属性（静音状态）被改变

地理定位

geolocation 对象

需要先确定 navigator.geolocation 是否可用：

if ("geolocation" in navigator) {
  /* 地理位置服务可用 */
} else {
  /* 地理位置服务不可用 */
}

获取当前定位

通过 getCurrentPosition() 来获取用户当前定位位置。

navigator.geolocation.getCurrentPosition(success, error, options);

• success：成功得到位置信息时的回调函数，使用 Position 对象作为唯一的参数。

  function success(pos) {
    // 地理状态
    var crd = pos.coords;
  
    console.log("Your current position is:");
    // 纬度
    console.log("Latitude : " + crd.latitude);
    // 经度
    console.log("Longitude: " + crd.longitude);
    // 准确性
    console.log("More or less " + crd.accuracy + " meters.");
  }
  

  默认情况下，会尽快返回一个低精度结果

• error：可选，获取位置信息失败时的回调函数，使用 PositionError 对象作为唯一的参数。

  function error(err) {
    console.warn("ERROR(" + err.code + "): " + err.message);
    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;
    }
  }
  

• options：可选，一个 PositionOptions 对象。

  • enableHighAccuracy：是否使用其最高精度

    • false，默认值，设备会通过更快响应、更少的电量等方法来尽可能的节约资源
    • true，这会导致较慢的响应时间或者增加电量消耗（比如对于支持 gps 的移动设备来说）

  • timeout：限制返回时间

    • Infinity，默认值，一直等待到获取位置为止。

  • maximumAge：可以返回多长时间（单位毫秒）内的缓存位置。

监视定位

通过 watchPosition() 来监听定位数据的变更（设备发生了移动，或获取到了更高精度的地理位置信息），它与 getCurrentPosition() 接受相同的参数。

id = navigator.geolocation.watchPosition(success[, error[, options]])

该方法会返回一个 ID，如要取消监听可以通过 clearWatch() 传入该 ID 实现取消的目的。

navigator.geolocation.clearWatch(id);

示例：

var id, target, options;

function success(pos) {
  var crd = pos.coords;

  // 到达目的地
  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
    console.log("Congratulations, you reached the target");
    navigator.geolocation.clearWatch(id);
  }
}

function error(err) {
  console.warn("ERROR(" + err.code + "): " + err.message);
}

// 目的地
target = {
  latitude: 0,
  longitude: 0,
};

options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0,
};

id = navigator.geolocation.watchPosition(success, error, options);

Position 对象

属性	描述
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

Web Worker

什么是 Web Worker

Web Worker 为在后台线程中运行 JavaScript 脚本提供了一种简单的方法，线程可以执行任务而不干扰用户界面（可以继续做任何愿意做的事情：点击、选取内容等等），不会影响页面的性能。

在 worker 线程中可以运行任何代码，不过有一些例外情况。因为 workers 运行在另一个全局上下文中，所以

• 不能直接操作 DOM 节点
• 无法访问 window 对象
• 无法访问 document 对象
• 无法访问 parent 对象

worker 可访问到的内容：Functions and classes available to Web Workers

消息机制

workers 和主线程间的数据传递

• postMessage()：发送各自的消息
• onmessage：响应消息（event.data）

这个过程中数据并不是被共享而是被复制。

subworker

如果需要的话 worker 能够生成更多的 worker。这就是所谓的 subworker，它们必须托管在同源的父页面内。而且，subworker 解析 URI 时会相对于父 worker 的地址而不是自身页面的地址。 这使得 worker 更容易记录它们之间的依赖关系。

专用 Web Workers 实例

检测浏览器是否支持

js
复制代码
if (window.Worker) {
  // ...
}

创建 Worker 对象

创建一个 Worker 对象很简单：

• 调用 Worker() 的构造器，
• 指定一个脚本的 URI

var myWorker = new Worker("worker.js");

消息的接收和发送

input（first、second）的值发生改变时，将数据传递给 worker：

// main.js
first.onchange = function () {
  // Message posted to worker
  myWorker.postMessage([first.value, second.value]);
};

second.onchange = function () {
  // Message posted to worker
  myWorker.postMessage([first.value, second.value]);
};

在 worker 中接收数据后，做乘法处理后，将结果抛回给主线程：

// worker.js
onmessage = function (e) {
  var workerResult = "Result: " + e.data[0] * e.data[1];
  postMessage(workerResult);
};

主线程也使用 onmessage 接受计算结果：

// main.js
myWorker.onmessage = function (e) {
  // Message received from worker
  result.textContent = e.data;
};

注意： 在主线程中使用时，onmessage 和 postMessage() 必须挂在 worker 对象上，而在 worker 中使用时不用这样做。原因是，在 worker 内部，worker 是有效的全局作用域。

终止 Worker

从主线程中立刻终止一个运行中的 worker：

myWorker.terminate();

而在 worker 线程中，workers 也可以关闭自己：

close();

共享 Worker

注意： 如果共享 worker 可以被多个浏览上下文调用，所有这些浏览上下文必须属于同源（相同的协议，主机和端口号）。

一个共享 worker 可以被多个脚本使用——即使这些脚本正在被不同的 window、iframe 或者 worker 访问。

生成一个共享 worker

var myWorker = new SharedWorker("worker.js");

与专用 Worker 一个最大的区别是：共享 worker 通信必须通过端口对象（一个确切的打开的端口），在专用 worker 中这一部分是隐式进行的。

在传递消息之前，端口连接必须被显式的打开，打开方式是使用 onmessage 事件处理函数或者 start() 方法。如果消息事件被 addEventListener() 方法使用，则选择 start() 打开端口：

myWorker.port.start(); // 父级线程中的调用

port.start(); // worker线程中的调用, 假设port变量代表一个端口

消息的接收和发送

postMessage() 方法必须被端口对象调用。

首先，在主线程中，向 worker 发送消息：

// main.js
myWorker.port.postMessage();

在 worker 中，接受消息的流程会比较复杂：

• 当一个端口连接被创建时（例如：在父级线程中，设置 onmessage 事件处理函数，或者显式调用 start() 方法时），使用 onconnect 事件来执行函数
• 获取端口（event.ports[0]）
• 为端口添加一个消息处理函数 onmessage（隐式的打开了与主线程的端口连接）

// worker.js
onconnect = function (e) {
  var port = e.ports[0];

  port.onmessage = function (e) {
    var workerResult = "Result: " + e.data[0] * e.data[1];
    port.postMessage(workerResult);
  };
};

最后，在主线程中接收消息：

// main.js
myWorker.port.onmessage = function (e) {
  result2.textContent = e.data;
  console.log("Message received from worker");
};

Chrome：不允许加载本地文件

Uncaught SecurityError: Failed to create a worker: script at '(path)/worker.js' cannot be accessed from origin 'null'.

当我们的脚本是本地文件时，Chrome 不允许加载 Web Worker。一种解决方式是通过 --allow-file-access-from-files 标记启动 Chrome，启动前保证 Chrome 的所有窗口都关闭了。

MacOsX 的命令：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files

二进制

以上内容来自好文
HTML5：音频和视频 - 掘金 (juejin.cn)
HTML5：地理定位 Geolocation - 掘金 (juejin.cn)
HTML5：了解 Web Worker - 掘金 (juejin.cn)