非同步載入CSS,javascrip,img與外連檔案優化，完成後重繪畫面

使用 Google Webfont 一直以來都發現著問題，在網頁戴入頁面時裡面的字元總是空白一大段時間，由其是瀏覽器快取清空或是第一次讀取會頓更久，直到看到梅問題教學網的文章才改善這問題。

梅問題教學網 -「Lazy Load CSS」非同步載入CSS
梅問題教學網 -「Lazy Load CSS」非同步載入CSS展示頁面

var cb = function() {
		var a = document.createElement('link'); 
		a.rel = 'stylesheet';
		a.href = 'fonts/general-j/mplus_webfonts.css';

		var b = document.createElement('link'); 
		b.rel = 'stylesheet';
		b.href = 'fonts/basic_latin/mplus_webfonts.css';

		var z = document.getElementsByTagName('head')[0];
		z.parentNode.insertBefore(a,z);
		z.parentNode.insertBefore(b,z);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);

var cb = function() {

var a = document.createElement('link');

a.rel = 'stylesheet';

a.href = 'fonts/general-j/mplus_webfonts.css';

var b = document.createElement('link');

b.rel = 'stylesheet';

b.href = 'fonts/basic_latin/mplus_webfonts.css';

var z = document.getElementsByTagName('head')[0];

z.parentNode.insertBefore(a,z);

z.parentNode.insertBefore(b,z);

};

var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;

if (raf) raf(cb);

else window.addEventListener('load', cb);

var cb = function() {
		var a = document.createElement('link'); 
		a.rel = 'stylesheet';
		a.href = 'http://fonts.googleapis.com/earlyaccess/notosanstc.css';
	
		var z = document.getElementsByTagName('head')[0];
		z.parentNode.insertBefore(a,z);
	};
	var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
	if (raf) raf(cb);
	else window.addEventListener('load', cb);

var cb = function() {

var a = document.createElement('link');

a.rel = 'stylesheet';

a.href = 'http://fonts.googleapis.com/earlyaccess/notosanstc.css';

var z = document.getElementsByTagName('head')[0];

z.parentNode.insertBefore(a,z);

};

var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;

if (raf) raf(cb);

else window.addEventListener('load', cb);

說明：
var a = document.createElement(‘link’);
主要是指出思源字型 (Noto Sans TC ) 的外戴路徑，因為字型順序為 Noto Sans TC","Microsoft JhengHei",微軟正黑體,"Microsoft YaHei",sans-serif，但因為 WebFont戴入速度比較慢而又是第一順位，在思源字型 (Noto Sans TC ) 戴入到暫存中後在重新刷新頁面，原本的微軟正黑體就會被思源字型 (Noto Sans TC )取代。
var z = document.getElementsByTagName(‘head’)[0];
指的是在 DOM 位置於第0筆，接與 <html>的下方。
if (raf) raf(cb); else window.addEventListener(‘load’, cb);
判斷 cb = function() 的戴入情形，先刷新在戴入 cb = function()，如果沒有戴入完成 (else) 再次戴入 cb = function()

http://fonts.googleapis.com/earlyaccess/notosanstc.css 注意如果是使用 https 的對應路徑，如果還是 http 用在 https 內的話，字型無法使用，主要是因為無法成功引入css

JavaScrip方法分析

addEventListener() 方法
定義和用法： addEventListener() 方法用於向指定元素添加事件
語法： element.addEventListener(event, function, useCapture)

requestAnimationFrame
requestAnimationFrame 是瀏覽器用於定時循環操作的一個接口，類似於 setTimeout，主要用途是按幀對網頁進行重繪。
設置這個 API 的目的是為了讓各種網頁動畫效果（DOM動畫、Canvas動畫、SVG動畫、WebGL動畫）能夠有一個統一的刷新機制，從而節省系統資源，提高系統性能，改善視覺效果。代碼中使用這個 API，就是告訴瀏覽器希望執行一個動畫，讓瀏覽器在下一個動畫幀安排一次網頁重繪。

資料來源：
梅問題教學網 -「Lazy Load CSS」非同步載入CSS
[轉譯]提高網站速度給力網站優化

javascript 的 requestAnimationFrame 方法：
requestAnimationFrame
requestAnimationFrame 筆記

javascript 的 HTML DOM addEventListener() 方法

標籤雲

JavaScrip方法分析