面试题库 词条目录
前端Wiki/词条/从 URL 输入到页面渲染

从 URL 输入到页面渲染

定义经典面试题：浏览器从输入地址到看到页面的全链路（网络 + 解析 + 渲染）

网络阶段：URL 解析（补全协议）→ DNS 查询（递归找 IP，浏览器/系统/路由器缓存逐级查）→ 建立 TCP 连接（三次握手，HTTPS 再加 TLS 握手）→ 发送 HTTP 请求 → 服务器处理并返回响应。拿到 HTML 后进入关键阶段：状态码决定下一步（301/302 跳转、304 用缓存、200 解析）。

渲染阶段：HTML 解析器边下载边解析成 DOM 树；CSS 解析成 CSSOM；两者合成渲染树（Render Tree，只含可见节点——display:none 不入树、head 不入树）；布局（Layout/reflow 算几何位置）→ 绘制（Paint 像素）→ 合成（Composite，分层合成 GPU 加速）。期间 JS 阻塞 DOM 解析（除非 async/defer），CSS 阻塞渲染。理解了这条主线，后续重绘回流、缓存、跨域等题都有了挂靠点。

HTML
<!-- 这条链路上的优化手段（回答时可挂靠） -->
<head>
  <!-- 提前解析域名：省 DNS 查询时间 -->
  <link rel="dns-prefetch" href="//cdn.example.com">
  <!-- 预连接：DNS + TCP + TLS 全部提前 -->
  <link rel="preconnect" href="//cdn.example.com" crossorigin>
  <!-- 关键资源预加载：提前进入请求队列 -->
  <link rel="preload" as="font" href="/font.woff2" crossorigin>
  <!-- 关键 CSS 内联：让首屏渲染不等外部样式表 -->
  <style>/* critical css */</style>
</head>
<body>
  <!-- defer：不阻塞解析，DOMContentLoaded 前执行 -->
  <script src="/app.js" defer></script>
  <!-- async：下载不阻塞，下完立即执行（不保证顺序） -->
  <script src="/tracker.js" async></script>
</body>
⚠ 常见误区
🔗 相关词条重绘与回流HTTP 缓存重绘回流
← 返回来源章节从 URL 输入到页面渲染