当前位置: 首页 > seo优化, 网站建设 > 正文

实战熊猫博客Web前端优化第一课——js/css合并

前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快、对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升。下图显示了页面加载速度对于用户体验的影响。实战熊猫博客Web前端优化第一课——js/css合并|Web前端优化|熊猫博客

你的Web页面的速度是否已经足够快了?其实可能还有很多可以提升的地方。今天熊猫博客就给大家实战一下前端优化的js/css合并,当然我用的主题可能和你的不太一样,但是方法都是一样的。下图是还没优化前的在站站长网测的

实战熊猫博客Web前端优化第一课——js/css合并|Web前端优化|熊猫博客

 

首先熊猫打开 主题目录下的header.php文件发现这么几行调用js的代码

实战熊猫博客Web前端优化第一课——js/css合并|Web前端优化|熊猫博客

 

去掉了一些用不到的js调用代码,且发现里面还调用了一个lazyload的文件(实现图片渐隐的功能),里面必定还调用了js,这样就多加了请求次说数,于是熊猫继续按照目录打开这个文件,发现里面有调用lazyload.js
实战熊猫博客Web前端优化第一课——js/css合并|Web前端优化|熊猫博客
看了一下js大小比较小,于是就加到lazyload.php文件里,如下代码

<script type="text/javascript">

代码

</script>
<script type="text/javascript">
jQuery(function() {
jQuery(".article img, .articles img").not("#respond_box img").lazyload({
placeholder:"<?php bloginfo('template_url'); ?>/images/image-pending.gif",
effect:"fadeIn"
});
});
</script>

然后熊猫接着把上面那些调用js的代码加到footer.php里,不要放到header里,当然调用lazyload的还要加在header里,因为要是放到最后的话就起不到渐隐的作用了,而是直接把所有的图片都下载完毕,关于这个js的功能大家可以百度搜一下,这里就不多少了。然后又去站长网测试了下,竟然提高了100ms多,看来还是有效果的。

实战熊猫博客Web前端优化第一课——js/css合并|Web前端优化|熊猫博客

 

最后熊猫又百度搜了搜相关的文章,搜到了一款工具Minify来压缩js/css的,相信用过的人都懂的,我是这样设置的

/min/?b=wp-content/themes/主题名/js&f=jquery.min.js,wesky.js,lazyload.js&30

把这段代码放到了footer文件,这样加载首页时就会最后加载js了,而且还压缩了文件。


本文固定链接: http://www.chnpanda.com/744.html | 熊猫博客 | 转载请注明出处,谢谢合作!

本文关键字:

实战熊猫博客Web前端优化第一课——js/css合并:等您坐沙发呢!

发表评论

亲,不支持纯字母、符号评论哦~