PlanABC - 怿飞’s Blog » 网站优化

淘宝海量图片存储与CDN系统

怿飞 — Wed, 30 Jun 2010 05:44:17 +0000

各浏览器的并行连接数（同域名）

怿飞 — Fri, 07 May 2010 02:21:27 +0000

Browser	HTTP/1.1	HTTP/1.0
IE 6,7	2	4
IE 8	6	6
Firefox 3+	6	6
Safari 3+	4	4
Chrome 3+	4	4
Opera 10+	4	4

扩展阅读：《Roundup on Parallel Connections》

页面中 CSS 加载方式的优化

怿飞 — Tue, 25 Mar 2008 05:04:52 +0000

1、应该将 CSS 放置于结构的上方（一般放置于 head 元素内）。CSS 是解释型语言，Firefox 和 IE 在等待 CSS 传输完成之前不会渲染任何东西。只有将 CSS 前置，才可在浏览器解析结构时，对页面进行渲染。

This causes the blank white screen problem. The page is totally blank until the stylesheet at the bottom is downloaded, on the order of 6-10 seconds for this page. The browser is waiting for the stylesheet to be loaded before it renders anything else in the page, even the static text.

导致的问题就是，页面会有一段时间“朴素”，突然之间又“华丽”，用户体验很不好。

2、尽量使用的样式导入方式，而减少 @import 的使用，更勿使用多层嵌套的 @import 。因为在 IE 里， @import 相当于将放在页面尾部。

This is a valid syntax, but, even though it’s in the document’s HEAD, it breaks progressive rendering and instead causes the blank white screen and Flash of Unstyled Content problems.

扩展阅读：

《Flash of Unstyled Content (FOUC)》

提高Web页面的性能（二）

怿飞 — Sun, 23 Mar 2008 13:53:47 +0000

最近 Yahoo! Exceptional Performance 在《优化网站性能的 14 条规则》的基础上又增加了 20 条新的规则。

1. 尽早清除缓冲区	[server]
2. AJAX 请求使用“GET”方法	[server]
3. 延迟加载组件	[content]
4. 预加载组件	[content]
5. 减少 DOM 元素的数量	[content]
6. 跨域分离组件	[content]
7. 减少 iframes 的数量	[content]
8. 不出现 404	[content]
9. 减小 cookie 的体积	[cookie]
10. 为组件使用 cookie-free 的域名	[cookie]
11.减少访问 DOM 的次数	[javascript]
12. 开发巧妙的事件处理程序	[javascript]
13. 优先选择使用而非 @import	[css]
14. 避免使用 filters	[css]
15. 优化图片	[images]
16. 优化 CSS sprites	[images]
17. 不要在 HTML 中缩放图片	[images]
18. 减小 favicon.ico 的体积并缓存	[images]
19. 保持组件在 25K 以下	[mobile]
20. 将组件分拆到多个文档中	[mobile]

更详细具体的介绍内容可看 Stoyan Stefanov 的 PPT：《High Performance Web Pages》（ PPT 与下同，如有需要原版可以 Email 我，邮箱见右侧）：

提高Web页面的性能（一）

怿飞 — Sat, 22 Mar 2008 14:35:10 +0000

优化网站性能的14条规则（更新）

1. 尽可能的减少 HTTP 的请求数	[content]
2. 使用 CDN（Content Delivery Network）	[server]
3. 添加 Expires 头(或者 Cache-control )	[server]
4. Gzip 组件	[server]
5. 将 CSS 样式放在页面的上方	[css]
6. 将脚本移动到底部（包括内联的）	[javascript]
7. 避免使用 CSS 中的 Expressions	[css]
8. 将 JavaScript 和 CSS 独立成外部文件	[javascript] [css]
9. 减少 DNS 查询	[content]
10. 压缩 JavaScript 和 CSS (包括内联的)	[javascript] [css]
11. 避免重定向	[server]
12. 移除重复的脚本	[javascript]
13. 配置实体标签（ETags）	[css]
14. 使 AJAX 缓存	[content]

详细请看：Best Practices for Speeding Up Your Web Site

如果具体想看下你网站在这14条规则下的表现，可以用 Yahoo 开发的 YSlow 工具（Firefox 下 FireBug 的插件）。

URL 优化的一个技巧

怿飞 — Tue, 18 Mar 2008 04:38:51 +0000

今天承志看到的，感觉比较有收获，分享一下：

When generating hyperlinks, always include a trailing slash if possible. For instance, navigating to http://msdn.microsoft.com/ie takes one more roundtrip than http://msdn.microsoft.com/ie/. When the browser navigates to the /ie url, the server merely sends down a 301 to the /ie/ url. Both links work, but the second version is faster.

也就是说，在地址栏中发送 URL：http://msdn.microsoft.com/ie ，服务器将会产生一个 301 转向至 http://msdn.microsoft.com/ie/。

所以直接发送 URL：http://msdn.microsoft.com/ie/ 速度将会更快，当然这种速度是感觉不到的，但优化应该“尽可能”。

Update 08-3.20：

今天乱游荡竟然看到了原话的出处，来自 IE 官方Blog 文章《Internet Explorer and Connection Limits》一文。