Chrome 88 新功能解读

news/2024/7/19 13:08:55 标签: javascript, js, css, web, java
js_content">

CSS aspect-ratio 属性

aspect-ratio 属性对应的就是 Aspect Ratio,它的意思就是宽高比,也常称为 纵横比,是几何形状在不同尺寸的比值。举个例子,当矩形方向为横向时的宽高比值,是其长边与短边的比率。常会用来描述图像或屏幕的宽度和高度的比率。通常表示为 x:yx × y,其中的 冒号 和 乘号 表示中文的 比 之意。

就拿 16:9 来说,第一个数字总是指 宽度,第二个数字是指 高度。如果图像的比例与屏幕的比例不同,你可能无法看到整个图像。如果屏幕比图像窄,图像就不能合适地放入。

在以前,只有某些特定的元素具有长宽比,例如 image。这时我们仅指定宽度或高度,元素会根据固有长宽比自动计算另一个。

<!-- Height is auto-computed from width & aspect ratio -->
<img src="..." style="width: 800px;">

Chrome 88 中, aspect-ratio 属性可让你显式指定宽高比,从而实现类似的行为。

.square {
  aspect-ratio: 1 / 1;
}

大幅限制链式 JavaScript 定时器

Chrome 88 将在特定情况下大幅限制隐藏页面的链式 JavaScript 计时器。这将减少CPU使用率,也将减少电池使用率。

如果你在一个 setTimeout 里调用了同一个 setTimeout,这就相当于链式调用了:

let chainCount = 0;

function setTimeoutChain() {
  setTimeout(() => {
    chainCount++;
    console.log(`This is number ${chainCount} in the chain`);
    setTimeoutChain();
  }, 500);
}

Chrome 88 中,当以下所有的条件都成立时,你的 setTimeout 调用就会被节流限制:

  • 该页面已经隐藏 5 分钟以上(用户当前打开了其他的页面)

  • 你链式调用的计数是 5 或更多次

  • 该页面已经静音 30 秒以上

  • 未使用 WebRTC

在满足这种情况下,浏览器将每分钟检查一次定时器,你定时器里的逻辑也会在每分钟内分批处理。Chrome 官方推荐使用 setInterval 来解决这个问题。

默认启用 noopener

<a class="" href="https://developers.tiktok.com/?refer=tiktok_web" target="_blank">TikTok for Developers</a>

如果你的 a 标签只是有一个 target="_blank" 属性,打开新窗口后,新页面能通过 window.opener 获取到来源页面的 window 对象,如果跳转到一个恶意页面,它可能会恶意读取你的一些信息,甚至进行钓鱼攻击。

为了符合 HTML 标准的更改,默认情况下如果你的 a 标签有 target="_blank",现在会默认开启 rel="noopener"

V8 支持非回溯 RegExp 引擎

由于 V8 中的 RegExp 引擎默认使用的是 NFA引擎,NFA引擎是用表达式去匹配文本,而表达式又有若干分支和范围,一个分支或者范围匹配失败并不意味着最终匹配失败,正则引擎会去尝试下一个分支或者范围,NFA引擎的核心特点就是会发生回溯。

回溯可不是个好东西。想象一下,面前有两条路,你选择了一条,走到尽头发现是条死路,你只好原路返回尝试另一条路。这个原路返回的过程就叫回溯,它在正则中的含义是吐出已经匹配过的文本。

你可以使用下面的正则在 Chrome 控制台进行测试:

