2009-3-18 ~ 2009-3-20，微软面向 Web 开发和 Web 设计人员的 MIX 09 年度大会在拉斯维加斯举行，本届大会的主题是”The Next Web Now”，关于开发技术和设计怎么更加有效结合起来，服务未来互联网的发展趋势。120多场精彩的课程，3000多来自各国的专家参会。

视频及PPT在此下载，虽然其中多数是微软的产品宣讲，不过也有一些很有价值的分享，比如：

今天主要介绍的是 IE 团队给出的前端性能优化建议，下面是摘要翻译，有兴趣的话可以看下原PPT

中心思想：

  • 适用于所有浏览器
  • 没有魔术般的解决方案
  • 考虑可维护性

Top 100 sites IE8 CPU 使用情况：

  • 84% – 布局，渲染，格式化…
  • 16% – JScript & DOM

Top AJAX sites IE8 CPU 使用情况：

  • 67% – 布局，渲染，格式化…
  • 33% – JScript & DOM

从以下4个方面来进行优化：

1.CSS 性能：

  • 尽量减少样式
  • 未用到的样式增加了下载量
  • 浏览器必须解析并匹配所有选择器 - 失败代价很高！
  • 简化选择器 - 复合的元素选择器会慢
  • 尽可能 - 使用 class 或 ID 选择器
  • 元素选择器尽可能简单
  • 使用子(child)选择器代替后代(descendent)选择器
  • 不要混用 RTL 和 LTR
  • 减少样式使这一切变得简单

DEMO：

差：

table tr td ul li {color: green;}

好：

li#pass {color: green;}

差：

ul li {color: purple;}

好：

ul > li {color: purple;}

  • 不要使用 expressions - 慢 – 通常被这样评价
  • IE8 标准模式不支持
  • 尽量减少页面重新布局 - 移动内容体验不好
  • 浏览器执行不必要的任务
  • 简化!

2.优化符号解析(Symbol Resolution)(译注：原文更详细)

  • Watch for expensive name lookups
  • 缓存多次查找的为本地变量
  • 当需要时才优化
  • 考虑可维护性

3.JavaScript 代码低效(译注：原文更详细)

  • Use the native JSON object

  • Turn large switch statements into lookups

  • Avoid property access methods

  • Minimize DOM interaction

  • Use querySelectorAll for groups

  • 当需要时才优化

  • 考虑可维护性

4.HTTP 性能：

典型的访问

  • 从服务端/缓存请求
  • JS
  • CSS
  • 图片
  • HTML
  • 浏览器 - 布局
  • 执行脚本
  • 更多下载

针对此的优化：

  • 不要拉伸图片
  • 分别合并JS/CSS
  • 合并图片(sprites)

重复访问

  • 有条件的 HTTP 请求 - 简单的 HTTP 请求 Pragma: no-cache
  • 时间条件 If-modified-since: date,time

请求

GET /images/banner.jpg HTTP/1.1
Host:  www.microsoft.com
If-Modified-Since:
 Wed, 22 Feb 2006 04:15:54 GMT

响应

HTTP/1.1 304 Not Modified
Content-Type:  image/jpeg
Last-Modified:
 Wed, 22 Feb 2006 04:15:54 GMT
  • 提供缓存内容
  • 时间条件 Expires: date,time

Max-age: #seconds

请求

GET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com

响应

HTTP/1.1 200 OK
Content-Type: image/jpeg
Expires:  Fri, 12 Jun 2009 02:50:50 GMT

请求

GET /images/banner.jpg HTTP/1.1

响应

无响应：从缓存请求服务

要点

  • 减少请求数 - 外联JS/CSS/图片
  • 使用缓存
  • 减小请求量 - 使用 HTTP 压缩
  • 使用条件请求
  • 避免阻塞因素 - 将 JS 放在 HTML 底部