按需加载js和css

Web

技术

博客上有一个用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放在页面底部会不会有什么副作用,目前还没遇到什么问题,望大神指点迷津。

不过我觉得这种方式应该是最愚蠢的╮(╯▽╰)╭