晋城吧对DiscuzX进行的前端优化要点


Posted in PHP onSeptember 05, 2010

最近,康盛的DX版本基本确定,至少短期内不会大变了,因此,我对晋城吧的整站进行了前端优化,把自己 所做的操作记录下来,一是有个记录,防止忘掉,二是和网上的朋友们共享下自己的心得。

前端优化 推荐工具

火狐浏览器+Yslow+google pagespeed+Firebug 具体下载地址 请自行百度

一、DX后台 及DIY的优化

1.首页DIY避免过多层的嵌套

DX的每一个框架都会产生非常多非常多非常多的 代码。我的首页已经尽可能简单了,结果光 DOM 有1600+,?逅牢伊恕?/P>

所以,尽可能不要用过多的框架嵌套

2.避免过多的用户头像调用

首页的会员调用是使用重定向的,会减慢网页的速度,UCenter倒是能改为伪静态,但是目前是有BUG的,没有自定义头像 的会员头像是无法显示的

3.打开Gzip

在网站后台 或者到config.php文件 将Gzip打开

4.背景图尽可能重复利用,减少背景图的数量

各个栏目的背景图尽可能一样,这样可以重复利用图片,要找到美观和速度之间的平衡,这一条,我其实也还在不断的尝试 中,这里推荐监控宝的服务器访 问速度跟踪,可以全局掌握自己网站被用户访问时的速度状况。

5.打开并设置好后台的各种优化和缓存

关于这方面的资料很多,我就不在这里浪费时间了,(被pia飞~~~)

二、代码 及空间优化

1.利用minify压缩合并js

DX的CSS 基本合并的很好,一个页面一到2个,但是JS就很多了。打开你的模板的common目录的header.htm,看到么。密密麻麻的js ,而过 多的文件会造成连接过多,减慢速度。

这里我们利用minify将其合并 压缩 缓存

首先,下载minify的压缩包,解压,将min文件夹上传到网站根目录。

然后修改2个文件:

1.min 文件夹下的groupsConfig.php

在上边的代码后边加上如下的代码

    'portal' => array('//static/js/common.js', '//static/js/home_friendselector.js', '//static/js/forum.js', '//static/js/portal.js'),               'forum' => array('//static/js/common.js', '//static/js/home_friendselector.js', '//static/js/forum.js'),                'home' => array('//static/js/common.js', '//static/js/home_friendselector.js', '//static/js/home_cookie.js', '//static/js/home_common.js', '//static/js/home_face.js', '//static/js/home_manage.js'),                    'userapp' => array('//static/js/common.js', '//static/js/home_friendselector.js', '//static/js/forum.js', '//static/js/home_common.js'),
2.修改模板的header.htm

什么??这个文件在哪里????我被你们打败了。。

修改如下 ,将第一段代码 替换为第二段

                                                                                                                                                                                                                                                                                                                                                                                                         {subtemplate common/css_diy}

替换为

                                                                                                                                                                                                                                                                                   {subtemplate common/css_diy}

打开晋城吧首页,点开源代码 ,看看 开头 的 head 里的 js 是不是少了很多啊

2.修改图片、flash、css、js的缓存时间

为上述东东设置缓存一个长长的缓存时间。比如1年,那么在第一次访问后,用户在这一年中都不用下载背景图,flash,css,js 。当然前提是你没有修改

方法 是修改网站根目录.htaccess文件

加入如下代码

        Header set Cache-Control "max-age=43200″        #cache css, javascript and text files for one week       Header set Cache-Control "max-age=604800″        #cache flash and images for one month      Header set Cache-Control "max-age=2592000″     #disable cache for script files      Header unset Cache-Control     

三、总结

恩,暂时的优化就是这些,通过这些优化,晋城吧 的yslow评分从50 D 上升到80+ B ,有些页面的评分为90+ A.总体还是很有效果的。

如果你需要转发此文,还请保留晋城吧链 接,如果能帮忙做个友链,那就太感谢了。。。

附上一些网站在07年Yslow的评分

Amazon

 D

AOL

CNN

eBay

 C

Google

 A

MSN

MySpace

Wikipedia

Yahoo!

 A

YouTube

作者:晋城吧

文章来源:http://www.jincheng8.com.cn/thread-303-1-1.html

PHP 相关文章推荐
PHP 分页原理分析,大家可以看看
Dec 21 PHP
模板引擎正则表达式调试小技巧
Jul 20 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
Oct 15 PHP
ThinkPHP缓存方法S()概述
Jun 13 PHP
PHP魔术方法__GET、__SET使用实例
Nov 25 PHP
ubuntu下配置nginx+php+mysql详解
Sep 10 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
May 20 PHP
PHP实现对数组分页处理实例详解
Feb 07 PHP
PHP使用栈解决约瑟夫环问题算法示例
Aug 27 PHP
PHP实现防止表单重复提交功能【基于token验证】
May 24 PHP
php上传后台无法收到数据解决方法
Oct 28 PHP
PHP如何使用cURL实现Get和Post请求
Jul 11 PHP
用PHP将数据导入到Foxmail的实现代码
Sep 05 #PHP
提高PHP编程效率的53个要点(经验小结)
Sep 04 #PHP
队列在编程中的实际应用(php)
Sep 04 #PHP
php生成随机密码的三种方法小结
Sep 04 #PHP
PHP安全技术之 实现php基本安全
Sep 04 #PHP
小文件php+SQLite存储方案
Sep 04 #PHP
PHP中文件上传的一个问题
Sep 04 #PHP
You might like
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
accesskey 提交
2006/06/26 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
Python中List.index()方法的使用教程
2015/05/20 Python
Python 常用string函数详解
2016/05/30 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Django用户认证系统 User对象解析
2019/08/02 Python
Python中无限循环需要什么条件
2020/05/27 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
校园公益广告语
2014/03/13 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
参观邀请函范文
2015/02/02 职场文书
银行自荐信怎么写
2015/03/05 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
Python中tkinter的用户登录管理的实现
2021/04/22 Python
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL