对DiscuzX进行的前端优化要点

塑料盒子 發表於 2023-5-30 00:00:00

<p>
<span>最近，康盛的DX版本基本确定，至少短期内不会大变了，因此，我对晋城吧的整站进行了前端优化，把自己所做的操作记录下来，一是有个记录，防止忘掉，二是和网上的朋友们共享下自己的心得。</span></p>
<p>
<strong>前端优化推荐工具</strong></p>
<p>
火狐浏览器+Yslow+google pagespeed+Firebug 具体下载地址请自行百度</p>
<p>
<strong>一、DX后台及DIY的优化</strong></p>
<p>
1.首页DIY避免过多层的嵌套</p>
<p>
DX的每一个框架都会产生非常多非常多非常多的代码。我的首页已经尽可能简单了，结果光 DOM 有1600+，囧死我了。</p>
<p>
所以，尽可能不要用过多的框架嵌套</p>
<p>
2.避免过多的用户头像调用</p>
<p>
首页的会员调用是使用重定向的，会减慢网页的速度，UCenter倒是能改为伪静态，但是目前是有BUG的，没有自定义头像的会员头像是无法显示的</p>
<p>
3.打开Gzip</p>
<p>
在网站后台或者到config.php文件将Gzip打开</p>
<p>
4.背景图尽可能重复利用，减少背景图的数量</p>
<p>
各个栏目的背景图尽可能一样，这样可以重复利用图片，要找到美观和速度之间的平衡，这一条，我其实也还在不断的尝试中，这里推荐监控宝的服务器访问速度跟踪，可以全局掌握自己网站被用户访问时的速度状况。</p>
<p>
5.打开并设置好后台的各种优化和缓存</p>
<p>
关于这方面的资料很多，我就不在这里浪费时间了，（被pia飞~~~）</p>
<p>
<strong>二、代码及空间优化</strong></p>
<p>
1.利用minify压缩合并js</p>
<p>
DX的CSS 基本合并的很好，一个页面一到2个，但是JS就很多了。打开你的模板的common目录的header.htm，看到么。密密麻麻的js ,而过多的文件会造成连接过多，减慢速度。</p>
<p>
这里我们利用minify将其合并压缩缓存</p>
<p>
首先，下载minify的压缩包，解压，将min文件夹上传到网站根目录。</p>
<p>
然后修改2个文件：</p>
<p>
1.min 文件夹下的groupsConfig.php</p>
<p>
</p>
<table align="center" border="0" cellpadding="6" cellspacing="0" width="95%"><tbody><tr>
<td bgcolor="#ddedfb">
<p>
<?php<br>
   /**<br>
   * Groups configuration for default Minify implementation<br>
   * @package Minify<br>
   */<br>
   /**<br>
   * You may wish to use the Minify URI Builder app to suggest<br>
   * changes. http://yourdomain/min/builder/<br>
   **/<br>
return array(</p>
</td>
</tr></tbody></table>
<p>
</p>
<p>
在上边的代码后边加上如下的代码</p>
<p>
</p>
<table align="center" border="0" cellpadding="6" cellspacing="0" width="95%"><tbody><tr>
<td bgcolor="#ddedfb">
<p>
    'portal' => array('//static/js/common.js', '//static/js/home_friendselector.js', '//static/js/forum.js', '//static/js/portal.js'),<br><br>
               'forum' => array('//static/js/common.js', '//static/js/home_friendselector.js', '//static/js/forum.js'),<br><br>
                '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'),<br><br>
                    'userapp' => array('//static/js/common.js', '//static/js/home_friendselector.js', '//static/js/forum.js', '//static/js/home_common.js'),</p>
</td>
</tr></tbody></table>
<p>
</p>
<p>
<span>2.修改模板的header.htm</span></p>
<p>
</p>
<p>
什么？？这个文件在哪里？？？？我被你们打败了。。</p>
<p>
修改如下，将第一段代码替换为第二段</p>
<p>
</p>
<table align="center" border="0" cellpadding="6" cellspacing="0" width="95%"><tbody><tr>
<td bgcolor="#ddedfb">
<p>
<font color="#000000"><script type="text/javascript" src="{$_G}common.js?{VERHASH}"></script><br>
                    <script type="text/javascript" src="{$_G}home_friendselector.js?{VERHASH}"></script><br>
                    <br>
                            <script type="text/javascript" src="{$_G}forum.js?{VERHASH}"></script><br>
                    <br>
                           <script type="text/javascript" src="{$_G}home_cookie.js?{VERHASH}"></script><br>
                            <script type="text/javascript" src="{$_G}home_common.js?{VERHASH}"></script><br>
                            <script type="text/javascript" src="{$_G}home_face.js?{VERHASH}"></script><br>
                            <script type="text/javascript" src="{$_G}home_manage.js?{VERHASH}"></script><br>
                   <br>
                          <script type="text/javascript" src="{$_G}home_common.js?{VERHASH}"></script><br>
                   <br>
                           <script type="text/javascript" src="{$_G}portal.js?{VERHASH}"></script><br>
                   <br>
                   <br>
                           <script type="text/javascript" src="{$_G}portal.js?{VERHASH}"></script><br>
                   <br>
                   {subtemplate common/css_diy}</font></p>
