JavaScript预渲染页面出现无效链接？原因排查及疑问

所用代码 #

var hint = document.createElement("link");
hint.setAttribute("rel", "prerender");
hint.setAttribute("href", link);
document.getElementsByTagName("head")[0].appendChild(hint);

生成的HTML输出 #

<link rel="prerender" href="https://mylink.com/?a=321&amp;c=72616&amp;s1=Source49&amp;s2=56_51952910468619620">

问题原因 #

这是HTML实体转义的正常行为：

• 当通过DOM API（如setAttribute）设置元素属性时，浏览器会自动对属性值中的特殊字符做转义处理，确保HTML语法合法。&是HTML实体的起始符，必须转义为&，否则会被浏览器误解析为实体开头，破坏HTML结构。
• 你看到的是浏览器序列化后的HTML源码，DOM内部存储的href值仍是原始带&的链接，转义仅为HTML输出时的规范处理。

链接是否会失效？ #

不会。

• 浏览器解析HTML时，会自动将&还原为&，实际发起预渲染请求时使用的是正确的URL。
• 若在控制台执行hint.getAttribute("href")，得到的结果是原始未转义的链接。

内容的提问来源于stack exchange，提问作者Raymond