标签translation下的文章

花花你为什么不叫海鲜 发布于 07月20, 2017

ES8新特性

alt

TC39在7月末正式发布EcmaScript 8或者叫做 EcmaScript 2017。在过去的一年里,我们就讨论了很多关于EcmaScipt标准的事情。目前,每年发布一个新的ES规范版本标准。2015年发布ES6,2016年发布ES7,但是你还记得ES5是什么时候发布的么?发生在2009年,在JavaScript奇迹般兴起之前。

阅读全文 »

花花你为什么不叫海鲜 发布于 01月09, 2017

【译】性能日志 » 使用HTTP2和渐进式JPEG图片更快的加载图像

原文链接:Performance Calendar » Even Faster Images using HTTP2 and Progressive JPEGs

众城平台翻译链接:性能日志 » 使用HTTP2和渐进式JPEG图片更快的加载图像 (感谢月影大大推荐文章)

tl;dr: 渐进式图像在HTTP 2上渲染得更快,从而增加感知性能。控制渐进JPEG扫描图层来实现只用25%的图像数据展示具有核心意义的图像内容。对于渐进式JPEG使用HTTP Server Push,来最大化关键图像的渲染性能。

阅读全文 »

花花你为什么不叫海鲜 发布于 12月21, 2016

【译】多进程架构

题目:多进程架构

原文链接:Multi-process Architecture

不像大多数web浏览器,谷歌浏览器使用了许多操作系统进程来保持各个网站相互分离和计算机的其余部分的分离。通过这篇博客,我将告诉你,在当今的网站,为什么使用混合架构体统会是一个巨大的成功。同时,我也会谈到,浏览器的哪一部分数据哪个进程,在什么情况下浏览器会创建新的进程。

1.为什么在浏览器中使用多进程

当大多数现在的浏览器被设计出来的时候,有那么一段时间,网页是很简单的,有极少的代码或者说干脆就没有代码。那么浏览器渲染在同一个进程中去渲染你所有浏览网页,以保持资源的低利用率就很合理了。

但是,现如今,我们可以看到主要转向活跃的网页内容,从拥有大量JS和Flash的网页到完整的“网络应用app”,比如:Gmail。大量的app都是内嵌浏览器,就像普通的应用跑在一个操作系统上。正如一个操作系统,浏览器必须保证这些应用程序是彼此分离的。

阅读全文 »

花花你为什么不叫海鲜 发布于 12月08, 2016

【 译】Page Visibility API

当一个网站是可见或点击选中的状态时 Page Visibility API 可以让你获取到这种状态。 在用户使用切换标签的方式来浏览网页时,非常合理的情况是任何在后台页面都不会展示给用户。 当用户最小化网页或者浏览到其他标签的网页时,API将发送一个关于当前页面的可见信息的事件{{event("visibilitychange")}} 。你可以检测该事件然后执行一些活动或是展示不同的效果。比如,如果你的网站app正在播放一个视频,也许当用户浏览其他浏览器时它可以暂停,那么当用户切换回来的时候,就可以继续播放了。用户可以继续观看,不会因为浏览其他的浏览器导致丢失当前视频的进度。

关于iframe的可见性的状态等同于它的父层iframe。用CSS属性隐藏iframe并不会触发visibility事件也不会改变内容文本的状态。 好处

这个API在节约资源上是非常有用的,当网页不可见时,这个API通过提供给开发者可以操作不必须的任务的接口。

使用情景

一些例子:

  • 网站有图片轮播效果,只有在用户观看轮播的时候,才会自动展示下一张幻灯片。
  • 显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
  • 页面想要检测是否正在渲染,以便可以准确的计算网页浏览量
  • 当设备进入待机模式时,网站想要关闭设备声音(用户按下电源键关闭屏幕) 开发者在过去使用不完善的代理来处理这一点。比如, 当你的页面不处于活动状态时,在window上声明一个 onblur/onfocus 处理器来帮助你了解页面不是活动状态,但是它并没有告诉你页面是对用户隐藏的。The Page Visibility API 解决了这个问题。(在和window上声明 onblur/onfocus 处理器这种方式相比,关键不同在于当另一个页面处于激活状态并且浏览器窗口丢失了焦点时,页面不会隐藏。 页面只有在用户切换到其他标签或最小化窗口时,才会被隐藏。)

例子

看一个 在线的例子 (带声音的视频) 在此例中,当你切换到另一个标签时视频会暂停,当你返回到当前标签时视频会再次播放,代码如下:

// 设置隐藏属性和改变可见属性的事件的名称
var hidden, visibilityChange; 
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

var videoElement = document.getElementById("videoElement");

// 如果页面是隐藏状态,则暂停视频
// 如果页面是展示状态,则播放视频
function handleVisibilityChange() {
  if (document[hidden]) {
    videoElement.pause();
  } else {
    videoElement.play();
  }
}

// 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
  // 处理页面可见属性的改变
  document.addEventListener(visibilityChange, handleVisibilityChange, false);

  // 当视频暂停,设置title
  // This shows the paused
  videoElement.addEventListener("pause", function(){
    document.title = "Paused";
  }, false);

  // 当视频播放,设置title
  videoElement.addEventListener("play", function(){
    document.title = "Playing"; 
  }, false);

}

属性

document.hidden Read only

如果页面处于被用户认为是隐藏状态时返回true,否则返回false。

document.visibilityState Read only

是一个用来展示文档可见性状态的字符串。可能的值:

  • visible : 页面内容至少是部分可见。 在实际中,这意味着页面时非最小化窗口的前景选项卡。
  • hidden : 页面内容对用户不可见。 在实际中,这意味着文档可以是一个后台标签,或是最小化窗口的一部分,或是在操作系统锁屏激活的状态下。
  • prerender : 页面内容正在被预渲染且没有对用户是不可见的(被当做隐藏,以 document.hidden 为目的 ). 文档可能初始状态为prerender,但绝不会从其它值转为该值。 注释:浏览器支持是可选的。
  • unloaded : 页面正在从内存中卸载。 注释:浏览器支持是可选的。
//startSimulation 和 pauseSimulation 在其他地方定义
function handleVisibilityChange() {
  if (document.hidden) {
    pauseSimulation();
  } else  {
    startSimulation();
  }
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);

附:

MDN翻译链接:https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visibility_API

MDN英文文档链接:https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

阅读全文 »