背景：客户端如何准确拿到当前时间，如果直接取 new Date().getTime()，一旦用户改了本地时间，那么获取到的时间是不准确的，下面的代码可以获取服务端时间：

export const fetchServerTime = async () => {
  const req = new XMLHttpRequest();
  req.open('GET', location, false);
  req.send(null);
  const nowDate = req.getResponseHeader('Date');
  return new Date(nowDate);
};

在写媒体查询时，我们可以根据根据当前屏幕的尺寸设置网页样式，那么当网页包含文字段落时，如何可以根据屏幕的宽高自动让段落划分为多列，便于用户阅读呢，不妨试试column-count这个属性呢，让我们一起看下这个属性的如何使用

下面示例中，50em 是文本行变得令人不舒服的长点。因此创建了一个断点以使界面更清晰。使用 column-count 属性，从该点开始将文本分为两列。

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

#前言

当我们访问一个集合中靠近末尾的元素时，at 方法可以更容易且更高效的帮我们获取到，at 方法是 Array.prototype 的新属性 ，并且 TypedArray 以及 Spring 的原型上也都有这个属性。

#正文

从一个集合的末尾开始访问第 N 个元素在我们的日常开发中会经常遇到这样的场景。通常我们使用的方法是冗长的，比如 my_array[my_array.length-N]，或者不考虑性能的时候，采用 my_array.slice(-N)[0]的方式获取。新属性 at 方法通过将负索引解释为“从最后”来使此操作更符合通常说的人体工程学，上面说的到实例使用 at 方法为 my_array.at(-N)即可获取到需要的数据。

为了统一，at 方法还支持正索引，这就相当于普通的属性访问。

at 方法的复杂度非常低，它的完整语义可以用下面这个兼容的 polyfill 实现理解：

function at(n) {
	// 把入参转化为整数
	n = Math.trunc(n) || 0;
	// 允许从末尾开始负索引
	if (n < 0) n += this.length;
	// 越界则访问返回未定义
	if (n < 0 || n >= this.length) return undefined;
	// 否则，这只是正常的属性访问
	return this[n];
}	

字符串上的 at 方法使用说明：

由于 at 方法最终执行的是普通索引，所以在 string 上调用 at 方法返回的是一个代码单元，就像普通索引一样。代码单元可能不是您想要的 Unicode 字符串！请考虑 String.prototype.codePointAt() 是否更适合您的需求。

浏览器支持情况：

前言

当我们在web页面上显示滚动条的时候，会有一个问题就是滚动条展示的时候会影响到我们页面的布局，scrollbar-gutter CSS属性可以帮开发人员更好的解决这个问题。

接下来我们一起看下怎么解决~

👨‍🔬 本文中描述的 CSS 功能目前仅在 Chromium 88+ 中支持，并且通过 chrome://flags 启用了 #experimental-web-platform-features 标志。
💥 为了保证 Chromium 安装干净，建议您不要在 Chromium Stable 中设置此标志，建议使用 Beta / Canary 版本。

正文

Classic vs Overlay Scrollbars

在我们开始之前，我们先来区分两种类型的滚动条：经典滚动条和覆盖滚动条。

### Classic Scrollbars：经典滚动条是放置在所谓的“Scrollbar Gutter”中的滚动条。 Scrollbar Gutter 是内边框边缘和外填充边缘之间的空间。对于经典滚动条，Scrollbar Gutter 的大小与滚动条的宽度相同。这些滚动条通常是不透明的，并从相邻的内容中占用一些空间。

图解：经典滚动条是从相邻内容中占用了一些空间。

### Overlay Scrollbars：覆盖滚动条是那些放置在内容上的 iOS/macOS 风格的滚动条。它们默认是不显示的，仅在用户滚动时显示。为了保持滚动条下面的内容可见，因此滚动条是半透明的，滚动条样式取决于当前浏览器来确定，滚动条的大小也可能会有所不同。

图解：覆盖滚动条是放置在内容上的。

🍏 macOS 的用户可以通过系统偏好设置从覆盖切换到经典滚动条~

问题

当页面结构框的内容变得太大时（例如当它溢出时），默认情况下浏览器将显示一个滚动条。在经典滚动条的情况下，这有一个令人讨厌的副作用：由于滚动条需要一些空间，内容的可用宽度会缩小，因此布局也会发生变化。

