本文共 2177 字，大约阅读时间需要 7 分钟。
在前端面试中，经常会被问到“一个页面从输入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请求的过程是前端性能优化的核心。当然，前提是需对业务及业务中所用技术栈的深入理解，针对业务中所真正请求的场景，然后才能去做相应的优化。
转载地址：http://xptax.baihongyu.com/