从URL到页面渲染，到底经历了些啥

最新推荐文章于 2022-04-26 23:21:03 发布
最新推荐文章于 2022-04-26 23:21:03 发布
阅读量146 收藏
点赞数
分类专栏： 面试题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/j73909/article/details/109401632
版权

1、构建请求行

GET / HTTP/1.1

2、查找强缓存

命中 -> 使用缓存，返回200

3、DNS解析

  1. 检查浏览器自身缓存是否有该域名对应的IP
  2. 检查本地host文件网址映射
  3. 检查TCP/IP参数中设置的首选服务器(本地DNS服务器LDNS)，是否在本地配置区域资源中
  4. 到根域名服务器进行解析，根域名服务器返回所查域的主域名服务器gTLD地址（.com，.cn，……）
  5. 到主域名服务器进行解析，主域名服务器返回网站注册的域名服务器地址（Name Server）
  6. 网站服务器找到目标ip返回给本地DNS服务器
  7. 本地DNS服务器缓存该域名和地址并返回结果给浏览器

4、建立TCP连接

三次握手：为了确认服务端和客户端的接收能力和发送能力是否正常

TCP头部信息：

  • 16位源端口号
  • 16位目的端口号
  • 32位序号
  • 32位确认号（对方报文序号+1）
  • 4位头部长度
  • 6位标准位（URG、ACK、PSH、RST、SYN、FIN）
  • 16位窗口大小
  • 16位校验和
  • 16位紧急指针

http://cdn.yuanrengu.com/img/%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B.jpg
具体参考三次握手、

4.5、SSL/TLS握手(针对HTTPS)

client -->> server：client_hello，版本号、随机数(用于密钥生成)、支持的加密算法

client <<-- server：server_hello，版本号、随机数(用于密钥生成)、选择一个客户端支持的加密算法

client <<-- server：sever_certificate，服务端配置对应的证书，用于身份验证和密钥交换

client <<-- server：sever_hello_done，表示server_hello发送结束

client：客户端验证证书的合法性

client -->> server：client_key_exchange，客户端计算产生随机数Pre-master，用证书公钥加密发送给服务器（此时客户端已拿到所有密钥信息）

client -->> server：change_cipher_spec，客户端通知服务器后续的通信都采用协商的通信密钥和加密算法进行加密通信

client -->> server：encrypted_handshake_message，之前的通信参数的hash值加密后发送给服务端用于握手验证

client <<-- server：change_cipher_spec，解密数据并验证，通过后，发送同样加密的数据encrypted_handshake_message

但是也不是每次发送请求都要经历上述的所有过程，可以通过一个Session Identifier（会话标识符），该Session ID是 TLS 握手中生成的 Session ID。服务端可以将 Session ID 协商后的信息存起来，浏览器也可以保存 Session ID，并在后续的 Client Hello 握手中带上它，如果服务端能找到与之匹配的信息，就可以完成一次快速握手。

5、发送HTTP请求

包括：

  1. 请求行：请求方法（GET，POST），请求URI，HTTP协议版本
  2. 请求头：HOST、Connection、Cookie、Expires、Cache-Control、If-Modified-Since、If-None-Match、User-Agent
  3. 请求体：例如POST提交的表单

6、接收服务器响应

包括：

  1. 响应行：HTTP协议版本，状态码，状态描述
  2. 响应头：Connection、Set-Cookie、Cache-Control、Date、Etag、Last-Modified
  3. 响应体：数据

如果Connection为keep-alive，则TCP保持连接，不进行挥手

Content-Type值为text/html时进行浏览器渲染

7、构建DOM树

1、生成标记

2、通过堆栈入栈出栈建树：

<html> -->> HTMLHtmlElement

<head> -->> HTMLHeadElement

<body> -->> HTMLBodyElement

并有一定的容错策略

8、计算样式

  1. 格式化样式：将css文本转换为结构化的对象 —— document.styleSheets
  2. 标准化样式：while -> #000、bold -> 600
  3. 计算每个节点的样式：继承（使用父节点的样式） + 层叠（BFS，GFS……）

计算后的样式会时刻挂载到window.getComputedStyle上

9、生成布局树(layout tree)

1、遍历DOM树的节点，并将其添加到布局树中

2、计算布局树中的节点坐标位置

注意：head标签会默认display: none，chrome会使用Skia渲染

10、渲染

1、建立图层树

一般来说，当前节点图层会默认属于父节点的图层

2、生成绘制列表

将图层绘制拆分成一个个绘制指令，比如先画背景、再描绘边框......然后将这些指令按顺序组合成一个待绘制列表，相当于给后面的绘制操作做了一波计划

3、生成图块并栅格化

将图层分块、绘制视口附近的图块、首屏展示只展示低分辨率的图片、图块绘制后替换掉图片、生成位图数据

