首先来看一个示例图，描述了用户输入域名到浏览器渲染出可交互页面的主要过程。
以上就是浏览器输入域名到浏览器渲染界面的大概过程，这是一个非常经典的面试题。接下来，需要解析，这个过程涉及到哪些技术，面试题点，如何优化等。 以下是关于这个流程图可能涉及到的技术点：
- 1.DNS解析：如何解析域名，是否有优化方案
- 2.tcp协议：三次握手四次挥手；七层模型；
- 3.HTTP请求的构构成，如其对应报文，和tcp协议一起是如何配置报文的，经过七层模型后，一层一层解析的过程，HTTP的状态码的作用，HTTP不具备状态，要配合哪些技术确保HTTP请求附带状态等。
- 4.服务器返回响应：服务器接收后，如何在服务端组装代码配置成HTML文件，并拆分其他配置，如css,js等；以nextjs为例，rsc payload格式如何被拆分，此处涉及到的优化点又在哪里；最后，发送到浏览器端，可能影响到哪些方面的优化。
- 4.1.webpack等配置，如何优化；nextjsconfig的配置又优化提现在哪里；
- 5.浏览器如何解析HTML；
- 6.外部资源的加载有哪些影响；如何做优化处理；是否考虑缓存；
- 6.1.在加载外部资源过程中，需要做到js,css更少的被拆分，比如nextjs中的那个功能点，ssr,避开服务端渲染，use client等的功能；把类组件拆分成函数组件的目的，在拆分过程中复刻功能的同时减少前端代码的操作目的等；
- 7.如何解析css构建cssom树，此处涉及到重排重绘问题，如何能更少的重排和重绘，减少浏览器的性能；比如transform等功能点。
- 8.执行js
除此之外，我们用到的技术栈，比如React、nextjs、还有ts、css等工具的细节实现，以及配置webpack等技术实现；他们的目的其实就是，react + nextjs实现从服务端渲染，在实现过程中的功能、优化、最终编译成简单的js、css和html的过程，最后，再传送到前端进行渲染。
