Chrome 50发布,有哪些技术更新需要关注?

Chrome 50 版本已经发布多日了,不过它带来的很多新特性值得关注,而且有些也是振奋人心的。让我们来一起看一下:

ECMAScript/JavaScript:

RegExp Unicode 标记

ES6 在正则表达式中使用 u 标记来实现对 Unicode 更友好的功能和行为,比如,可以用 emoji 符号之类的。

// Match any symbol from U+1F4A9 PILE OF POO to U+1F4AB DIZZY SYMBOL.
const regex = /[💩-💫]/u; // Or, `/[\u{1F4A9}-\u{1F4AB}]/u`.  
console.log(  
    regex.test('💨'), // false
    regex.test('💩'), // true
    regex.test('💪'), // true
    regex.test('💫'), // true
    regex.test('💬')  // false
);

更多信息,可以查看 Unicode-aware regular expressions in ECMAScript 6

更多的 well-known symbols

新增5个ECMAScript well-known symbols

  • Function.prototype[Symbol.hasInstance] ,用于 instanceof 操作符.
  • RegExp.prototype[Symbol.match],用于标记一个 RegExp 对象,以及 inString.prototype.match;
  • RegExp.prototype[Symbol.replace] ,用于 String.prototype.replace;
  • RegExp.prototype [Symbol.search] ,用于 String.prototype.search;
  • RegExp.prototype[Symbol.split] ,用于 String.prototype.split.

最后的4个 symbol 用作 RegExp 的子类,用于改变匹配的语境,通过重写 MyRegExpSubclass.prototype[Symbol.match] 等,开发者可以改变子类对应于 String.prototype.match 之类的方法的行为。

其它相关

  • Object.observer() 被ECMAScript 标准删掉了,所以也不再支持了。被 Proxy API 替代。

HTML5

Web Animations API 更新

新增了以下 API 以实现和其它浏览器的一致性以及提高标准的兼容性:

  • Animation.prototype.id
  • cancel 事件
  • pause() 方法支持状态改变
  • keyframe的名字,不能使用连字符了,正确的方法是使用驼峰命名——下个版本才实现,现在会在 console 中警告

常看详细的改变,可以访问 Web Animations Improvements in Chrome 50

Presentation API更新

因为规范的原因,PresentationConnection 实例的 statechange 事件不再支持,取而代之的是,实现了 messageconnectcloseterminate 事件。

Canvas 更新

  • <canvas> 元素实例现在支持 toBlob() 方法,和 toDataURL() 并肩了。 toBolb()toDataURL() 更有效,因为它可以直接用编码后的二进制数据,而不用 base64 编码的字符串了。
  • 全局 createImageBitmap() 方法在后台解码图片并返回 ImageBitmap, 你可以将其画在一个 <canvas>

更多技术细节,可以看这里

HTTPS

  • X25519。好抽象的称呼了,不过根据描述,它可以让 TLS 更简单、更快、更安全,OpenSSL在去年已经支持到了。
  • 非HTTPS网站禁用 Geolocation API
  • 非HTTPS网站禁用 Application Cache API
  • 不再支持不安全的 TLS fallback 机制。但不会不支持较老的TLS版本,建议升级到 TLS 1.2
  • 下个版本,Chrome 51 将不再支持 SPDY, 使用它的网站将转到 HTTP/1.1 ,建议使用 HTTP/2
  • 不再支持 NPN,NPN 是 TLS 为了支持 SPDY 的扩展,既然不支持 SPDY 了,这个也没必要支持了。被 ALPN 替代了。 扩展阅读:NPN 和 ALPN 的区别

其它新特性

OSX上加粗 emoji

emoji 可以用 font-weight:bold 了。之前会无效。

连续聚焦导航开始点

嗯,这个翻译好拗口。 sequential focus navigation starting point  是 HTML 标准定义的, 用于当在非聚焦的区域按下 Tab 或者 Shift+Tab 键时,浏览器应该开始搜索可聚焦区域。 这算是无障碍的一个特性,Chrome 终于支持了。

preload

<link rel=“preload” as=“…”>  

 这个,好像很牛逼的样子哦,之前的写法,只会讲preload的请求作为xhr,而定以后,就可以以正确的格式来匹配了。

<link rel=preload as=audio href=...> //<audio>  
<link rel=preload as=video href=...> //<video>  
<link rel=preload as=script href=...> //<script>, Worker's importScripts  
<link rel=preload as=style href=...> //<link rel=stylesheet>, CSS @import  
<link rel=preload as=font href=...> //CSS @font-face  
<link rel=preload as=image href=...> //<img>, <picture>, srcset, imageset  
<link rel=preload as=image href=...> //SVG's <image>, CSS *-image  
<link rel=preload href=...> //XHR, fetch  
<link rel=preload as=worker href=...> //Worker, SharedWorker  
<link rel=preload as=embed href=...> //<embed>  
<link rel=preload as=object href=...> //<object>  
<link rel=preload as=document href=...> //<iframe>, <frame>  

 同时,不再支持 <link rel="subresource">

当然还有其它的一些细碎的改进,这里不多提了。感兴趣的同学可以去阅读 Chrome 的 changelog


整理自: https://dev.opera.com/blog/opera-37/