浏览器允许的并发请求资源数，加快页面静态资源请求方法

1.统一域名下资源并发请求限制

1. 浏览器的网络请求资源数是针对单一域名的。同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞，这就是很多网站专门解决这个问题的原因。
2. 不同浏览器，不同http协议版本允许的网络请求资源数是不一样的（具体自行百度），不过总的来说在2-8个之间。

2.对页面加载的影响：

假如一个页面有120个静态资源（css、js、img），并且所有资源都在一个域名下，使用的浏览器最大网络并行请求资源数是6，假设理想一些：所有请求时间都是一样的，每个文件加载需要500ms，则所有资源加载完成需要 120/6 * 0.5 = 10s 的时间。

有的请求会持续很长时间，如果把 img, css, js… 都放到http://一个域名下面，其他请求就迟迟无法完成，浏览者看来就是『卡住了』。而把图片放到另一个域名之后，css和图片就可以并发请求了。

3.针对性的优化方案：

1、减少网络请求数：
（1）使用css spirit（精灵图），将图标合成在一张图中，减少图片数量，减少http请求数；
（2）使用打包工具合并css和js，减少文件数量，减少http请求数（压缩和合并文件）
2、增加静态资源来源
（1）将静态资源分布在不同的服务器中，使用多个域名，加大并发量；
（2）将静态资源和html文档分放在不用的域名下也有另一个原因，每次页面请求都会将相同域名下的cookie带给服务器端，实际上静态资源带上cookie是没必要的。

实例
百度首页 – js和图片用的域名

加快页面静态资源请求方法（前端优化）

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

优化方向两类：

• 第一类是页面级别的优化，例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等;
• 第二类则是代码级别的优化，例如Javascript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等等。

一、减少HTTP请求数

首先，每个请求都是有成本的，既包含时间成本也包含资源成本。
一个完整的请求都需要经过DNS寻址（输入网址-浏览器来解析dns-直到解析出ip为止）、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个”漫长”而复杂的过程（dns寻址-三次握手-发送报文-服务器将请求发给servlet容器-servlet容器来响应请求-返回客户端）。
时间成本就是用户需要看到或者”感受”到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。
另外，由于浏览器进行并发请求的请求数是有上限的，因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象，即使可能用户能看到的第一屏的资源都已经请求完了，但是浏览器的进度条会一直存在。

1. 静态资源分域存放

• 统一域名下资源并发请求限制
• 不过过多的散布会导致DNS解析上付出额外的代价，所以一般也是控制在2-4之间。

2. css sprites–用精灵图
   再怎么提速，页面上过百的总资源数也仍然是很可观的，如果能将其中一些很多页面都用到的元素如常用元素如按钮、导航、Tab等的背景图，指示图标等等合并为一张大图，并利用css background-position的定位来使多个样式引用同一张图片，那也就可以大大的减少总请求数了，这就是css sprites的由来
3. js/css combine(合并压缩文件)
   站的js/css原本并不多，其合并技术的产生却是有着和图片不同的考虑。 由于css/js通常可能对dom布局甚至是内容造成影响，在浏览器解析上，不连贯的载入是会造成多次重新渲染的。因此，在网站需要保持模块化来提高可维护性的前提下，js/css combine也就自然衍生了，同时也是minify、compress等对内容进行多余空格、空行、注释的整理和压缩的技术出现的原因。
   公共文件压缩，非公共文件合并。
4. 延迟加载
   很多页面浏览量很大，但其实用户直接很大比例直接就跳走了，第一屏以下的内容用户根本就不感兴趣。 对于超大流量的网站如淘宝、新浪等，这个问题尤其重要。 这个时候一般是通过将图片的src标签设置为一个loading或空白的样式，在用户翻页将图片放入可见区或即将放入可见区时再去载入。 不过这个优化其实和并发资源数的关系就比较小了，只是对一些散布不合理，或第一页底部的资源会有一定的帮助。 主要意图还是降低带宽费用。

参考：https://blog.csdn.net/li2274221/article/details/25193381