IE 团队的前端性能优化建议 2009-3-18 ~ 2009-3-20,微软面向Web

1、IE 团队的前端性能优化建议2009-3-18 Web 开发和 Web 设计人员的 MIX 09 年度大会在拉斯”The Next Web 120 多来自各国的专家参会。视频及 PPT 在此下载，虽然其中多数是微软的产品宣讲，不过也有一些很有价值的分享， 比如：C23FWindows Internet Explorer 8 in the Real World: How Is Internet Explorer 8 UsedC24FMeasuring Social Media MarketingC26FDesigning the Windows 7 Desktop ExperienceT25FW

2、eb Development Using Microsoft Visual Studio: Now and in the Future今天主要介绍的是 IE 下PPT出处：Building High Performance Web Applications and Sites演讲人：John Hrvatin，Internet Explorer 项目经理翻译整理：ytzong中心思想：适用于所有浏览器没有魔术般的解决方案考虑可维护性Top 100 sites IE8 CPU 使用情况：84% 16% JScript & DOMTop AJAX sites IE8 CPU 使用情况：67% 33%

3、 JScript & DOM从以下 4 个方面来进行优化：CSS 性能：尽量减少样式未用到的样式增加了下载量浏览器必须解析并匹配所有选择器失败代价很高！简化选择器复合的元素选择器会慢尽可能使用 class 或 ID 选择器元素选择器尽可能简单使用子(descendent)选择器不要混用 RTL 和 LTR减少样式使这一切变得简单DEMO：差：table tr td ul li color: green;table tr td ul li color: green;好：li#pass color: green;li#pass color: green;差：ul li color: purple;

4、ul li color: purple;好：ul li color: purple;ul li color: purple;不要使用 expressions慢 通常被这样评价IE8 标准模式不支持尽量减少页面重新布局移动内容体验不好浏览器执行不必要的任务简化!优化符号解析(Symbol )Watch for expensive name lookups缓存多次查找的为本地变量当需要时才优化考虑可维护性JavaScript 代码低效()Use the native JSON objectTurn large switch statements into lookupsAvoid property

5、 access methodsMinimize DOM interactionUse querySelectorAll for groups当需要时才优化考虑可维护性HTTP 性能：典型的访问缓存请求JSCSS图片HTML浏览器布局执行脚本更多下载针对此的优化：不要拉伸图片JS/CSS(sprites)重复访问HTTP 请求Pragma:no-cache简单的 HTTP 请求Pragma:no-cache时间条件If-modified-since:date,timeIf-modified-since:date,time请求GET /images/banner.jpg HTTP/1.1Host:

6、 HYPERLINK / If-Modified-Since:Wed, 22 Feb 2006 04:15:54 GMT响应HTTP/1.1 304 Not ModifiedContent-Type:Last-Modified:Wed, 22 Feb 2006 04:15:54 GMT提供缓存内容Expires:Expires:Max-age:#seconds请求GET /images/banner.jpg HTTP/1.1Host: HYPERLINK / 响应HTTP/1.1 200 OKContent-Type: image/jpegExpires:Fri, 12 Jun 2009 02:50:50 GMT请求GET /images/ban