Sdk加载壅塞页面衬着题目的总结

由于一直没有复原壅塞时的状况，没法截图。在一般状况下，是没法区分是不是运用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属性，基本影响就小很多了，&＃x1f613;

js加载时刻因收集缘由削减1.2s，然则DOMContentLoad少了足足2.9s, 且初次衬着仍然在DOMContentLoad之前，以后1.2s摆布

处理方案：
机器人SDK(运用defer处理题目)

附：
魔镜SDK(运用async加载，曾由于没有用async也壅塞过一次)

分享几个基本观点

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 Safari
Basic 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&＃8230;

浅谈script标签中的async和defer
https://www.cnblogs.com/jiasm&＃8230;

高性能Javascript&＃8211;剧本的无壅塞加载战略
http://www.cnblogs.com/coco1s&＃8230;