达内广州C++学院|c++培训|广州达内科技C++/C#培训|.NET培训|IT培训|达内广州岗顶中心 达内广州C++学院|c++培训|广州达内科技C++/C#培训|.NET培训|IT培训|达内广州岗顶中心
PHP互联网工程师
 当前位置:主页 > 高端课程 > PHP互联网工程师 >

Chrome性能有了最大提升!(Chrome87新特性解读)

时间:2020-11-30  来源:未知  作者:广州达内培训

今天 Chrome 更新了 87 最新版,这是今年最后一次 Chrome 更新了,这个版本是多年来 Chrome 性能获得最大提升的一次,开发者工具也进行了大幅度更新。

有用户认为,原本 Chrome 的性能问题诟病已久,然而在新 Edge 出来了以后,性能突然就提升了,这显然是谷歌方面受到了 Edge 市场份额暴增带来的压力。

另外,在 Mac 上的 Chrome 还更新了图标,这应该是为了适配 Big Sur 专门进行的设计。

原文:https://developers.google.com/web/updates/2020/10/devtools

PS:最新的 Chrome 更新视频是一个日裔女的解说,这英语口语真是醉了...

1. 新的 CSS Grid 调试工具

现在 DevTools 对 CSS 的 Grid 有了更好的支持。

CSS grid debugging

当页面上的 HTML 元素具有 display: griddisplay: inline-grid 时,可以在 Elements 面板中看到它旁边的一个 Grid 标记。单击标记可以切换页面上 Grid 覆盖的高亮显示。

新的 Layout 子面板有一个 Grid 标签,提供了查看 Grid 的一些选项。

查看文档以了解更多信息。

对应 Chromium issue: 1047356

2. 新的 WebAuthn 面板

现在,可以模拟身份验证器并使用新的 WebAuthn 选项卡调试 Web 身份验证 API。

WebAuthn

如图选择 More options > More tools > WebAuthn 可以打开 WebAuthn 面板。

WebAuthn tab

在 WebAuthn 标签出现之前,Chrome 上不支持原生的 WebAuthn 调试。开发人员需要物理身份验证器来测试他们的 Web 应用程序。

有了新的 WebAuthn 标签,Web 开发人员现在可以模拟认证器,定制它们的功能,并检查它们的状态,而不需要任何物理认证器。这使得调试体验更加容易。

查看我们的文档了解更多关于 WebAuthn 特性的信息。

对应 Chromium issue: 1034663

3. 开发者工具的面板现在支持垂直分屏

DevTools 现在支持将 DevTools 工具面板移动到顶部和底部,通过这种方式,可以同时分屏查看任意两个工具面板。

例如,如果想同时查看 Elements 和 Sources 面板,可以右键单击 Sources 面板,并选择移动到底部。

Move to bottom

类似地,可以将任何底部选项卡移动到顶部,方法是右键单击选项卡并选择 Move to top。

Move to top

4. Elements 面板功能更新

4.1 在 Styles 子面板中查看 Computed 侧边栏

现在可以切换 Styles 面板中的 Computed 侧边栏。

默认情况下,Styles 面板中的 Computed 侧边栏是折叠的,单击按钮可以切换展开状态。

Computed sidebar pane

对应 Chromium issue: 1073899

4.2 在 Computed 面板中对 CSS 属性进行分组

现在可以在 Computed 侧边栏中按类别对 CSS 属性进行分组。

有了这个新的分组特性,在 Computed 中查找和选择性地关注一组相关 CSS 属性变得更加容易。

在 Elements 面板上,选择一个元素,单击 Group 复选框,可以对 CSS 属性进行分组/取消分组。

Grouping CSS properties

对应 Chromium issues: 1096230, 1084673, 1106251

5. Lighthouse 更新 Lighthouse 6.4

Lighthouse 面板现在更新到了 Lighthouse 6.4,查看 release notes 可以看到完整的新特性清单。

Lighthouse

Lighthouse 6.4 中的新特性:

  1. Preload fonts:报告是否所有使用了 font-display: optional 的字体文件是否都有预加载成

  2. Valid sourcemaps:报告页面上非第三方 JS 的 sourcemap 文件是否正确

  3. Large JavaScript library(实验性特性):报告页面上的大型 JS 库(比如:moment.js)

对应 Chromium issue: 772558

6. 在 Performance 面板中的事件线(Timings)上将标记出 performance.mark() 事件

Performance 面板记录的 Timing 部分现在会标记 Performance.mark() 事件。

Performance.mark events

7. Network 面板新增 resource-type、url 筛选条件

现在可以使用 Network 面板中的 resource-typeurl 关键字筛选网络请求。

例如,使用 resource-type: image 可以筛选出请求图像的网络请求。

resource-type filter

点击更多的筛选条件,可以查看到更多类似于 resource-typeurl 的筛选用法。

对应 Chromium issues: 1121141, 1104188

8. Application 面板中 Frames 子面板相关的更新

8.1 支持展示 COEPCOOP 的向谁报告字段

现在可以在 Application 面板的 Frames 子面板的 Security & Isolation 部分查看向终端报告的 COEP (Cross-Origin Embedder Policy)和 COOP(Cross-Origin Opener Policy)。

