高并发大流量专题---3、前端优化（减少HTTP请求次数）
一、总结
一句话总结：
图片地图：使用<map><area></area></map>标签。图片地图允许你在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片上的哪个位置。
CSS Sprites：SS Sprites中文翻译为CSS精灵，通过使用合并图片，通过指定css的backgroud-image和backgroud-position来显示元素。
合并脚本和样式表：使用外部的js和css文件引用的方式，因为这要比直接写在页面中性能要更好一点。把多个脚本合并为一个脚本，把多个样式表合并为一个样式表
图片使用Base64编码减少页面请求数：采用Base64的编码方式将图片直接嵌入到网页中，而不是从外部载入
1、为什么要减少HTTP请求？
性能黄金法则：只有10%-20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%-90%时间花在HTML文档所引用的所有组件（图片，script，css，flash等等）进行的HTTP请求上。
HTTP连接产生开销：域名解析--TCP连接--发送请求--等待--下载资源--解析时间
2、http1.1是Keep-Alive，为什么还需要减少HTTP请求？
HTTP1.1协议请求只能串行发送：HTTP1.1协议规定请求只能串行发送，也就是说一百个请求必须依次逐个发送，前面的一个请求完成才能开始下个请求
虽然不会花费tcp三次握手时间：但是本身是串行请求
3、已经有了DNS缓存，为什么我们还是要 减少HTTP请求？
查找DNS缓存也需要时间：多个缓存就要查找多次，也有可能缓存会被清除
4、减少HTTP请求的方式的本质？
减少组件的数量：改善响应时间的最简单途径就是减少组件的数量，并由此减少HTTP请求的数量。
5、减少HTTP请求的方式？
图片地图：使用<map><area></area></map>标签。图片地图允许你在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片上的哪个位置。
CSS Sprites：SS Sprites中文翻译为CSS精灵，通过使用合并图片，通过指定css的backgroud-image和backgroud-position来显示元素。
合并脚本和样式表：使用外部的js和css文件引用的方式，因为这要比直接写在页面中性能要更好一点。把多个脚本合并为一个脚本，把多个样式表合并为一个样式表
图片使用Base64编码减少页面请求数：采用Base64的编码方式将图片直接嵌入到网页中，而不是从外部载入
6、backgroud-position属性 使用注意？
右下都是负
backgroud-position:x y；x和y可以写负值也可以写正值，我们可以想象图片的左上方为（0，0），以（0，0）坐标向右是为负数的x轴，以（0，0）坐标向下是为负数的y轴。
7、图片地图与CSS精灵 的优化的性能 的量级？
快50%以上：图片地图与CSS精灵的响应时间基本上相同，但比使用各自独立图片的方式要快50%以上
8、独立的一个js比用多个js文件组成的页面 性能量级？
快38%：独立的一个js比用多个js文件组成的页面载入要快38%
二、内容在总结中
转载于:https://www.cnblogs.com/Renyi-Fan/p/11047134.html