首先我们要知道性能到底是什么意思，下面是百度百科的答案!
so下面我们就按照性能影响力去介绍，也是我看《高性能网站建设指南》的一份笔记吧！
1、减少http请求【文件大小、文件数量、请求路程】
1、图片地图（图片导航、多个导航需要请求多次http，优化方式之一就是使用图片地图）【感觉有点确定、css3不会淘汰？？】
图片地图要用到map和area标签
map标签用于客户端的图片映射；area标签指定映射区域。兼容性良好，可放心使用
<map name="nav_test">
<area shape="rect" coords="0 0 300 110" href="https://www.so.com/" target="_blank" alt="360搜索">
<area shape="rect" coords="0 110 300 212" href="https://www.baidu.com/" target="_blank" alt="百度搜索">
</map>
2、CSS Sprites（就是雪碧图）
减少图片请求数量：将多张图片弄成一张图片，这样多张图片的请求就变成一张图片的请求
3、内联图片（IE不支持）
使用base64的图片
内联图片使用img不会缓存到浏览器，但是css可以
4、合并脚本和样式表
*2、使用内容发布网络（Content Delivery Networ====CDN
）
- CDN的关键技术主要有内容存储和分发技术。
- 网站用户分布广，cdn是分布在不同地方的服务器，能有效的减少用户请求时间
- 一般用于发布静态内容，比如图片、脚本、样式表、Flash、静态文件更容易存储且较少依赖性
- 如果应用程序web服务器离用户更近，则一个HTTP请求的响应时间将缩短。另一方面，如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。
- 缺点可能是它花费了钱，并且给你的部署过程增加了一些复杂性。
- 主要的优点是提高了向用户发送内容的速度。
什么时候使用CDN？ - 当你有一个有某种静态内容(图片、脚本、CSS等)的流行的公共网站时，它将是最有效的。
CDN是性能提升器吗？ - 总的来说，是的。当用户发出特定请求时，动态确定最接近该用户的服务器(根据服务器和用户之间节点的最小数目)。这优化了将内容传递给该用户的速度。
3、添加Expires头
- 如上图可看出缓存有效期持续到2020年8月6日10点34
- 页面中的组件，应设置长久Expires头，这样其会被缓存，在后续请求时，浏览器直接从硬盘上读取
- Expires：缓存最后到期时间，在到期时间之前相对应缓存内容可以不再请求http，直接加载缓存即可，但是时间有限，必须和客户的时间一致
- Max-age和mod_expires（浏览器支持http1.1才可以） 上图代表最长时间可存储2592000秒
- Cache-Control Max-age可以替代exprise头，但也可两者并存，静态文本等都可使用缓存去减少http请求，但也有可能缓存清空、刷掉、溢出等情况。
- 长久的expires头会被缓存，后续内容直接从硬盘读取 ，故通过使用expires头避免额外的http请求，可以减少一半时间
4、压缩组件（从文件大小方面去减少htpp的响应时间）
- Web服务器看到请求中有content-encoding这个头就会使用客户端列出的一种方法[gzip\deflate]去压缩响应
- 压缩通常能讲响应的数据量减少将近70%
- 压缩方式：gzip\deflate等，Gzip最理想的压缩方式
- 压缩成本：服务器花费额外的CPU周期去压缩，客户端对压缩文件进行解压缩
- 压缩内容有：通常有脚本和样式表，图片和pdf文件不应该压缩因为已经压缩了再压缩只会浪费cpu资源，还会增加文件大小
- 当浏览器通过代理发送请求：两种情况【第一种情况：第一个浏览器不支持gzip，服务器就不压缩响应，第二个浏览器支持，服务器返回的是缓存中未压缩的，也OK；第二种情况：第一个浏览器支持压缩，服务器的缓存里面便是压缩了的内容，第二个浏览器不支持压缩，却接受到了压缩的内容不得完蛋】故解决在响应中添加上述图片第二张vary头，告诉代理缓存多个响应版本即可
5、将样式表放在顶部
- 放在顶部会有较好的用户体验，页面是逐步加载出来的【否则就有可能导致白屏和闪烁】
- html加载完毕，样式仍在加载的话，页面会需要重新绘制
- 通常使用外部引入有两种方式，@import、link，推荐使用link引入
- @import会有兼容性问题需要处理，并且不能被js动态修改，而link引入则无兼容问题，而且link引入权重较大
6、将脚本放在底部
- 减少页面呈现的时间，对页面的影响较小
7、避免css表达式
页面加载之后的性能问题
例如：background：expression(表达式),
现在应该很少使用css表达式了
表达式是动态设置css属性的一种强大并且危险的方式
8、使用外部js、css
-
内联速度更快些，但是html通常没有被浏览器缓存，需要每次加载，外链的js、css则会被缓存不用每次加载
-
使用外部js、css提高组件重用率（例如公共的导航footer等）、方便操作
9、减少DNS【Domain Name System 】查找
- 网络是通过ip地址查找服务器的
- Dns讲主机名映射到ip地址，输入地址时连接到浏览器的dns解析器会返回服务器的IP地址
- 浏览器查找ip需要20-120ms，dns查找完成钱浏览器不能有任何操作
- Dns查找可以被缓存起来以提高性能
10、精简js
11、避免重定向
12、删除重复脚本
13、配置ETag
14、使用ajax可缓存
总结：提高网站性能最主要就是和http请求做斗争，减少请求时间【例如上面的2】、请求数量【例如1、3】，书还没看完，本文章会继续更新的，有空的精神小伙们还是很支持去多看看这本书的，毕竟自己的感悟还是最重要的
