按需加载js和css

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DBA随笔

Python之高级特性(2)

加入我们想要生成一个list,它的内容是从1到8的整数,我们可以用list(range(1:9))来进行生成:

5310
来自专栏码力全开

[译]带你理解 Async/await

「async/await」是 promises 的另一种更便捷更流行的写法,同时它也更易于理解和使用。

6210
来自专栏DBA随笔

mysql字符串处理函数(二)

replace函数使用方法是replace(s,s1,s2),使用字符串s2替换字符串s中所有的s1。

6330
来自专栏DBA随笔

Linux之awk命令详解(二)

上一篇文章我们简单举了几个例子了解了一下awk命令的基本语法,这里,再次贴出来这个命令的基本语法,如下:

8830
来自专栏码力全开

浅析 JS 事件循环之 Microtask 和 Macrotask

我们在上一篇 《浅析 JS 中的EventLoop 事件循环》 中提到一个 Event Queue,其实在事件循环中 queue 一共有两种,还有一种叫 Job...

5120
来自专栏码力全开

浅析 JS 中的 EventLoop 事件循环(新手向)

Event Loop 这个概念相信大家或多或少都了解过,但是有一次被一个小伙伴问到它具体的原理的时候,感觉自己只知道个大概印象,于是计划着写一篇文章,用输出倒逼...

6920
来自专栏码力全开

[译]ES6 模块化入门

在 ES6 之前,我们已经知道了 RequireJS,AngularJS 的依赖注入,以及 CommonJS,具体可以看笔者的上一篇文章《JS模块化历史简介》。...

6420
来自专栏码力全开

快速理解 JavaScript 中的 LHS 和 RHS 查询

7610
来自专栏TopCoder

java lambda 深入浅出

标注为@FunctionalInterface的接口是函数式接口,该接口只有一个自定义方法。注意,只要接口只要包含一个抽象方法,编译器就默认该接口为函数式接口。

6730
来自专栏码力全开

10分钟搭建属于自己的 Vue CLI3 项目模板

Vue CLI3 出来已经很长时间了,一直想研究它的插件系统却没有时间(其实是懒),刚好最近需要统一一下项目组的规范(借口),于是就有了契机。

7420

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励