共计 2371 个字符，预计需要花费 6 分钟才能阅读完成。
一、尽可能减少 Http 请求
什么是 Http 请求？
官方回答：从客户端到服务器端的请求消息包括消息首行中对资源的请求方法 资源的标识符及使用协议
菜鸟回答：当你打开网页的时候 所看到的文字图片多媒体等 都是从服务器获取的 每一个内容的获取 就是 http 请求
把图片、js、css 合并
二、使用 CDN（内容分发网络）
官方回答：内容分发网络 意思是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节 使内容传输的更快、更稳定
：在离你最近的距离、最快的速度获取内容
三、添加 Expire/ Cache-Control 头
阿帕奇开启了 expire 模块 当浏览器发送资源请求的时候 阿帕奇返回资源的同时 会返回一个名为 expire 的 Http 头
expire 头的内容是一个时间值 值就是资源在本地的过期时间、这个值会存在本地
在本地缓存阶段找到一个本地对应的资源值
当前时间还没超过资源的过期时间 就直接使用这一个资源 不会发送 Http 请求
Cache-Control
是 Http 协议中常用的头部之一
顾名思义 它是负责控制页面的缓存机制 如果该头部指示缓存
缓存的内容也不会存在本操作流程和 expire 相似
但也有不同的地方 cache-control 有更多的选项
而且也有更多的处理方式
四、启用 Gzip 压缩
什么是 Gzip 压缩 ：文件先放服务器压缩 然后在存储 存储完毕以后 浏览器在对压缩过得内容进行解压缩 并执行
目前的浏览器都能很好的支持 Gzip
所有的文本内容都要进行 Gzip 压缩
五、把 css 放在页面之上
Cascading Style Sheets（层叠样式表单）
为了提高浏览器的渲染性能 避免页面空白或闪烁的问题
六、把 js 放在页面最底部
如果 js 出现问题 不会出现空白影响用户浏览
七、避免在 css 中使用 Expressions
什么是 css Expressions：
css Expressions 俗称 css 表达式
是用来把 css 属性 和 js 表达式关联起来
（这里的 css 属性可以是固有属性 也可以是自定义属性
就是说 css 属性后面可以是 js 表达式 css 的值 = js 表达式计算的结果）
css Expressions 计算频率很高
在页面显示和缩放、页面滚动、鼠标移动的时候都会从新计算一次
所有使用 css Expressions 浏览器会不停的计算 以至于严重影响性能 及 用户体验
八、把 js 和 css 放到外部文件中
单独提取：
提高了 js 和 css 的复用性 减少页面体积 提高 js 和 css 的可维护性
写在页面里：
减少请求 提升页面渲染速度
写在页面内的情况：
1、js 和 css 只应用于一个页面
2、一个不经常被访问的页面
3、脚本和样式很少的情况（不多于 20、30 行）
九、减少 DNS 查找
如：用户打开 www.a.com 这个网址时 计算机是不知道它是什么、在哪里 必须通过一种转换机制才能到达这个页面
这种机制能够将 www.a.com 对应到一个 IP 地址 10.96.141.1（一个计算机理解的地址）
在通过这个 IP 地址（使用 DNS 查找）对应到 www.a.com 这个网站
整个过程就是 DNS 查找过程
查找的过程中浏览器是得不到任何资源的（这期间浏览器是一片空白）
所以要对这个过程进行缓存 缓存之后就可以减少这种查找过程
不同浏览区缓存时间不同（IE：30m 火狐：60s 谷歌：60s）
当缓存时间长时：减少 DNS 的重复查找 节省时间
当缓存时间短时：浏览器会及时检查网站服务器的变化 保证正确性
根据自身情况进行缓存时间的长短
多域：网址 图片 js 分别使用不同的域名
单域：网址 图片 js 使用同一域名
十、压缩 js 和 css
1、去除不必要的空白符、格式符、注释（代码格式化）
2、简写方法名参数名压缩 js 脚本
建议：在正式上线前 将 js、css 都进行压缩 使线上版本是最轻量级的 大幅提升网址性能
十一、避免重定向
重定向：用户原始请求被重新转向到了其他请求（用户想访问的页面 a 被重新 指向了页面 b）
重定向状态码：
301 Moved Permanently：用户请求的页面被移动到另外的位置（永久重定向）
302 Found：用户请求的页面被找到了但不在原始位置（临时重定向）
对用户没有什么影响 但对搜索引擎影响就大了 都是从 a 跳到 b
301 会识别一次 第二次就会直接跳到 b
302 每次都是 先找 a 再跳到 b
为什么避免重定向
无论 301 还是 302 都增加了服务器的往返次数
当用户发起访问 a 网站的请求时 服务器收到 由于 a 重定向到 b 所以服务器返回一个重定向信息（301 或 302）
并把这个信息写在 header 中 并在 header 中返回一个新的地址（b 的地址）
但是 body 中是空白的 用户端在收到这个反馈后 就知道地址改了
所以用户的浏览器会再一次请求 请求到 b 然后才打开网页 下载资源
用户多了一次获取新地址的过程 必然会增加浏览器到服务器的返回次数
（要尽量减少 Http 请求 所以要避免使用）
十二、移除重复的脚本
<input type="text" id="test"/>
<script>
var number = 0
</script>// 外部引入代码
number++;
document.getElementById('test').value = number;
// 外部引入两遍 会影响 value 值十三、配置实体标签（ETag）
全称 Entity Tag（实体标签）它包含在响应头部中 属于 Http 协议 受 web 服务支持
它是使用特殊字符串 来标识某个请求资源版本
当用户通过浏览器来服务器请求资源的时候 服务器会进行比较
如果两遍的 ETag 一致 那就代表浏览器和服务器的 ETag 一致 这就意味着该资源没有修改过 和以前是一样的
这时候服务器会返回一个 304 码 告诉浏览器对比一致 可以使用本地缓存的版本 会帮助服务器减轻很多负担
这就是配置 ETag 的好处
十四、使用 ajax 缓存
ajax：不重新加载页面的情况下 使客户端与服务器交换数据 可使网站数据分批加载 也可局部更新
post：每次都执行 不能被缓存
get：同一地址不重复执行 可以被缓存
辅助工具 Yslow