<img src=# onerror=’alert(document.cookie)/><!--‘
<img src=https://avatar.veedrin.com />
`.match(/<!--([^-]+|[-][^-]+)*-->/g);

虽然只是简单的一段正则,但是由于它的分支过多,会引起大量的回溯,从而导致你的浏览器卡死。

为了解决这个问题,从 v8.8 开始,V8附带了一个新的实验性非回溯 RegExp 引擎,它可以保证在字符串长度变大的情况下保持线性的时间变化:

你可以通过下面的方式配置新的 RegExp 引擎:

  • --enable-experimental-regexp_engine-on-excessive-backtracks:在过多的回溯上启用对非回溯引擎的回退。

  • --regexp-backtracks-before-fallback N:(默认 N=50000)指定了多少回溯被视为过多,即何时进行回退。

  • --enable-experimental-regexp-engine 直接启用非回溯 RegExp 引擎。

Manifest v3

Chrome 88 现在支持使用 Manifest v3 构建的扩展程序,用户可以将其上传到 Chrome 网上应用店。Manifest v3 是一个新的扩展平台,默认情况下可使 Chrome 扩展更安全,更高效,更尊重隐私。

Manifest v3 不允许使用远程托管的代码,这可以帮助 Chrome Web Store 审核人员更好地了解扩展程序带来的风险,并且应该允许你更快地更新扩展。

完全禁用 FTP

从 86 版本开始,Chrome 开始了禁用 FTP 的过程,到 88 版本发布后,FTP 被完全禁用:

  • Chrome 86:默认情况下,大多数用户仍启用 FTP,但对于 pre-release channels 禁用了 FTP,并且将对稳定用户的百分之一进行实验性关闭。在此版本中,用户可以使用 --enable-ftp 命令或 --enable-features=FtpProtocol  从命令行重新启用它 。

  • Chrome 87:默认情况下,百分之五十的用户将禁用 FTP 支持,但可以使用上面列出的 flag 启用 FTP 支持。

  • Chrome 88FTP 支持被完全禁用

完全禁用混合内容下载

如上面的过程,从 81 版本开始, Chrome 开始阻止混合内容的下载,并在各个版本开启不同文件类型的阻止,到 Chrome 88 版本,所有文件类型的混合内容下载被完全阻止。

当用户正在访问一个以 HTTPS 开头的网页,但文件是从一个以 HTTP 开头的 URL 下载的。Chrome 将这些情况视为 “混合”和 “不安全”下载。

完全禁用 flash

Chrome83 版本对用户使用 flash 开启了进一步提示,比如如果提示激活 Flash 插件时并导致状态更改,将会再次给予警告。

2020 年 12 月 31 日,Flash 达到了正式的生命终点,Adobe 正式停止支持该软件。1 月 12 日,Adobe 开始直接阻止 Flash 内容播放。

移除 Web Components v0 支持

从 Chrome 88 版本开始,不再支持 Web Components v0 ,Chrome 使用 Web Components v1 API 替代了 Web Components v0,并且 Safari、Firefox、Edge 都支持了这项改动。


http://www.niftyadmin.cn/n/1251630.html

相关文章

android+geturl+方法,Android getWidth和getMeasuredWidth的正解

一、也许很多童鞋对getWidth()和 getMeasuredWidth()的用法有很多的不解&#xff0c;这两者之间有什麼样的不同呢&#xff0c;网上也有各种不同的版本&#xff0c;但大多数都大同小异&#xff0c;从这个地方 CtrlC,到另一个地方CtrlV,没有把问题说透&#xff0c;也有一部分文章…

input打加载json文件_TensorFlow2学习四、Keras 保存和加载模型

1. 权重保存和加载# 保存为TensorFlow checkpoint格式model.save_weights(./my_model)# 保存为TensorFlow HDF5格式model.save_weights(model.h5, save_formath5)# 加载model.load_weights(my_model)2. 保存和加载网络结构保存一个模型的配置&#xff0c;序列化过程中不包含权重…

大厂2个Vue实践总结,效率提升80%!

对于从事前端工作的小伙伴&#xff0c;掌握Vue&#xff0c;React这样的框架可以说是前端基本功了。人人都会用&#xff0c;那我们怎样才能写得比别人优雅&#xff1f;比别人漂亮&#xff1f;鉴于一线互联网大厂在前沿技术领域的持续研究和大规模投入&#xff0c;直接向他们取经…

cef 前进后台 实现_抽签仪式后台,原来他们聊了这个…

(观察者网讯)2019年男篮世界杯小组赛抽签仪式刚刚结束&#xff0c;科比与杨超越的混搭组合吸引众人关注&#xff0c;但也充满争议。 3月16日晚&#xff0c;2019年男篮世界杯小组赛抽签仪式上&#xff0c;中国篮协主席姚明、著名篮球运动员科比、易建联、“美版周杰伦”歌手杰森…

软酷Android高级控件,基于DBGrid的数据浏览控件的开发.doc

基于&#xff24;&#xff22;&#xff27;&#xff52;&#xff49;&#xff44;的数据浏览控件的开发摘要&#xff1a;Delphi的DBGrid控件使用灵活&#xff0c;应用广泛&#xff0c;但没有提供显示记录的序号&#xff0c;点击列标题排序&#xff0c;对列宽度、顺序等信息的保…

又来需求了:微信支持外网打开小程序!

前言千呼万唤始出来&#xff0c;微信小程序终于支持以URL Scheme的形式从外部唤起了。long long ago~ 我们只能在微信内的网页中使用微信开发标签-小程序跳转按钮 <wx-open-launch-weapp>打开小程序&#xff0c;只有这样一种单一的场景。而在实际的业务中&#xff0c;我们…

matlab 遗传算法工具箱_Matlab遗传算法工具箱使用简介

1.简介遗传算法是现代优化算法之一&#xff0c;为方便使用Matlab提供了遗传算法工具箱&#xff0c;可以方便我们解决一般的优化问题。遗传算法工具箱的打开途径为&#xff1a;首先在App中找到Optimization工具箱然后在Solver中找到ga打开就行了&#xff0c;具体的显示界面如下我…

前端 Code Review 的最佳实践方案

前言我一直认为Code Review&#xff08;代码审查&#xff09;是软件开发中的最佳实践之一&#xff0c;可以有效提高整体代码质量&#xff0c;及时发现代码中可能存在的问题。包括像Google、微软这些公司&#xff0c;Code Review都是基本要求&#xff0c;代码合并之前必须要有人…