A parser-blocking, cross site (i.e. different eTLD+1) script, http://api.map.baidu.com/getscript?v=2

spa中引入百度地图api出现警告

引入百度地图之后，页面出现黄色警告：

A parser-blocking, cross site (i.e. different eTLD+1) script, http://api.map.baidu.com/getscript?v=2.0&ak=your ak&services=&t=**************, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.

搬运大神的文章https://blog.csdn.net/viewyu12345/article/details/80705114

• 在弱的网络连接环境下，比如2G网络，在页面上使用document.write()来动态插入外部的脚本会阻塞页面的解析，延迟页面的显示，甚至加载脚本失败，最终导致页面不能正确显示。
• 为了提高用户的体验，Chrome对于由document.write()动态插入的<script>会做检查，当满足下面所有的条件下，Chrome不会执行加载

1. 用户处在弱网络连接的环境下，特别是2G网络。
2. document.write()在主页面里，对于那些嵌入在iframe里的页面没有影响。
3. 在document.write()插入的脚本是阻碍解析的（parser-blocking）。如果插入的<script>标签加了async 或着defer属性，脚本会异步加载，不影响解析 ，所以也是能被执行的。
4. 加载的脚本和站点不是同一个域名。
5. 脚本没有在浏览器的缓存里
6. 页面不是重新加载

• 从Chrome 53开始，对于满足2-5条件的代码，在控制台会输出上述警告。

解决：

将

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your ak></script>

改为

<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=your ak"></script>

• over