前言
- 我们开发一个前端页面，至少需要几个文件？
答案是：至少3个，包括.html、.css、.js以及一些静态资源（如图片）； - 那我我们打开一个前端页面，浏览器至少会发送几个http请求呢？
答案是：3个，浏览器至少需要发起三次请求，去下载.html、.css、.js以及一些静态资源，然后才能渲染出页面；
这就是传统的网页渲染方式，3此请求之后，网页才能正常的显示出来，否则就会显示空白，或者有异常？
那如果网络环境比较差的话，用户不是要等好几秒，才能看到页面吗？
一、传统网页的优化
1. 整合资源
把.css、.js和静态资源，直接整合到.html中，这样只需要一个请求(获取.html文件)就行了。
css样式只写写到html中，图片资源直接使用Base64成字符串，也写到html中。
缺陷：违反了分工原则，html文件会变的很臃肿
2. 资源预加载
预先告诉浏览器，要先下载某些文件（如.css、.js等），这样在渲染的时候，直接渲染就行了；
缺陷：虽然预先下载了资源文件，但是这些资源文件也是通过http请求下载的，该有的http请求并未省略，在网络环境较差的时候，还是会出现等待的问题？
二、服务器推送(Server Push)的出现
HTTP2.0的出现，为我们提供了Server Push，为网页性能优化，做出来重要贡献；
服务器推送（server push）指的是，还没有收到浏览器的请求，服务器就把各种资源推送给浏览器。
例如：浏览器只请求
. html，但是服务器把.html、.css、.js等全部发送给浏览器。这样的话，只需要一轮 HTTP 通信，浏览器就得到了全部资源，提高了性能。
三、Server Push与预加载对比
1. 相同点
二者都是在渲染html页面之前，静态资源文件，都已经下载到了浏览器中，不会在渲染html过程中，再去下载额外的资源；没有中间的等待时间；
2. 不同点
- 预加载：对每一个资源文件，都需要发起一个请求
- Server Push：只需要发起一个请求（获取Html文件），其他的资源文件，服务器会推送过来
结论：对比起来，Server Push会更快，因为它少了发起多个请求的过程；
四、Server Push与资源整合对比
1. 相同点
都只需要发起一次请求（获取Html文件），就可以拿到所有的资源文件，直接渲染页面，不需要额外的请求去获取静态资源；
2. 不同点
- 资源整合：静态资源文件（如
css）没有缓存的，加入两个html页面的css是完全相同的，那么相当于我们请求了两遍css样式； - Server Push：可以缓存，服务器推送过来的静态资源文件，是可以缓存到浏览器上的，如果
A.html与B.html引用了相同的.css，渲染了A.html后，再渲染B.html，.css文件只会推送一次；
结论：对比起来，Server Push使用了缓存策略，性能更优；
