[css]你有使用過preload、preconnect、prefetch這些屬性嗎？說說它們都有什么作用？

preload 元素的 rel 屬性的屬性值preload能夠讓你在你的HTML頁面中元素內(nèi)部書寫一些聲明式的資源獲取請求，可以指明哪些資源是在頁面加載完成后即刻需要的。 試想我們網(wǎng)站使用了一種特殊字體，我們在css里面定義了字體的url。那么直到瀏覽器開始解析CSS了才會識別出來需要加載這個資源。 如果我們提前讓瀏覽器下載好這個資源呢？那么執(zhí)行CSS的時候就可以直接用了。就像這樣： ``如上所示，我們使用這樣的語法： rel="preolad"聲明這是一個preload href指明資源的位置 as指明資源類型（這是為了讓瀏覽器精確設(shè)置優(yōu)先級，設(shè)置正確的CSP、Accept頭部） crossorigin 指明使用的跨域設(shè)置 preload和onload事件 添加preload聲明之后，瀏覽器初次加載的資源變多了，但preload并不會阻塞onload事件的觸發(fā) prefetch prefetch是對瀏覽器的暗示，暗示將來可能需要某些資源，但由代理決定是否加載以及什么時候加載這些資源。 efetch跟preload不同在于，用戶從A頁面進(jìn)入B頁面，preload的會失效，而prefetch的內(nèi)容可以在B頁面使用。preconnet 瀏覽器要建立一個連接，一般需要經(jīng)過DNS查找，TCP三次握手和TLS協(xié)商（如果是https的話），這些過程都是需要相當(dāng)?shù)暮臅r的，所以preconnet，就是一項使瀏覽器能夠預(yù)先建立一個連接，等真正需要加載資源的時候就能夠直接請求了。 而一般形式就是<link rel="preconnect" href="//example.com"> <link rel="preconnect" href="//cdn.example.com" crossorigin>瀏覽器會進(jìn)行以下步驟：解釋href的屬性值，如果是合法的URL，然后繼續(xù)判斷URL的協(xié)議是否是http或者h(yuǎn)ttps否則就結(jié)束處理 如果當(dāng)前頁面host不同于href屬性中的host,crossorigin其實被設(shè)置為anonymous(就是不帶cookie了)，如果希望帶上cookie等信息可以加上crossorign屬性,corssorign就等同于設(shè)置為use-credentials

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關(guān)前端面試題

總結(jié)

以上是生活随笔為你收集整理的[css]你有使用过preload、preconnect、prefetch这些属性吗？说说它们都有什么作用？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。