評論中建議的現有方法是不可靠的，我發現服務工人/快取對它有干擾。我們希望能有一個更好的、更可靠的方法，能夠在遵守CSP的同時可靠地同步CSS。
我想實作異步加載CSS檔案，以提高性能。但是我也想要安全，所以我希望我的網站有CSP。
< link rel="styleheet" media="print" class="AOcssLoad" 。 ... onl oad="this.onload=null;this.media='all';" />
不談細節，它希望我避免像onload這樣的事情，以及許多其他屬于元素的JS。
我希望它看起來像這樣
< link rel="styleheet" media="print" class="AOcssLoad" href=" />
請建議一種方法來實作異步CSS檔案，而不像上面使用的行內JS。
我們可以使用行內的<script>標簽或單獨的JS檔案。
我試著將下面的代碼作為行內JS。下面是JS的HTML，
< script nonce="" type="text/javascript" data-exclude="true">
var Script = document. getElementsByClassName("AOcssLoad") 。
for (var i = 0 ; i < Script.length; i ) {
this.className = " Loading"/span>;
Script[i].addEventListener("load"/span>, function({
this.onload=null;this.media="all";
this.className = " onl oad";
})。
</script>
雖然它可以作業，但它非常不可靠。
我無法理解這個問題，但我想說的是，它只有50%的時間可以作業，有時只是重新加載頁面就可以解決/打破這個問題，而css/html/cache等沒有明顯變化。
請幫助我改進這個問題，或者為它建立一個更好的方法。
編輯：
正如評論中建議的那樣，我嘗試了不同的方法，包括GitHub上的其他資源鏈接。
這些方法是不可靠的，我想說它們只有不到50%的成功率。
然而，我試圖使用jQuery(document).ready()，并在所有的css檔案中添加media="all"，但這增加了TBT（總阻塞時間），從而影響了我的網站性能
uj5u.com熱心網友回復：
你可以使用基于jQuery .ready()的vanilla JS函式：
document. addEventListener("DOMContentLoaded", （）=> {
document.querySelectorAll(" 。 AOcssLoad").forEach(el => {
el.media = "all"/span>
console.log（`Loaded: ${el.href}`)
})
});< link rel="styleheet" media="print" class="AOcssLoad" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
< link rel="styleheet" media="print" class="AOcssLoad" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-utilities.min.css" />
< link rel="styleheet" media="print" class="AOcssLoad" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-reboot.min.css" />
< link rel="styleheet" media="print" class="AOcssLoad" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-grid.min.css" />
<h1>Hello world! </h1>然而，無論您選擇哪種解決方案，請注意您將不得不處理Flash of Unstyled Content（FOUC）。請考慮其他管理樣式表檔案的方法。
。uj5u.com熱心網友回復：
為什么不用
注入呢？<script>
document.write("<link rel="stylesheet" media="print" class="AOcssLoad" href="" />
");
</script>"。
并將<script>標簽放在你想要的<link>標簽的正上方。
或者只是
<link rel="styleheet" media="print" class="AOcssLoad" href="" />
除了css會異步加載外，什么都不會發生，你可以有csp
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/333012.html
標籤：
Kubernetes的資源控制器Job和CronJob詳解與示例 ......
uj5u.com 2020-09-10 00:10:45 moreVMware下安裝CentOS 一、軟硬體準備 1 Centos鏡像準備 1.1 CentOS鏡像下載地址 下載地址 1.2 CentOS鏡像下載程序 點擊下載地址進入如下圖的網站，選擇需要下載的版本，這里選擇的是Centos8，點擊如圖所示。 決定選擇Centos8后，選擇想要的鏡像源進行下載，此 ......
uj5u.com 2020-09-10 00:12:10 more如何使用Grep 命令查找多個字串 大家好，我是良許！ 今天向大家介紹一個非常有用的技巧，那就是使用 grep 命令查找多個字串。 簡單介紹一下，grep 命令可以理解為是一個功能強大的命令列工具，可以用它在一個或多個輸入檔案中搜索與正則運算式相匹配的文本，然后再將每個匹配的文本用標準輸出的格式 ......
uj5u.com 2020-09-10 00:12:28 moregit配置http代理 經常遇到克隆 github 慢的問題，這里記錄一下幾種配置 git 代理的方法，解決 clone github 過慢。 目錄 git配置代理 git單獨配置github代理 git配置全域代理 配置終端環境變數 git配置代理 主要使用 git config 命令 git單獨 ......
uj5u.com 2020-09-10 00:12:33 morenpm install 裝包時提示Error EACCES permission denied解決辦法 ......
uj5u.com 2020-09-10 00:12:53 moreCentos 7下安裝nginx，使用yum install nginx，提示沒有可用的軟體包。 18 (flaskApi) [root@67 flaskDemo]# yum -y install nginx 19 已加載插件：fastestmirror, langpacks 20 Loading ......
uj5u.com 2020-09-10 00:13:13 more在公網的服務器上經常遇到別人爆破你服務器的22埠，用來挖礦或者干其他嘿嘿嘿的事情~ 這種情況下正確的做法是： 修改默認ssh的22埠 使用設定密鑰登錄或者白名單ip登錄 建議服務器密碼為復雜密碼 創建普通用戶登錄服務器（root權限過大） 建立堡壘機，實作統一管理服務器 統計爆破IP [root ......
uj5u.com 2020-09-10 00:13:17 moreLinux系統中一些常見的快捷方式，可有效提高操作效率，在某些時刻也能避免操作失誤帶來的問題。 ......
uj5u.com 2020-09-10 00:13:31 more作業系統存在著大量的資料檔案資訊，相應檔案資訊會存在于系統相應目錄中，為了更好的管理資料資訊，會將系統進行一些目錄規劃，不同目錄存放不同的資源。 ......
uj5u.com 2020-09-10 00:13:35 more這里以Chrome為例。 1. 準備作業 wsl是可以使用Windows主機上安裝的exe程式，出于安全考慮，默認情況下改功能是無法使用。要使用的話，終端需要以管理員權限啟動。 我這里以Windows Terminal為例，介紹如何默認使用管理員權限打開終端，具體操作如下圖所示： 2. 操作 wsl ......
uj5u.com 2023-04-19 09:25:49 more問題：專案麒麟系統服務器的kdump服務無法啟動，沒有相關日志無法定位問題。 1、查看服務狀態是關閉的，重啟系統也無法啟動 systemctl status kdump 2、修改grub引數，修改“crashkernel”為“512M（有的機器數值太大太小都會導致報錯，建議從128M開始試，或者加個 ......
uj5u.com 2023-04-12 09:59:50 more問題：專案麒麟系統服務器的kdump服務無法啟動，沒有相關日志無法定位問題。 1、查看服務狀態是關閉的，重啟系統也無法啟動 systemctl status kdump 2、修改grub引數，修改“crashkernel”為“512M（有的機器數值太大太小都會導致報錯，建議從128M開始試，或者加個 ......
uj5u.com 2023-04-12 09:59:01 more1. 前文回顧 在之前的幾篇記憶體管理系列文章中，筆者帶大家從宏觀角度完整地梳理了一遍 Linux 記憶體分配的整個鏈路，本文的主題依然是記憶體分配，這一次我們會從微觀的角度來探秘一下 Linux 內核中用于零散小記憶體塊分配的記憶體池 —— slab 分配器。 在本小節中，筆者還是按照以往的風格先帶大家簡單 ......
uj5u.com 2023-04-05 16:44:11 more