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

在前端面试中，经常会被问到“一个页面从输入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是请求静态资源用的，对静态资源来说，实际上在请求过程中携带的cookie是无用的，所以，我们是希望在我们请求静态资源过程中能将我们的cookie从httpRequest header中去掉，但很多时候，我们的CDN的域名会和我们本身网站的域名相同，就会将我们主站的cookie通过我们的网络去携带到CDN的服务端，这个实际是对网络无谓的损耗。所以，CDN的域名不要和主站的域名一样，这样会防止访问CDN时还携带主站cookie的问题。

–>使用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请求的过程是前端性能优化的核心。当然，前提是需对业务及业务中所用技术栈的深入理解，针对业务中所真正请求的场景，然后才能去做相应的优化。