从输入 URL 到页面加载完的过程中都发生了什么事情？（转）

前端：
主要是围绕浏览器的工作展开，包括浏览器处理用户的交互、发送网络请求、收到网络响应之后的处理与渲染等等。

• 第一块“处理用户的交互”，浏览器本身与用户的交互基本不涉及网络知识，但Web前端UI的设计与实现是一个前端研发攻城狮必须掌握的（主要是JS相关）；
• 第二块“发送网络请求”。最普通的就是图中问题“从地址栏输入URL开始……”，主要涉及用户端浏览器、操作系统的网络模块的相关处理。如@傅里叶变黄油猫 所说，浏览器会对URL进行检查、分析，涉及URL合法性、URL对应的协议（最常见的时HTTP协议，也是部分浏览器的默认网络协议）；如果URL合法，接下来会检查URL中HOST是一个域名（Domain）还是一个IP地址；如果是IP地址，会直接发送请求，否则会查看系统本地的HOSTS文件有没有相应的配置，没有的话会启用DNS协议查询域名对应的IP地址；发送出请求，浏览器的工作暂时结束，网络请求交由操作系统处理，值得注意的是，如果是新入网机器或者局域网刚从网络故障中恢复，操作系统还可能动用ARP协议获取到出口路由的MAC地址，以便把数据包交给路由器，并有路由器转发到外网；操作系统协议栈对网络请求数据包的解析与处理是另一方面内容（主要涉及不同网络层次的不同网络协议，后面说）；
• 第三块处理网络响应与渲染。这是传统前端工程师必须掌握的知识，资源型的网络响应（比如DOC文档、ZIP压缩包文档）浏览器会智能地处理下载事宜；如果相应内容是可渲染的纯文本，就交由前端程序以合理的布局“铺”到页面中；而页面代码（HTML/CSS）的解析与现实则由浏览器的渲染引擎实现，不同浏览器渲染引擎的策略可能不同，会有一些需要注意的地方，前端工程师也会掌握这部分知识。

后台：
主要涉及Web服务器（不是大刀片那种的“硬件服务器”）对网络请求的处理。可以直观认为Web服务器就是接受并处理浏览器发送的某些协议的网络请求、并把对应处理结果返回给用户端浏览器的网络应用程序。主流Web服务器有Apache/IIS/Nginx/Tomcat（不同的Web服务器程序与不同的后台脚本程序语言或者技术配套处理网络请求，比如Tomcat主要与JSP语言配套，微软的IIS主要与ASP/ASPX技术配套结合）；Web服务器通常可以接受静态请求并直接返回静态内容，但遇到动态内容的请求（目前Web应用大多数动态的），Web服务器就要把请求委托给各种语言和技术开发的“Web后台程序”，由后台程序处理动态请求，再把处理后的结果（响应内容）交给Web服务器，最后Web服务器会把响应通过互联网返回给用户端浏览器。这方面再细节的话主要就是后台程序的架构、开发、优化技术了，此处不详说。

网络数据传输：
个人认为这方面的知识才是图中问题考察的主要部分。这方面的知识从整体到细节，会涉及：

• 互联网层次体系的划分（如理想的OSI的七层模型和实用的TCP/IP四层网络模型），每个层次里包含的主要的网络协议，路由原理等等；
• 互联网按各种标准的划分，比如按照网络规模和地域关系划分为局域网、城域网、广域网；按照网络拓扑结构分为总线型、树状网络、网状、分布式等等，更细节的会有各种被划分的子类中一些技术，比如私有地址与公网地址转换的NAT（Network Address Translation，网络地址转换）技术；
• 互联网不同层次里的不同协议的各种细节（数据包结构、运行策略比如TCP协议的三次握手和拥塞避免、滑动窗口、IP地址划分、DNS查询原理）甚至包括常见的协议安全类知识。

这部分内容相当繁琐复杂，但里面的各种基础知识是从事网络应用开发、网络运维、网络安全领域人员的必备知识，每逢面试，总会反复提及，面试官会以各种姿势提问，防不胜防。