您现在的位置是：网站首页 > 脚本的引入(script)文章详情
脚本的引入(script)
陈川
【
HTML
】
9114人已围观
3481字
在HTML中，脚本的引入是实现动态交互和功能扩展的核心方式之一。通过<script>标签，开发者可以嵌入JavaScript代码或引用外部脚本文件，从而为网页添加行为逻辑。以下从不同角度展开详细讨论。
<script>标签的基本用法
<script>标签可以直接在HTML文档中嵌入JavaScript代码。例如：
<script>
alert('页面加载时弹出提示');
</script>
也可以引用外部脚本文件：
<script src="app.js"></script>
当使用src属性时，标签内的脚本内容会被忽略。以下写法中，console.log不会执行：
<script src="library.js">
console.log('这段代码无效');
</script>
脚本加载位置的影响
头部引入的阻塞问题
将<script>放在<head>中可能导致渲染阻塞：
<head>
<script src="heavy-script.js"></script>
</head>
<body>
<!-- 页面内容会等待脚本加载完成才显示 -->
</body>
推荐的身体底部引入
传统做法是将脚本放在<body>末尾：
<body>
<!-- 页面内容 -->
<script src="app.js"></script>
</body>
异步加载策略
defer属性
defer让脚本在文档解析完成后按顺序执行：
<script src="a.js" defer></script>
<script src="b.js" defer></script>
<!-- 保证a.js在b.js之前执行 -->
async属性
async使脚本异步加载，执行顺序不确定：
<script src="tracker.js" async></script>
<!-- 适合不依赖其他脚本的统计代码 -->
模块化脚本
使用type="module"支持ES6模块：
<script type="module">
import { utils } from './utils.js';
utils.doSomething();
</script>
模块脚本默认具有defer特性，也可以显式使用async：
<script type="module" async src="main.mjs"></script>
动态脚本加载
通过DOM API动态添加脚本：
const script = document.createElement('script');
script.src = 'dynamic.js';
document.head.appendChild(script);
可以监听加载事件：
script.onload = () => console.log('脚本加载完成');
script.onerror = () => console.error('加载失败');
内联脚本的注意事项
内联脚本中的特殊字符需要处理：
<script>
const pattern = /<\/script>/; // 错误写法
const correctPattern = /<\/script>/; // 正确转义
</script>
跨源脚本的安全限制
crossorigin属性
控制跨域脚本的错误信息获取：
<script src="https://other-domain.com/lib.js" crossorigin="anonymous"></script>
integrity属性
子资源完整性校验：
<script
src="https://example.com/example-framework.js"
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
crossorigin="anonymous">
</script>
传统脚本的兼容处理
nomodule属性用于兼容不支持ES模块的浏览器：
<script type="module" src="modern.js"></script>
<script nomodule src="legacy.js"></script>
脚本与文档类型的关系
在XHTML文档中需要特殊写法：
<script type="text/javascript">
//<![CDATA[
alert('XHTML文档中的脚本');
//]]>
</script>
性能优化实践
预加载关键脚本
<link rel="preload" href="critical.js" as="script">
请求优先级控制
<script src="high-priority.js" fetchpriority="high"></script>
<script src="low-priority.js" fetchpriority="low"></script>
服务端脚本的替代方案
虽然少见，但可以定义其他脚本类型：
<script type="text/vbscript">
MsgBox "VBScript示例"
</script>
现代框架的脚本处理
React等框架的JSX转换示例：
import React from 'react';
function App() {
return <script dangerouslySetInnerHTML={{__html: `console.log('动态脚本')`}} />;
}
内容安全策略(CSP)的影响
当启用CSP时可能需要调整：
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
此时内联脚本需要添加nonce：
<script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">
console.log('通过CSP验证的脚本');
</script>
脚本与Shadow DOM的交互
在Web Components中使用脚本：
<template id="my-component">
<script>
console.log('每个实例都会执行');
</script>
</template>
<script>
customElements.define('my-component', class extends HTMLElement {
constructor() {
super();
const template = document.getElementById('my-component');
this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true));
}
});
</script>
