您当前的位置: 首页 » PHP/Perl编程 » 晋城吧对DiscuzX 进行的前端优化要点
晋城吧对DiscuzX 进行的前端优化要点
论坛链接
本文为晋城吧技术团队原创，转发请勿删除本文链接。
晋城吧的服务器在美国，延迟相对国内略微要高一些，所以优化就显得非常重要。最近，康盛的DX版本基本确定，至少短期内不会大变了，因此，我对晋城吧的整站进行了前端优化，把自己 所做的操作记录下来，一是有个记录，防止忘掉，二是和网上的朋友们共享下自己的心得。
前端优化 推荐工具
火狐浏览器+Yslow+google pagespeed+Firebug 具体下载地址 请自行百度
一、DX后台 及DIY的优化
1.首页DIY避免过多层的嵌套
DX的每一个框架都会产生非常多非常多非常多的 代码。我的首页已经尽可能简单了，结果光 DOM 有1600+，囧死我了。
所以，尽可能不要用过多的框架嵌套
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
<?php
/**
* Groups configuration for default Minify implementation
* @package Minify
*/
/**
* You may wish to use the Minify URI Builder app to suggest
* changes. http://yourdomain/min/builder/
**/
return array(
在上边的代码后边加上如下的代码
'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'),
晋城吧的服务器在美国，延迟相对国内略微要高一些，所以优化就显得非常重要。最近，康盛的DX版本基本确定，至少短期内不会大变了，因此，我对晋城吧的整站进行了前端优化，把自己 所做的操作记录下来，一是有个记录，防止忘掉，二是和网上的朋友们共享下自己的心得。
前端优化 推荐工具
火狐浏览器+Yslow+google pagespeed+Firebug 具体下载地址 请自行百度
一、DX后台 及DIY的优化
1.首页DIY避免过多层的嵌套
DX的每一个框架都会产生非常多非常多非常多的 代码。我的首页已经尽可能简单了，结果光 DOM 有1600+，囧死我了。
所以，尽可能不要用过多的框架嵌套
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
<?php
/**
* Groups configuration for default Minify implementation
* @package Minify
*/
/**
* You may wish to use the Minify URI Builder app to suggest
* changes. http://yourdomain/min/builder/
**/
return array(
在上边的代码后边加上如下的代码
'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楼发布者：superadmin时间：2010-07-29 10:57:23
2.修改模板的header.htm
什么？？这个文件在哪里？？？？我被你们打败了。。
修改如下 ，将第一段代码 替换为第二段
<script type="text/javascript" src="{$_G[setting][jspath]}common.js?{VERHASH}"></script>
<script type="text/javascript" src="{$_G[setting][jspath]}home_friendselector.js?{VERHASH}"></script>
<!--{if $_G['basescript'] == 'forum' || $_G['basescript'] == 'group'}-->
<script type="text/javascript" src="{$_G[setting][jspath]}forum.js?{VERHASH}"></script>
<!--{elseif $_G['basescript'] == 'home'}-->
<script type="text/javascript" src="{$_G[setting][jspath]}home_cookie.js?{VERHASH}"></script>
<script type="text/javascript" src="{$_G[setting][jspath]}home_common.js?{VERHASH}"></script>
<script type="text/javascript" src="{$_G[setting][jspath]}home_face.js?{VERHASH}"></script>
<script type="text/javascript" src="{$_G[setting][jspath]}home_manage.js?{VERHASH}"></script>
<!--{elseif $_G['basescript'] == 'userapp'}-->
<script type="text/javascript" src="{$_G[setting][jspath]}home_common.js?{VERHASH}"></script>
<!--{elseif $_G['basescript'] == 'portal'}-->
<script type="text/javascript" src="{$_G[setting][jspath]}portal.js?{VERHASH}"></script>
<!--{/if}-->
<!--{if $_G['basescript'] != 'portal' && $_GET['diy'] == 'yes' && ($_G[mod] == 'topic' || $_G[group][allowdiy]) && !empty($_G['style']['tplfile'])}-->
<script type="text/javascript" src="{$_G[setting][jspath]}portal.js?{VERHASH}"></script>
<!--{/if}-->
<!--{if $_GET[diy] == 'yes' && ($_G[mod] == 'topic' || $_G[group][allowdiy]) && !empty($_G['style']['tplfile'])}-->{subtemplate common/css_diy}<!--{/if}-->
替换为
<!--{if $_G['basescript'] == 'forum' || $_G['basescript'] == 'group'}-->
<script type="text/javascript" src="/min/g=forum"></script>
<!--{elseif $_G['basescript'] == 'home'}-->
<script type="text/javascript" src="/min/g=home"></script>
<!--{elseif $_G['basescript'] == 'userapp'}-->
<script type="text/javascript" src="/min/g=userapp"></script>
<!--{elseif $_G['basescript'] == 'portal'}-->
<script type="text/javascript" src="/min/g=portal"></script>
<!--{/if}-->
<!--{if $_G['basescript'] != 'portal' && $_GET['diy'] == 'yes' && ($_G[mod] == 'topic' || $_G[group][allowdiy]) && !empty($_G['style']['tplfile'])}-->
<script type="text/javascript" src="{$_G[setting][jspath]}portal.js?{VERHASH}"></script>
<!--{/if}-->
<!--{if $_GET[diy] == 'yes' && ($_G[mod] == 'topic' || $_G[group][allowdiy]) && !empty($_G['style']['tplfile'])}-->{subtemplate common/css_diy}<!--{/if}-->
打开晋城吧首页，点开源代码 ，看看 开头 的 head 里的 js 是不是少了很多啊
2.修改图片、flash、css、js的缓存时间
为上述东东设置缓存一个长长的缓存时间。比如1年，那么在第一次访问后，用户在这一年中都不用下载背景图，flash，css，js 。当然前提是你没有修改
方法 是修改网站根目录.htaccess文件
加入如下代码
<ifmodule mod_expires.c>
<FilesMatch ".(html|htm)$ ">
Header set Cache-Control "max-age=43200″
</FilesMatch>
#cache css, javascript and text files for one week
<FilesMatch ".(js|css|txt)$ ">
Header set Cache-Control "max-age=604800″
</FilesMatch>
#cache flash and images for one month
<FilesMatch ".(flv|swf|ico|gif|jpg|jpeg|png)$ ">
Header set Cache-Control "max-age=2592000″
</FilesMatch>
#disable cache for script files
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$ ">
Header unset Cache-Control
</FilesMatch>
</ifmodule>
三、总结
恩，暂时的优化就是这些，通过这些优化，晋城吧 的yslow评分从50 D 上升到80+ B ，有些页面的评分为90+ Ａ．总体还是很有效果的。
如果你需要转发此文，还请保留晋城吧链 接，如果能帮忙做个友链，那就太感谢了。。。
附上一些网站在０７年Yslow的评分
Ａｍａｚｏｎ Ｄ
ＡＯＬ Ｆ
ＣＮＮ Ｆ
ｅＢａｙ Ｃ
Ｇｏｏｇｌｅ Ａ
ＭＳＮ Ｆ
ＭｙＳｐａｃｅ Ｄ
Ｗｉｋｉｐｅｄｉａ Ｃ
Ｙａｈｏｏ！ Ａ
ＹｏｕＴｕｂｅ Ｄ
什么？？这个文件在哪里？？？？我被你们打败了。。
修改如下 ，将第一段代码 替换为第二段
<script type="text/javascript" src="{$_G[setting][jspath]}common.js?{VERHASH}"></script>
<script type="text/javascript" src="{$_G[setting][jspath]}home_friendselector.js?{VERHASH}"></script>
<!--{if $_G['basescript'] == 'forum' || $_G['basescript'] == 'group'}-->
<script type="text/javascript" src="{$_G[setting][jspath]}forum.js?{VERHASH}"></script>
<!--{elseif $_G['basescript'] == 'home'}-->
<script type="text/javascript" src="{$_G[setting][jspath]}home_cookie.js?{VERHASH}"></script>
<script type="text/javascript" src="{$_G[setting][jspath]}home_common.js?{VERHASH}"></script>
<script type="text/javascript" src="{$_G[setting][jspath]}home_face.js?{VERHASH}"></script>
<script type="text/javascript" src="{$_G[setting][jspath]}home_manage.js?{VERHASH}"></script>
<!--{elseif $_G['basescript'] == 'userapp'}-->
<script type="text/javascript" src="{$_G[setting][jspath]}home_common.js?{VERHASH}"></script>
<!--{elseif $_G['basescript'] == 'portal'}-->
<script type="text/javascript" src="{$_G[setting][jspath]}portal.js?{VERHASH}"></script>
<!--{/if}-->
<!--{if $_G['basescript'] != 'portal' && $_GET['diy'] == 'yes' && ($_G[mod] == 'topic' || $_G[group][allowdiy]) && !empty($_G['style']['tplfile'])}-->
<script type="text/javascript" src="{$_G[setting][jspath]}portal.js?{VERHASH}"></script>
<!--{/if}-->
<!--{if $_GET[diy] == 'yes' && ($_G[mod] == 'topic' || $_G[group][allowdiy]) && !empty($_G['style']['tplfile'])}-->{subtemplate common/css_diy}<!--{/if}-->
替换为
<!--{if $_G['basescript'] == 'forum' || $_G['basescript'] == 'group'}-->
<script type="text/javascript" src="/min/g=forum"></script>
<!--{elseif $_G['basescript'] == 'home'}-->
<script type="text/javascript" src="/min/g=home"></script>
<!--{elseif $_G['basescript'] == 'userapp'}-->
<script type="text/javascript" src="/min/g=userapp"></script>
<!--{elseif $_G['basescript'] == 'portal'}-->
<script type="text/javascript" src="/min/g=portal"></script>
<!--{/if}-->
<!--{if $_G['basescript'] != 'portal' && $_GET['diy'] == 'yes' && ($_G[mod] == 'topic' || $_G[group][allowdiy]) && !empty($_G['style']['tplfile'])}-->
<script type="text/javascript" src="{$_G[setting][jspath]}portal.js?{VERHASH}"></script>
<!--{/if}-->
<!--{if $_GET[diy] == 'yes' && ($_G[mod] == 'topic' || $_G[group][allowdiy]) && !empty($_G['style']['tplfile'])}-->{subtemplate common/css_diy}<!--{/if}-->
打开晋城吧首页，点开源代码 ，看看 开头 的 head 里的 js 是不是少了很多啊
2.修改图片、flash、css、js的缓存时间
为上述东东设置缓存一个长长的缓存时间。比如1年，那么在第一次访问后，用户在这一年中都不用下载背景图，flash，css，js 。当然前提是你没有修改
方法 是修改网站根目录.htaccess文件
加入如下代码
<ifmodule mod_expires.c>
<FilesMatch ".(html|htm)$ ">
Header set Cache-Control "max-age=43200″
</FilesMatch>
#cache css, javascript and text files for one week
<FilesMatch ".(js|css|txt)$ ">
Header set Cache-Control "max-age=604800″
</FilesMatch>
#cache flash and images for one month
<FilesMatch ".(flv|swf|ico|gif|jpg|jpeg|png)$ ">
Header set Cache-Control "max-age=2592000″
</FilesMatch>
#disable cache for script files
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$ ">
Header unset Cache-Control
</FilesMatch>
</ifmodule>
三、总结
恩，暂时的优化就是这些，通过这些优化，晋城吧 的yslow评分从50 D 上升到80+ B ，有些页面的评分为90+ Ａ．总体还是很有效果的。
如果你需要转发此文，还请保留晋城吧链 接，如果能帮忙做个友链，那就太感谢了。。。
附上一些网站在０７年Yslow的评分
Ａｍａｚｏｎ Ｄ
ＡＯＬ Ｆ
ＣＮＮ Ｆ
ｅＢａｙ Ｃ
Ｇｏｏｇｌｅ Ａ
ＭＳＮ Ｆ
ＭｙＳｐａｃｅ Ｄ
Ｗｉｋｉｐｅｄｉａ Ｃ
Ｙａｈｏｏ！ Ａ
ＹｏｕＴｕｂｅ Ｄ