背景
Chrome 团队往年公布了不少新的性能，帮忙开发者晋升网页开发体验。
在最近的 Google 开发者大会上，介绍了最新的七大性能，它们别离是:
- 声援css-in-js的框架的款式编辑
- 模仿时区性能
- Lighthouse 量化使用者体验
- Issues 面板
- 媒体面板
- 一件修复文字的色调比照
- 及时模仿色觉阻碍
我在周末整顿了一些这些内容， 十分具体。
上面咱们就一起来个看看每个性能的细节吧。
注释
1. 声援css-in-js的框架的款式编辑
看到这个性能的时候， 你可能会好奇， Chrome Devtool 不是早就能够编辑css了吗？
没错，然而本来反对的是「 一般的css 」, 不是 「css-in-js」.
当初，“款式”窗格对编辑应用CSS对象模型（CSSOM）API创立的款式提供了更好的反对 。
许多 CSS-in-JS框架和库都在底层应用CSSOM API来结构款式。
例如，（CSSOM API）h1增加的款式CSSStyleSheet以前不可编辑。
因为它是css-in-js的代码。
然而当初能够在“款式”窗格中进行编辑了：
动静演示：
2. 模仿时区性能
Chrome Devtool 能帮你模仿时区， 有了这个性能， 你就能很不便的测试国际化相干的一些性能。
比方：
在马来西亚的工夫显示为：
如果想看在伦敦的工夫， 就能够批改控制台的设置为伦敦：
显示的工夫就改为伦敦工夫了：
很不便吧～
开启这个面板的办法为：
抉择location 就能够了：
3. Lighthouse 量化使用者体验
Lighthouse 推出了新的体验量化形式：Core Web Vitals.
你能够关上lightHouse 面板， 生成报告来查看：
示例：
想要理解更多对于 Core Web Vitals的信息， 能够关注：
web.dev/vitals
4. Issues 面板
大家是否对开发面板中的正告信息感到腻烦呢？ 比方：
新的 Issues 标签 的次要目标是：整合浏览器， javascript 库， 框架的各种正告与异样信息， 给大家一些修复倡议。
关上devtool, 刷新网页，如果有正告信息的话， 会只显示一条View issues 链接， 如图：
点击这个链接， 才会看到全副的 issues 列表， 也能够点击具体的某个 issue 查看具体的信息：
有了这个性能， 整个面板就更清新了。
5. 媒体面板
新的媒体面板提供了一站式的资源与信息， 让你能更快的调试媒体问题。
浏览一个有视频流的网站， 关上媒体面版，
能够看到不同的分类，每一个类别下蕴含了具体具体的媒体信息。
你甚至能够下载视频，更不便的去排查问题：
6. 一件修复文字的色调比照
devtool 会依据你的背景与字体色彩，主动提供文字的色调比照倡议， 比方：
咱们看到， devtool 提供了 AA 与 AAA 两个色调倡议， 任意点击其中一个， 就是修复后的色彩：
是不是很棒～
7. 及时模仿色觉阻碍
你能够利用 devtool 来模仿视觉阻碍。
地球上大概有3亿人有不同水平的色觉阻碍
身为网页开发者的咱们， 如有能有工具辅助我咱们在开发时找出色觉阻碍的问题， 这不是很好吗？
先给大家介绍一下视觉阻碍与色觉阻碍。
视觉阻碍的不同类型：
含糊眼帘
全色盲
红色盲
有了视觉模仿的性能， 就能够更方面的咱们去设置无障碍资源， 无效的检测网页的色调对比度：
这个性能，能帮你更好的欠缺网页的无障碍资源， 改善用户体验。
What’s More
除了以上这些， 还有更多的新性能期待你去摸索：
戳我查看更多新性能 ->
篇幅关系，就不一一介绍。
福利大放送
提供一个 google 研发的博客， 不定时公布开发心得与分享， 不容错过～～
Google Dev Blog
总结
内容大略就这么多， 心愿对大家有所帮忙～
发表回复