性能 256色 从神飞那里借了本《高性能网站建设进阶指南》,粗略读了一遍,最重要的收获是第10章图像优化纠正了我对256色的认识 Truecolor versus palette image formats Using the RGB color model, how many distinct colors can you represent in a graphic? The answer is more than 16 million: 255 * 255
性能 Building Performance Into the New Yahoo! Homepage via Building Performance Into the New Yahoo! Homepage by Nicholas Zakas, Yahoo!
性能 background:url(#)的性能问题 很久之前写了使用 background:url(#) 解决 IE bug,原理是请求一张不存在的图片,不过写法有些问题。 写为 background:url(#) 会增加一个http请求,比如当前css的URL为 http://imgcache.qq.com/qzonestyle/project/css/xxx.css 则会多请求一次 http://imgcache.qq.com/qzonestyle/project/css/xxx.css# 和以下类似(
CSS Data URI&MHTML: 用还是不用? YAHOO!的性能专家Stoyan Stefanov先后发布了 data:urls – what are they and how to use them MHTML – when you need data: URIs in IE7 and under Data URIs, MHTML and IE7/Win7/Vista blues Uncompressed data
性能 CSS 换行符对 Gzip 的影响 之前做过一个css压缩工具,其中一点是把换行符都去了,有同事反映这个做法过于极端,加上服务器端会进行gzip,这个换行符到底要不要去掉呢?于是拿了个项目中的文件简单测试了一下(css中的注释已去除): 去除换行符保留换行符gzip前46.4KB48.0KBgzip后8.40KB8.58KB可见,去除换行符对性能来说还是有好处的,不过前提是注意这些[网站优化原则](http://www.99css.com/196)。
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时首先构造一个内部文件树来代表所有显示的元素。
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&
OOCSS [翻译]Object Oriented CSS 什么是面向对象的 CSS 框架?工具?哲学? Object-oriented CSS is a coding paradigm that styles “objects” or “modules”—nestable chunks of HTML that define a section of a webpage—with robust, reusable styles. 很像语言的进化 令
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
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
HTML 用 HTML 5 来提升性能 Google 网站管理员 Jens Meiert 发表了一篇《Using HTML 5 for performance improvements》,大部分内容在《Reducing the file size of HTML documents》(中文版)中都有提及,新增的部分为async(和 defer),以下为该段的翻译: async 和 defer 使用在 script 元素上。 要解释为什么这些属性会提升性能,最好是看一下未使用时发生了什么
OOCSS [翻译]驯服CSS选择器--健壮我们的样式表 PPT:Taming CSS Selectors 作者:Nicole Sullivan 翻译:ytzong CSS 文件的大小和所引起的 HTTP 的请求数 是 CSS 性能的最关键因素 回流(reflow)和渲染时间 (非常!)没那么重要 副本(duplication)比陈旧的规则(stale rules)更糟糕 因为我们有工具处理后者 定义缺省值 不要在每处都重复编码 不好的: #weatherModule h3{
性能 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
Let's make the web faster [翻译] gzip 压缩原理 译注:本打算翻译这篇文章的,搜了一下已经有人翻译过了,不过网站失效,通过快照获取了部分内容,在此基础之上进行了一些修改,感谢 bloglei。 原文:How gzip compression works 作者:Kevin Khaw & Eric Higgins,Google 网站管理员 翻译:bloglei &ytzong 译注:以上是 youtube 视频,请翻墙观看(文中图片调用自 picasa,若显示不了也要翻墙)
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 变化)对
HTML [翻译]减小 HTML 文件 原文:Reducing the file size of HTML documents 作者:Jens Meiert & Kevin Khaw, Google 网站管理员 翻译:ytzong 改善网站速度的一个很明显的方法是减小 HTML 文件的大小。有一些方法,比如:硬压缩(rigid compression),acupuncture-like ID 及改变 class 名(译注:这一句不是很确定,
HTML [翻译]谨慎使用 Iframe 原文:Using Iframes Sparingly 原作者:Steve Souders 翻译:ytzong 使用 iframe 可以轻易的调用其他网站的页面,但应谨慎使用。它比创建其他 DOM 元素(包括 style 和 script)多耗费数十甚至数百倍的性能。增加100个不同元素的时间对比显示iframe 是多么耗费性能: 使用 iframe 的页面通常没有这么多 iframe,所以创建 DOM 的时间不用多虑。更值得关心的是 onload 事件和连接池。
性能 谨慎使用 CSS Sprites CSS sprites 是网站速度的优化很重要的一环,但也有其对性能的不利之处。 Vladimir Vukićević 的博文《To Sprite Or Not To Sprite》提到: CSS sprites 的最大问题是内存占用。非精确构造的 sprite 图片会占用意想不到的内存空间。以 WHIT TV 网站为例,这里是一张sprite 图片,1299×15,000 的png,已经经过很好的压缩,实际下载大小只有26K左右,但是浏览器不会转换压缩的图像数据。
性能 [翻译]简化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规则会明显的拖慢页面。