4、显示内容

浏览器绘制进程 - -》 显卡 --》显示器刷新展示图片

11、重排和重绘

触发重排：楼上的过程会重来一遍

  1. DOM大小改变：border、width、height、padding、margin
  2. DOM节点数量改变或者位置移动
  3. 读取offset、scroll、client属性族
  4. 调用getComputedStyle、getClientRects

触发重绘：

DOM自身几何属性不变，不需要更新位置信息，从而省掉了布局的过程

参考： https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#1_1

 

 

 

 

 

深入解析：从URL到页面渲染的完整过程与性能优化【页面渲染、重排、重汇】
qq_22841387的博客
09-23 1641
从用户输入URL到页面最终渲染，整个过程涉及网络通信（DNS查询、TCP连接）、资源加载（HTML、CSS、JavaScript）、解析与执行（构建DOM、CSSOM、执行JavaScript）、渲染优化（布局、绘制、合成）。这一系列步骤的高效执行依赖于现代浏览器的渲染引擎和多种性能优化技术，以提供流畅的用户体验。优化网页性能的核心在于减少不必要的重排和重绘操作，尤其是在复杂的应用场景中，频繁的布局计算和绘制会显著影响用户体验。
从输入URL到渲染的完整过程？
loveX001的博客
10-25 1458
通过阅读本文，相信小伙伴们对从输入URL到页面渲染的过程有了一个大概的理解。其实整个过程是很复杂也比较繁琐的，不是一篇文章或者几张图就可以囊括的，在这有很多细节不便展开，有兴趣的小伙伴可以对这个过程中的一些细节深入研究研究哦！文章中肯定会有些说的不是很清楚的地方，恳请各位大佬不吝赐教，一起成长！
从输入url到页面渲染到底经历了什么？
sinat_34798463的博客
03-05 607
想知道从输入url到页面渲染到底经历了什么？就必须要知道浏览器的工作原理。 下面我先用一个流程图简单的说一下从导航中输入url到页面渲染的几个重要步骤。 正文正式开始啦！ DNS解析 对于一个web页面来说导航的第一步是要去寻找页面资源的位置。如果导航中输入一个域名地址，浏览器并不能通过域名找到对应的服务器，需要通过DNS解析成IP地址，一旦获取到服务器IP地址，浏览器接下来就要试图和服务器建立连接了。 TCP三次握手 浏览器通过TCP“三次握手”与服务器建立连接。所谓三次握手(Three-
从输入URL到渲染经历了什么
qq_36824244的博客
12-30 123
首先会对URL地址进行域名解析，然后TCP传输，中间夹杂着http请求，最后浏览器解析http响应报文进行文档渲染。 浏览器解析文档资源并渲染的过程： 浏览器通过 HTMLParser 把 HTML 解析为 DOM Tree 浏览器通过 CssParser 把 Css 解析为 Css Rule Tree (CSSOM树） 浏览器将 javascript 通过DOM API 或 CSSOM API...
从访问地址栏开始到页面渲染完成都经历了什么？
KKKKKK6668的博客
04-17 345
首先说从输入地址栏开始到拿到html页面都经历了什么。 浏览器从url中获取域名以及其他所需参数； 通过DNS解析，把域名转换成相应的ip； 通过IP查找到对应的服务器地址； 与服务器建立连接； 向服务发送所需数据，并等待服务器给出回应； 服务器处理相应请求，并做出反应； 浏览器收到服务器响应，得到html代码； 渲染页面。 这个期间浏览器和服务器还分别做了三次握手和四次挥手的动作， 三次握手...
从从输入URL到页面加载经历了什么（更新中）
11-23 362
1.DNS解析 网址转为IP地址，是一个递归查询的过程 url:统一资源定位符 scheme://host.domain:port/path/filename DNS协议通过域名查找IP地址，域名解析就是在DNS记录一条信息记录 DNS优化：DNS缓存（多级缓存）* 浏览器缓存，操作系统缓存，路由缓存。 2.TCP连接 TCP三次握手 客户端=&gt;服务端 ：我要发送请求了 服务端=&gt...
网页从输入网址到渲染完成经历了哪些过程？
wangpachong的博客
03-11 1237
输入网址； 发送到DNS服务器，并获取域名对应的web服务器对应的ip地址； 与web服务器建立TCP连接； 浏览器向web服务器发送http请求； web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）； 浏览器下载web服务器返回的数据及解析html源文件； 生成DOM树，解析css和js，渲染页面，直至显示完成 ...
完整渲染过程——从URL到页面
cicistream
10-06 4890
当用户输入一串URL（统一资源定位符）到完整的页面渲染出来，到底经历了什么呢~下面我来描述一下整个过程。 先列出他的大致流程： 浏览器根据请求的URL交给DNS域名解析，找到真实的IP，向服务器发起请求； 服务器交给后台处理完后返回数据，浏览器接受文件（HTML/CSS/JS/图像等）； 浏览器对加载到的数据进行解析，建立起相应的内部结构； 载入解析到的资源文件，渲染页面，完成。我们主要分为两部分...
浏览器从URL输入到页面展现到底发生了什么？ 回流、重绘
南栀的博客
11-16 1104
浏览器从URL输入到页面展现到底发生了什么？
从浏览器地址栏输入URL后，到页面渲染出来，整个过程都发生了什么？
Whoopsina的博客
04-26 3258
从一道面试题来看前端页面的生命周期：从浏览器地址栏输入URL后，到页面渲染出来，整个过程都发生了什么？
Vue+ElementUI实现表单动态渲染、可视化配置的方法
08-27
主要介绍了Vue+ElementUI实现表单动态渲染、可视化配置的方法,需要的朋友可以参考下
从请求一个url到请求响应和页面渲染，有哪些可以做到性能优化的工作？
weixin_39307273的博客
03-01 1208
四、从浏览器发起请求到页面能正常浏览都有哪些阶段（process）？ 预处理——>DNS解析——>建立连接——>发起请求——>等待响应——>接受数据——>处理元素——>布局渲染 五、性能优化的具体方法（way） 一）内容层面，优化网络连接 1、DNS解析优化，减少DNS路由查询（DNS缓存、减少DNS查找、keep-alive、适当的主机域名） ...
前端面试查漏补缺--(十二) 从输入URL到看到页面发生的全过程(含三握手,四挥手详解)...
cpongo011702
02-24 803
前言 本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏,关注我!谢谢! 文章链接 前端面试查漏补缺--(一) 防抖和节流 前端面试查漏补缺--(二) 垃圾回收机制 前端面试查漏补缺--(三) 跨域及常见解决办法 前端面试查漏补缺--(四) 前端本地存储...
一个页面从输入URL到页面加载显示完成，这个过程都发生什么？
Bao82527的博客
05-10 2134
一般会经历以下几个过程： 1、首先，在浏览器地址栏中输入url 2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。 3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。 4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。 5、握手成功后，浏览器向服务器发送http请求，请求...
js 浏览器http请求流程与网页渲染流程
qq_36723759的博客
03-17 959
浏览器http请求流程与网页渲染流程浏览器http请 求流程浏览器http请求流程简要URL解析与编码DNS解析查找IP地址Http请求数据格式TCP三次握手与四次挥手tomcat处理http请求流程http响应数据格式http缓存相关网页渲染流程 浏览器http请 求流程 浏览器http请求流程简要 URL解析与编码 / DNS解析查找IP地址。 网络请求发起，进行tcp连接，http协议封装...
从输入URL到浏览器显示页面发生了什么
weixin_30527423的博客
07-02 1465
当在浏览器地址栏输入网址，如：www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢？这个过程可以大致分为两个部分：网络通信和页面渲染。 一、网络通信 互联网内各网络设备间的通信都遵循TCP/IP协议，利用TCP/IP协议族进行网络通信时，会通过分层顺序与对方进行通信。分层由高到低分别为：应用层、传输层、网络层、数据链路层。发送端从应用层往下走，接收端从数...
从url到页面渲染浏览器经历了什么？
jackie_bobo的博客
03-18 1292
本文首发http://zhaorubo.top我的个人网站，欢迎访问！ 面对这个问题？我想了想，看了看，参考了一下别人的文章，并自己梳理了一下知识，其中有好多东西没有涉及到比如web安全、性能优化、绘话技术、存储技术、负载均衡、集群等，日后有空再慢慢补充，此文也只是简单的记录一下自己对此的理解。以便形成自己前端知识体系，如若有错，欢迎指出！，哈哈哈哈哈，不瞎扯了，看文章了 ! 浏...
从输入URL到渲染页面发生了什么？
liuj4 | 自娱自乐
06-24 1110
从输入URL到渲染页面发生了什么？ 简单来说： 域名解析 发起TCP三次握手建立连接 建立连接后发起http请求 服务器响应请求，浏览器获取html源码 浏览器解析html代码，并请求相关css,js和图片资源 浏览器渲染页面 然后先上一张比较直观的图 那么既然层次中，TCP在HTTP下一层，为什么是先建立TCP连接呢？ 因为 http是不是一种面向连接的协议，在应用层中，...
从用户输入url到浏览器渲染页面，经历的过程
zhm0303的博客
10-15 1840
1，用户输入url，浏览器获取到url 2，浏览器的应用层对url进行DNS解析 3，根据解析到的IP地址加端口 ，浏览器发起http请求，请求包括 header body       header包括      ①，请求方法（post get等）      ②，请求协议（http,https,ftp等）      ③ ，请求地址 url      ④，一切必要的其他信息  缓存 c...
从输入URL 到页面展示到底发生了什么？
最新发布
09-23
### 回答1： 好的，我了解了。关于您的问题，整个过程可以分为以下几个步骤： 1. 输入URL：当您在浏览器地址栏中输入URL时，浏览器会将该URL发送到域名系统（DNS），通过域名系统将URL转化为IP地址。 2. 发送HTTP请求：浏览器根据URL发起HTTP请求，请求访问Web服务器的特定资源。 3. 服务器响应：当Web服务器接收到请求时，它将处理请求并返回所请求的资源。 4. 浏览器渲染：浏览器收到服务器响应后，它将解析HTML源代码，并根据CSS样式表和JavaScript代码来渲染页面。 5. 页面展示：最终，浏览器将HTML、CSS和JavaScript代码解析完毕后，它会在屏幕上展示出页面内容。 以上就是从输入URL到页面展示的整个过程，希望能够帮到您。 ### 回答2： 当我们在浏览器的地址栏中输入URL时，整个过程可以分为以下几个步骤： 1. DNS解析：浏览器首先会根据URL中的域名（例如www.example.com）进行DNS解析，将域名解析为对应的IP地址。这一步骤是为了找到存放网页的服务器。 2. 建立TCP连接：浏览器通过IP地址与服务器建立TCP连接。TCP协议提供可靠的连接，确保数据的完整性。 3. 发起HTTP请求：一旦建立了TCP连接，浏览器会向服务器发起HTTP请求，请求包括请求方法、请求头、请求体等信息。请求方法可以是GET、POST等，服务器根据请求的不同做出相应的响应。 4. 服务器处理请求并响应：服务器接收到浏览器的请求后，会根据请求的内容进行相应的处理。处理包括读取数据库、执行后端代码等操作。之后，服务器会生成响应对象，包含响应状态码、响应头、响应体等信息。 5. 接收服务器响应：浏览器接收到服务器的响应后，根据响应头中的Content-Type确定响应的数据类型。如为HTML类型，则浏览器会将响应的HTML代码解析成DOM树。 6. 解析页面并渲染：浏览器根据DOM树构建渲染树，并依据CSS样式对各元素进行布局和样式计算，最终生成页面的渲染结果。同时，浏览器也会执行页面中的JavaScript代码。 7. 页面展示：最后，浏览器将渲染好的页面内容显示在用户的视窗中，用户可以看到页面的展示效果。 总结起来，从输入URL到页面展示，经历了DNS解析、建立TCP连接、发起HTTP请求、服务器处理请求并响应、接收服务器响应、解析页面并渲染等多个步骤。最终，浏览器将渲染好的页面内容显示给用户。 ### 回答3： 从输入URL到页面展示，大致经历如下步骤： 1. 域名解析：当我们在浏览器中输入URL后，首先会进行域名解析。浏览器会向DNS服务器发送域名请求，获取该域名对应的IP地址。 2. 建立连接：浏览器通过获取到的IP地址与Web服务器建立TCP连接。这个过程使用的是三次握手协议，确保连接的可靠性。 3. 发送请求：建立连接后，浏览器会发送HTTP请求给Web服务器，请求的内容包括请求的类型(GET/POST等)、地址、头部信息、可能还包括cookie等相关信息。 4. 服务器处理请求：Web服务器收到请求后，会根据请求内容进行处理。处理过程可能包括调取数据库、运行后台程序等动作。 5. 服务器响应：Web服务器根据请求的内容，返回一个HTTP响应给浏览器。响应的内容包括状态码、响应头部、实际的网页内容等。 6. 下载页面资源：浏览器接收到服务器返回的响应后，会开始下载网页的资源，如HTML、CSS、JavaScript、图片等。浏览器会根据响应头部中的Content-Type确定如何解析资源。 7. 页面渲染：当所有的资源下载完成后，浏览器会根据HTML结构、CSS样式，解析并渲染出网页。浏览器会从上到下解析HTML文档，解析过程包括构建DOM树、计算CSS样式、布局页面等。 8. JavaScript执行：在渲染过程中，浏览器会遇到JavaScript代码。浏览器会逐行解析执行JavaScript代码，并根据代码修改DOM树和样式，可能还会触发网络请求等。 9. 页面展示：当页面渲染和JavaScript执行完成后，页面便可以完整地展示给用户了。用户可以看到页面内容，与页面进行交互。 以上仅是一个大致的过程，实际上还有很多细节和额外的步骤，比如缓存机制、重定向、Cookie处理等等。不同的浏览器、服务器也可能会有些许差异。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值