前端面试：浏览器解析与渲染

1. 浏览器从输入 URL 到页面展示的完整过程？

DNS 解析域名，建立 TCP 连接，HTTPS 还会进行 TLS 握手；浏览器发送 HTTP 请求，服务器返回 HTML；浏览器解析 HTML 构建 DOM，解析 CSS 构建 CSSOM，合成渲染树，布局、绘制、合成，最后展示页面。

2. HTML、CSS、JS 在解析时有什么关系？

HTML 解析生成 DOM；CSS 解析生成 CSSOM，CSS 会影响渲染树构建；普通 JS 会阻塞 HTML 解析，因为 JS 可能修改 DOM 和 CSSOM。实际项目里可以用 defer、async、代码分包减少阻塞。

3. defer 和 async 区别？

defer 脚本并行下载，等 HTML 解析完成后按顺序执行；async 脚本并行下载，下载完立即执行，执行顺序不保证。依赖 DOM 或多个脚本有顺序关系时常用 defer。

4. DOMContentLoaded 和 load 区别？

DOMContentLoaded 表示 HTML 解析完成，DOM 可用；load 表示页面资源如图片、样式、脚本等都加载完成。通常业务初始化不必等到 load。

5. 回流/重排和重绘区别？

回流/重排是元素尺寸、位置变化导致浏览器重新计算布局；重绘是颜色、背景等视觉变化但布局不变。回流成本更高，优化时减少频繁读写 DOM，动画优先用 transform、opacity。

6. 浏览器渲染优化怎么做？

减少阻塞资源，压缩和拆分 JS/CSS，使用懒加载和预加载，避免大 DOM，减少强制同步布局，复杂动画用合成层能力，关键资源优先加载。

7. 什么是浏览器缓存？

浏览器缓存可以减少重复请求。强缓存通过 Cache-Control 直接复用资源；协商缓存通过 ETag 或 Last-Modified 向服务器确认资源是否变化。

8. localStorage、Cookie 和 IndexedDB 怎么选？

少量简单数据可用 localStorage；需要随请求自动发送的数据用 Cookie，但要注意安全；大量结构化数据、离线缓存可以用 IndexedDB。