Chrome 49 详细解析(用了这么久Chrome)

一、浏览器兼容性

Chrome 49 支持多种操作系统,包括:Windows、Mac OS X、Linux、Android 等。具体的兼容性列表请查看官网提供的说明:https://www.google.com/chrome/browser/desktop/index.html

二、安全性增强

Chrome 49 实现了多项安全性增强措施,其中包括:

1、混合内容警告

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Chrome 49 在加载含有混合内容的网页(http 和 https 混合使用)时,会给出明确的警告,帮助用户在不安全的环境下使用浏览器时更加小心谨慎。

2、密码输入警告

<input type="password" autocomplete="current-password">

Chrome 49 会根据网站的实际情况,提示用户是否使用存在风险的密码自动完成功能。对于某些需要高度保护的网站,自动完成功能会被默认禁用。

三、网页性能优化

Chrome 49 实现了一些网页性能优化措施,主要包括:

1、WebRTC 优化

<script>
    var constraints = {
        audio: true,
        video: {
            width: 1280,
            height: 720
        }
    };
    navigator.mediaDevices.getUserMedia(constraints)
    .then(function(mediaStream) {
        var video = document.querySelector('video');
        video.srcObject = mediaStream;
    })
    .catch(function(err) { console.log(err.name + ": " + err.message); });
</script>

Chrome 49 优化了 WebRTC (Web 实时通信)的表现,可以更快的创建、操作基于网络的实时通信应用,如视频会议。

2、JavaScript 性能提升

for (var i = 0; i < array.length; i++) {
    // do something
}

Chrome 49 通过一些优化算法,提高了 JavaScript 执行性能。对于循环语句这类频繁但简单的操作,可以更快的执行。

四、其他改进

Chrome 49 还推出了其他改进,包括:

1、更高级的 Service Worker

importScripts('cache-polyfill.js');

self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll(
        [
          '/',
          '/index.html',
          '/styles/main.css',
          '/scripts/main.min.js',
          '/images/logo.png',
          '/images/icons/icon-192x192.png'
        ]
      );
    })
  );
});

self.addEventListener('fetch', function(e) {
  console.log(e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

Chrome 49 的 Service Worker 可以离线缓存和预取数据,使得网站离线时也能流畅使用。

2、Improved Push API

const pushSubscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlBase64ToUint8Array(applicationServerPublicKey)
});

fetch('/subscribe', {
  method: 'POST',
  body: JSON.stringify(pushSubscription),
  headers: {
    'content-type': 'application/json'
  }
});

Chrome 49 的 Improved Push API,允许开发者将推送服务器与 Service Worker 结合使用,可以更好的提供定制化、即时性更强的通知服务。

Published by

风君子

独自遨游何稽首 揭天掀地慰生平