从浏览器地址栏输入URL后，到页面渲染出来，整个过程都发生了什么？

最新推荐文章于 2024-06-19 00:52:41 发布

Whoopsina

最新推荐文章于 2024-06-19 00:52:41 发布

阅读量3k

点赞数

分类专栏： HTTP网络基础文章标签： javascript 前端

本文链接：https://blog.csdn.net/whoopsina/article/details/124439895

版权

本文从一道前端面试题出发，详细分析了从浏览器地址栏输入URL到页面渲染出来的全过程，包括网络请求线程的开启、HTTP请求的建立、前后端交互、关键渲染路径等环节。探讨了DNS解析、TCP连接、HTTP协议、浏览器缓存以及渲染绘制等方面，旨在帮助读者理解前端页面生命周期的关键点和优化实践。

摘要由CSDN通过智能技术生成

从一道面试题来看前端页面的生命周期

性能问题呈现给用户的感受往往是简单而直接的：加载资源缓慢、运行过程卡顿或响应交互迟缓等，当把这些问题呈现到前端工程师面前时，却是另一种系统级别复杂的图景。

从域名解析、TCP 建立连接到 HTTP 的请求与响应，以及从资源请求、文件解析到关键渲染路径等，每一个环节都有可能因为设计不当、考虑不周、运行出错而产生性能不佳的体验。作为前端工程师，为了能在遇到性能问题时快速而准确地定位问题所在，并设计可行的优化方案，熟悉前端页面的生命周期是一堂必修课。

本章就从一道常见的前端面试题开始，通过对此问题的解答，来分析前端页面生命周期的各个环节，并着重分析其中关键渲染路径的具体过程和优化实践，希望以此为基础帮读者建构一套完整知识框架的图谱，而后续章节的专题性优化，也都是对此生命周期中某个局部过程的优化分析。

一道前端面试题

大家在进行前端面试时，经常问这样一个问题：从浏览器地址栏输入URL后，到页面渲染出来，整个过程都发生了什么？

其实这个问题的回答可以非常细致，能从信号与系统、计算机原理、操作系统聊到网络通信、浏览器内核，再到 DNS 解析、负载均衡、页面渲染等，但这门课程主要关注前端方面的相关内容，为了后文表述更清楚，这里首先将整个过程划分为以下几个阶段。

浏览器接收到URL，到网络请求线程的开启。
一个完整的HTTP请求的发出
服务器收到请求并转到具体的后台处理
前后台之间的HTTP交互和设计的缓存机制
浏览器收到数据包后的关键渲染路径
JS引擎的解析过程

1. 网络请求线程的开启

浏览器接收到我们输入的URL到开启网络请求线程，这个阶段是在浏览器内部完成的。

解析URL后，如果是HTTP协议，则浏览器会新建一个网络请求线程去下载所需的资源，要明白这个过程需要先了解进程和线程之间的区别，以及目前主流的多进程浏览器结构。

单进程浏览器

说到底浏览器也只是一个运行在操作系统上的程序，那么它的运行单位就是进程，而早在 2008 年谷歌发布 Chrome 多进程浏览器之前，市面上几乎所有浏览器都是单进程的，它们将所有功能模块都运行在同一个进程中，其架构示意图如下图所示。

单进程浏览器存在许多的问题

流畅性：首先是页面内存泄漏，浏览器内核通常非常复杂，单进程浏览器打开再关闭一个页面的操作，通常会有一些内存不能完全回收，这样随着使用时间延长，占用的内存会越来越多，从而引起浏览器运行变慢；其次由于很多模块运行在同一个线程中，如JS引擎、页面渲染及插件等，那么执行某个循环任务的模块就会阻塞其他模块的任务执行，这样难免会有卡顿的现象发生。
安全性：由于插件的存在，不免其中有些恶意脚本会利用浏览器漏洞来获取系统权限，进行引发安全问题的行为。
稳定性：由于所有模块都运行在同一个进程中，对于稍复杂的JS代码，如果页面渲染引擎崩溃，就会导致整个浏览器崩溃。同样，各种不稳定的第三方插件，也是导致浏览器崩溃的隐患。

多进程浏览器

https://blog.csdn.net/Whoopsina/article/details/123516144

浏览器把原先单进程内功能相对独立的模块抽离为单个进程处理对应的任务，主要分为以下几种进程。

浏览器主进程
GPU进程
插件进程
网络进程
渲染进程（浏览器内核）：默认会为每个标签窗口页开辟一个独立的渲染进程，其中包括了多个子线程。当打开一个标签页输入URL后，所发起的网络请求就是从这个进程开始的，另外处于安全性考虑，渲染进程也被放入沙箱中。

2. 建立HTTP请求

这个阶段的主要工作分为：DNS解析和通信链路的建立

简单说就是首先发起请求的客户端浏览器要明确知道所要访问的服务器地址，然后简历通往该服务器地址的路径

DNS解析

URL解析其实就是将URL拆分为代表具体含义的字段，然后以参数的形式传入网络请求线程进行进一步处理，其中第一步就是DNS解析。它的主要目的就是通过查询URL的Host字段转化为网络中具体的IP地址，因为域名只是为了方便帮忙记忆的，IP地址才是访问服务器在网络中的“门牌号”。

DNS解析可以查找的过程简单的描述为

浏览器缓存 =》系统缓存 =》 hosts文件 =》本地域名服务器 =》根域名服务器 =》 COM顶级域名服务器和权限域名服务器

最终将所要访问的目标服务器IP地址返回本地主机，如果查询不到则会返回报错信息。

由此可见DNS解析是个很耗时的过程，如果解析的域名过多，势必会延缓首屏的加载时间，关于DNS解析过程的原理及优化方案可以查看我写的其他博客笔记。

网络模型

在通过 DNS 解析获取到目标服务器 IP 地址后，就可以建立网络连接进行资源的请求与响应了。但在此之前，我们需要对网络架构模型有一些基本的认识，在互联网发展初期，为了使网络通信能够更加灵活、稳定及可互操作，国际标准化组织提出了一些网络架构模型：OSI 模型、TCP/IP 模型，二者的网络模型图示如下图所示。