在服务器端生成静态html页面是优化网站性能的常见方案，能够减少动态渲染的开销，提升页面首屏加载速度。xmldom是一个可以在非浏览器环境模拟dom接口的JavaScript库，支持创建、修改、查询dom节点，非常适合用于服务器端构造html结构。接下来将详细介绍使用xmldom生成静态html页面的完整流程。
xmldom环境准备
首先需要在项目中安装xmldom依赖，如果你使用的是Node.js环境，可以通过npm进行安装：
// 安装xmldom库 npm install xmldom --save
创建基础dom结构
xmldom提供了DOMImplementation和Document类，我们可以先创建一个文档对象，再逐步添加html的各个节点。以下是一个创建基础html结构的示例：
const { DOMImplementation } = require('xmldom');
// 创建DOM实现实例
const domImpl = new DOMImplementation();
// 创建html文档对象
const doc = domImpl.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
// 获取根节点html
const htmlNode = doc.documentElement;
// 创建head节点
const headNode = doc.createElement('head');
// 创建meta字符集节点
const metaNode = doc.createElement('meta');
metaNode.setAttribute('charset', 'UTF-8');
headNode.appendChild(metaNode);
// 创建title节点
const titleNode = doc.createElement('title');
const titleText = doc.createTextNode('静态html页面');
titleNode.appendChild(titleText);
headNode.appendChild(titleNode);
// 创建body节点
const bodyNode = doc.createElement('body');
// 创建h1标题节点
const h1Node = doc.createElement('h1');
const h1Text = doc.createTextNode('使用xmldom生成的静态页面');
h1Node.appendChild(h1Text);
bodyNode.appendChild(h1Node);
// 将head和body添加到html节点
htmlNode.appendChild(headNode);
htmlNode.appendChild(bodyNode);
将dom转换为html字符串
构建好完整的dom结构后，需要将文档对象转换为html字符串，xmldom的document对象有toString方法可以直接输出序列化后的内容：
// 将dom序列化为html字符串 const htmlStr = doc.toString(); console.log(htmlStr);
输出的字符串会包含完整的html结构，不过默认可能没有文档声明，我们可以手动添加：
const fullHtml = '<!DOCTYPE html>' + htmlStr; console.log(fullHtml);
保存为静态html文件
得到完整的html字符串后，我们可以使用Node.js的fs模块将其保存为静态文件：
const fs = require('fs');
const path = require('path');
// 定义保存路径
const outputPath = path.join(__dirname, 'output', 'index.html');
// 确保目录存在
const outputDir = path.dirname(outputPath);
if (!fs.existsSync(outputDir)) {
fs.mkdirSync(outputDir, { recursive: true });
}
// 写入文件
fs.writeFileSync(outputPath, fullHtml, 'utf-8');
console.log('静态html页面生成成功，路径：' + outputPath);
添加复杂节点和属性
实际开发中可能需要添加更多复杂节点，比如带属性的div、列表、链接等，以下是一个添加更多内容的示例：
// 创建div容器节点
const containerNode = doc.createElement('div');
containerNode.setAttribute('class', 'container');
containerNode.setAttribute('id', 'main-content');
// 创建段落节点
const pNode = doc.createElement('p');
const pText = doc.createTextNode('这是xmldom生成的段落内容，支持添加各类属性和子节点。');
pNode.appendChild(pText);
containerNode.appendChild(pNode);
// 创建无序列表
const ulNode = doc.createElement('ul');
const listItems = ['列表项1', '列表项2', '列表项3'];
listItems.forEach(itemText => {
const liNode = doc.createElement('li');
const liText = doc.createTextNode(itemText);
liNode.appendChild(liText);
ulNode.appendChild(liNode);
});
containerNode.appendChild(ulNode);
// 创建链接节点
const aNode = doc.createElement('a');
aNode.setAttribute('href', 'https://ipipp.com');
aNode.setAttribute('target', '_blank');
const aText = doc.createTextNode('访问示例站点');
aNode.appendChild(aText);
containerNode.appendChild(aNode);
// 将容器添加到body
bodyNode.appendChild(containerNode);
注意事项
- xmldom的序列化规则与浏览器略有差异，生成的标签默认是小写，属性值会自动添加引号，不需要额外处理。
- 如果需要生成符合特定规范的html，可以在序列化后手动调整字符串，比如处理自闭合标签的格式。
- 处理大量节点时注意内存占用，避免一次性构建过于复杂的dom结构，可以分批次处理。
- 如果页面需要包含script或者style内容，直接创建对应节点并添加文本即可，xmldom会正确序列化这些节点。
总结
使用xmldom在服务器端生成静态html页面的核心流程是安装依赖、创建dom结构、序列化为字符串、保存为文件。这种方式不需要依赖浏览器环境，适合在服务端批量生成静态页面，比如生成文章详情页、产品介绍页等。开发者可以根据实际需求扩展节点创建逻辑，灵活生成符合业务要求的静态html内容。