Chrome控制台警告preload未使用是因为浏览器要求预加载资源在3秒内被实际引用，否则触发Warning；常见原因包括as属性与资源类型不匹配、HTML或JS中未显式使用该资源、对懒加载模块盲目preload。
为什么 会触发 Chrome 控制台警告
因为 preload 是“提前加载、立即使用”的强提示，浏览器期望它在当前页面生命周期内（通常是 3 秒内）被实际用到。如果资源下载完却没被引用（比如 JS 没执行、CSS 没被 import），Chrome 就会报 Warning: preload for 'xxx.js' was not used。
常见踩坑点：
-
preload的as值必须与实际资源类型严格匹配，比如as="script"加载 .css 文件会失效 - 写了
preload却没在后续 HTML 或 JS 中显式使用该资源（例如没写<script src="xxx.js"></script>），等于白加 - 对异步组件或懒加载模块盲目
preload，反而干扰主资源加载优先级
defer 和 async 在 里怎么选才不阻塞渲染
defer 和 async 都能避免 script 阻塞 HTML 解析，但行为差异直接影响执行时机和依赖顺序。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 需要 DOM 就绪后执行、且有依赖顺序（如 jQuery + 插件），用
defer：它保证按书写顺序执行，且等DOMContentLoaded前完成 - 完全独立、无依赖的分析脚本（如统计埋点），用
async：它一下载完就执行，不等 DOM 构建完毕 - 千万别在
<head>里混用async和defer——async优先级更高，会导致执行乱序 - 注意：只有外部脚本（带
src）才支持这两个属性；内联 script 加了也无效
meta viewport 设置错会导致移动端布局崩吗
会，而且非常典型。错误的 viewport 值会让页面在手机上缩放异常、文字小得看不清、横向滚动条意外出现。
关键参数说明：
-
width=device-width必须写，否则 iOS Safari 默认按 980px 渲染，内容被压缩 -
initial-scale=1.0要配对出现，单独写width=device-width有时仍会放大 - 避免写
user-scalable=no—— 这会禁用双指缩放，违反 WCAG 可访问性要求，部分国家法律已限制 -
maximum-scale和minimum-scale已被现代浏览器弱化支持，不建议依赖
title 和 description 标签对 SEO 真的还有用吗
<title> 依然关键，<meta name="description"> 则基本只影响搜索结果摘要展示，不影响排名。
实际影响点：
-
<title>是搜索引擎判定页面主题的第一信号，长度建议控制在 50–60 字符内（含空格），超长会被截断 -
description内容若与用户搜索 query 高度匹配，可能被高亮显示，提升点击率；但 Google 明确表示不将其作为排序因子 - 多个页面共用同一
description值会被视为低质内容，容易触发重复内容惩罚 - 别再堆砌
keywordsmeta —— 所有主流搜索引擎已忽略该标签近十年
真正容易被忽略的是 lang 属性和 charset 声明：前者影响语音合成与翻译准确性，后者一旦漏写或写错（比如写成 GB2312 却传 UTF-8 内容），会导致中文直接乱码，且无法通过 CSS 修复。
