HTML链接与脚本标签

link和script标签是引入外部资源的核心方式，影响页面加载性能。

link链接标签

引入CSS

HTML

<link rel="stylesheet" href="style.css">

基本属性

属性	说明	常用值
rel	关系类型	stylesheet, icon, preload
href	资源URL	文件路径
type	MIME类型	text/css
media	媒体条件	screen, print
crossorigin	跨域设置	anonymous

媒体限定CSS

HTML

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">

网站图标

HTML

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="apple-icon.png" sizes="180x180">

预加载资源

preload预加载

HTML

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="hero.jpg" as="image">
<link rel="preload" href="main.js" as="script">
<link rel="preload" href="style.css" as="style">

提前加载关键资源
不执行，仅下载
提升首屏加载速度

as属性值

as值	资源类型
style	CSS文件
script	JavaScript
image	图片
font	字体文件
fetch	fetch请求
document	HTML页面

prefetch预获取

HTML

<link rel="prefetch" href="next-page.html">
<link rel="prefetch" href="next-article.js">

预加载下一页资源
低优先级，空闲时加载
适合预判用户行为

preconnect预连接

HTML

<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://api.example.com">

提前建立连接
减少DNS查询和TLS握手时间
preconnect比dns-prefetch更进一步

prefetch vs preload

类型	加载时机	优先级	用途
preload	当前页面需要	高	关键资源
prefetch	未来页面需要	低	预判资源

script脚本标签

基本用法

HTML

<script src="app.js"></script>

加载执行属性

属性	说明	效果
src	脚本URL	引入外部脚本
type	MIME类型	text/javascript, module
async	异步执行	不阻塞，立即执行
defer	延迟执行	HTML解析后执行
nomodule	降级处理	仅传统浏览器执行

内联脚本

HTML

<script>
  console.log('内联脚本立即执行');
</script>

async与defer

执行时机对比

HTML

<!-- 阻塞解析 -->
<script src="normal.js"></script>

<!-- async：下载完成后立即执行 -->
<script src="async.js" async></script>

<!-- defer：HTML解析完成后执行 -->
<script src="defer.js" defer></script>

执行顺序

属性	解析阻塞	执行时机	执行顺序
无属性	阻塞	下载后立即	按位置
async	不阻塞	下载后立即	不保证顺序
defer	不阻塞	DOMContentLoaded前	按位置顺序

使用场景

HTML

<!-- async：独立脚本（如统计代码） -->
<script src="analytics.js" async></script>

<!-- defer：依赖DOM的脚本 -->
<script src="app.js" defer></script>

<!-- 模块脚本 -->
<script type="module" src="module.js"></script>

type="module"默认defer行为，无需添加defer属性。

ES模块

模块引入

HTML

<script type="module" src="app.js"></script>

自动defer
支持import/export
严格模式

降级处理

HTML

<script type="module" src="modern.js"></script>
<script nomodule src="legacy.js"></script>

module脚本现代浏览器执行
nomodule脚本传统浏览器执行
实现新旧浏览器兼容

内联模块

HTML

<script type="module">
  import { greet } from './utils.js';
  greet('World');
</script>

动态脚本加载

JavaScript创建script

JavaScript

const script = document.createElement('script');
script.src = 'dynamic.js';
script.async = true;
document.head.appendChild(script);

load事件

JavaScript

script.onload = () => {
  console.log('脚本加载完成');
};

script.onerror = () => {
  console.log('脚本加载失败');
};

资源加载优化建议

位置策略

HTML

<head>
  <!-- CSS放在head -->
  <link rel="stylesheet" href="style.css">

  <!-- 预加载关键资源 -->
  <link rel="preload" href="critical.js" as="script">
</head>
<body>
  <!-- 内容 -->

  <!-- 非关键JS放在body末尾 -->
  <script src="app.js" defer></script>
  <script src="analytics.js" async></script>
</body>

性能检查

做法	原因
CSS放head	防止无样式内容闪烁
JS放body末尾	减少阻塞DOM解析
async独立脚本	不阻塞不影响顺序
defer依赖脚本	保证执行顺序
preload关键资源	加速首屏渲染

crossorigin跨域设置

HTML

<link rel="stylesheet" href="https://cdn.com/style.css" crossorigin="anonymous">
<script src="https://cdn.com/script.js" crossorigin="anonymous"></script>

值	说明
anonymous	无凭证请求
use-credentials	发送凭证（cookies）

crossorigin用于获取错误详情和CORS资源。

integrity完整性校验

HTML

<script
  src="https://cdn.example.com/jquery.min.js"
  integrity="sha384-abc123..."
  crossorigin="anonymous">
</script>

SRI（Subresource Integrity）校验
防止CDN篡改
确保资源完整性

要点总结

link引入CSS、图标、预加载资源
preload高优先级预加载当前页面资源
prefetch低优先级预加载未来页面资源
async立即执行，不保证顺序
defer延迟执行，保证顺序
type="module"支持ES模块语法
CSS放head，JS放body末尾优化加载

📝 发现内容有误？点击此处直接编辑