记一次DNS解析js失败而阻塞渲染的问题及解决方案

事情的起因

在渲染某页面时, 引入了一个地图插件的js, 由于这个js在加载时会出现加载失败的情况, 加载失败时就会阻塞整个页面的渲染从而导致页面空白

原因分析 - 什么情况会出现加载js失败

• 不是完全能复现, 排查下来发现只有chrome有这个问题
• 而且chrome在连接浏览器代理时不会出现加载失败的情况
• 在连接公司vpn的情况下不会出现加载失败的情况
• 北京同事连公司内网也不会出现这个问题

整体看下来只有在使用chrome直接连接公司上海的有线, 不走浏览器代理, 就会精准复现

为什么会出现这种情况

由于只有在chrome浏览器上出现这个问题 - 考虑是浏览器问题
由于走代理就不会出现这个问题 - 考虑是域名解析的问题
由于连接公司有线就会出现这个问题 - 考虑是不同网络走的dns服务器不同

最后, 定位到, 是由于chrome浏览器中默认开启了使用安全DNS

关闭之后, 就可以正常访问了

chrome使用安全DNS

所有使用Chrome 85版本的用户，都将在浏览器的设置中看到一个名为“安全DNS”的新选项。 所有用户都将默认启用安全DNS选项，一旦打开，Chrome将尝试以加密的形式(通过DoH)进行DNS查询，并使用传统的纯文本DNS作为应急计划。

DNS over HTTPS (DoH)是什么

使用 HTTPS 发送和检索加密的DNS查询和响应的协议

为什么要使用DoH

参考链接 - 告别DNS劫持，一文读懂DoH
参考链接 - 基于DoH的隐蔽通信的机理与防御

在日常上网中，如果用户输入