大家推薦一個網站(css-loaders.com),這個網站真的是特別好用,將來同學在開發項目的時候基本上都需要用到各種各樣的加載狀態,各種各樣的加載動畫。這個網站就提供了各種各樣的加載動畫,而且用起來超級簡單,就不可能不會用,特別簡單。
大家看到了嗎?這么一堆的加載中動畫就很方便,而且我告訴你怎么用。舉個例子,比如這個,大家看我喜歡想要哪個動畫,只需要把鼠標放上去,有一個叫copy the CSS,把它的CSS樣式復制下來。
然后去干什么?找到代碼,這是一個空的文件,直接Ctrlv粘貼,它就能自動的把剛才所看中動畫的樣式給復制進來了。對于頁面來說就只需要加一個div,這個div在這就加一個class,名字為loader的DIV,這樣一個加載中動畫就有了。
然后就直接打開看一下,大家會看到了嗎?這個動畫就有了,特別方便。想換成別的樣式的就隨便切換就行了。只要有DIV,將來想用什么動畫就直接copy它的CSS樣式,比如這個,再復制一下,點擊一下就行了。把之前的樣式刪掉,再粘進來,剛才復制過來的,再粘貼,動畫也就出來了。
是不是特別的好用?而且這里面的動畫效果特別多,能夠讓網頁變得非常炫酷。這些足夠用了,真的是多的不能再多了,給我看的都眼花繚亂了。這樣一個鬧鐘的效果,什么樣的都有。而且做的很簡單,只需要替換掉CSS,有這樣一個div,效果就有了。
看到了嗎?各位,就這個網站的,必須收藏,真的好用。
SS加載確實有可能阻塞頁面加載,但這并非絕對,具體取決于CSS的加載方式、應用位置以及瀏覽器的渲染機制。在了解CSS加載如何影響頁面加載之前,我們先要明白瀏覽器渲染頁面的基本流程。
瀏覽器在加載網頁時,會按照從上到下的順序解析HTML文檔。當瀏覽器遇到`<link>`標簽引用外部CSS文件時,它會停止HTML的解析,轉而加載并應用這個CSS文件。這個過程被稱為CSS阻塞。因此,如果這個CSS文件很大或者加載速度很慢,用戶可能會看到一個空白頁面,直到CSS文件完全加載并應用。
然而,有幾種方法可以避免或減輕CSS加載對頁面加載的阻塞:
此外,值得注意的是,現代瀏覽器通常具有一些優化機制,如并行下載、緩存等,這些都可以幫助減少CSS加載對頁面加載的影響。
總的來說,CSS加載確實有可能阻塞頁面加載,但通過一些優化策略和技術,我們可以減輕或避免這種阻塞。選擇哪種策略取決于你的具體需求和約束。
能大家都知道,js執行會阻塞DOM樹的解析和渲染,那么css加載會阻塞DOM樹的解析和渲染嗎?接下來,我們就一起來分析一下。
那么為什么會出現上面的現象呢?我們從瀏覽器的渲染過程來解析下。
不同的瀏覽器使用的內核不同,所以他們的渲染過程也是不一樣的。目前主要有兩個:
webkit渲染過程
Gecko渲染過程
從上面兩個流程圖我們可以看出來,瀏覽器渲染的流程如下:
從流程我們可以看出來
對于瀏覽器來說,頁面加載主要有兩個事件,一個是DOMContentLoaded,另一個是onLoad。而onLoad沒什么好說的,就是等待頁面的所有資源都加載完成才會觸發,這些資源包括css、js、圖片視頻等。
而DOMContentLoaded,顧名思義,就是當頁面的內容解析完成后,則觸發該事件。那么,正如我們上面討論過的,css會阻塞Dom渲染和js執行,而js會阻塞Dom解析。那么我們可以做出這樣的假設
我們先對第一種情況做測試:
<!DOCTYPE html> <html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> document.addEventListener('DOMContentLoaded', function() { console.log('DOMContentLoaded'); }) </script> <link rel="stylesheet"> </head> <body> </body> </html>
實驗結果如下圖:
從動圖我們可以看出來,css還未加載完,就已經觸發了DOMContentLoaded事件了。因為css后面沒有任何js代碼。
接下來我們對第二種情況做測試,很簡單,就在css后面加一行代碼就行了
<!DOCTYPE html> <html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> document.addEventListener('DOMContentLoaded', function() { console.log('DOMContentLoaded'); }) </script> <link rel="stylesheet"> <script> console.log('到我了沒'); </script> </head> <body> </body> </html>
實驗結果如下圖:
我們可以看到,只有在css加載完成后,才會觸發DOMContentLoaded事件。因此,我們可以得出結論:
由上所述,我們可以得出以下結論:
因此,為了避免讓用戶看到長時間的白屏時間,我們應該盡可能的提高css加載速度,比如可以使用以下幾種方法:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。