Posted by 
首先提供一个数据，来自QQ空间8月份用户测试，ie6为27.96%，ie8为51.42%，chrome为7.93%，由此观之，html5 的普及使用还是需要一段时日。
不记流水账，进入主题。
笔记内容包括：
1、关于跨域的那些事
2、如何帮助用户来进行定位
3、HTML5 对渲染的优化
1、关于跨域的那些事
简单来说，跨域指的是一个站点中的资源去访问另外一个不同域名站点上的资源，这在web2.0的时代很常见，但由于浏览器的安全限制，网络连接的跨域访问时不被允许。解决方案如下：
- ★ 在同一域的服务器端建立一个代理，浏览器向该代理网址发送请求，然后该代理向其他域的网址发请求，在获取回复后，或作处理或按原样发回到浏览器 。
- 缺点：请求数过多；页面渲染服务器影响大；维护成本大。
- ★ 使用按需(On-Demand) Javascript 脚本。在页面内动态生成新的<script>，将其src属性指向别的网站的网址，这个网址返回的内容必须是合法的Javascript脚本，常用的是JSON消息。
- 缺点：给前段的数据需要call back，但其他平台服务器异常时，难以检测不可用，从而导致用户请求异常；请求的头无法支持给后台多参数；Post失效等。
- ★ 使用IFRAME。在页面内嵌或动态生成指向别的网站的IFRAME，然后这2个网页间可以通过改变对方的anchor hash fragment来传输消息。改变一个网页的anchor hash fragment并不会使浏览器重新装载网页，所以一个网页的状态得以保持，而网页本身则可以通过一个计时器(timer)来察觉自己anchor hash的变化，从而相应改变自己的状态(参考这个帖子中提及的Nikhil Kothari的历史控件中的方法)。
★ 采用CORS（Cross-Origin Resource Sharing），通过添加 HTTP 头的方法来判断哪些资源允许 Web 浏览器访问该域名下的信息。然而，对于那些 HTTP 请求导致用户数据产生副作用的请求方法（特别是对于除了GET、某些 MIME 类型的 POST 之外的 HTTP方法），该规范要求浏览器对请求进行“预先验”，通过发送 HTTP 的 OPTIONS 请求头询问服务器有哪些支持的方法，在征得服务器的同意后，再使用实际的 HTTP 请求方法发送实际的请求。服务器也可以通知客户端是否需要将验证信息（如 Cookie 和 HTTP Authentication 数据）随同请求一起发送。
舜子分享了 QQ空间小助手解决缓存清除问题的方法，利用的是XmlHttpRequest，代码我没记下来，可以参考这篇文章
XmlHttpRequest 2.0 的优点：
1、跨平台的数据移植性；
2、更加强大的数据可控性；体现在HTTP报头设置和读取，数据安全和中断处理机制，PrpgressEvent的新性能等。
3、多样化的数据提交方式。
这里舜子抛出了一个问题可以思考一下，如何回归原点，从不跨域开始？
PS：以下是个人感想，
我们为什么要跨域呢？业务的需要融合（Mashup）自己的 Web 应用，从而将请求分摊到不同的服务器，减轻单个服务器压力以提高响应速度；另外一个好处是可以将不同的业务逻辑分布到不同的服务器上以降低负载。
那么，如果服务器强悍到不需要其他服务器分摊，或者说服务器集群的虚拟资源池可以自己从底层实现弹性响应的话，那么是否还有跨域的必要呢？
现在是Web 2.0时代，但未来一定是云时代。
2、如何帮助用户来进行定位
测量是优化的第一步
利用新接口来进行监控——Navigation timing
Navigation Timing是获取页面性能数据api，能方便页面进行性能优化的分析，传统的页面分析方法是通过javascript的时间来计算，无法获取页面在网络及渲染上所花的时间，使用Navigation Timing就能很好地解决这个问题，具体它能取到哪些数据可以通过下图来看：
Navigation Timing目前只在一些比较新的浏览器上有支持，如Chrome、IE9等
我们需要考虑到的是：
1、业务在不同用户硬件环境上性能如何
2、业务如何在运行中更快
3、如何优化业务的用户体验（如何发现页面性能杀手，如何检测web、app的内存瓶颈，页面的功耗如何）
如何实现对用户CPU资源的监控（推荐学习）
对用户CPU资源监控无采集接口，但浏览器有CUP资源调度的接口，可以利用SetTimeout和SetInterval这两个函数，用SetInterval方法计时，实际上计到的时间并非你设定的那个Interval，而是跟实际的时长有一定的差值。当CPU比较闲时，这个差值会趋近于0；而忙时则会有较大的偏差。对这个差值做曲线图，就可以绘制出CPU的相对功率图。
当我们去除Iframe优化时，可以看出IE6 的CPU资源利用减少2.4%，Chrome为4.9%，综合上看是2.2%。
3、HTML5 对渲染的优化
Webkit的页面渲染小知识，小白如我者，请参考这篇文章，理解WebKit和Chromium: WebKit渲染基础 。
GPU 加速银弹
1、动画放弃使用 setTimeout/setInterval
2、简单动画使用CSS3 transition
3、使用CSS3 transform 取代以往的唯一，以及未来的所有形变行为
requestAnimationFrame —— 浏览器动画的里程碑
这是一个新的API，它是HTML5的一部分，它是在浏览器刷新重绘（浏览器一般重绘的频率在60HZ左右）之前透过requestAnimationFrame来通知即将要播放下一帧的动画，该方法有一个参数作为回调函数，我们可以讲下一帧的动画操作作为该回调函数，并且回调函数会自动被传入一个时间截参数，表示执行回调函数的那个时刻，将这个时刻与刚开始执行动画的时刻进行比较，我们可以精确得出动画系该时刻应该播放到的进度是怎样的，而且每调用该方法会返回一个整型的id值，获得这个值可以通过cancelAnimationFrame来取消动画的执行。实际上是一个对动画帧的一个管理，只不过将这个任务交给浏览器厂商自己做会更加好的时候，就有了这个requestAnimationFrame API的出现。
最后分享舜子关于如何学习和运用HTML5 的心得
√ 保持好奇心，不断实践
√ 以更高标准挑战现有业务
√ 直接尝试新的解决方案，在考虑向下兼容
备注：以上内容并不涵盖主讲人所分享的全部内容，部分内容为自己添加，欢迎查漏补缺，纸上得来终觉浅，绝知此事要躬行。