摘要：由于始终没有还原阻塞时的情形，无法截图。写模拟场景，由于当时的场景是外链是加载阻塞，而不是执行阻塞，暂时没有有效模拟。但是可以确定的是，使用或可以有效解决，外链阻塞内部执行的问题。
由于始终没有还原阻塞时的情形，无法截图。在正常情况下，是无法区别是否使用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属性，基本影响就小很多了，
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/100401.html
摘要：下面我们撇开网络方面的优化，只分析静态资源方面的优化。不过，也会阻止的构建和延缓网页渲染。未优化正常加载优化后异步加载根据上面的分析，我们可以清楚的认识到，非必要优先加载的，选择异步加载是最优选择。 为什么做优化 经典问题：白屏时间过长，用户体验差产生的原因：网络问题、关键渲染路径（CRP）问题 怎么做优化 如何做好优化呢，网上随便一搜，就有很多优化总结，无非就是网络优化、静态资源（h...
摘要：下面我们撇开网络方面的优化，只分析静态资源方面的优化。不过，也会阻止的构建和延缓网页渲染。未优化正常加载优化后异步加载根据上面的分析，我们可以清楚的认识到，非必要优先加载的，选择异步加载是最优选择。 为什么做优化 经典问题：白屏时间过长，用户体验差产生的原因：网络问题、关键渲染路径（CRP）问题 怎么做优化 如何做好优化呢，网上随便一搜，就有很多优化总结，无非就是网络优化、静态资源（h...
摘要：下面我们撇开网络方面的优化，只分析静态资源方面的优化。不过，也会阻止的构建和延缓网页渲染。未优化正常加载优化后异步加载根据上面的分析，我们可以清楚的认识到，非必要优先加载的，选择异步加载是最优选择。 为什么做优化 经典问题：白屏时间过长，用户体验差产生的原因：网络问题、关键渲染路径（CRP）问题 怎么做优化 如何做好优化呢，网上随便一搜，就有很多优化总结，无非就是网络优化、静态资源（h...
阅读 3648·2021-11-22 13:52
阅读 3578·2019-12-27 12:20
阅读 2360·2019-08-30 15:55
阅读 2086·2019-08-30 15:44
阅读 2249·2019-08-30 13:16
阅读 551·2019-08-28 18:19
阅读 1859·2019-08-26 11:58
阅读 3414·2019-08-26 11:47
