我要招人

去企业版

首页 > 试题广场 >

从输入 URL 到页面渲染完整链路，请分阶段解释关键环节与可

[问答题]

从输入 URL 到页面渲染完整链路，请分阶段解释关键环节与可观测点。

安吉拉娜娜

url到页面渲染的过程： 1、导航阶段：解析url -> 查浏览器缓存 -> 域名dns解析 -> TCP/TLS握手【Network面板】 2、响应和解析阶段：服务器处理和响应 -> 解析html构建Dom树 -> 解析css构建Cssom树 -> js的执行，会暂停html的解析转而去下载js代码，因为js是可能修改dom和cssom的，可以通过defer或者async去改变这个行为。【performance面板可以观测Parse HTML,Parse Stylesheet】 3、渲染阶段：dom和cssom结合构建渲染树->布局和回流/重排->绘制（文本颜色边框阴影）即重绘->合成【Performance面板中的Recalculate Style,Layout,Paint,Composite Layers】

发表于 2025-11-04 23:31:33 回复(0)

DRZv

1. URL解析与请求发起：解析URL→查浏览器缓存→DNS解析→TCP/TLS握手；可观测缓存命中、DNS/TLS耗时。 2. 网络传输：封装HTTP请求并传输；可观测请求耗时、状态码（2xx/4xx等）。 3. 服务器处理：接收请求→路由分发→业务逻辑→生成响应；可观测接口耗时、错误日志。 4. 资源加载：接收响应→加载HTML/CSS/JS/图片等；可观测资源加载顺序、耗时、失败情况。 5. 页面渲染：解析HTML构建DOM→解析CSS构建CSSOM→合成渲染树→布局→绘制；可观测DOM/CSSOM构建耗时、重排重绘次数。

发表于 2025-11-03 06:40:03 回复(0)

lose_a_star

1.DNS解析：域名->ip 2.建立TCP连接：三次握手（HTTP）或建立HTTPS握手 3.发送HTTP请求 4.服务器处理并返回响应 5.浏览器解析html -> 构建DOM树 6.解析CSS -> 构建CSSOM树 7.DOM+CSSOM -> 生成渲染树（render tree） 8.布局（layout/reflow）：计算位置大小 9.绘制（paint）：填充像素 10.合成（composite）：图层合并，显示到屏幕

发表于 2026-02-05 02:41:26 回复(0)

慢慢吖

解析url生成报文，查缓存，dns域名解析，tcp/tls握手服务端反向解析，构建dom，构建cssom树，解析js，可能阻塞html解析。 dom，cssom结合构建渲染树，重排计算位置，重绘文本颜色边框阴影，合成树。

发表于 2026-03-27 19:14:57 回复(0)

漂流的命运小偷

1.导航阶段 URL解析 DNS解析，将域名转换为IP地址建立TCP链接，TCP三次握手如果是HTTPS协议还需TLS/SSL 加密发送http请求 2.响应与解析阶段服务器响应处理http请求返回报文解析报文生成DOM树解析CSS形成CSSOM树 3.渲染阶段由DOM树和CSSOM树形成渲染树回流，计算元素布局重绘，计算元素样式合成，将各个独立的层合并为一个层，最后呈现在屏幕上。可观测点与关键环节对应

发表于 2026-03-24 10:39:08 回复(0)

三白SanBai

1.解析url 2.dns解析 3建立tcp连接 4.如果是https还需要进行一次tls/ssl握手 5.发送http请求 6.服务器返回相应 7.解析html生成dom树，解析css生成cssom 8.dom和cssom合并生成渲染树 9.布局 10.绘制成图

发表于 2026-03-09 10:09:32 回复(0)

已转码的钝角很开心

1.导航阶段：输入url后解析url->查浏览器缓存->域名dns解析->TCP/TLS握手，(可观测network面板和TTFB)2.响应和解析阶段：服务器处理和响应->解析html构建DOM树->解析css构建cssom树->js执行，会暂停html的解析去下载js代码，因为js可能去修改dom和cssom的，可以通过defer或者async去改变这个行为（performance面板可观测parse html和parser stylesheet）， 3.渲染阶段：dom和cssom结合构建渲染树->布局和回流/重排->绘制（文本颜色边框阴影）->合成（可观测performance面板的recalculate，style，layout，paint，composite，laysers）---------性能优化关注回流和TTFB

发表于 2026-02-22 11:05:16 回复(0)

Crish07

1. DNS解析：域名 -> IP 可观测点：DNS查询耗时 2. 建立连接：TCP 三次握手 / HTTPS TLS 握手可观测点：TCP连接时间、SSL/TLS耗时 3. 发送请求与响应：发送 HTTP 请求 & 接收响应可观测点：TTFB 4. 解析与构建：解析 HTML 构建 DOM 树 -> 解析 CSS 构建CSSOM 树 -> JS执行会暂停 HTML 解析，因为 JS 可能会修改 DOM 和 CSSOM ，除非添加 async / defer ，最终合并 DOM + CSSOM -> Render Tree 可观测点：Performance面板 -> Parse HTML, Parse Stylesheet 5. 渲染与交互：布局（Layout）、绘制（Paint）、合成（Composite）可观测点： - Lighthose / Web Vitals 监测 FCP / LCP / CLS - Performance 面板 -> Layout / Paint 耗时

发表于 2026-02-07 21:47:34 回复(0)

WangYibo

1.输入URL 2.网站请求获取资源 3.解析、计算和绘制 4.呈现在屏幕上

发表于 2026-01-14 14:07:53 回复(0)

牛客41767380号

导航阶段：解析url--DNS解析--TCP/TLS握手--发送HTTP请求 Network面板响应与解析阶段：服务器响应--解析HTML构建DOM树--解析CSS构建CSSOM树--执行js Performance面板渲染阶段：构建渲染树结合DOM树和CSSOM树--回流/重排--重绘--合成 Performance面板

发表于 2026-01-10 14:59:05 回复(0)

一定要上岸的椰子很漂亮

1.解析url 2.缓存判断 3.dns解析获取ip地址 4.tcp三次握手 5.服务器收到请求，返回html资源 6.解析html成DOM树 7.遇到css就解析CSS为CSSOM树 8.遇到script标签，就暂停去下载并执行JS 9.合并DOM和CSSOM为渲染树 10.根据渲染树进行布局计算 11.根据布局信息进行绘制 12.合成

发表于 2025-11-23 15:55:00 回复(0)

allin秋招的单身狗很愤怒

1.url解析判断输入的是搜索内容还是url 2.查找缓存，如果有缓存直接返回页面，如果没有则需要发送网络请求 3.dns解析把域名转化为ip地址 4.浏览器和ip建立tcp连接，发送http请求 5.服务器响应请求，返回数据 6.tcp断开 7.浏览器拿到响应结果，讲字符串转化为html代码

发表于 2025-10-29 15:45:54 回复(0)

秋水夏树

1. 解析 URL，检查缓存 + HSTS 升级 HTTPS 2. DNS 解析 3. TCP 连接 4. TLS 握手（可选） 5. 资源返回 6. 解析 HTML => DOM 树 7. 解析 CSS => CSSOM 树 8. 执行 JS 9. 布局 10. 绘制 11. 合成

发表于 2025-09-15 20:00:44 回复(1)

提交观点

问题信息

来自：前端开发-牛客面经八股

难度：

13条回答 205收藏 575浏览

从输入 URL 到页面渲染完整链路，请分阶段解释关键环节与可

问题信息

热门推荐

相关试题