通常我們都將css及javascript檔案引入在<head>.....</head>的區段內，但檔案稍大時就會得到警示內容：
必須修正的問題：
Better check yourself, you're not looking too good.清除前幾行內容中的禁止轉譯 JavaScript 和 CSS
您的網頁含有 6 項禁止轉譯指令碼資源和 4 項禁止轉譯 CSS 資源，對網頁的轉譯作業造成延遲。Google的建議其實都很簡單易懂，諸如直接在元素上加上style定義，或是內嵌小型 JavaScript，這都不難做到，只是有一點「延後載入 JavaScript」，這個項目則需要花點時間才能搞懂它，以下是吉姆的心得及解決步驟分享：
以下列這段網頁原始檔為例來說說明如何延遲css及javascript的載入，原先的寫法是：
<head>
..
...
.....
<link rel="stylesheet" href=css/style1.css">
<link rel="stylesheet" href=css/style2.css">
<script src=js/jquery.min.js"></script>
<script src=js/bootstrap.min.js"></script>
....
...
..
</head>延遲載入javascript
要做到這點比較簡單，只要在script標籤中加上 async 即可：<script src="js/jquery.min.js" async></script> <script src=js/bootstrap.min.js" async></script>延遲載入css
- 先下載 loadCSS.js 檔案，作者github連結：https://github.com/filamentgroup/loadCSS.git。
- 然後先在<head>區段將js檔案載入：
<script src=js/loadCSS.js"></script> - 替換原先的stylesheet語法：
<SCRIPT type="text/javascript"> loadCSS("css/style1.css); loadCSS("css/style2.css"); </SCRIPT> - 改成
<SCRIPT type="text/javascript"> loadCSS('css/style1.css'); loadCSS('css/style2.css'); </SCRIPT> - 大功告成。
加上保險
為防止有些不支援javascript的瀏覽器無法載入css檔案，所以最好在原先的<head>區段加上：loadCSS.js額外說明
- loadCSS.js預設是將stylesheet語法插入DOM的第一個script標籤之前，如果有特殊需求時，可在後面加上參數，例如：
就可以將stylesheet檔案插入到DOM的第二個script標籤之前。loadCSS( "css/style1.css", window.document.getElementsByTagName( 'script' )[ 1 ] ); - 改變媒體目標
就是把預設的 media="all" 改為 media="print"。loadCSS( "css/style1.css", "", "print" ); - callback功能不在本例說明，請自行研究。
- loadCSS.js預設是將stylesheet語法插入DOM的第一個script標籤之前，如果有特殊需求時，可在後面加上參數，例如：
- Google 說明：為 CSS 傳送進行最佳化處理。
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean.
沒有留言:
張貼留言