對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'),

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>