本文主要介紹字型載入優化的常用策略，大部分內容為引用和翻譯。
@font-face
p 複製**
src引數帶不帶引號都可以，引數的格式不同含義也不盡相同，比如下面：
src: url(fonts/******.woff); /* 載入******.woff，位址相對於樣式表的位址 */
src: url(fonts/coll.otc#foo); /* 從coll.otc字符集中載入foo字型 */
src: url(fonts/coll.woff2#foo); /* 從coll.woff2字符集中載入foo字型 */
src: url(fonts.svg#******); /* 載入id 為'******'的svg字型 */
複製**
這就是font-face的最基礎的用法。 接下來我們會進一步分析font-face的用法，並盡可能的找出優化策略。
@font-face
複製**
在其它瀏覽器中也不盡相同，
html
id="test">
div>
複製**
#test
複製**
id="test">這裡是有文字的哦div>
複製**
#test
複製**
那你可能會問了，如果我們的dom元素是通過動態插入的呢？比如：
var el = document.createelement('div');
el.style.fontfamily = 'open_sansregular';
el.innerhtml = 'content.';
複製**
var el = document.createelement('div');
el.style.fontfamily = 'open_sansregular';
el.innerhtml = 'content.';
複製**
fout意思是在字型載入過程中使用預設的系統字型，字型載入完後顯示載入的字型，如果超過了foit(3s)字型還沒載入，則繼續使用預設的系統字型。
ie瀏覽器和edge不會等待foit超時才顯示預設字型，會立即顯示預設字型。fout比foit好，但是需要注意它引起的reflow.
那麼要想使瀏覽器有fout行為，我們需要在設定@font-face的時候給它加乙個屬性：font-display。 font-display預設是auto, 可選屬性與含義如下：
一般設定成fallback和optional即可。
在頁面加入下面這個**以便更快的載入字型：
rel="preload"
href="font.woff2"
as="font"
type="font/woff2"
crossorigin>
複製**
這種方法就是將@font-face中定義字型時的路徑直接改為字型的base64編碼。
優點： 這種做法的優點是不會產生foit和fout。所以也不會有reflow和repaint. 缺點： 字型轉成base64也會很大，會影響頁面首次載入速度。不支援逗號分隔的形式載入多種格式的字型，只能載入一種格式字型。這導致你為了盡可能保證所有瀏覽器都可以相容，通常會指定為woff格式，因為woff格式相容性好，但是卻沒法使用更小體積的woff2格式，因為woff2格式相容性差點。
這種方法就是通過非同步的方式插入帶有base64格式uri字型的css鏈結。
這種方式是期初並不使用用到@font-face的class，然後用font load api載入我們想用的字型，然後切換相應的css即可。font load api是原生的api：
document.fonts.load('1em open_sansregular')
.then(function() );
.open-sans-loaded h1
複製**
foft會把字型的載入分成多個部分，首先載入羅馬網路字型，然後會在載入真實的粗體和斜體的時候立即使用font-synthesis屬性渲染粗體和斜體的變體。
這種方法是基於[使用font load api + fout + class切換]這種方式的，非常適合載入同一種字型但是不同粗細，字形的場景，比如羅馬、粗體、斜體、粗斜體等。我們將這些字型分成2階段： 第一階段是羅馬字型，然後立即渲染人造粗體和斜體，最後(第二階段)用真實字型替代。這裡面還可以使用sessionstorage優化訪問重複檢視的場景。
critical foft和標準的fofi的唯一區別就在於第一階段羅馬字型的載入，critical foft不會載入羅馬字型的全集，只會載入它的乙個子集（比如a-za-z0-9），全集會在第二階段載入。
這個和critical foft的唯一區別就是羅馬子集字型的載入方式，前面是用font load api完成了，這裡會將馬子集字型硬編碼成base64 uri的形式載入。
這個同上面的唯一區別還是第一階段羅馬子集字型的載入方式，它採用的是preload的形式載入。
總的字型載入的策略可以用這個圖總結如下：
mysql效能優化 mysql效能優化
優化方式 1.空間換時間 冗餘 2.時間換空間 字段優先使用型別 int date char varchar text 索引型別 btree索引 hash索引 索引的葉子下，存放乙個資訊指向所在行的資料位址。btree有利於範圍查詢，hash有利於精確查詢。btree用的更多一些。btree索引的常...
效能優化 電量優化
使用battery historian來監測電量的情況，battery historian時google的乙個開源專案 具體安裝過程參見 當出現下列畫面，說明已經開啟 其開啟成功以後，訪問網頁如下所示 說明 這裡使用的是一台國外的vps伺服器，原本是想在本地虛擬機器實驗的，一直連線超時，就換成了vp...
效能優化 儲存優化
android系統提供4中基本的資料儲存方式，分別是sharedpreference 檔案儲存 sqlite資料庫 contentprovider。sharedpreference sharedpreference是一種簡單便捷的儲存方式，常用來儲存一些簡單配置資訊。儲存路徑 sharedprefe...