当内容增加时，滚动条就会出现了！

☝️ 当设置成覆盖滚动条时，就不会有布局转换，因为这些滚动条会在内容上呈现。

解决方案

scrollbar-gutter: stable 就可以解决上述问题 ……

通过将 scrollbar-gutter 设置为 stable 我们可以让 UA 始终显示 Scrollbar Gutter。当结构框中的内容没有溢出时则不显示滚动条。这样我们就有了一个视觉上稳定的布局：当盒子开始溢出时，滚动条将被渲染，但不会发生布局移位，因为这时它的空间已经被保留了。

图解：当滚动条显示时，内容不会移动，因为浏览器已经为滚动条装订线保留了空间。

需要注意的是，scrollbar-gutter 属性对滚动条本身的渲染没有影响——它只影响 gutter 的渲染。滚动条的呈现是通过溢出属性控制。

scrollbar-gutter 的默认值是 auto，设置为auto后，行为与问题中描述的行为没有变化。

scrollbar-gutter: stable both-edges可以设置布局两端对齐。

图解：滚动条显示的时候，内容也不会移动。除此之外，在相对的边缘也保留了相同的相同宽度的空间。

注意事项

1. 对于 overflow属性， scrollbar-gutter是通过将滚动条应用于视口替代在根元素上设置滚动条。
2. 与 overflow 属性不同，浏览器不会从 HTML body 元素传播 scrollbar-gutter。

浏览器支持

总结

使用 scrollbar-gutter 我们可以防止由滚动条引起的一些不必要的布局更改。

下图总结了本文中涵盖的场景：

ES新特性之import断言

新的import断言特性允许模块引入语句在模块标识符处包含额外的信息。一个最初始的用处是引入JSON时使它是一个json模块。

// foo.json
{ "answer": 42 }

// main.mjs
import json from './foo.json' assert { type: 'json' };
console.log(json.answer); // 42

背景：JSON模块和MIME类型

一个自然要问的问题是为什么不能像下面这样简单地导入 JSON 模块：

import json from './foo.json';

web平台会在执行模块资源之前先检查模块的MIME类型的有效性。理论上该 MIME 类型也可用于确定将资源视为 JSON 还是 JavaScript 模块。

但是如果仅仅只依赖MIME类型会有安全问题。

模块可能会被跨域引入，开发者也可能引入第三方JSON模块。他们可能认为即使对于不受信任的第三方，只要 JSON 得到适当的处理，这也基本上是安全的，因为导入 JSON 不会执行脚本。

但是，第三方脚本实际上可以在这种情况下执行，因为第三方服务器可能会不按预期地响应JavaScript MIME 类型和恶意 JavaScript 负载，在引入该模块资源的域中执行代码。

// Executes JS if evil.com responds with a
// JavaScript MIME type (e.g. `text/javascript`)!
import data from 'https://evil.com/data.json';

文件扩展名不能用于确定模块类型，因为它们不是web上内容类型的可靠指标。因此，我们使用import断言来指示预期的模块类型并防止这种权限提升陷阱。

当开发者想引入JSON模块时，他们必须使用import断言来指示它是JSON。如果从网络收到的 MIME 类型与预期类型不匹配，则导入将失败：

// Fails if evil.com responds with a non-JSON MIME type.
import data from 'https://evil.com/data.json' assert { type: 'json' };

Dynamic import

import断言也可以用于Dynamic import，在第二个参数中使用：

// foo.json
{ "answer": 42 }

// main.mjs
const jsonModule = await import('./foo.json', {
  assert: { type: 'json' }
});
console.log(jsonModule.default.answer); // 42

JSON内容是模块的默认导出。因此通过 import() 返回的对象上的default属性引用它。

结论

目前，import断言的唯一指定用途是指定模块类型。但是，该功能旨在允许任意键/值断言对，因此如果以其他方式限制模块导入变得有用，将来可能会添加其他用途。

同时，具有新导入断言语法的 JSON 模块在 Chromium 91 中默认可用。 CSS 模块脚本也即将推出，使用相同的模块类型断言语法。

支持情况