JS 文件的預加載、預取或預連接？

Question

在我的網站上，我有一個 twitch 嵌入，如果沒有這個嵌入，我的網站在頁面速度方面的表現非常好，但是一旦我添加它，它就會顯着增加加載時間。 我的網站是一個單頁的靜態網站——沒什么特別的。

我目前正在預加載我的單個 JS 文件以及我的樣式表。

標題中提到的上述哪一項（獲取、加載或連接），我應該在 twitch embed JS 上使用以提高性能嗎？

目前我只是將它卡在 index.html 的底部，如下所示（與 jQuery 一起，也許我也應該預取它？）

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>

Answer 1

對於像這樣的大型庫，這似乎是 3rd 方的系統性問題，一旦核心 UX 是交互式的，我就會延遲加載它們。

這是我在購物車頁面上加載條紋的方式：

function initStripe() {
    var script = document.createElement( "script" );

    script.src = "https://js.stripe.com/v3/";

    script.onload = stripeLoaded;

    document.body.appendChild( script );

}

Answer 2

您是否嘗試過延遲加載。 使用延遲加載將所有腳本標簽放在頭部。例如。

<head>
<!-- other headers -->
<script defer src="https://code.jquery.com/jquery-3.5.1.min.js"
          integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
          crossorigin="anonymous"></script>
<script defer src= "https://player.twitch.tv/js/embed/v1.js"></script>
</head

參考 google 開發者中的這篇文章Remove Render-Blocking JavaScript

JS 文件的預加載、預取或預連接？

問題描述

2 個解決方案

解決方案1
1 2020-09-16 20:09:51

解決方案2
0 2020-09-16 17:22:29

JS 文件的預加載、預取或預連接？

問題描述

2 個解決方案

解決方案1 1 2020-09-16 20:09:51

解決方案2 0 2020-09-16 17:22:29

解決方案1
1 2020-09-16 20:09:51

解決方案2
0 2020-09-16 17:22:29