即将推出的 chrome 95 新特性！从中我们能学到什么？

最新推荐文章于 2024-04-23 13:01:43 发布
最新推荐文章于 2024-04-23 13:01:43 发布
阅读量323 收藏 1
点赞数
文章标签： java python web 小程序 javascript
原文链接：https://mp.weixin.qq.com/s?__biz=MzI2ODUxMzg4Nw==&mid=2247493706&idx=1&sn=2469593fb1acd6051cd0e69bd9ccaf6c&chksm=eaeccf7add9b466c14e8bbb2802407cda74ea7e860865b3d616fa25c5941392030857711b1e7&scene=126&&sessionid=0
版权

1前言

为什么会想到开始写这类的文章呢?

我想先从大的方向来谈:

Google 坐拥了全球第一大操作系统 Android 以及全球第一大浏览器 Chrome，67.14%市场占有率的 Chrome 简直可以为所欲为．

人们总是对 Google 亦步亦趋，毕竟这十年里逐渐崛起的 Google Chrome 在众多的浏览器中已经无敌手了．

对于前端开发者而言，虽然是乐意看到 Chrome 一统天下的，毕竟谁也忘不了曾经被 IE 支配的恐惧。但垄断并不是一件好事！因为它大概率会带来技术的停滞，IE 就是一个鲜活的例子。IE 当初脱离标准，形成自己的 API 规范的初衷，就是为了垄断浏览器市场！（大家应该对垄断心怀警惕！）

微软 Edge 浏览器换用 Chromium 内核已经不是新闻了，Chromium 内核的 Edge 也已经正式发布，虽然没有通过 Windows Update 推送，但大家可以手动到 Edge 官网下载安装。

开源是一个非常有效的达到合谋的方式，可以迅速的成就一个「虚拟的寡头」乃至于造成事实上的垄断。高举规范、开源(chromium)旗帜的 Chrome，正在悄悄的成为巨龙．．．

为什么选择从这个时候开始写呢？

因为从 chrome95 开始，chrome 会每隔 4 周就会更新一个版本。
版本更迭之快，从中我们能嗅探到很多前沿的技术趋势，以及未来哪些东西会面临淘汰！

我想在之后的每一个大版本更新后,我都会第一时间把其中的重要资讯总结出来给与大家一起分享学习!

Chrome 95 测试版于 2021 年 9 月 23 日发布，预计将于 2021 年 10 月下旬成为稳定版本。

2新版本特性分享

新增特性

  • EyeDropper APIEyeDropper API 提供浏览器提供的吸管，用于构建自定义颜色选择器。为 Web 构建的创意应用程序可以受益于从屏幕上的像素中采样颜色的能力。
    这个可以在屏幕的任何地方取颜色哦~ 包括浏览器外面的区域,它有什么好处呢?不知道大家用过 figma，或者蓝湖没有,诸如此类的 web 端 ui 设计应用,取色是一个很常用的功能项（包括我们平时开发页面时，不需要借用其他工具去别的窗口提取ＵＩ给出的设计图某块区域的颜色值，现在通过这个特性就能简单的实现！）b930f54f1a2ff24e8325af3af736b410.png

  • self.reportError API
    该全局方法可用于报告错误控制台或全球事件处理程序，模拟一个未捕获的 JavaScript 异常。详情[1]

    var newError = new Error("Some error message", "someFile.js", 11);
self.reportError(newError);

window.onerror = function(message, source, lineno, colno, error) {
    console.log("message:" + error.message + ", lineno: " + lineno);
    return true;
};

self.addEventListener("error", (error) => {
    console.log(error.filename);
});

