有的网页看起来并不大但打开会很卡，有的网页虽然很长但使用流畅，占用用户电脑的内存与CPU就影响这些。
浏览器问题，有各自的浏览器处理内存问题会影响到，但几乎没办法控制得了，Windows上的：
- IE系列，刷新回收的量不大，但最小化会释放内存，。
- Firefox2据说也会在最小化回收，可我从没见过最垃圾，用多少是多少，基本不回收。据说prototype的ajax还会引起内存一直增加。
- Opera最好。一直控制得很好。不存在什么问题。。
Linux的内存分配机制与Win的不一样，有多少用多少，如果浏览器占光时说不定会干掉系统。
页面问题，浏览器渲染页面会消耗内存和CPU，能减少一点就减少点。
结构上
- 使用DocType，告诉浏览器你在用什么，html4也有DTD。也许Transitional更适合你
- 如果使用的是XHTML并能保持良好结构的话，记得输出相应的MIME跟XML头1，可以减少浏览器的代码检查，
- 保持结构的完整，不要让浏览器帮你补全代码。
- 控制页面的文件大小，可以通过程序把为了看代码比较舒服的缩进去掉。2~3K也是大小。
- iframe会产生新的页面，其实有很多方式可以代替iframe
- 引入的JS与CSS可以适当合并，同样背景图片也可以合并，甚至有人连Flash都合并
- 给已知宽高的内容图片/Object加上宽度的属性可以减少页面的局部重渲染
表现上
- 质量99跟70的jpg在大多数情况下只有文件有大小不一样。gif的也一样，特别是小图标，256色跟128色的差别是文件大小．
- flash动得太快吃CPU很大，控制每秒的帧数及动画的效果可以减少一些，如果把品质用中低显示会省很多资源，但这样却牺牲了效果。。quality属性 有时选择Autolow2 或者Autohigh会更适合，没必要一直low 或者best，
- flash使用矢量图会节省文件大小，但计算复杂的图形跟动画时花的是CPU。复杂的太多滤镜，则会占用大量内存，模糊滤镜有减少些3。
- IE的滤镜也是比较占用内存，同时也有兼容性问题。全屏的半透明很吃资源的。
- 2*2的图片跟8*8的图片大小差不多，但是平铺背景2*2却占用大很多。
- gif动画同样有帧的概念，别把gif当成flash来玩就行。
行为上
- 别为了使用一个$()引入整个prototype或jQuery，它们有更多的作用。
- AJAX很帅。但是用xml会用上XML解析器，有人推荐用JSON，可是这样要eval数据，其实可以直接import已经是对象的script来用。只是要多传个对象名，或者把对象名写死，或者像flickr那样
jsonFlickrApi({"xxx":"xxx"})，直接当函数用，挖哈哈。 - 实现某些效果时能用
visibility:hidden解决时就别用display:none来玩。 - 在这里强调js变量要注全局跟局部等等的意义并不大，JS复杂的地方也不是一两句能说得清的，关注大家关注月影的正在出版的新书吧。^^
其实这里有的内容有不少跟如何快速的呈现我们的网页相近，不过那篇是以处理服务端为主，但在很多时候，节省服务端资源消耗的同时也会节省客户端的资源消耗。
再其实，这篇已经蹲在草稿箱里好久了，一直没有时间去整理。现在给的也不是完整的，因为没有完整，慢慢补充吧。
- 产生问题：虽然会引起浏览器的模式问题，但问题是可以解决滴。参考Serving up XHTML with the correct MIME type，派送XML头浏览器不会容错显示，出现错误结构会导致整个页面无法显法。
- Autolow: 优先考虑速度，但是也会尽可能改善外观。 回放开始时，消除锯齿功能处于关闭状态。 如果 Flash Player 检测到处理器可以处理消除锯齿功能，就会打开该功能。
Autohigh:开始时回放速度和外观两者并重，必要时会牺牲外观来保证回放速度。 回放开始时，消除锯齿功能处于打开状态。如果实际帧频降到指定帧频之下，就会关闭消除锯齿功能以提高回放速度。使用此设置可模拟“消除锯齿”命令（“视图”>“预览模式”>“消除锯齿”）。 - 模糊滤镜:使用模糊滤镜时，如果用于 blurX 和 blurY 的值是 2 的整数次幂（例如 2、4、8、16 和 32），则可以加快计算速度，并且可以使性能提高 20% 到 30%（flash的帮助是介样说滴）。
共有 26 条评论
2*2的图片跟8*8的图片大小差不多，但是平铺背景2*2却占用大很多。
—————————————-
是你的测试结果么？
“2*2的图片跟8*8的图片大小差不多，但是平铺背景2*2却占用大很多。”
有没有依据啊?
要用数据说明问题啊?
这是自己的归档。。没必要所有的介绍都拿数据来说明问题。
既然不相信我，自己也没测试，又何必讨论呢?
俺已在俺的BLOG上为你作了链接了,请查收!
能给俺的也加一下吗? :D
俺的名为: 七彩学习笔记
BLOG地址是: http://www.qicaispace.net/blog/
2*2的图片跟8*8的图片大小差不多，但是平铺背景2*2却占用大很多。
我作证，2*2的背景 加上20个链接，你就可以测试出来。
对于 2×2 图片平铺这个问题，我认为是事实。同样的情况在 Flash 中尤为明显。
@art05 不好意思~我这边的友链只加认识的人
图片最好使用偶数，这是由于显卡原理。
显卡计算单数也会拆成双数+单数，单数实际都是略等于某个值了的。所以，用双数会节省几步运算，对于大量图片站来说会有较明显影响。
前面说了代码、背景和图片等……但对于视频来说，又会有技巧。比如FLV VP6，长宽尺寸为16的倍数，压缩质量会有非常大非常明显的区别。
收藏至20ju.com
不错，比我总结的好，而且我也没能写出来。
看完，学到不少，自己貌似最近变懒了，跟新和学习的速度也变缓慢了–！
学习了，发现个错误：
别为了使用一个$()引入整个pretotype或jQuery，它们有更多的作用。
这里pretotype应该是prototype
@lin516 谢谢了，已经修正~
aoao, 我们正好最近在做站点优化, 你能不能推荐一下, 对网站性能的测试一般都用什么工具呀? 谢谢.
这篇文章真的很棒,yahoo!的前端团队也有不少类似的文章, 可惜都是英文,看起来很费劲.
我还是希望各个条目都能有强有力的数据来说明,这样更直观,也更有权威性.
@Rlog 类如Firefox 插件StatusbarEx 或者像Process Viewer这类的都可以看到占用。。
大型测试的一般都是测试部使用自己写的工具在测。
我又不是写论文，要权威性干啥
哈哈…… 你总算发话了…… 不错，说得都很实际。
能详细讲讲 flickr 的 jsonFlickrApi？ 俺没研究过,不了解…
直接函数传参？然后怎么处理…？
yahoo!的前端团队的文章都是英文没错，但是他们的文章都有足够的数据支持，真的非常好！
赞，顺路推荐一本YSlow的作者写的书，High Performance Web Sites: Essential Knowledge for Front-End Engineers
[...] aoao在博客上写文章研究如何减少网页内存与CPU占用,对页面制作的方方面面及不同浏览器之间的差异做了细致的分析.也许,巨头们也注意到了越来越注重交互的页面对系统资源越来越多的占用.微软今天通过下载中心放出了一个用来改善Windows XP和Windows Server 2003系统的AJAX网站浏览体验的补丁. KB942840：安装本更新程序可以提高使用Ajax的网站的性能。 下载页面：XP/Server 2003、XP 64-bit、Server 2003 64-bit 忽然想到一个问题:微软出这个补丁不知道主要是针对自家的IE,还是对能运行于Windows平台的所有浏览器一视同仁,如果只是自家孩子有奶吃,那就…那位有条件的朋友测试一下@_@ [...]
看了半天，不是太懂
希望AOAO多写点,感觉你的文字比千鸟的质量高多了.
很多方式可以代替iframe
说说看洒..
有哪些方式,用起来方便么?方便程度能跟iframe比么?,
我也早看不顺眼iframe,一个自适应高度就够恼的.
2*2的图片跟8*8的图片大小差不多，但是平铺背景2*2却占用大很多。
这个是不是说平铺背景 单位图片太小反而不好?
@skyblue 封装好 js，用起来就像iframe一样。呵呵。。。
2*2…..是的。
用ajax来实现iframe的功能,对于内嵌内容需要用到JS及DOM后期绑定的,实现起来还是很痛苦的..