</td>
</tr></tbody></table>
<p>
</p>
<p>
替换为</p>
<table align="center" border="0" cellpadding="6" cellspacing="0" width="95%"><tbody><tr>
<td bgcolor="#ddedfb">
<p>
<br>
                           <script type="text/javascript" src="/min/g=forum"></script><br>
                    <br>
                            <script type="text/javascript" src="/min/g=home"></script><br>
                    <br>
                            <script type="text/javascript" src="/min/g=userapp"></script><br>
                    <br>
                            <script type="text/javascript" src="/min/g=portal"></script><br>
                    <br>
                   <br>
                           <script type="text/javascript" src="{$_G}portal.js?{VERHASH}"></script><br>
                   <br>
                   {subtemplate common/css_diy}</p>
</td>
</tr></tbody></table>
<p>
打开晋城吧首页，点开源代码，看看开头的 head 里的 js 是不是少了很多啊</p>
<p>
2.修改图片、flash、css、js的缓存时间</p>
<p>
为上述东东设置缓存一个长长的缓存时间。比如1年，那么在第一次访问后，用户在这一年中都不用下载背景图，flash，css，js 。当然前提是你没有修改</p>
<p>
方法是修改网站根目录.htaccess文件</p>
<p>
加入如下代码</p>
<p>
</p>
<table align="center" border="0" cellpadding="6" cellspacing="0" width="95%"><tbody><tr>
<td bgcolor="#ddedfb">
<p>
<font color="#000000"><ifmodule mod_expires.c><br>
    <FilesMatch ".(html|htm)$ "><br>
    Header set Cache-Control "max-age=43200″<br>
    </FilesMatch><br>
    #cache css, javascript and text files for one week<br>
   <FilesMatch ".(js|css|txt)$ "><br>
    Header set Cache-Control "max-age=604800″<br>
    </FilesMatch><br>
    #cache flash and images for one month<br>
   <FilesMatch ".(flv|swf|ico|gif|jpg|jpeg|png)$ "><br>
   Header set Cache-Control "max-age=2592000″<br>
</FilesMatch><br>
   #disable cache for script files<br>
   <FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$ "><br>
   Header unset Cache-Control<br>
   </FilesMatch><br>
   </ifmodule></font></p>
</td>
</tr></tbody></table>
<p>
</p>
<p>
<strong>三、总结</strong></p>
<p>
恩，暂时的优化就是这些，通过这些优化，晋城吧的yslow评分从50 D 上升到80+ B ，有些页面的评分为90+　Ａ．总体还是很有效果的。</p>
<p>
如果你需要转发此文，还请保留晋城吧链接，如果能帮忙做个友链，那就太感谢了。。。</p>
<p>
附上一些网站在０７年Yslow的评分</p>
<p>
Ａｍａｚｏｎ　　　　　Ｄ</p>
<p>
ＡＯＬ　　　　　　　　Ｆ</p>
<p>
ＣＮＮ　　　　　　　　Ｆ</p>
<p>
ｅＢａｙ　　　　　　　Ｃ</p>
<p>
Ｇｏｏｇｌｅ　　　　　Ａ</p>
<p>
ＭＳＮ　　　　　　　　Ｆ</p>
<p>
ＭｙＳｐａｃｅ　　　　Ｄ</p>
<p>
Ｗｉｋｉｐｅｄｉａ　　Ｃ</p>
<p>
Ｙａｈｏｏ！　　　　　Ａ</p>
<p>
ＹｏｕＴｕｂｅ　　　　Ｄ</p>
<p>
作者：晋城吧</p>

頁: [1]

琼殿技术论坛's Archiver

对DiscuzX进行的前端优化要点