Let's make the web faster

[转译]优化浏览器渲染

ISD Webteam的大布同学（twitter：@tc_bryanzhang）牺牲了自己大量的xx时间翻译了Page Speed系列中的Optimize browser rendering，因其blog还在重新打造当中，所以偶这里先转载了，以下是翻译全文：优化浏览器渲染资源被下载到客户端后，浏览器仍需加载，解释，并渲染HTML、CSS和Javascript代码。只需利用现有浏览器的特性简单地编排你的代码和页面，就可以提升客户端的性能。使用高效率的CSS选择器避免CSS expressions 将样式表放在页面顶部指定图像尺寸使用高效率的CSS选择器概述避免低效率的匹配大量元素的键选择器【key selectors】可以加快页面渲染。详细信息当浏览器解析HTML时首先构造一个内部文件树来代表所有显示的元素。然后浏览器根据标准的CSS级联、继承和排序规则，为元素指定匹配的各种样式。在Mozilla里的执行情况(可能在其他浏览器也是这样)，CSS搜索引擎通过样式规则为每个元素找到匹配的样式。该引擎由右至左评估每个规则，从最右边的选择器开始（称为“键”【Key】

[翻译]加速 JavaScript：处理 DOM

原文：Speeding up JavaScript: Working with the DOM 作者：KeeKim Heng, Google 页面工程师翻译：ytzong 当制作 RIA(Rich Internet Application) 时，我们使用 JavaScript 来改变或增加元素。这是靠 DOM (Document Object Model 文档对象模型) 来完成的，这是如何影响 app 的速度呢？处理 DOM 会使浏览器 reflow (浏览器决定如何显示东东的进程)。直接操作 DOM，改变元素的 CSS 样式，

Let's make the web faster

[翻译]用Page Speed Activity捕获并分析浏览器渲染

原文：Capturing and analyzing browser paint events using Page Speed Activity 作者：Bryan McQuade, 软件工程师翻译：ytzong 安装 Page Speed 是一个 Firebug/Firefox 扩展，安装地址：http://code.google.com/speed/page-speed/download.html 背景：逐步呈现快速的网页逐步呈现。即随浏览器的加载而逐步显示其内容。一个逐步呈现的页面给浏览者页面在加载的视觉回馈，并尽快给给用户请求信息。Google和Yahoo 都建议逐步呈现页面，比如把 CSS 写在页面

HTML

用 HTML 5 来提升性能

Google 网站管理员 Jens Meiert 发表了一篇《Using HTML 5 for performance improvements》，大部分内容在《Reducing the file size of HTML documents》(中文版)中都有提及，新增的部分为async(和 defer)，以下为该段的翻译： async 和 defer 使用在 script 元素上。要解释为什么这些属性会提升性能，最好是看一下未使用时发生了什么 — 各自的脚本在用户代理(浏览器，下同)继续解析页面前将被提取并直接执行，有时这个行为是我们想要的，有时不是。新的 async 属性允许各自的脚本在可用时异步执行。HTML 4

Let's make the web faster

[翻译] gzip 压缩原理

译注：本打算翻译这篇文章的，搜了一下已经有人翻译过了，不过网站失效，通过快照获取了部分内容，在此基础之上进行了一些修改，感谢 bloglei。原文：How gzip compression works 作者：Kevin Khaw & Eric Higgins，Google 网站管理员翻译：bloglei &ytzong 译注：以上是 youtube 视频，请翻墙观看（文中图片调用自 picasa，若显示不了也要翻墙）浏览器请求有无 gzip 压缩的高级预览服务器未 gzip：浏览器：连接服务器并请求页面。通知服务器，浏览器支持 gzip “Accept-Encoding:

Let's make the web faster

[翻译]界面提示与感知延迟

原文：UI messaging and perceived latency 作者：Roma Shah，用户体验研究员翻译：ytzong 对一般的用户而言，速度并不意味着性能。用户对网站速度的感知很大程度上取决于其整体感受，包括他们如何高效的从网站获取所需，以及网站反映出来的易响应性。当设计 Web 站点或 Web 应用时，谨记用户来你的网站是有目的的。他们能越快（越容易）达到他们的访问目的越好。如果用户在获取内容时遇到了许多困难，他们将会离开你的网站，而去能让他们更快达成目标的其他网站。节省用户时间，让他们感觉没那么慢有很多工作可以做，本文只涉及提示信息。提示信息，要考虑三点： **网站是否足够简单和直观，首次访问者是否可以很容易上手？**如果不是，花些时间去设计首次运行经验（first-run-experience）提示。比方说，你的网站是一个拥有数项功能的强大的 Web 应用。

Let's make the web faster

[翻译]减少 reflow

原文：Minimizing browser reflow 作者：Author: Lindsey Simon 翻译：ytzong 浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构（geometries）的进程叫做 reflow。由于 reflow 是一种浏览器中的用户拦截（user-blocking）操作，所以了解如何减少reflow 次数，及不同的文档属性（DOM 层级（DOM depth），CSS 效率，不用类型的 style 变化）对 reflow 次数的影响对开发者来说非常必要。有时reflow 页面中的一个元素会 reflow 它的父元素（译注：这里是复数）以及所有子元素。有多种用户操作和 DHTML

HTML

[翻译]减小 HTML 文件

原文：Reducing the file size of HTML documents 作者：Jens Meiert & Kevin Khaw， Google 网站管理员翻译：ytzong 改善网站速度的一个很明显的方法是减小 HTML 文件的大小。有一些方法，比如：硬压缩（rigid compression），acupuncture-like ID 及改变 class 名（译注：这一句不是很确定，原文：There are several ways to do this, from rigid compression