一、 Firefox 66: The Sound of Silence
- 用户决定页面的音视频是否自动播放
- 滚动锚定 火狐现在实现了滚动锚定，让视口内容不再因视口上方 DOM 元素的高度变化而产生跳动。
- Touch Bar支持
- Tab Search - 支持tab搜索
- 新DOM API：getDisplayMediaAPI 新的getDisplayMediaAPI支持Web上的屏幕共享，类似于getUserMedia提供对网络摄像头的访问。生成的流可以在本地处理或通过WebRTC在网络上共享。
- Firefox 66 将使用 indexedDB 作为数据存储方式，放弃使用传统的 JSON 文件。 扩展的数据将会自动从 JSON 文件迁移到 indexedDB，开发人员不需要做任何操作，整个过程在 Firefox 66 安装过程中进行。使用 storage.local() API 的扩展会体会到其优点，特别当存储大结构的小更改时。
- 更快的浏览速度，减少内存占用。 对于普通的用户来说，这种变化意味着扩展将会网页加载得更快，同时减少 Firefox 内存占用量。因为当你打开更多的标签时，浏览器会消耗越来越多的内存，例如 Google Chrome。
二、 1、Chrome 73中的新功能
- 支持硬件多媒体按钮 用户将能够通过键盘上的多媒体键控制 Chrome 中播放的音视频内容，指令包括跳过播放列表、播放、暂停、前一曲目、下一曲目、前后向滚动等。
- 可跟随系统的黑暗主题
- 自动画中画功能 自动画中画（Automatic Picture-in-Picture）适用于已经安装到系统上的PWA应用程序。Chrome 70版本中引入了在Windows 10平台安装PWA应用的功能，从网页应用的交互体验接近于原生应用，可以将其固定到开始菜单，并且通过Action Center来获得原生通知。不过在此前只有用户手动方式才能将视频切换至画中画模式。启用自动画中画功能之后，应用中嵌入的视频元素可以自动激活，并且会根据用户焦点自动离开画中画状态。
- Inspect 模式下的样式属性
在 Inspecting (审视/检查/检视。不同浏览器叫法不一样——译注) 一个元素节点时，开发者工具将展示出一个包含了常见的比较重要的样式属性，如 font、margin、padding。
- 导出代码覆盖报告数据 分析页面加载过程中有多少代码被用到并导出这些数据为JSON文件
三、ES10 功能完全指南
目前ES10仍然只是一个草案，但它确实添加了一些有趣的东西。
1. BigInt - 任意精度整数
BigInt是第7种原始类型
typeof 10;
⇨ 'number'
typeof 10n;
⇨ 'bigint'
2. string.prototype.matchAll()
+它返回一个迭代器而不是数组，迭代器本身很有用。
+可以使用扩展运算符...将迭代器转为数组。
+它避免使用带 /g标志的正则表达式...当从数据库或外部源检索未知的正则表达式并与古老的RegEx对象一起使用时非常有用。
3. 动态 import
element.addEventListener('click', async () => {
const module = await import('./api-scripts/button-click.js')
module.clickEvent()
})
4. Array.flat() - 扁平化多维数组
let multi = [1,2,3,[4,5,6,[7,8,9,[10,11,12]]]];
multi.flat(); // [1,2,3,4,5,6,Array(4)]
multi.flat().flat(); // [1,2,3,4,5,6,7,8,9,Array(3)]
multi.flat().flat().flat(); // [1,2,3,4,5,6,7,8,9,10,11,12]
multi.flat(Infinity); // [1,2,3,4,5,6,7,8,9,10,11,12]
5. Array.flatMap() - map后扁平化
array.flatMap(v => [v, v * 2])
[1, 2, 2, 4, 3, 6, 4, 8, 5, 10]
6. Object.fromEntries() - 将键值对列表转换为对象
let obj = { apple : 10, orange : 20, banana : 30 };
let entries = Object.entries(obj);
entries;
(3) [Array(2), Array(2), Array(2)]
0: (2) ["apple", 10]
1: (2) ["orange", 20]
2: (2) ["banana", 30]
let fromEntries = Object.fromEntries(entries);
{ apple: 10, orange: 20, banana: 30 }
7. String.trimStart() & String.trimEnd() - 删除字符串头部和尾部空格
let greeting = " Space around ";
greeting.trimEnd(); // " Space around";
greeting.trimStart(); // "Space around ";
8. New Function.toString() - 标准化所有对象和内置函数的字符串表示
function () { console.log('Hello there.'); }.toString();
⇨ function () { console.log('Hello there.'); }
9. 可选的Catch Binding
在ES10中，Catch Error Binding是可选的 你现在可以跳过 error变量：
try {
JSON.parse(text);
return true;
}
catch
{
return false;
}
10. 标准化的 globalThis 对象
ES10之前全局 this没有标准化。
生产代码中，你必须手动添加如下代码来标准化多个平台的全局对象。
var getGlobal = function () {
if (typeof self !== 'undefined') { return self; }
if (typeof window !== 'undefined') { return window; }
if (typeof global !== 'undefined') { return global; }
throw new Error('unable to locate global object');
};
但即使这样也并不总是奏效。所以 ES10添加了 globalThis对象，从现在开始应该在任何平台上访问全局作用域：
// Access global array constructor
globalThis.Array(0, 1, 2);
⇨ [0, 1, 2]
// Similar to window.v = { flag: true } in <= ES5
globalThis.v = { flag: true };
console.log(globalThis.v);
⇨ { flag: true }
11. Hashbang 语法
基本上统一了JavaScript在服务器端的执行方式。
$ ./index.js
代替：
$ node index.js
12. ES10 Classes: private, static & public members
新的语法字符#（hash tag）现在直接在类主体作用域以及 constructor和类方法里被用来定义 variables， functions， getters和 setters
个人认为可读性差，但是语法类C++
class Raven extends Bird {
#state = { eggs: 10};
// getter
get #eggs() {
return state.eggs;
}
// setter
set #eggs(value) {
this.#state.eggs = value;
}
#lay() {
this.#eggs++;
}
constructor() {
super();
this.#lay.bind(this);
}
#render() {
/* paint UI */
}
}
四、 2019年大前端技术趋势深度解读
三大框架标准化
2014 年到 2018混战后， React/Vue/Angular三足鼎立。无论 React 发布 v16，增加 Fiber 和 Hooks，还是 Vue 3.0 发布，支持原生 Class 的写法，AngularJS 又发布了 v6 和 v7 两个版本，三大框架从写法上越来越像，其实最终都是朝着 W3C WebComponents 标准走。
点评：标准化一直是技术发展的大趋势。
应用层封装进入爆发期
框架和工程化基本探索稳定后，大家就开始思考如何更好的用，更简单的用。目前，各家大厂都在前端技术栈思考如何选型和降低成本，统一技术栈。比如我们团队的tua等
- 零配置就是默认选型都给你做好了。
- 开箱即用就是技术栈都固化了。
- 约定大于配置，开发模式也固化好了。
点评：降低成本，统一技术栈带来的好处很多，适合业务发展。
PWA 进入稳定期 - (Progressive web apps，渐进式Web 应用）运用现代的Web API 以及传统的渐进式增强策略来创建跨平台Web 应用程序。
PWA 和 native app（移动应用）的核心区别在于以下几点：
- 安装：PWA 是一个不需要下载安装即可使用的应用。
- 缓存使用：native app 主要是对 sqlite 缓存，以及文件读写操作，而 PWA 对缓存数据库操作支持的非常好，足以应对各种场景。
- 基本能力补齐，比如推送。
PWA 的一些关键点。
- 通用本地存储的解决方案 Workbox，Workbox 背后则是 Service Worker 和 Cache API 等技术和标准在驱动。
- PWA 桌面版，2018 年 Google IO 大会上，微软宣布 win10 全力拥抱 PWA，通过爬虫爬取 PWA 页面，并将其转换为 Appx，继而在其应用商店里提供应用，体验和原生 Native 应用非常相近。
点评： 5G时代的到来，web离线获取是趋势
小程序火爆
点评：野蛮发展期，与pwa一样，随着5G时代的到来，如何发展还有待检验
TypeScript权重变高
因为随着前端团队变大，规模化编程也必然依赖类型系统和面向对象的。 TypeScript 落地很好，包容性更好：React 对.tsx 支持非常好，Vue 从 v2.5.0 之后对 ts 支持就非常好，Node.js（尤其是 Egg.js、midway）对 ts 支持也非常好。
WebAssembly
WebAssembly 是一种新的字节码格式，目前主流浏览器都已经支持 WebAssembly。 和 JS 需要解释执行不同的是，WebAssembly 字节码和底层机器码很相似，可以快速装载运行，因此性能相对于 JS 解释执行而言有了极大的提升。 也就是说 WebAssembly 并不是一门编程语言，而是一份字节码标准，需要用高级编程语言编译出字节码放到 WebAssembly 虚拟机中才能运行， 浏览器厂商需要做的就是根据 WebAssembly 规范实现虚拟机。
有了 WebAssembly，在浏览器上可以跑任何语言。从 Coffee 到 TypeScript，到 Babel，这些都是需要转译为 js 才能被执行的，而 WebAssembly 是在浏览器里嵌入 vm，直接执行，不需要转译，执行效率自然高得多。
应用例子：《AutoCAD & WebAssembly: Moving a 30 Year Code Base to the Web》，即通过 WebAssembly，让很多年代久远的 C++ 代码在 Web 上可以运行，并且保证了执行效率。web.autocad.com/
