面试题手册

SVG 的性能优化对于提升网页加载速度和用户体验至关重要。以下是 SVG 性能优化的详细策略：1. 文件大小优化移除不必要的代码：# 使用 SVGO 优化 SVGnpx svgo input.svg -o output.svg# 批量优化npx svgo -f ./icons -o ./optimized# 配置优化选项npx svgo --config svgo.config.js input.svg -o output.svgSVGO 配置示例：// svgo.config.jsmodule.exports = { plugins: [ 'removeDoctype', 'removeXMLProcInst', 'removeComments', 'removeMetadata', 'removeUselessDefs', 'cleanupIDs', 'minifyStyles', 'convertPathData', 'mergePaths', 'removeUnusedNS', 'sortDefsChildren', 'removeEmptyAttrs', 'removeEmptyContainers', 'cleanupNumericValues', 'convertColors', 'removeUnknownsAndDefaults' ]};2. 路径优化简化路径命令：<!-- 优化前 --><path d="M 10.123456 20.654321 L 30.987654 40.321098" /><!-- 优化后 --><path d="M10.12 20.65L30.99 40.32" />使用相对坐标：<!-- 使用绝对坐标 --><path d="M 10 10 L 20 10 L 20 20 L 10 20 Z" /><!-- 使用相对坐标（更简洁）--><path d="M10 10h10v10h-10z" />合并路径：<!-- 优化前 --><rect x="10" y="10" width="50" height="50" fill="blue" /><rect x="70" y="10" width="50" height="50" fill="blue" /><!-- 优化后（使用 path）--><path d="M10 10h50v50H10z M70 10h50v50H70z" fill="blue" />3. 渲染性能优化减少元素数量：<!-- 优化前：多个独立元素 --><circle cx="10" cy="10" r="5" fill="blue" /><circle cx="20" cy="10" r="5" fill="blue" /><circle cx="30" cy="10" r="5" fill="blue" /><!-- 优化后：使用 group --><g fill="blue"> <circle cx="10" cy="10" r="5" /> <circle cx="20" cy="10" r="5" /> <circle cx="30" cy="10" r="5" /></g>使用 CSS 代替 SVG 属性：<!-- 优化前 --><circle cx="50" cy="50" r="40" fill="blue" stroke="red" stroke-width="2" /><!-- 优化后：使用 CSS --><style>.circle { fill: blue; stroke: red; stroke-width: 2px;}</style><circle class="circle" cx="50" cy="50" r="40" />4. 动画性能优化优先使用 CSS 动画：/* CSS 动画（GPU 加速）*/.animated { animation: rotate 2s linear infinite; transform-origin: center;}@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}避免动画 width/height：/* 优化前：动画 width/height（性能差）*/.bad { animation: scale 1s ease;}@keyframes scale { from { width: 50px; height: 50px; } to { width: 100px; height: 100px; }}/* 优化后：动画 transform（性能好）*/.good { animation: scale 1s ease;}@keyframes scale { from { transform: scale(1); } to { transform: scale(2); }}5. 滤镜性能优化避免过度使用滤镜：<!-- 避免复杂的滤镜链 --><filter id="complex"> <feGaussianBlur stdDeviation="5" /> <feOffset dx="5" dy="5" /> <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode /> </feMerge></filter><!-- 简化滤镜或使用 CSS --><style>.shadow { filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));}</style>6. 加载优化内联关键 SVG：<!-- 首屏关键 SVG 内联 --><header> <svg viewBox="0 0 24 24" width="24" height="24"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /> </svg></header><!-- 非关键 SVG 延迟加载 --><img src="non-critical.svg" loading="lazy" alt="Non-critical" />使用 SVG Sprite：<!-- 合并多个图标到一个文件 --><svg style="display: none;"> <symbol id="icon1" viewBox="0 0 24 24">...</symbol> <symbol id="icon2" viewBox="0 0 24 24">...</symbol> <symbol id="icon3" viewBox="0 0 24 24">...</symbol></svg><!-- 使用图标 --><svg><use href="#icon1" /></svg><svg><use href="#icon2" /></svg>7. 压缩和缓存服务器配置：# Nginx 配置location ~* \.(svg)$ { gzip on; gzip_vary on; gzip_min_length 1000; gzip_types image/svg+xml; expires 1y; add_header Cache-Control "public, immutable";}8. 监控和测试性能测试工具：Lighthouse：测试整体性能WebPageTest：分析加载性能Chrome DevTools：监控渲染性能最佳实践：定期使用 SVGO 优化 SVG 文件优先使用 CSS 动画减少元素数量和复杂度合理使用滤镜和渐变内联关键 SVG，延迟加载其他启用 gzip 压缩设置适当的缓存策略监控性能指标

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，具有以下核心特性：1. 矢量特性SVG 使用数学描述（路径、形状、文本）来定义图形，而不是像素可以无限缩放而不失真，在任何分辨率下都保持清晰文件大小通常比位图格式（如PNG、JPG）更小2. XML 基础SVG 是基于 XML 的标记语言，可以直接嵌入 HTML可以通过 CSS 和 JavaScript 进行样式化和交互操作支持标准的 DOM 操作和事件处理3. 可访问性SVG 内容可以被搜索引擎索引支持屏幕阅读器，提供更好的无障碍体验可以添加 title 和 desc 元素提供描述信息4. 性能优势可以通过 gzip 压缩进一步减小文件大小支持渐进式渲染可以内联在 HTML 中，减少 HTTP 请求5. 动画和交互支持 SMIL 动画和 CSS 动画可以通过 JavaScript 实现复杂的交互效果支持事件监听器（click、hover 等）6. 浏览器兼容性所有现代浏览器都原生支持 SVG可以作为 img、object、embed 或内联元素使用移动设备兼容性良好SVG 特别适合用于图标、图表、logo、插画等需要高质量缩放的图形场景。