CSS 的載入及載入順序簡介

2022-09-29 05:09:10 字數 1793 閱讀 6702

前言

通常的css載入順序

一般情況下,我們css樣式表是放在頭部,同時為了減少請求,我們通常對css進行乙個合併壓縮。 目前我們css一般是如下載入的:

…content…

這樣可以,但是有幾個效能問題,我們可以繼續優化:

問題:所有的css都合併壓縮成乙個檔案,放在頁面頭部載入。可能首屏我們僅僅用到一點點css,卻在頭部載入了所有的css,造成資源的不合理載入和浪費。假如css很大,嚴重影響網頁載入速度和首屏顯示速度。

換個思路

假如不合併,單個css壓縮引用,檔案大小是小了,但是請yrslz求數量多了一些。 權衡二者,並且進行效能測試對比,發現如下寫法確實比我們所有css放在頭部一次性載入,首屏顯示速度要快些:……

www.cppcns.com………

但是還是有效能可以優化的地方!

例如:我們首屏僅僅顯示了頭部和文章,其他模組首屏不顯示。那麼,其他模組的css我們可以完全非同步來載入。如何非同步載入呢?

請看下面

loadcss 及 preload

關於preload,推進2篇文章給大家看下:

1、通過rel="preload"進行內容預載入:

2、preload 的w3文件:

對於一些不是首屏載入的css,我們可以如下寫法:

防止瀏覽器禁止js,保險起見,也可以如下:

為了避免有些瀏覽器會重新呼叫處理程式rel='stylesheet'這個屬性,我們一般推薦如下寫法:

為了更好的相容rel=preload,可以使用loadcss ,github位址:

因此, 不考慮瀏覽器相容問題的情況下 (考慮相容問題,可以使用loadcss,這裡不多演示),我們對上面**再次進行優化:

程式設計客棧uot;>

… …

… class="about-me">…

…ps:下面看下關於html,css,js三者的載入順序問題

dom文件的載入順序是由上而下的順序載入;

1、dom載入到link標籤

css檔案的載入是與dom的載入並行的,也就是說,css在載入時dom還在繼續載入構建,而過程中遇到的css樣式或者img,則會向伺服器傳送乙個請求,待資源返回後,將其新增到dom中的相對應位置中;

2、dom載入到script標籤

由於js檔案不會與dom並行載入,因此需要等待js整個檔案載入完之後才能繼續dom的載入,倘若js指令碼檔案過大,則可能導致瀏覽器頁面顯示滯後,出現「假死」狀態,這種效應稱之為「阻塞效應」;會導致出現非常不好的使用者體驗;

而這個特性也是為什麼在js檔案中開頭需要$(document).ready(function(){})或者(function(){})或者window.onload,即是讓dom文件載入完成之後才執行js檔案,這樣才不會出現查詢不到dom節點等問題;

js阻塞其他資源的載入的原因是:瀏覽器為了防止js修改dom樹,需要重新構建dom樹的情況出現;

3、解決方法

前提,js是外部指令碼;

在script標籤中新增 defer=「ture」,則會讓js與dom並行載入,待頁面載入完成後再執行js檔案,這樣則不存在阻塞;

在scirpt標籤中新增 async=「ture」,這個屬性告訴瀏覽器該js檔案是非同步載入執行的,也就是不依賴於其他js和css,也就是說無法保證js檔案的載入順序,但是同樣有與dom並行載入的效果;

同時使用defer和async屬性時,defer屬性會失效;

可以將scirpt標籤放在body標籤之後,這樣就不會出現載入的衝突了。

總結本文標題: css 的載入及載入順序簡介

本文位址: /web/css/23824.html

dubbo配置項簡介及配置載入順序

標籤介紹 服務配置,用於暴露乙個服務,定義服務的元資訊,乙個服務可以用多個協議暴露,乙個服務也可以註冊到多個註冊中心。引用配置,用於引用乙個暴露的遠端服務,乙個引用可以指向多個註冊中心 協議配置,用於配置提供服務的協議資訊,協議由提供方指定,消費方被動接受.可以同時使用多個標籤定義多種支援協議 多協...

類載入器載入順序

先上 public class parent static public parent public static void staticmethod1 public static void staticmethod2 測試類 public static void main string args ...

關於樣式載入順序,js載入順序

對於大型 樣式表,js檔案有多個,這時載入順序有講究 以京東為例 對於js 先載入全域性配置,然後載入當前頁面配置 先載入base v1.js,再載入當前頁面配置 window.pageconfig 為啥要把pageconfig定義為乙個屬性,而不是單獨定義乙個變數,因為如果用乙個未定義的屬性時會i...