// Output
// > "message:Some error message, lineno: 11"
// > "someFile.js"

    此功能主要用于自定义事件调度或回调操作库。库可以使用此功能来捕获回调代码中的错误并将它们重新抛出到顶级处理程序。这确保了一个回调中的异常不会阻止其他回调的处理，同时确保堆栈跟踪信息仍可用于顶层调试。

  • URLPattern作为一个新的 API，提供操作系统支持，用于将 URL 与提供的模式相匹配。详情[2]和MDN[3]

  • 调试面板中对属性值的便捷修改

    DevTools 添加了一种更简单而灵活的方式来更新 CSS 中的长度！在“样式”窗格中，查找任何具有长度的 CSS 属性（例如 height, padding）。将鼠标悬停在单位类型上，注意单位类型带有下划线。单击它以从下拉列表中选择一个单位类型。

    f1141e769bc18a42c06974ef50a22701.gif

    配合 chrome 94 支持中文的特性,控制台变的越来越方便 😀

  • 改进了 DevTools 命令菜单的 UI

    对于经常在 chrome 中查找页面资源的开发者还是挺有用(ctrl+P 调出) 改进前b9e5c45e1ca0457779468c6e18740a42.png

    改进后f2095f94ce9eb6fa6f22d07827e17ad0.png

  • 在 Console、Sources 面板和 Properties 窗格中对自定义的属性进行加粗和排序

    d719fca108ea8b67d5203268655a2815.png

    除了这些更改之外，“属性”窗格中的属性现在也被扁平化，以获得更好的 DOM 属性调试体验，尤其是对于[Web components]

    对于 web component 以后有机会我单独拎一篇文章来讲，大家可以查看这里[4]

    6529e96e5c5161ea0024aa8fdcc967d6.png

  • Lighthouse 现在更新到了 8.4

    我们都知道,网站使用体验的三大核心指标 - LCP, FID, CLS05d49e3dd14df099f498fb253897b421.png

    Lighthouse 现在将检测 LCP 元素是否是惰性加载的图像，并建议删除它的 loading 属性。

    影响 LCP 的四个因素如下:

    因为最近一项 WordPress 中延迟加载的最新研究发现，对于某些站点来说，如果初始视图中的图像没有延迟加载，LCP 可以提高 15%。

    详情可以看这里[5]

    aafaa7818939c254b6ef17698627f441.png

    • 较慢的服务器响应时间

    • 渲染阻塞的 js 和 css

    • 较慢的资源加载时间

    • 客户端渲染

  • 最新的 lighthouse 支持通过 npm 下载

    665246de7a291ab29630da111b06b39a.png通过命令lighthouse https://www.example.com --view08ad13dc3b10c0eeb6d73d3035bfbdb7.png

    这里我通过百度为例子,大家替换为自己想测试的站点即可

    87796a4fabe47376e789099797065093.gif

3删除与弃用

  • 删除了 FTP 支持

    Chrome 正在取消对 FTP URL 的支持[6]。浏览器中 FTP 的使用率足够低，投资改进现有 FTP 客户端已不再可行。此外，所有受影响的平台上都提供了功能更强大的 FTP 客户端。

    Google Chrome 72 及更高版本取消了对通过 FTP 获取文档子资源和呈现顶级 FTP 资源的支持。当前导航到 FTP URL 会根据资源类型显示目录列表或下载。Google Chrome 74 及更高版本中的一个错误导致不再支持通过 HTTP 代理访问 FTP URL。在 Google Chrome 76 中完全删除了对 FTP 的代理支持。在 Chrome 86 中，预发布渠道（Canary 和 Beta）的 FTP 支持被关闭，并且实验性地关闭了百分之一的稳定用户，尽管它可以通过命令行重新启用. 在 Chrome 87 中，它对 50% 的用户关闭，但也可以通过命令行启用。从 Chrome 88 开始，它只能通过弃用试用版获得，现在已被禁用。

  • FTP 支持现在被完全删除自 Chrome 88 以来，它只通过废弃试验提供，但现在已经完全取消了。

  • 支持以数字结尾的非 IPv4 主机名的 URL

    大多数不是有效 IPv4 地址但以数字结尾的主机名都被视为有效，并通过 DNS 查找（例如，http://foo.127.1/）。根据公共后缀列表规范，该 URL 中主机名的 eTLD+1 应为127.1.  如果将其反馈到 URL 中，则由 URL 规范http://127.1/映射到http://127.0.0.1/，这似乎具有潜在危险。127.0.0.0.1也可能被用来迷惑用户。现在拒绝带有这些主机名的 URL[7]。

  • WebAssembly 跨源模块共享

    Chrome 现在不赞成[8]在跨域但同站点的环境之间共享 WebAssembly 模块[9]，以允许代理集群长期作用于源[10]。

  • 弃用 U2F API（加密令牌）

    Chrome 用于与安全密钥交互的旧版 U2F API 已弃用，并在 Chrome 95 中开始弃用试用，其中该 API 默认保持启用状态，但试用令牌将禁用参与站点的密钥。U2F 安全密钥本身并未被弃用，并将继续有效。

    受影响的站点应迁移到Web 身份验证 API[11]。最初通过 U2F API 注册的凭据可以通过 Web 身份验证进行质询。Web Authentication API 也支持 U2F API 支持的 USB 安全密钥。

    U2F 是 Chrome 的原始安全密钥 API。它允许站点在 USB 安全密钥上注册公钥凭据，并挑战它们以构建防网络钓鱼的两因素身份验证系统。U2F 从未成为开放的 Web 标准，而是被 Web 身份验证 API（在 Chrome 67 中启动）所包含。Chrome 从未直接支持 FIDO U2F JavaScript API，而是提供了一个名为 cryptotoken 的组件扩展，它公开了一个等效的chrome.runtime.sendMessage()方法。U2F 和 Cryptotoken 一直处于维护模式，并在过去两年鼓励站点迁移到 Web 身份验证 API。

