再谈Yahoo关于性能优化的N条军规.pdfVIP

再谈Yahoo关于性能优化的N条军规 本来这是个老生常谈的问题 ，上周自成又分享了 些性能优化的建议 ，我这里再做 个全面的T ips 整理 ，谨作为查阅型的文档 ，不妥之处 ，还请指正 ； 如果你已经对yahoo这些优化建议烂熟于心 ，果断点这里 、 Yahoo 的军规条例 ： 谨记 ：80%-90%的终端响应时间是花费在下载页面中的图片 ，样式表 ，脚本 ，f lash等 ； 详细的解释来这里查 ：ht t p://develo per.yahoo .co m/perf o rmance/rules.ht ml 也可以直接f irebu 上 项项比对 ，如下图 ： 简单翻译解释下 ： 1、尽量减少HT T P请求个数——须权衡 合并图片 （如css sprit es ，内置图片使用数据 ）、合并CSS、JS ，这 点很重要 ，但是要考虑合并 后的文件体积。 2、使用CDN （内容分发网络 ） 这里可以关注CDN的三类实现 ：镜像、高速缓存、专线 ，以及智能路由器和负载均衡 ； 3、为文件头指定Expires或Cache-Co nt ro l ，使内容具 缓存性。 区分静态内容和动态内容 ，避免以后页面访问中不必要的HT T P请求。 4 、避免空的src和href 留意具有这两个属性的标签如link ，script ，im ，if rame等 ； 5、使用 z ip压缩内容 Gz ip压缩所有可能的文件类型以来减少文件体积 6、把CSS放到顶部 实现页面有秩序地加载 ，这对于拥有较多内容的页面和网速较慢的用户来说更为重要 ， 同时 ，HT ML规范清楚指出样式表要放包含在页面的head /区域内 ； 7、把JS放到底部 HT T P/1.1 规范建议 ，浏览器每个主机名的并行下载内容不超过两个 ，而问题在于脚本阻止了页面 的平行下载 ，即便是主机名不相同 8、避免使用CSS表达式 页面显示和缩放 ，滚动、乃至移动鼠标时 ，CSS表达式的计算频率是我们要关注的。可以考虑 次 性的表达式或者使用事件句柄来代替CSS表达式。 9、将CSS和JS放到外部文件中 我们需要权衡内置代码带来的HT T P请求减少与通过使用外部文件进行缓存带来的好处的折中点。 10、减少DNS查找次数 我们需要权衡减少 DNS查找次数和保持较高程度并行下载两者之间的关系。 11、精简CSS和JS 目的就是减少下载的文件体积 ，可考虑压缩工具JSMin和Y UI Co mpresso r。 12、避免跳转 为了确保“后退”按钮可以正确地使用 ，使用标准的 3XX HT T P状态代码 ；同域中注意避免反斜杠 “/” 的跳转 ； 跨域使用 A lias或者 mod_rew irt e建立 CNA ME （保存 个域名和另外 个域名之间关系的DNS记录 ） 13、剔除重复的JS和CSS 重复调用脚本 ，除了增加额外的HT T P请求外 ，多次运算也会浪费时间。在IE和Firef ox中不管脚本 是否可缓存 ，它们都存在重复运算JavaScript 的问题。 14 、配置ETa s Ent it y t a s （ETa s ）（实体标签 ）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器 中的原始内容是否匹配的 种机制 （“实体”就是所说的“内 容” ，包括图片、脚本、样式表等 ），是 比last -modif ied dat e更更加灵活的机制 ，单位时间内文件被修过多次 ，Et a 可以综合Inode(文件的 索引节点(inode)数) ，MT ime(修改时间)和Size来精准的进行判断 ，避开UNIX记录MT ime只能精确 到秒的问题。 服务器集群使用 ，可取后两个参数。使用ETa s减少Web应用带宽和负载。 15、使A JAX可缓存 利用时间戳 ，更精巧的实现响应可缓存与服务器数据同步更新。 16、尽早刷新输出缓冲 尤其对于css ，js文件的并行下载更有意义 17、使用GET 来完成A JAX请求 当使用X MLHt t pRequest 时 ，浏览器中的PO ST 方法是 个“两步走”的过程 ：首先发送文件头 ，然 后才发送数据。在url小于2K时使用GET 获取数据时更加有意义。 18、延迟加载 确定页面运行正常后 ，再加载脚本来实现如拖放和动画 ，或者是隐藏部分的内容以及折叠内容等。 19、预加载 关注下无条件加载 ，有条件加载和有预期的加载。 20、减少DO M元素个数 使用更适合或者在语意是更贴切的标签 ，要考虑大量DO M