前端性能优化之http请求的过程

5,421 阅读6分钟

在前端面试中,经常会被问到“一个页面从输入URL到页面加载显示完成,这个过程都发生了什么”,这是前端的经典面试题之一。这个过程涉及的东西很多,区分度很高。

大致分为这几个过程:
1.DNS解析
2.TCP连接
3.发送HTTP请求
4.服务器处理请求并返回HTTP报文
5.浏览器解析渲染页面
6.连接结束
简要回答:
浏览器据请求的URL交给DNS域名解析,找到对应的IP地址,向服务端发起请求;
服务器交给后台处理完成后返回数据,浏览器接收文件(html、css、js、图像等);
浏览器对加载到的资源进行解析,建立相应的内部数据结构(如html和dom);
载入解析到的资源文件,完成页面渲染。

我们是否想过,了解这个过程的意义何在?

☞其实,我们了解这个过程对前端的性能优化是有意义的,在这个过程中找到优化点,去缩短请求的时间,从而去加快web前端的访问速度,提升性能。

这里写图片描述
这里写图片描述

先大致看一下请求的整个流程:
1、用户首先在浏览器中去输入一个url,浏览器内部的核心代码会将url进行拆分、解析,最终会将用户的domain发送到dns服务器上,dns服务器会据domain去查询相关host对应的ip地址,从而将ip地址返回给浏览器,浏览器持有ip地址就知道这个请求要发送到哪里去,伴随协议,在协议中携带将ip地址信息和请求相关的参数,最终发送到我们的网络中去。
2、经过局域网、交换机、路由器、主干网络,这么一个请求会到达服务端,服务端是一个MVC架构,请求会首先进入到controller中,在controller中会进行相关的逻辑处理以及请求的分发,然后去调用我们的model层(负责和数据进行交互的),和数据进行交互的过程中,model层会去读取redis+db里的数据,获取到数据之后,最终将我们渲染好的页面通过View层返回给我们的网络,此时,一个http请求的response就从服务端回到了浏览器,浏览器主要是做一个render的过程(浏览器据请求回来的html以及这个html所关联的css和js去进行渲染的过程--在渲染的过程中,浏览器会据html去形成相关的dom树以及对应的css树,然后将css树和dom树进行整合,最终知道某个dom节点需要渲染什么样式,从而在页面上进行样式的渲染,在样式渲染完成后,浏览器会进一步执行js脚本,即动态的页面效果,从而将最终的页面展现在浏览器中)。

对于前端开发而言,在这个过程中可针对哪些点进行性能优化呢?

1、减少请求的时间。

☞DNS这部分进行缓存,浏览器访问DNS服务器的时间就可缩短。

2、网络请求的过程,涉及到带宽、网络的选择、缓存,优化点?

-->使用CDN能解决静态资源网络选择以及缓存的问题,但对于一些接口是没法使用CDN的,那么对于这样的一些接口,能否做一些缓存呢?
除了CDN,我们还能在浏览器端做一些相关的缓存策略。通过浏览器端的缓存策略,对于一些相同的资源和接口,就可以去浏览器的缓存端去读取接口,这样的话,我们的访问速度又得到了一些提升。
除了缓存和路径选择,带宽也是很重要的一点。一个http请求的大小若能相对较小的话,返回的速度会相对快一些。如何减小http请求的大小,也是整个请求过程中非常重要的一点。另外,每一个http请求都会走一个网络环境到达服务器,实际上,每次请求都会有一个网络环境的损耗,则能否将多次http请求合并为1次,从而减少相同的网络损耗呢?☞这也是我们思考的点。
3、在浏览器端的渲染过程,如大型框架,vue和react,它的模板其实都是在浏览器端进行渲染的,不是直出的html,而是要走框架中相关的框架代码才能去渲染出页面,这个渲染过程对于首屏就有较大的损耗,这个是不利于前端性能的☞业界就会有相关框架的服务端渲染方案,在服务端进行整个html的渲染,从而将整个html直出到我们的浏览器端,而非在浏览器端进行渲染。--在渲染之前,可做一些服务端渲染以及渲染优化的方案。
以上所说的是http网络请求中细节的优化点。去了解一个http请求发生的详细过程,在这个过程中就可发掘这样一些优化点,从而来实现我们的前端性能优化。

请求过程中一些潜在的优化点:

1.DNS是否可通过缓存减少DNS查询时间?
2.网络请求的过程走最近的网络环境?
3.相同的静态资源是否可缓存?
4.能否减少http请求的大小?
5.减少http请求
6.服务端渲染
深入理解http请求的过程是前端性能优化的核心。当然,前提是需对业务及业务中所用技术栈的深入理解,针对业务中所真正请求的场景,然后才能去做相应的优化。