第 7 卷

Code block

1<!DOCTYPE html> 2<html>

3<head> 4<meta charset="UTF-8">

5<title>DNS 预解析示例</title> 6<!-- 预解析 CDN 域名 -->

◦ 注意： href 属性只需填写域名（无需带具体路径），如 https://cdn.xxx.com 而非

https://cdn.xxx.com/css/app.css

◦ 优先级：可配合 preconnect 使用（ preconnect 不仅预解析 DNS，还会建立 TCP 连

接，优先级更高，消耗也更大）

Code block

1. HTTP 响应头配置

服务器通过设置 X-DNS-Prefetch-Control 响应头，控制浏览器是否开启 DNS 预解析（默认情况下，浏览器会自动开启 DNS 预解析）

◦ X-DNS-Prefetch-Control: on：开启 DNS 预解析（默认值）

◦ X-DNS-Prefetch-Control: off：关闭 DNS 预解析（不推荐，除非有特殊需求）

◦ 示例（Nginx 配置）：

1. 禁用不必要的 DNS 预解析

若页面中无需预解析任何域名，或需要手动控制解析时机，可通过以下方式禁用：

◦ HTML 标签： <meta http-equiv="X-DNS-Prefetch-Control" content="off">

◦ HTTP 响应头： X-DNS-Prefetch-Control: off

DNS 预解析的应用场景

1. 页面中包含外部域名资源

当页面中使用了 CDN 域名、第三方资源域名（如字体、地图、统计脚本）、接口域名等外部域名时，提前预解析这些域名，减少后续资源加载的 DNS 解析时间

1. 预解析下一个路由的域名

对于单页应用，可根据用户行为（如鼠标悬浮在导航链接上），预解析下一个路由对应的接口域名或静态资源域名，提升路由跳转后的加载速度

1. 优化首屏加载性能

将首屏需要加载的外部资源域名（如 CDN 域名）优先进行 DNS 预解析，缩短首屏资源的加载时间，提升首屏渲染性能

注意事项

1. 不要过度预解析域名：过多的 DNS 预解析会消耗浏览器资源和用户带宽，建议只预解析确实需要

访问的核心域名

1. 优先使用 preconnect 处理高频访问域名：对于首屏加载必须用到的域名（如 CDN 域名），使

用 preconnect（预解析 DNS + 建立 TCP 连接），进一步减少资源加载时间；对于非核心域名，使用 dns-prefetch 即可

1. 兼容低版本浏览器： dns-prefetch 兼容所有现代浏览器，以及 IE 9+ 浏览器，无需担心兼容性

问题

总结

1. 前端性能优化覆盖加载、渲染、运行三大阶段，核心是减少资源体积、减少 DOM 操作、减少不必

要的执行频率

1. 代码分割、懒加载、CDN、HTTP 缓存是提升加载性能的核心手段；避免回流重绘、优化 CSS 选择

器是提升渲染性能的关键

1. 虚拟 DOM 通过最小化真实 DOM 操作提升性能，防抖节流通过限制函数执行频率减少性能开销

1. DNS 预解析、图片优化、JS 代码优化等细节操作，是性能优化的重要补充，能进一步提升用户体

验

（注：文档部分内容可能由 AI 生成）