Chrome 83 稳定版发布:新的跨域政策、表单控件,和改进的 Web 体验

xplanet
 xplanet
发布于 2020年05月21日
收藏 8

完美小我材料领开源豆,速来抽奖!>>>

Chrome 83 稳定版发布了,以下是最重要的更新内容:

  • 可信类型(Trusted types),有助于防止跨站点脚本马脚
  • 新的表单位素
  • 新的跨域政策
  • 引入 Web Vitals 筹划
  • 检测内存泄漏的新办法

可信类型(Trusted types)

基于 DOM 的跨站点脚本(DOM XSS)是最罕见的 Web 安然马脚之一。可信类型(Trusted types)可以赞助防止此类马脚,由于它们会请求你在将数据传递给潜伏的风险之前对其停止处理。

以 innerHTML 为例,假设启用了可信类型,那么假设测验测验传递一个字符串,它将抛出一个 TypeError,由于浏览器不知道它能否可以信赖该字符串。

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

相替换地,须要应用诸如 textContent 之类的安然函数,传入可信类型,或许创建该元素并应用appendChild()

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

更新表单控件

Chrome 和 Edge 停止了协作,以改良 HTML 表单控件的外不雅和功能。下图显示了 Chrome 中某些控件的新旧版本比较(左旧右新)。

 

除新的视觉风格以外,微软还供给了更好的触摸支撑和帮助功能,同时改进了键盘支撑。

新的跨域政策

一些 Web API 会增长诸如 Spectre 之类的旁道进击的风险。为了减轻这类风险,Chrome 供给了一个基于选择参加的隔离情况,称为跨域隔离。这是经过过程两个新的 HTTP 标头完成的: Cross-Origin-Embedder-Policy
和 Cross-Origin-Opener-Policy。应用这些标头,网页可以安然地应用特权功能,包含:

  • Performance.measureMemory()
  • JS Self-Profiling API

跨域隔离状况还可以防止对document.domain停止修改。

Web vitals

有如许一组罕见的旌旗灯号——“Core Web Vitals”——对一切 Web 体验都相当重要。此类核心用户体验需求包含页面内容的加载体验、交互性和视觉稳定性,并且这些合营构成了 2020 Core Web Vitals 的基本。

  • Largest Contentful Paint 会丈量感知的加载速度,并在页面的重要内容能够已加载时标记页面加载时间轴中的点。
  • First Input Delay 可丈量照应度,并量化用户在初次测验测验与页面停止交互时的体验。
  • Cumulative Layout Shift 可衡量视觉稳定性,并量化可见页面内容的不测构造移位量。

Origin trials

measureMemory()丈量内存

performance.measureMemory() 是一个新的 API,可用于丈量页面的内存应用情况并检测内存泄漏。

更新原生文件体系 API

原生文件体系(Native File System)API 在 Chrome 83 中启动了一项新的源法式榜样试用版,该版本支撑可写流,并且可以保存文件句柄。

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

可写流使写入文件变得加倍轻易,并且可以轻松地将照应从一个传播输到另外一个流。

将文件句柄保存到 IndexedDB 许可用户存储状况或记住用户正在处理哪些文件。例如,保存比来编辑的文件列表、翻开用户正在应用的最后一个文件等等。

其他

  • Chrome 如今支撑条形码检测 API,该 API 供给了检测和解码条形码的功能。
  • 新的 CSS @supports 函数为 CSS 选择器供给功能检测。
  • 新的 ARIA 注释支撑屏幕浏览器可拜访带有语义(类似于<mark>的语义)的注释、建议和文本高亮。
  • Preferreds-Color-Scheme 媒体查询使作者可以或许选择本身的深色主题,他们可以完全控制本身构建的体验。
  • JavaScript 如今支撑共享任务法式榜样中的模块。

概略可查阅:https://developers.谷歌.com/web/updates/2020/05/nic83

本站文章除注明转载外,均为本站原创或编译。迎接任何情势的转载,但请务必注明出处,尊敬他人休息共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://aledoyoga.com]
本文标题:Chrome 83 稳定版发布:新的跨域政策、表单控件,和改进的 Web 体验
加载中

出色评论

斗争哥
斗争哥
开了chrome,电扇常常呼呼的。。。
你们都是技巧宅
你们都是技巧宅
GPU加快,电扇可不得转么
斗争哥
斗争哥
firefox,opera都没这成绩,难道没有GPU加快?

最新评论(24

_凤求凰_
_凤求凰_
这内存占用。。。
a
abensky
又有若干人在用原生的控件?改不改款式有影响吗?
ibrucekong
ibrucekong
element的按钮边框变成黑色了,丑
帝都流浪者
帝都流浪者
大年夜家有碰到默许搜刮引擎没法更改的成绩吗 ?版本是:版本 83.0.4103.61(正式版本) (64 位)
苦寒竹
苦寒竹
表单本来淡蓝色的变粗黑色了,这下得用css美化这个框了,完全接收不了。
dyt5AAUI
dyt5AAUI
显示完全链接今后,右键一向存在检查框架源代码和重新加载框架
PynixWang
PynixWang
表单终究修改了。。
花儿不红
有bug edge异样都有
s
seanxu1
18款15寸 chrome看个视频 直接起飞
祺爸PiscDong
祺爸PiscDong
那个黑色的进度条是甚么?
前往顶部
顶部