Reporting Api 定义了一个叫做 Report-To 的新的 HTTP Header,当网站中出现违背 COEP (Cross-Origin Embedder Policy)和 COOP(Cross-Origin Opener Policy)的情况时,浏览器会向这个头部指定的地址发送报告。

reporting to endpoint

关于如何开启 COEPCOOP 来使你的网站实现跨源隔离(cross-origin isolated)可以查看这篇文章

对应 Chromium issue: 1051466

8.2 展示 COEP 和 COOP 的 report-only 模式

Devtools 对于 COEP、COOP 为 report-only 的情况,新增了标记展示

report-only label

观看这个视频,学习如何防止信息泄漏,以及如何开启 COOP 和 COEP。

对应 Chromium issue: 1051466

9. 移除 More tools 菜单中的 Setting 按钮

More tools 菜单中的 Setting 已不推荐使用,请从主面板打开 Setting。

Settings in the main panel

对应 Chromium issue: 1121312

10. 实验特性

以下特性均需要开启 Settings > Experiments 下的相关选项

10.1 CSS Overview 面板中支持查看、修复色彩对比度问题

CSS Overview 面板展示了你的页面中低色彩对比文本的色彩列表。

这个 Demo 页面展示了一个低色彩对比度的反面案例,打开这个 CSS Overview 面板可以查看到所有有问题的元素列表。

Low color contrast issues

单击列表中的某个元素可以打开 Elements 面板中的元素,DevTools 将提供自动颜色建议,帮助修复文本的低色彩对比度问题。

对应 Chromium issue: 1120316

10.2 DevTools 支持自定义键盘快捷键了

现在可以在 DevTools 中自定义键盘快捷键。

进入 Settings > Shortcuts,将鼠标悬停在一个命令上,点击编辑按钮来自定义快捷键。

Customize keyboard shortcuts

要重置所有快捷方式,请单击 Restore default shortcuts 还原默认快捷键。

对应 Chromium issue: 174309


上一篇:PHP 8 正式发布了!
下一篇:没有了

友情链接:
  • 全球最大晶圆代工半导体制造厂,台积电斥资订购艾斯摩尔机器设备
  • 英特尔依然是那个英特尔,且看英特尔的城防体系
  • 支持双 DRAM 内存接口,慧荣企业级 SSD 主控方案披露
  • 在全球被反垄断罚款,冤!高通到底哪里得罪了欧盟?
  • 强强联合!万业、微电子所和芯鑫共同打造全新半导体设备
  • 复旦大学校长称:对于集成电路产业发展,大学应该主动担当
  • 技术再升级!无锡中科芯攻克晶圆级再布线及晶圆级凸点制备关键技
  • 聚力!万业企业设立集成电路装备集团,提供自主可控设备
  • 德州仪器C2000微控制器增强连通性和控制性
  • 英特尔打出降价策略,以免被竞争对手 AMD 打败?
  • 贸易摩擦的闹剧没有赢家,苹果有勇气离开中国吗?
  • 图像信号与视觉处理器的发展趋势
  • 真干快消品定位方案班(第二期)火热开班
  • Java集合 ArrayList原理及使用
  • TDD(测试驱动开发)死了吗?
  • JAVA基础之XML相关
  • javaweb项目搭建ehcache缓存系统
  • 每日一码——字符串统计
  • 一篇文章帮你彻底搞清楚“I/O多路复用”和“异步I/O”的前世今生
  • 九:模板方法模式
  • 十二:命令模式(人员解耦和)
  • Java 转PPT为图片、PDF、SVG、XPS、ODP以及PPT和PPTX互转
  • SpringCloud学习(SPRINGCLOUD微服务实战)一
  • 记一次微信网页授权后获取用户信息并重定向
  • 速途新营销五点实战洞察解码“品效合一”
  • 十一:外观模式详解(Service,action与dao)
  • 手把手教你学会 基于JWT的单点登录
  • mysql锁机制总结,以及优化建议
  • 解决多个版本jar包冲突【jar内包名重命名】
  • 中国首张5G终端电信设备进网许可证 华为Mate 20 X 5G版入网
  • RPC之Thrift
  • 高级Java工程师必备 ----
  • 天猫618期间实物支付GMV增长38.5%
  • 换季了,老板你的库存处理好了吗?
  • 从“618”大数据看中国消费新活力
  • 小米生态链:贵在格局感与收放度
  • CODING 2.0 企业级持续交付解决方案
  • 老铁奇趴“新京济” 快手*京东618战报出炉
  • 中小企业新媒体运营基本技能
  • 上汽大通房车再度携手LINE FRIENDS 魔都巡游顺利开启
  • 华为高端手机国内市场份额超苹果夺得榜首
  • 中国智能制造分析报告
  • iPlus艾加营销助力腾讯广告牵手吴晓波 推进商业IP变现
  • 2019世界新能源汽车大会7月1日将在海南举行
  • 区域酒企如何转型突围
  • 时时彩论坛
  • 五星体育斯诺克
  • 北单比分直播
  • 河北11选5走势图
  • 福建体彩36选7开奖结果
  • 九龙图库下载