共计 2647 个字符，预计需要花费 7 分钟才能阅读完成。
2020 年的 Chrome 开发者峰会和今年有所不同，往年是在线上召开的，每次谈话大概十分钟，探讨规模更大。尽管我没有在第一工夫观看会议的直播，然而看回放也不会错过这些亮点。
所有的回放在这里：https://developer.chrome.com/…
通过“Core Web Vitals”简化了性能指标
咱们都晓得 Chrome 有大量的性能指标，能够用它们来跟踪对于网站性能的所有内容。只管划分的粒度使咱们可能深入研究咱们可能须要跟踪的特定区域，这样是十分好的，但有时这些性能指标有些令人望而生畏。
为了解决这个问题，Chrome 小组称提供了名为“Core Web Vitals”的解决方案。上面是三个性能指标，它们是跟踪以下要害因素：
- 首次内容绘制（FCP）：掂量加载体验
- 首次输出提早（FID）：掂量互动体验
- 累积版式移位（CLS）：掂量视觉稳定性
展望未来，Lighthouse 性能得分将会更看重这些指标，所以十分值得关注。
第一天 CDS 的大部分工夫都是围绕着这些指标进行探讨的，次要内容是如何跟踪并解决常见问题。如果想理解更多细节能够看这两个视频：
- State of speed tooling (by Elizabeth Sweeny and Paul Irish)
- Fixing common Web Vitals issues (by Katie Hempenius)
新 CSS 属性的性能
持续以性能为主题，还有能给你网页提供更好性能的新 CSS 性能。
content-visibility 属性容许咱们通知浏览器应该在何时去渲染元素。如果值是 auto，它就通知浏览器在视口可见之前先不要渲染元素。这意味着如果浏览器最开始只须要渲染首屏的内容，那么将会将大大放慢页面加载的速度。在 Jake Archibald 的演讲 Beyond fast 中，他提到仅通过这个属性，就把 HTML Standard 布局工夫从 50 秒变为 400 毫秒！
为了避免潜在的“累积布局偏移”的问题，content-visibility 属性须要与 contain-intrinsic-size 属性协同工作。因为浏览器并未齐全加载元素，因而在须要渲染元素时可能会产生一些变动。为了最大水平地缩小页面上产生的移位，即便没有渲染内容，也能够用 contain-intrinsic-size 属性指定元素的尺寸。
.below-fold-element {
content-visibility: auto;
contain-intrinsic-size: 0 500px; /* set height to 500px */
} 你能够把这个属性想像成通过为媒体元素增加 width 或 height 的形式来保留空间，以便在最终加载媒体时页面不会产生位移。
这些属性曾经在最新的 Chrome 以及 Edge 中提供反对了。
公布古代 Javascript 代码
依据 Houssein Djirdeh 和 Jason Miller 在过渡到古代 JavaScript（Transitioning to modern JavaScript）的演讲中的观点，超过 90% 的网络流量来自反对 ES2017 的浏览器。这意味着从技术上讲，咱们能够将类、箭头函数和 async/await 之类的性能间接传送到不须要进行代码转换的浏览器。
也就是说，咱们依然须要找出一种办法来同时解决这 90% 和剩下 10% 的状况。而且鉴于大多数浏览器都反对古代 javascript，因而解决方案不只是将已转换的代码发送给所有浏览器，咱们应该同时领有程序文件的现代版和旧版，并用以下的反对为他们提供服务：
type = module
这不齐全是新货色，有一种基于浏览器反对来提供不同文件的办法，在古代文件的脚本标签上应用 type = "module"，并为旧文件指定 nomodule 属性。
<script type="module" src="modern.js"></script>
<script nomodule src="legacy.js"></script> 反对 type = "module" 的浏览器将会加载该文件，而旧版浏览器则疏忽这个文件。
Package exports
当初能够在 package.json 文件中用 exports 键定义另一个“主”脚本文件了。
{
"name": "my-package",
"exports": "./modern.js",
"main": "./legacy.js"
} Node 12.8 及更高版本中反对这个 exports 字段，这意味着它反对 ES2019 及之后的语法。
选项卡式桌面 PWA
在台式机上的 PWA 中增加了许多新性能。其中最实用的一个是能够将这些应用程序集中到选项卡化中了。
这是通过 Web manifest 中的 display_override 字段实现的，咱们能够按优先级指定要应用的显示模式的列表。
{
"display": "standalone",
"display_override": ["tabbed", "minimal-ui"],
} 这样以来就能在 PWA 中创立选项卡了，对于台式机 PWA，这将会是一项要害性能。
另一个有意思的新 API 能够使咱们在登录设施时启动桌面 PWA。
if (navigator.runOnOsLogin) {navigator.runOnOsLogin.set({ mode: "windowed"})
.then(() => {// Permission approved});
}行将推出的新 API 还有：
- 文件解决 API
- 告诉触发器 API
- 数字商品 API
- 本地字体 API
PJ Mclachlan 在演讲桌面上的下一代 Web 应用程序中进一步探讨了这些性能。
本文首发微信公众号：前端先锋
欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章
欢送持续浏览本专栏其它高赞文章：
- 深刻了解 Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13 个帮你进步开发效率的古代 CSS 框架
- 疾速上手 BootstrapVue
- JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
- WebSocket 实战：在 Node 和 React 之间进行实时通信
- 对于 Git 的 20 个面试题
- 深刻解析 Node.js 的 console.log
- Node.js 到底是什么？
- 30 分钟用 Node.js 构建一个 API 服务器
- Javascript 的对象拷贝
- 程序员 30 岁前月薪达不到 30K，该何去何从
- 14 个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩大插件
- Node.js 多线程齐全指南
- 把 HTML 转成 PDF 的 4 个计划及实现
- 更多文章 …
