html个人网页制作源代码中小型企业网站优化

一般的话水印分为明水印和暗水印两种

明水印的话就是在视频canvas上面蒙上一个div（如我上篇文章） ，暗水印的话就是把文字通过技术嵌入到图像里。

具体实现的话可以使用MutationObserver API 来监视 DOM 的变化，特别是针对目标节点（这里是document.body）的子节点是否被删除。如果检测到有子节点被删除，它计划（但示例中未完全实现）重新插入一个水印元素。

1. 目标节点定义:

   const targetNode = document.body;

   这行代码将document.body（即网页的主体部分）赋值给targetNode变量，表示MutationObserver将观察这个节点的变化。

2. 创建MutationObserver实例:

   const observer = new MutationObserver((mutationsList) => {
   for (let mutation of mutationsList) {
   if (mutation.removedNodes.length > 0) {
   // 在此处判断是否有水印被删除
   // 如果水印被删除，则重新插入水印的 DOM 元素到目标节点
   // 例如：targetNode.appendChild(watermarkElement);
   }
   }
   });

   这里创建了一个MutationObserver实例，它接受一个回调函数作为参数。当监测到DOM变化时，会调用这个回调函数，并传入一个mutationsList（一个包含所有变化的MutationRecord对象的数组）。对于列表中的每个变化（mutation），如果它包含了被删除的节点（removedNodes.length > 0），则计划执行某些操作（在注释中提到的重新插入水印元素）。但请注意，示例中并没有定义watermarkElement变量，所以实际执行时需要先定义并准备好这个元素。

3. 配置MutationObserver:

   const config = { childList: true, subtree: true };

   设置MutationObserver的配置对象。childList: true表示观察目标节点的子节点的增减，subtree: true表示不仅观察目标节点的直接子节点，还观察其所有后代节点的变化。

4. 开始观察目标节点:

   observer.observe(targetNode, config);

   通过调用observe方法，将MutationObserver实例与targetNode（document.body）关联起来，并使用config对象作为参数来指定观察哪些类型的DOM变化。

• 在实际应用中，需要在回调函数内部定义或获取watermarkElement（水印元素），然后才能将其重新插入到DOM中。
• MutationObserver的回调函数可能会在DOM变化后立即执行，这意味着如果DOM变化非常频繁，可能会导致性能问题。因此，在设计时需要注意这一点，可能需要引入防抖（debounce）或节流（throttle）机制。
• 没有展示如何定义watermarkElement或如何具体地将其添加到DOM中，这些都是在实际应用中需要完成的步骤。
• 如果⽔印被删除后⽴即加回去，你可以在检测到⽔印被删除时，⽴即执⾏插⼊⽔印的代码，以
  确保⽔印能够迅速地重新出现在页⾯上