关于chrome:2020-年-Chrome-开发者峰会的亮点

4次阅读

共计 2647 个字符，预计需要花费 7 分钟才能阅读完成。

2020 年的 Chrome 开发者峰会和今年有所不同，往年是在线上召开的，每次谈话大概十分钟，探讨规模更大。尽管我没有在第一工夫观看会议的直播，然而看回放也不会错过这些亮点。

所有的回放在这里：https://developer.chrome.com/…

通过“Core Web Vitals”简化了性能指标

咱们都晓得 Chrome 有大量的性能指标，能够用它们来跟踪对于网站性能的所有内容。只管划分的粒度使咱们可能深入研究咱们可能须要跟踪的特定区域，这样是十分好的，但有时这些性能指标有些令人望而生畏。

为了解决这个问题，Chrome 小组称提供了名为“Core Web Vitals”的解决方案。上面是三个性能指标，它们是跟踪以下要害因素：

  1. 首次内容绘制（FCP）：掂量加载体验
  2. 首次输出提早（FID）：掂量互动体验
  3. 累积版式移位（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 个计划及实现
  • 更多文章 …
正文完
chrome
发表至： chrome
2020-12-30
 0
关于chrome:Chrome-新功能-录制小视频
关于chrome:谷歌插件设置页面背景
关于chrome:图解浏览器
关于chrome:十大相见恨晚的Chrome插件

站内搜索

-「」