一、导航阶段#xff1…本文以https://example.com为例逐层剖析浏览器从输入URL到页面渲染的完整链路涵盖DNS解析、TCP/TLS握手、HTTP请求、DOM/CSSOM构建等核心阶段结合代码示例与性能调优技巧助你掌握浏览器底层运行机制。

1.1

ip优化技巧减少DNS查询次数使用dns-prefetch预解析。

1.2

ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-DR1vxw3RyQAX77HD

.error-icon{fill:#552222;}#mermaid-svg-DR1vxw3RyQAX77HD

.error-text{fill:#552222;stroke:#552222;}#mermaid-svg-DR1vxw3RyQAX77HD

.edge-thickness-normal{stroke-width:2px;}#mermaid-svg-DR1vxw3RyQAX77HD

.edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-DR1vxw3RyQAX77HD

.edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-DR1vxw3RyQAX77HD

.edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-DR1vxw3RyQAX77HD

.edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-DR1vxw3RyQAX77HD

.marker{fill:#333333;stroke:#333333;}#mermaid-svg-DR1vxw3RyQAX77HD

.marker.cross{stroke:#333333;}#mermaid-svg-DR1vxw3RyQAX77HD

ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-DR1vxw3RyQAX77HD

.actor{stroke:hsl(259.6261682243,

59.7765363128%,

87.9019607843%);fill:#ECECFF;}#mermaid-svg-DR1vxw3RyQAX77HD

text.actortspan{fill:black;stroke:none;}#mermaid-svg-DR1vxw3RyQAX77HD

.actor-line{stroke:grey;}#mermaid-svg-DR1vxw3RyQAX77HD

.messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-DR1vxw3RyQAX77HD

.messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-DR1vxw3RyQAX77HD

#arrowhead

path{fill:#333;stroke:#333;}#mermaid-svg-DR1vxw3RyQAX77HD

.sequenceNumber{fill:white;}#mermaid-svg-DR1vxw3RyQAX77HD

#sequencenumber{fill:#333;}#mermaid-svg-DR1vxw3RyQAX77HD

#crosshead

path{fill:#333;stroke:#333;}#mermaid-svg-DR1vxw3RyQAX77HD

.messageText{fill:#333;stroke:#333;}#mermaid-svg-DR1vxw3RyQAX77HD

.labelBox{stroke:hsl(259.6261682243,

59.7765363128%,

87.9019607843%);fill:#ECECFF;}#mermaid-svg-DR1vxw3RyQAX77HD

.labelText,#mermaid-svg-DR1vxw3RyQAX77HD

.labelTexttspan{fill:black;stroke:none;}#mermaid-svg-DR1vxw3RyQAX77HD

.loopText,#mermaid-svg-DR1vxw3RyQAX77HD

.loopTexttspan{fill:black;stroke:none;}#mermaid-svg-DR1vxw3RyQAX77HD

.loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243,

59.7765363128%,

87.9019607843%);fill:hsl(259.6261682243,

59.7765363128%,

87.9019607843%);}#mermaid-svg-DR1vxw3RyQAX77HD

.note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-DR1vxw3RyQAX77HD

.noteText,#mermaid-svg-DR1vxw3RyQAX77HD

.noteTexttspan{fill:black;stroke:none;}#mermaid-svg-DR1vxw3RyQAX77HD

.activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-DR1vxw3RyQAX77HD

.activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-DR1vxw3RyQAX77HD

.activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-DR1vxw3RyQAX77HD

.actorPopupMenu{position:absolute;}#mermaid-svg-DR1vxw3RyQAX77HD

.actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px

8px

rgba(0,0,0,0.2);filter:drop-shadow(3px

5px

0.4));}#mermaid-svg-DR1vxw3RyQAX77HD

.actor-man

line{stroke:hsl(259.6261682243,

59.7765363128%,

87.9019607843%);fill:#ECECFF;}#mermaid-svg-DR1vxw3RyQAX77HD

.actor-man

circle,#mermaid-svg-DR1vxw3RyQAX77HD

line{stroke:hsl(259.6261682243,

59.7765363128%,

87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-DR1vxw3RyQAX77HD

:root{--mermaid-font-family:"trebuchet

Client

element.offsetHeight;element.style.width

width

阶段关键动作优化手段DNS解析域名→IP映射预解析、减少域名数TCP握手建立可靠连接启用Keep-AliveTLS握手协商加密参数升级TLS

1.3、Session复用资源加载下载HTML/CSS/JS压缩、缓存、HTTP/2渲染树构建DOM/CSSOM合成减少CSS复杂度、延迟非关键CSS绘制像素渲染避免重绘、使用CSS动画

附录Chrome

讨论话题你在项目中如何优化首屏渲染速度欢迎在评论区分享实战经验

相关阅读