转自：http://ued.alimama.com/
1、尽量减少HTTP请求个数——须权衡
合并图片（如css sprites，内置图片使用数据）、合并CSS、JS，这一点很重要，但是要考虑合并后的文件体积。
2、使用CDN（内容分发网络）
这里可以关注CDN的三类实现：镜像、高速缓存、专线，以及智能路由器和负载均衡；
3、为文件头指定Expires或Cache-Control，使内容具有缓存性。
区分静态内容和动态内容，避免以后页面访问中不必要的HTTP请求。
4、避免空的src和href
留意具有这两个属性的标签如link，script，img，iframe等；
5、使用gzip压缩内容
Gzip压缩所有可能的文件类型以来减少文件体积
6、把CSS放到顶部
实现页面有秩序地加载，这对于拥有较多内容的页面和网速较慢的用户来说更为重要，同时，HTML规范清楚指出样式表要放包含在页面的<head />区域内；
7、把JS放到底部
HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个，而问题在于脚本阻止了页面的平行下载，即便是主机名不相同
8、避免使用CSS表达式
页面显示和缩放，滚动、乃至移动鼠标时，CSS表达式的计算频率是我们要关注的。可以考虑一次性的表达式或者使用事件句柄来代替CSS表达式。
9、将CSS和JS放到外部文件中
我们需要权衡内置代码带来的HTTP请求减少与通过使用外部文件进行缓存带来的好处的折中点。
10、减少DNS查找次数
我们需要权衡减少 DNS查找次数和保持较高程度并行下载两者之间的关系。
11、精简CSS和JS
目的就是减少下载的文件体积，可考虑压缩工具JSMin和YUI Compressor。
12、避免跳转
为了确保“后退”按钮可以正确地使用，使用标准的 3XXHTTP状态代码；同域中注意避免反斜杠 “/” 的跳转；
跨域使用 Alias或者 mod_rewirte建立 CNAME（保存一个域名和另外一个域名之间关系的DNS记录）
13、剔除重复的JS和CSS
重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。
14、配置ETags
Entity tags（ETags）（实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制（“实体”就是所说的“内 容”，包括图片、脚本、样式表等），是比last-modified date更更加灵活的机制，单位时间内文件被修过多次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载。
15、使AJAX可缓存
利用时间戳，更精巧的实现响应可缓存与服务器数据同步更新。
16、尽早刷新输出缓冲
尤其对于css，js文件的并行下载更有意义
17、使用GET来完成AJAX请求
当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。在url小于2K时使用GET获取数据时更加有意义。
18、延迟加载
确定页面运行正常后，再加载脚本来实现如拖放和动画，或者是隐藏部分的内容以及折叠内容等。
19、预加载
关注下无条件加载，有条件加载和有预期的加载。
20、减少DOM元素个数
使用更适合或者在语意是更贴切的标签，要考虑大量DOM元素中循环的性能开销。
21、根据域名划分页面内容
很显然， 是最大限度地实现平行下载
22、尽量减少iframe的个数
考虑即使内容为空，加载也需要时间，会阻止页面加载，没有语意，注意iframe相对于其他DOM元素高出1-2个数量级的开销，它会在典型方式下阻塞onload事件，IE和Firefox中主页面样式表会阻塞它的下载。
23、避免404
HTTP请求时间消耗是很大的，有些站点把404错误响应页面改为“你是不是要找***”，这虽然改进了用户体验但是同样也会浪费服务器资源（如数据库等）。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。
24、减少Cookie的大小
去除不必要的coockie
使coockie体积尽量小以减少对用户响应的影响
注意在适应级别的域名上设置coockie以便使子域名不受影响
设置合理的过期时间。较早地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。
25、使用无cookie的域
确定对于静态内容的请求是无coockie的请求。创建一个子域名并用他来存放所有静态内容。
26、减少DOM访问
缓存已经访问过的有关元素
线下更新完节点之后再将它们添加到文档树中
避免使用JavaScript来修改页面布局
27、开发智能事件处理程序
有时候我们会感觉到页面反应迟钝，这是因为DOM树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用event delegation（事件代理）是一种好方法了。如果你在一个div中有10个按钮，你只需要在div上附加一次事件句柄就可以了，而不用去为每一个按 钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。
你同样也不用为了操作DOM树而等待onload事件的发生。你需要做的就是等待树结构中你要访问的元素出现。你也不用等待所有图像都加载完毕。
你可能会希望用DOMContentLoaded事件来代替 事件应用程序中的onAvailable方法。
28、用<link>代替@import
在IE中，页面底部@import和使用<link>作用是一样的，因此最好不要使用它。
29、避免使用滤镜
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用 AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。
30、优化图像
尝试把GIF格式转换成PNG格式，看看是否节省空间。在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）
31、优化CSS Spirite
在Spirite中水平排列你的图片，垂直排列会稍稍增加文件大小；
Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
便于移动，不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小但对于用户代理来说它需要更少的内存来把图片解压为像素地图。 100×100的图片为1万像素，而1000×1000就是100万像素。
32、不要在HTML中缩放图像——须权衡
不要为了在HTML中设置长宽而使用比实际需要大的图片。如果你需要：
<img width=”100″ height=”100″ src=”mycat.jpg” alt=”My Cat” />
那么你的图片（mycat.jpg）就应该是100×100像素而不是把一个500×500像素的图片缩小使用。这里在下文有更有趣的分析。
33、favicon.ico要小而且可缓存
favicon.ico是位于服务器根目录下的一个图片文件。它是必定存在的，因为即使你不关心它是否有用，浏览器也会对它发出请求，因此最好不要返回一 个404 Not Found的响应。由于是在同一台服务器上，它每被请求一次coockie就会被发送一次。这个图片文件还会影响下载顺序，例如在IE中当你在 onload中请求额外的文件时，favicon会在这些额外内容被加载前下载。
因此，为了减少favicon.ico带来的弊端，要做到：
文件尽量地小，最好小于1K
在适当的时候（也就是你不要打算再换favicon.ico的时候，因为更换新文件时不能对它进行重命名）为它设置Expires文件头。你可以很安全地 把Expires文件头设置为未来的几个月。你可以通过核对当前favicon.ico的上次编辑时间来作出判断。
Imagemagick可以帮你创建小巧的favicon。
34、保持单个内容小于25K
因为iPhone不能缓存大于25K的文件。注意这里指的是解压缩后的大小。由于单纯gizp压缩可能达不要求，因此精简文件就显得十分重 要。
35、打包组件成复合文本
页面内容打包成复合文本就如同带有多附件的Email，它能够使你在一个HTTP请求中取得多个组件（切记：HTTP请求是很奢侈的）。当你使用这条规 则时，首先要确定用户代理是否支持（iPhone就不支持）。
分享到：
相关推荐
做为网站建设者，如何提高网站性能，成为炙手可热的问题，本课程让你清楚影响网站性能的原因，从而避免不利于网站性能的因素，借助Yslow工具快速找到问题所在，提高网站性能，让提高网站性能、快速访问网站不在是...
特点：简单明了，认真阅读思考，绝对对你的开发有帮助，给自己的技术投点资吧
### YaHoo军规：前端性能优化35条不可触犯规则详解 #### 一、前言 随着互联网技术的不断发展，用户对于网页加载速度的要求越来越高。为了提供更好的用户体验，YaHoo公司总结出了一套被称为“YaHoo军规”的性能优化...
前端优化-雅虎军规35条 网页内容上 1 减少http请求次数 80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。减少组件数必然能够减少页面提交的HTTP请求...
【SQL开发的21条军规】初学者和专家都需要关注的准则，旨在提升SQL Server数据库开发的效率和性能。以下是一些关键知识点： 1. **了解你的工具**：掌握T-SQL命令和SQL Server提供的工具至关重要。花时间熟悉所有...
雪碧图合并 js合并（一般合并到3~5个，css类似） css合并 2.减少DNS查找次数 不要在一个网站中有太多域 用到CDN静态服务器 DNS预解析 //DNS预解析 3.尽量免去不必要的跳转，比如index跳转到home ...
《雅虎屏幕取色器：网页设计师与开发者必备的色彩工具》 雅虎屏幕取色器，这是一款专为网页设计人员和开发人员量身打造的实用工具，它以其高效、便捷的特性在业内广受好评。这款软件的绿色版设计，意味着无需安装，...
《雅虎助手：曾经的经典与浏览器修复技术》 在互联网早期，雅虎助手（Yahoo! Assistant）是一款备受用户青睐的工具软件，它为用户提供了一系列的在线浏览辅助功能，包括网页加速、广告拦截、隐私保护等。这款软件在...
标题中的“伪雅虎Tab标签”指的是在网页设计中，模仿雅虎网站风格创建的Tab式导航栏。这种设计方式可以提升用户体验，使用户能够快速地在不同的内容区域之间切换，而无需刷新整个页面。Tab标签是网页界面设计中常见...
雅虎天气API调用是开发人员获取实时天气信息的一种方式，它允许开发者通过发送特定的请求到雅虎的服务器，然后获取返回的JSON或XML格式的天气数据。这个API广泛应用于移动应用、网站或者任何需要集成天气信息的系统...
【标题】：“超逼真仿雅虎天气界面” 在移动应用设计领域，界面的美观性和用户体验是至关重要的因素。这个项目旨在实现一个高度仿真雅虎天气应用的Android界面，为用户提供与雅虎天气应用类似的视觉体验和交互效果...
《雅虎天气YahooWeatherHttp API详解及应用》 在当今数字化时代，获取实时天气信息对于日常生活、商业决策以及科学研究都至关重要。雅虎WeatherHttp API是一个强大的工具，它为开发者提供了简单便捷的方式，来获取...
雅虎天气API是一个流行的API，允许开发者获取关于全球各地天气的实时信息。本文将深入探讨如何利用雅虎天气API来获取数据，并通过JSON格式解析这些数据。 首先，雅虎天气API提供了关于天气的各种信息，包括温度、...
《雅虎面试攻略：从公司文化到面试技巧的全面解析》 雅虎，这个曾经的互联网巨头，一直是众多求职者向往的圣地。了解雅虎，不仅仅是对其辉煌历史的认知，更是为了在激烈的职场竞争中占据先机。本文将从公司概况、...
雅虎地图yahoomaps 1.0,挺好用的
"雅虎取色器"是一款便捷的屏幕颜色采集工具，专为需要精确选取屏幕上颜色的用户设计。这款软件小巧易用，无需安装，是设计师、程序员以及任何对颜色选取有需求的人的理想选择。其主要功能包括RGB和16进制颜色格式的...