由于始终没有还原阻塞时的情形，无法截图。在正常情况下，是无法区别是否使用defer的区别的。后续看一下是否能模拟场景。写demo模拟场景，由于当时的场景是外链是js加载阻塞，而不是js执行阻塞，暂时没有有效模拟。但是可以确定的是，使用defer或async可以有效解决，外链js阻塞内部js执行的问题。Demo详情：ndex1里面是一个耗时一秒钟的操作结果如将index1.js加上defer后发现，耗时的index1，没有阻塞后续的index2和内嵌js2执行假如将index1.js加上async可发现，不但没有阻塞后续的index2和内嵌js2执行，DOMContentLoad时间也提前了假如index1和index2都async了可发现，内嵌的js1和js2，提前，外接index1,和index2顺序执行，index1阻塞了index2假如耗时的index1 async, 后置位index2 defer可发现，内嵌的js1和js2，提前, index1不阻塞了index2假如耗时的index1 defer, 后置位index2 async可发现，内嵌的js1和js2，提前, index1阻塞了index2,DOMContentLoad时间滞后结论：1.使用defer, async异步加载，可以使内部的js不被阻塞2.使用defer属性的标签，永远在DOMContentLoaded事件之前执行完成。3.defer可以阻塞async的执行，虽然两个标签都是异步下载的回到项目中：一站式是React渲染，React的js脚本执行一定是在DOMContentLoaded时间之前我发现给机器人sdk加上defer之后 first paint 仍然是在DOMContentLoad之后，那我猜想，defer并不能使DOMContentLoad提前，会不会不能解决这个问题然后我找了个外网React CDN的script标签来模拟这个超时加载sdk的场景，发现首屏时间大大延长延长时间基本等于js加载时间，2.63s， 而且首次渲染在DOMContentLoad之前，首屏时间没有截全，但是看看下面这个图你就明白了，肯定在2S以上，肯定是未加载的js影响了页面的渲染然后给其加上defer属性，基本影响就小很多了，????js加载时间因网络原因减少1.2s，但是DOMContentLoad少了足足2.9s, 且首次渲染仍然在DOMContentLoad之前，之后1.2s左右解决方案：机器人SDK(使用defer解决标题)<script type=“text/javascript” charset=“utf-8” defer src=“https://e.xiaojukeji.com/sdk/...;></script>附：魔镜SDK(使用async加载，曾经因为没有用async也阻塞过一次)<script type=“text/javascript” async charSet=“utf-8” src=“https://mirror-api.intra.xiao…; />enps SDK(同步加载)<script src=”//img-ys011.didistatic.com/static/base_portal/loco.js”></script>分享几个基础概念defer和async的区别defer和async可以解决script阻塞页面渲染Defer -> 如果script标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染 defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行async的设置，会使得script脚本异步的加载并在允许的情况下执行 async的执行，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行情况1： HTML 还没有被解析完的时候，async脚本已经加载完了，那么 HTML 停止解析，去执行脚本，脚本执行完毕后触发DOMContentLoaded事件。如下图所示：Sdk加载阻塞页面情况2： HTML 解析完了之后，async脚本才加载完，然后再执行脚本，那么在HTML解析完毕、async脚本还没加载完的时候就触发DOMContentLoaded事件。如下图所示：Sdk加载阻html的版本 html4.0中定义了defer；html5.0中定义了async浏览器Feature Chrome Firefox (Gecko) Internet Explorer Opera SafariBasic support 1.0 1.0 (1.7 or earlier) (Supported) (Supported) (Supported)asyncattribute (Supported) 3.6 (1.9.2) 10 – (Supported)deferattribute (Supported) 3.5 (1.9.1) 4 – (Supported) DOMContentLoaded与load的区别DOMContentLoaded：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载load: 当一个资源及其依赖资源已完成加载时，将触发load事件参考文章：再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载https://www.zhoulujun.cn/html…浅谈script标签中的async和deferhttps://www.cnblogs.com/jiasm…高性能Javascript–脚本的无阻塞加载策略http://www.cnblogs.com/coco1s…