99css: 八月 2009

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

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

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

出处：Building High Performance Web Applications and Sites
演讲人：John Hrvatin，Internet Explorer 项目经理
翻译整理：ytzong

中心思想：

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

Top 100 sites IE8 CPU 使用情况：

84% - 布局，渲染，格式化...
16% - JScript & DOM

Top AJAX sites IE8 CPU 使用情况：

67% - 布局，渲染，格式化...
33% - JScript & DOM

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

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 标准模式不支持
- 尽量减少页面重新布局
  - 移动内容体验不好
  - 浏览器执行不必要的任务
- 简化!
优化符号解析(Symbol Resolution)(译注：原文更详细)
- Watch for expensive name lookups
- 缓存多次查找的为本地变量
- 当需要时才优化
- 考虑可维护性
JavaScript 代码低效(译注：原文更详细)
- Use the native JSON object
- Turn large switch statements into lookups
- Avoid property access methods
- Minimize DOM interaction
- Use querySelectorAll for groups
- 当需要时才优化
- 考虑可维护性

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 底部

99css

YSlow 规则权重

IE8 CPU 耗费情况

webrebuild.ORG第三周年座谈会

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

简介

订阅数

标签

归档

链接

抠抠