// 全局水印 let setWatermark = str => { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)) } let can = document.createElement('canvas') can.width = 200 can.height = 200 let cans = can.getContext('2d') cans.rotate((-15 * Math.PI) / 150) cans.font = '14px Vedana' cans.fillStyle = 'rgba(200, 200, 200, 0.40)' cans.textAlign = 'left' cans.textBaseline = 'middle' cans.fillText(str, can.width / 8, can.height / 2) let div = document.createElement('div') div.id = id div.style.pointerEvents = 'none' div.style.top = '0px' div.style.left = '0px' div.style.position = 'fixed' div.style.zIndex = '100000' div.style.width = document.documentElement.clientWidth + 'px' div.style.height = document.documentElement.clientHeight + 'px' div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat' document.body.appendChild(div) return id } const set = str => { let id = setWatermark(str) setInterval(() => { if (document.getElementById(id) === null) { id = setWatermark(str) } }, 500) window.onresize = () => { setWatermark(str) } } const outWatermark = id => { if (document.getElementById(id) !== null) { const div = document.getElementById(id) div.style.display = 'none' } } const out = () => { outWatermark('1.23452384164.123412415') } const reset = str => { out() set(str) } export default { set, out, reset, } 优化这段代码

这段代码的优化点主要在于性能和可读性方面。以下是一些可能的优化措施：

1. 减少重绘次数：当前的代码中，每隔 500 毫秒都会重新创建一个新的 canvas 元素，这可能会导致不必要的重绘。可以考虑使用缓存的方式，只有在窗口大小发生变化时才重新绘制水印。

2. 减少 DOM 操作：当前的代码中，每次重新绘制水印时都会创建一个新的 div 元素，这可能会导致频繁的 DOM 操作。可以考虑将水印元素预先创建好，只是在需要显示时改变其样式。

3. 简化代码逻辑：当前的代码中，对于水印元素的创建、删除、更新等操作都在一个函数中完成，代码逻辑比较复杂。可以考虑将这些操作拆分成更小的函数，以提高代码可读性。

4. 优化变量命名：当前的代码中，一些变量名命名不太规范，比如 can、cans 等，不太容易理解其含义。可以考虑使用更具有描述性的名称，以提高代码可读性。