chrome 删除与弃用特性的历史列表

访问 ChromeStatus.com 以获取当前弃用[12]和以前删除的[13]列表。

4最后

chrome95 开始，chrome 会每隔 4 周就会更新一个版本，对于喜欢尝鲜的同学们，我推荐下载 chrome 测试版或者金丝雀版本来体验最新的特性． 对于一些正在试验中的 API 我们也可以通过下面这个网站提交登记，或者体验资格7a3c02dedc40e65efccc8a2b68bffa11.png

通过填写一些信息后等待审核通过即可，非常的方便！

5ecab817eac017785bfa09cc6236fbd3.pngce05b676be51545f66bb5a4b20e46208.png

以上就是我对即将推出的 chrome95 的主要新增特性的分享~希望对你有所帮助 ~ 😉

往期干货：
 26个经典微信小程序+35套微信小程序源码+微信小程序合集源码下载（免费） 干货~~~2021最新前端学习视频~~速度领取
 前端书籍-前端290本高清pdf电子书打包下载
点赞和在看就是最大的支持❤️
祈澈菇凉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浏览器内核有几种？深度解析浏览器内核工作原理和版本区别
ITduo的博客
03-31 1712
其实是因为我们的国产浏览器都没有自己自主研发的内核，而是基于别人的浏览器内核来开发，换言之，就是基于别人的浏览器内核套上自己的一层外壳，从而变成现在大家所能看到的浏览器，所以我们能够发现，现在市面上的主流浏览器在页面设计、使用操作、网页内容展示上都是几乎差不多的。Chromium开头的，这就不得不提到浏览器的领导者，占据全球市场一半份额的巨头：谷歌浏览器，而Chromium就是指谷歌自主研发的内核名称，我们国内的浏览器正是基于谷歌内核而研发的。而谈到世面拥有自己内核的浏览器，也仅仅只有6个，它们分别是。
多御安全浏览器chromium95内核更新：上网速度更快
m0_69916115的博客
09-01 983
多御安全浏览器内核更新到chromium95，支持64位系统，目前可以在官方网站进行下载安装更新。新版本的多御安全浏览器上网速度更快，体验感更佳。此外，除了性能上的提升，它的主页界面也做了改进，不仅视觉体验出色，而且对于用户而言更加实用便捷。
Chrome-Extension:您可以将文件的扩展名放在 google chrome 上！！！
07-24
将文件放在 Chrome 扩展程序上 截图 文件夹 贪吃蛇游戏 发电子邮件 如何开始？ 首先将放在文件夹中， 尺寸必须为 128x128。 打开谷歌浏览器。 将chrome://extensions/放在搜索栏中，按 Enter。 编辑 manifest.json 文件的字段，如 "name": "Extension Name", "default_popup": "file_name.html to open on click extension pinned"。 点击右上角的“开发者模式”，见上图。 ...然后点击上图左上角的“Load unpacked”。 选择文件夹并固定在 chrome 选项卡的扩展栏上。 恭喜！！！ ...您制作了自己的 CUSTOM chrome 扩展程序。 ...如果您遇到一些错误，您可以寻求帮助： 这是我的
最新Chrome离线安装包
07-14
Chrome版本太旧，提示更新，但点击更新按钮又无法完成更新的朋友看过来。 这是我好不容易爬梯子去官网上下载的离线安装版本，请大家笑纳。 2022-07-14更新 故事是这样的： 下班回到家，Chrome提示说版本太旧，我就点了升级按钮，但失败了。如此反复多次，以我多年的急性子，我认为反复尝试的路子不太适合我。 所以，我就这么搞了下，说出来让你们乐呵乐呵： 第一步，爬墙去了外面，去官网下载了一个几百K的资源，点击安装发现它也是要去找官网的资源，我很失望。慎重得出结论，此路也不通。 第二步，去了国内某资源站，下载了一个安装包，发现也是一样的几百K的资源，最终也是尝试拉取官网资源。我气炸了，得出结论，此路不通。 最后，凭借我多年的英文积累，绞尽脑汁终于拼出了“chrome windows installer offline”这些关键字，然后跟着大神的各种提示，成功下载到了官网离线安装版本，我感觉会有不少人跟我一样有这个问题，所以把它发布上来跟大家共享一下！！
谷歌浏览器Google Chrome 95正式版
11-05
谷歌浏览器Google Chrome 95正式版例行发布，最新稳定版本为v95.0.4638.69。Google Chrome浏览器，自主研发Chromium内核，全球最受欢迎的PC端网页浏览器，追求速度、隐私安全的网络浏览器。
SSH.zip_chrome_chrome ??
09-22
Chrome的插件实现,该程序可以找到你局域网的好友，并可以通过Chrome与其进行通讯
跨域调式chrome插件
07-22
google chrome 安装 CORS插件可直接本地ajax调式远程服务解口，解决跨域问题。
Cookie&Token&Session再提一嘴
Ethan's Blog
02-28 399
Cookie、Token、Session。工作和应付面试都够了！！
多御安全浏览器全新chromium95内核全面兼容
m0_69916115的博客
08-31 652
多御安全浏览器的最新版本宣布首次升级到最新的chromium95内核，使其极速、体验感更佳。这意味着从核心不断升级，多御安全浏览器不断刷新内核升级速度。
和“内存杀手” Chrome 说再见！新版 Edge 即将发布
12-19
新版的Edge相较于Chrome，在继承了Chrome的内核的情况下，其能力大于Chrome，Firefox，在很多方面都有超于两者的优点，且看之后edge的表现如何把
numa-chrome:去！NUMAKURO！NUMAKURO 该怎么办？
07-09
沼Chrome 去！ 沼黑！... 将numa-chrome.crx到窗口中。 如何编译 $ git clone https://github.com/mh61503891/numa-chrome.git $ cd numa-chrome $ gem install crxmake $ crxmake --pack-extension ./
Chrome 89 新功能一览，性能提升明显，大量 DevTools 新特性！
前端下午茶
03-04 3730
今天 Chrome 更新了最新版本 Chrome89，新版本在启动、响应速度上更快，同时 CPU 占用率大幅下降。比如，提供前进后退缓存（20%的页面可瞬时进退）等特性，号称启动速度快了 ...
Android中的anr定位指导与建议
StramChen的博客
01-15 1245
如何快速定位安卓的anr问题
JavaWeb学习笔记
m0_66689823的博客
08-27 759
（没有涉及到Java小程序）通信步骤：（这些软件都是提前开发好的。）apache官网地址：https://www.apache.org/tomcat官网地址：https://tomcat.apache.orgtomcat开源免费的轻量级WEB服务器。tomcat还有另外一个名字：catalina（catalina是美国的一个岛屿，风景秀丽，据说作者是在这个风景秀丽的小岛上开发了一个轻量级的WEB服务器，体积小，运行速度快，因此tomcat又被称为catalina）tomcat的logo是一只公猫（寓意表示T
乱七八糟的一些web记录（纯备份用）
NYG694的博客
01-13 2173
目录python反编译Web题目upload题目Sql注入Flask题目Flask框架java题目SSRF题目SSTL题目Php题目函数总结反序列化题目常见问题uncompyle6 ../pyc/utils.cpython-38.pyc > ../pyc/utils.py下面三个url解码后md5()后相同$s1 = "%af%13%76%70%82%a0%a6%58%cb%3e%23%38%c4%c6%db%8b%60%2c%bb%90%68%a0%2d%e9%47%aa%78%49%6e%0a%c0%c
如何解决Chrome对HTTPS页面的CNZZ 统计代码报错？
weixin_34358365的博客
06-13 308
为什么80%的码农都做不了架构师？>>> ...
百度地图引用时 报出A Parser-blocking, cross site (i.e. different eTLD+1) script
前端小狮的博客
11-09 8198
页面引入百度地图api时 chrome控制台报出警示问题 A Parser-blocking, cross site (i.e. different eTLD+1) script, http://api.map.baidu.com/getscript?v=2.0&ak=Kpjp7jddqVUhWK5VkrfNt3YNezY88NtR&services=&t=20170517...
string模拟实现
最新发布
m0_73969414的博客
04-23 1280
c++中string的模拟实现，面试必会知识点
ChromeDriver与Chrome浏览器有什么关系？
03-10
ChromeDriver是一个用于连接和控制Chrome浏览器的工具。它是Chrome浏览器的一个独立组件，用于...总结来说，ChromeDriver是连接和控制Chrome浏览器的桥梁，使得我们可以通过编写代码来自动化操作和控制Chrome浏览器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值