翻译

A collection of 16 posts

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】

  • ytzong
    ytzong
OOCSS

[翻译]OOCSS FAQ

原文:http://wiki.github.com/stubbornella/oocss/faq(翻译时为Version 28) 翻译:ytzong 在OOCSS中怎么定义“对象”? 对象类似JAVA中的类,保持着OO的特征。 一个CSS对象由4部分组成: 可能是一个或多个DOM节点的HTML 由wrapper节点的class名开始的CSS样式声明 类似于背景图片和显示用的sprites组件以及 JavaScript行为,监听或者与对象关联的方法 这可能令人费解,因为每个CSS class不是其自身必要的对象,但可以是一个wrapper class的一个部件。比如: <div class="mod"> <div class="inner"> <div

  • ytzong
    ytzong
Let's make the web faster

[翻译]加速 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 样式,

  • ytzong
    ytzong
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 写在页面

  • ytzong
    ytzong
OOCSS

[翻译]驯服CSS选择器--健壮我们的样式表

PPT:Taming CSS Selectors 作者:Nicole Sullivan 翻译:ytzong CSS 文件的大小和所引起的 HTTP 的请求数 是 CSS 性能的最关键因素 回流(reflow)和渲染时间 (非常!)没那么重要 副本(duplication)比陈旧的规则(stale rules)更糟糕 因为我们有工具处理后者 定义缺省值 不要在每处都重复编码 不好的: #weatherModule h3{color:red;} #tabs h3{color:blue;} 推荐: h1, .h1{...} h2, .h2{

  • ytzong
    ytzong
用户体验

[翻译]重(zhòng)载下的动态 UI 设计技巧

TechTarget 主办的 Ajax Experience 2009 大会9月14日至16日在波士顿举行,业内大牛纷纷向 Web2.0 世界发起挑战,探讨一些诸如用户体验、高性能与可维护性、架构等伟大主题,放出的 PPT 在此。 下面是 Patrick Lightbody分享的后半段总结翻译(前半段为演示): PPT:Design Tips for Dynamic UIs Under Heavy Load 作者:Patrick Lightbody 翻译:ytzong 为失败而设计 不要忘记 AJAX 仍为网络应用 - 网络会由于各种原因失败 网络不可预知 为 AJAX 请求意外添加

  • ytzong
    ytzong
性能

IE 团队的前端性能优化建议

2009-3-18 ~ 2009-3-20,微软面向 Web 开发和 Web 设计人员的 MIX 09 年度大会在拉斯维加斯举行,本届大会的主题是”The Next Web Now”,关于开发技术和设计怎么更加有效结合起来,服务未来互联网的发展趋势。120多场精彩的课程,3000多来自各国的专家参会。 视频及PPT在此下载,虽然其中多数是微软的产品宣讲,不过也有一些很有价值的分享,比如: C23FWindows Internet Explorer 8 in the Real World: How Is Internet Explorer 8 Used C24FMeasuring Social Media Marketing C26FDesigning the Windows

  • ytzong
    ytzong
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:

  • ytzong
    ytzong
CSS

[翻译]纯 CSS 无 Hack 跨浏览器的多列等高

原文:Equal Height Columns with Cross-Browser CSS and No Hacks 作者:Matthew James Taylor 翻译:ytzong 纯 CSS 打造多列等高并不像想象中那么容易。本文着重讲述多列布局出现的问题,之后提供一个在所有浏览器都正常工作的简单解决方案。这个方法 100% 无 CSS hack,无图片,无 javascript,甚至可以用在最严格编码的网站上。 多列等高的问题 上例中有包含不同内容的 3 列,可以看出存在的问题是列的背景色随着其包含内容的高度而自适应展开。这是我们要解决的问题。如何使所有的列等高?或具体的说,如何使所有列的高度等于最高列的高度?这很棘手,因为我们不清楚每列将会多高,哪一列是最高的。不能简单的给所有列一个固定的高度,如果内容很少将会导致页面底部有大片空白;

  • ytzong
    ytzong
Let's make the web faster

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

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

  • ytzong
    ytzong
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

  • ytzong
    ytzong
HTML

[翻译]谨慎使用 Iframe

原文:Using Iframes Sparingly 原作者:Steve Souders 翻译:ytzong 使用 iframe 可以轻易的调用其他网站的页面,但应谨慎使用。它比创建其他 DOM 元素(包括 style 和 script)多耗费数十甚至数百倍的性能。增加100个不同元素的时间对比显示iframe 是多么耗费性能: 使用 iframe 的页面通常没有这么多 iframe,所以创建 DOM 的时间不用多虑。更值得关心的是 onload 事件和连接池。 iframe 阻塞 onload window 的 onload 事件尽快执行非常重要。这会让浏览器的载入进度指示器完成,用户依据此判断页面是否已经加载完。而 onload

  • ytzong
    ytzong
性能

[翻译]简化CSS选择器

原文:Simplifying CSS Selectors 原作者:Steve Souders 翻译:ytzong 本文是《EvenFaster Web Sites: Performance Best Practices for Web Developers (Paperback)》的最后一章。上篇帖子《Performance Impact of CSS Selectors》(中文版)最后提出了一段假设: 对大多数网站而言,优化CSS选择器活得的性能提升很小,不值得去计较。有些配合Javascript交互的CSS规则会明显的拖慢页面。这是应该关注的焦点。所以我开始关注现实中影响页面性能的CSS样式相关的小问题。 我收到了很多反馈。David Hyatt的文章《Writing Efficient CSS for use in

  • ytzong
    ytzong
性能

[翻译]CSS选择器的性能影响

原文:Performance Impact of CSS Selectors 原作者:Steve Souders 翻译:ytzong 一些关于CSS选择器性能的讨论引起了我的兴趣。 第一个是Shaun Inman写的《合格的CSS选择器(CSS Qualified Selectors)》,实际上这篇博文并没有提到CSS性能,不过有一个来自David Hyatt(Safari 和 WebKit 的架构师,同时为 Mozilla, Camino, Firefox 工作)的评论: 如果你非常在意页面的性能那千万别使用CSS3选择器。实际上,在所有浏览器中,用 class 和 id 来渲染,比那些使用同胞,后代选择器,子选择器(sibling, descendant

  • ytzong
    ytzong