---
title: 按需加载js和css
date: 2015-04-06T11:03:00+08:00
tags:
  - 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的变量：

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

```

然后在插入播放器的部分把这个变量设置为true，以便后面的判断：

```html
<script>loadplayer=true;</script>

```

在页面底部判断并输出代码：

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

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