非同步載入css 和 谷歌瀏覽器各實用小工具介紹

2021-10-01 19:13:16 字數 706 閱讀 2781

紅塵**網 wap.zuxs.net

加開頁面首屏顯示速度使我們前端一直在追求的目標,而css資源在這些優化中同樣也是不可或缺的。

乙個**可能有一部分css資源是必須的,他需要在頁面渲染完之前就被載入完,並和html一起解析,這個暫時無法做手腳,但是我們可以把一些非關鍵的css進行非同步化,也就是非同步載入。

市面上有很多任務具可以達到這個效果,比如loadcss

這次要說的這個非同步載入方式,其實也是loadcss中所用到的,**如下:

**很簡單,聰明的你,一眼就能看懂:

初始化為針對print型別,當載入完畢後,將media設定為全平台應用

但是這個怎麼和非同步取得關係的呢?

是因為瀏覽器會根據media判斷當前資源是否應用,然後再決定優先順序,由於我們採用的是稀有的print型別,所以瀏覽器識別後,會把當前以不影響頁面渲染的方式載入:非同步

可能會有人說起preload、preconnection、prefetch這類rel,但是由於瀏覽器支援度不一,所以線上需要更多的操作去彌補他們的相容性。

並且他們是有區別的,preload會導致瀏覽器載入該資源的優先順序變為最高,loadcss則會改為low。

(完)

瀏覽器中的阻塞載入和非同步載入

昨天在優化專案中的乙個外掛程式,遇到乙個很嚴重的問題。js的非同步載入。一般情況,瀏覽器在載入頁面當中的js,都是阻塞載入的,也就是從上到下,載入完乙個才繼續載入下乙個。我的外掛程式是依賴jquery庫才能執行的。我的解決方式有3種 1.定時器,延遲載入,讓這個外掛程式在jquery之後執行就可以。...

css修改谷歌瀏覽器和火狐瀏覽器的滾動條樣式

css 谷歌瀏覽器滾動條樣式 webkit scrollbar webkit scrollbar track piece webkit scrollbar thumb 也可以單獨設定橫向滾動條和縱向滾動條的背景顏色 webkit scrollbar thumb vertical webkit scr...

IE瀏覽器和谷歌瀏覽器的互跳

var obj new activexobject wscript.shell 符號要轉義 主要是利用了ie瀏覽器的activexobject物件實現。注意事項 1.跳轉如果攜帶引數,需要將查詢字串中 連線符改為 2.需要設定ie瀏覽器的安全設定,將activex控制項標記為可安全執行指令碼,操作步...