HTTP 服务器推送(Server Push)

前言

  • 我们开发一个前端页面,至少需要几个文件?
    答案是:至少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.htmlB.html引用了相同的.css,渲染了A.html后,再渲染B.html.css文件只会推送一次;
    结论:对比起来,Server Push使用了缓存策略,性能更优;
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容