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

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

大体分为这几个过程：

1.DNS解析

2.TCP链接

3.发送HTTP请求

4.服务器处理请求并返回HTTP报文

5.浏览器解析渲染页面

6.链接结束

简要回答：

浏览器据请求的URL交给DNS域名解析，找到对应的IP地址，向服务端发起请求；

服务器交给后台处理完成后返回数据，浏览器接收文件(html、css、js、图像等)；

浏览器对加载到的资源进行解析，创建相应的内部数据结构(如html和dom)；

载入解析到的资源文件，完成页面渲染。

咱们是否想过，了解这个过程的意义何在？

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

这里写图片描述

先大体看一下请求的整个流程：

一、用户首先在浏览器中去输入一个url，浏览器内部的核心代码会将url进行拆分、解析，最终会将用户的domain发送到dns服务器上，dns服务器会据domain去查询相关host对应的ip地址，从而将ip地址返回给浏览器，浏览器持有ip地址就知道这个请求要发送到哪里去，伴随协议，在协议中携带将ip地址信息和请求相关的参数，最终发送到咱们的网络中去。

二、通过局域网、交换机、路由器、主干网络，这么一个请求会到达服务端，服务端是一个MVC架构，请求会首先进入到controller中，在controller中会进行相关的逻辑处理以及请求的分发，而后去调用咱们的model层(负责和数据进行交互的)，和数据进行交互的过程当中，model层会去读取redis+db里的数据，获取到数据以后，最终将咱们渲染好的页面经过View层返回给咱们的网络，此时，一个http请求的response就从服务端回到了浏览器，浏览器主要是作一个render的过程(浏览器据请求回来的html以及这个html所关联的css和js去进行渲染的过程--在渲染的过程当中，浏览器会据html去造成相关的dom树以及对应的css树，而后将css树和dom树进行整合，最终知道某个dom节点须要渲染什么样式，从而在页面上进行样式的渲染，在样式渲染完成后，浏览器会进一步执行js脚本，即动态的页面效果，从而将最终的页面展示在浏览器中)。

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

一、减小请求的时间。

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

二、网络请求的过程，涉及到带宽、网络的选择、缓存，优化点？

☞不少公司会选择CDN，解决了网络选择和缓存的问题。但在访问CDN的过程当中还会出现问题--CDN是请求静态资源用的，对静态资源来讲，实际上在请求过程当中携带的cookie是无用的，因此，咱们是但愿在咱们请求静态资源过程当中能将咱们的cookie从httpRequest header中去掉，但不少时候，咱们的CDN的域名会和咱们自己网站的域名相同，就会将咱们主站的cookie经过咱们的网络去携带到CDN的服务端，这个实际是对网络无谓的损耗。因此，CDN的域名不要和主站的域名同样，这样会防止访问CDN时还携带主站cookie的问题。

-->使用CDN能解决静态资源网络选择以及缓存的问题，但对于一些接口是无法使用CDN的，那么对于这样的一些接口，可否作一些缓存呢？

除了CDN，咱们还能在浏览器端作一些相关的缓存策略。经过浏览器端的缓存策略，对于一些相同的资源和接口，就能够去浏览器的缓存端去读取接口，这样的话，咱们的访问速度又获得了一些提高。

除了缓存和路径选择，带宽也是很重要的一点。一个http请求的大小若能相对较小的话，返回的速度会相对快一些。如何减少http请求的大小，也是整个请求过程当中很是重要的一点。另外，每个http请求都会走一个网络环境到达服务器，实际上，每次请求都会有一个网络环境的损耗，则可否将屡次http请求合并为1次，从而减小相同的网络损耗呢？☞这也是咱们思考的点。

三、在浏览器端的渲染过程，如大型框架，vue和react，它的模板其实都是在浏览器端进行渲染的，不是直出的html，而是要走框架中相关的框架代码才能去渲染出页面，这个渲染过程对于首屏就有较大的损耗，这个是不利于前端性能的☞业界就会有相关框架的服务端渲染方案，在服务端进行整个html的渲染，从而将整个html直出到咱们的浏览器端，而非在浏览器端进行渲染。--在渲染以前，可作一些服务端渲染以及渲染优化的方案。

以上所说的是http网络请求中细节的优化点。去了解一个http请求发生的详细过程，在这个过程当中就可发掘这样一些优化点，从而来实现咱们的前端性能优化。

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

1.DNS是否可经过缓存减小DNS查询时间？

2.网络请求的过程走最近的网络环境？

3.相同的静态资源是否可缓存？

4.可否减小http请求的大小？

5.减小http请求

6.服务端渲染

深刻理解http请求的过程是前端性能优化的核心。固然，前提是需对业务及业务中所用技术栈的深刻理解，针对业务中所真正请求的场景，而后才能去作相应的优化。