ReactDOM ждет события onload, чтобы начать рендеринг? - PullRequest
2 голосов
/ 20 сентября 2019

Скажем, у меня есть клиентское приложение React, созданное ReactDOM,

<body>

<div id="root"></div>
<script src="/mybundle.js"></script> <!-- rendering happens here -->

<script async src='https://cdn.third-party.com/segment.js'></script>
<script async src='https://cdn.third-party.com/google_analytics.js'></script>
<script async src='https://connect.facebook.net/en_US/fbevents.js'></script>
<script async src='https://connect.facebook.net/en_US/sdk.js'></script>
<!-- etc.. various other 3rd party trackers and crap we have to load -->

</body>

Насколько я понимаю, эти сторонние библиотеки будут задерживать событие onload, пока их различные сценарии не загрузятся, даже если asyncуказано.

Это задержит рендеринг моего приложения реагирования?

Я проверил это, и наша первая значимая краска происходит примерно на 2 секунды быстрее на дросселированном компьютере, если я удаляю весь сторонний javascript.Все эти библиотеки утверждают, что они не замедляют работу вашего сайта, но экспериментально они определенно делают это.

Производительность с сторонними библиотеками, enter image description here

Производительностьсо всеми удаленными сторонними библиотеками, enter image description here

Есть ли способ загрузить эти сторонние библиотеки без ущерба для производительности моего приложения, отображаемого на одной странице, для клиента?

Я знаю ... 2,75 секунды все еще ужасно медленны.Я пытаюсь найти быстрые выигрыши, прежде чем приступить к серьезной переписке.

1 Ответ

0 голосов
/ 20 сентября 2019

Мои источники указывают, что он не ожидает события загрузки.

Источники ссылок:

Источники изображений:

enter image description here

...