一.尽可能的减少HTTP请求数
http请求：从客户端到服务器端的请求消息。包括消息首行中，对资源的请求方法、资源的标识符及使用的协议。
简单地说，当你打开网页时，你所看到的文字、图片、多媒体等等，这一切内容，都是你从服务器获取的，每一个内容的获取，就是一个HTTP请求。
二.使用CDN（内容分发网络）
CDN：内容分发网络。意思是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
简单地说，在离你最近的地方，放置一台性能好链接顺畅的副本服务器，让你能够以最近的距离，最快的速度获取内容。
三.添加Expire/Cache-Control头
Expire：expire头的内容是一个时间值，值就是资源在本地的过期时间、存在本地，在本地缓存阶段，找到一个对应的资源值，当前时间还没超过资源的过期时间，就直接使用这一个资源，不会发送http请求。
CACHE-CONTROL：是http协议中常用的头部之一，顾名思义，他是负责控制页面的缓存机制，如果该头部指示缓存，缓存的内容也会存在本地，操作流程和expire相似，但也有不同的地方，cache-control有更多的选项，而且也有更多的处理方式。
四.启动Gzip压缩
五.将css放在页面最上面
CSS：Cascading Style Sheets(层叠样式表单)
为什么要将CSS放在页面的最上面呢？在IE下，如果将它放到网页内容中，它禁止了网页内容的顺序显示；Firefox虽不会禁止网页内容的显示，但它会待CSS加载后，会重画页面，导面页面出现闪烁。
六.将script放在页面最下面
页面加载顺序：html->head->meta->title内容（网页标题）->style加载样式，解析样式->link加载外部样式表文件，解析外部样式表->script加载外部脚本文件，解析外部脚本文件，执行外部脚本->body->div->img加载外部图像文件，页面初始化完毕。
将script放在页面最下面，会先将内容先呈现出来。
七.避免在CSS中使用Expressions
CSS Expressions = CSS表达式
CSS表达式在后台计算次数比我们想象的要多的多，它不仅在页面显示和缩放、页面滚动，甚至在移动鼠标时就要重新计算一次。
示例代码：在你移动鼠标时，它会在input输入框中写入CSS Expressions计算了多少次。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Expression测试</title>
<script type="text/javascript">
var i=0;
function scare() {
i++;
document.getElementById('run').value = i;
return;
}
</script>
<style type="text/css">
ul a {width:expression(this.offsetWidth > 750 ? scare() : scare());}
</style>
</head>
<body>
当移动鼠标时，CSS Expression计算了<input id="run"/>次
<ul>
<li><a href="http://localhost:8088/t.html">aaa</a></li>
<li><a href="http://localhost:8088/t.html">bbb</a></li>
<li><a href="http://localhost:8088/t.html">ccc</a></li>
</ul>
</body>
</html>运行结果：
当我们移动鼠标时，input框内的数字在不停的增加。这说明，当我们使用CSS Expressions时，在移动鼠标时，浏览器会不停的计算，这会严重影响浏览器的性能，影响用户的体验。
注意：以上示例请在IE6、IE7下执行。
八.把JavaScript和CSS都放到外部文件中
1.单独提取的好处：
a.提高了js和css的复用性
b.减少页面体积
c.提高了js和css的可维护性
2.写在页面内的好处：
a.减少页面请求数
b.提升页面渲染速度
3.是不是见到JS和CSS就提取出来呢？不是的，如下情况就没必要提取出来。
a.只应用于一个页面
b.不经常被访问到
c.脚本和样式很少
3.是不是见到JS和CSS就提取出来呢？不是的，如下情况就没必要提取出来。
a.只应用于一个页面
b.不经常被访问到
c.脚本和样式很少
九.减少DNS查询
目前IE、Firefox、Chorme等浏览器都带有缓存，能自动减少DNS查询。但不同浏览器缓存时间不太一样，IE默认是30分钟，Firefox、Chorme是60s。
当缓存时间长时，会减少DNS的重复查找 ，节省时间。
当缓存时间短时，能及时的检测网站服务器的变化，保证正确性。
在实际场景中，可根据自已网站的特点（多域还是单域），如是多域可将html文件、图片、js分别提出来，放到分别的域名下；单域则将html文件、图片、js等放在同一个服务器上；且如果采用多域的话，则需要考虑采用几个域名是最合适的。
十.压缩JavaScript和CSS
减少文件体积的方法：
1.去除不必要的空白符、格式符、注释符
2.简写方法名、参数名压缩JS脚本
JQuery1.11.0为例：
所以，在正式上线项目前，将JavaScript和CSS都进行压缩，使线上版本是轻量级的，大幅提升网站性能。
十一.避免重定向
1.重定向：原始请求被重新转向到了其他请求。简单来讲，就是用户访问页面a，被重新指向了页面b。
2.重定向状态码：
301：Moved Permanently被移动到了另外的位置，表示永久重定向
302：Found用户请求的页面被找到了，但不在原始位置，表示临时重定向
搜索引擎会定期爬网，301重定向能智能分析，会记录新地址，删除老地址；302则会找旧地址，再跳到新地址。
3.为什么避免重定向？
用户多了获取新地址的过程，增加了浏览器到服务器的访问次数。因此应避免使用重定向。
十二.移除重复的脚本
实例：
test.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="test" value=""/>
<script type="text/javascript">
var number = 0;
</script>
<script type="text/javascript" src="js.js"></script>
<!-- 无意中多引用了一次 -->
<script type="text/javascript" src="js.js"></script>
</body>
</html>js.js
number++;
document.getElementById('test').value = number;
运行结果：2
十三.配置实体标签
ETag：Entity Tag(实体标签)，属于HTTP协议，受web服务支持。
它是使用特殊的字符串来标识某个请求资源版本。
十四.使AJAX缓存
全称：Asynchronous JavaScript and XML，异步的JavaScript和XML，局部请求。
两种方法：
POST：每次都执行，不被缓存
GET：同一地址不重复执行，可以被缓存
POST与GET的区别：
PS：Yslow网站性能优化工具
Yslow插件能对网站进行分析，给一些建议、一些规则，一步一步的优化自已的网站。
注意：在安装Yslow时，首先要安装好Firebug工具。
1.测试规则
(v2)=22个测试规则
(v1)=13个测试规则
Small Site or Blog=14个测试规则
2.Grade：等级视图，网页评分A->F
如http://www.imooc.com/的测试结果为：C
3.优化规则
如上红框出来的“Make fewer HTTP requests”、“Avoid empty src or href”等就是Yslow给出的优化规则。
优化规则里面的子标签还对你优化规则进行了分类，如CONTENT、COOKIE、CSS、IMAGES、JAVASCRIPT、SERVER。
4.Component视图
组件视图，检视各个元素占用空间大小。
5.Statistics
统计信息视图，与Components相似。图形表示。
6.Tools
工具集，列出一个比较好的工具优化网站。
JSLint：检验JavaScript正确性
ALLJS：展示网页中用的JS，不仅包括外联JS，还包括内联JS（在什区域）
All JS Beautified：将js以可读的方式展示
ALL JS Minified：删除换行、空格等，压缩JS
ALL CSS：展示网页中用的CSS
YUI CSS Compressor：压缩CSS
ALL Smush.it TM：优化图片的功能，图片在线优化网站（YAHOO服务于图片优化的网站，不降低图片质量像素，减少图片体积）
Printable View：将分析打印成报告
扫一扫
1624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
