按需載入js和css

• 2019 年 11 月 24 日
• 筆記

部落格上有一個用mediaelement-and-player.js弄的播放器，插件默認的是每個頁面都載入一次mediaelement-and-player.min.js和mediaelementplayer.min.css，兩個文件都十分的龐大，加起來接近100k，雖然gzip之後只剩下20多k但是也是十分地不爽，所以我便尋思著有沒有什麼辦法能有播放器的時候就載入它，沒有播放器的時候就不載入。

首先往後端的方向去想，由於不知道typecho的js是怎麼管理的，似乎在插件的激活方法中就開始往模板輸出js和css了，我要的是在分析文章的過程中決定要不要輸出那個js，所以要從後端來著手去搞的話難度很大。可能還會影響到整個程式的性能。

於是我往前端去思考，我們都知道html網頁都是由dom組成的，假如我們判斷到可以載入播放器的時候再讓它document.write()出那個程式碼同也就能實現這個功能，而且對後端沒什麼影響。

基本思路：header部分聲明一個默認為false的變數，當網頁中有播放器時候把它賦值為true，底部根據這個變數的值來決定是否輸出播放器的js和css。

實現的方法其實很簡單，首先我們可以在頁面頂部header部分聲明一個默認為false的變數：

<script>var loadplayer=false;</script>

然後在插入播放器的部分把這個變數設置為true，以便後面的判斷：

<script>loadplayer=true;</script>

在頁面底部判斷並輸出程式碼：

<script>      if(loadplayer){          document.write('<link rel="stylesheet" type="text/css" href="http://blog.izgq.net/usr/plugins/Html5AudioPlayer/assets/mediaelementplayer.min.css">');          document.write('<script type="text/javascript" src="http://blog.izgq.net/usr/plugins/Html5AudioPlayer/assets/mediaelement-and-player.min.js"></script>');          document.write('<script>$("audio").mediaelementplayer();</script>');      }  </script>

用php輸出程式碼的時候要注意轉義的問題。

這樣那些用不上的js就不會載入啦，網頁載入速度也會快不少。

不知道css放在頁面底部會不會有什麼副作用，目前還沒遇到什麼問題，望大神指點迷津。

不過我覺得這種方式應該是最愚蠢的╮(╯▽╰)╭