快捷導(dǎo)航

晉城吧對(duì)DiscuzX進(jìn)行的前端優(yōu)化要點(diǎn)

更新時(shí)間：2010年09月05日 01:09:44 作者：

晉城吧的服務(wù)器在美國(guó)，延遲相對(duì)國(guó)內(nèi)略微要高一些，所以優(yōu)化就顯得非常重要。

最近，康盛的DX版本基本確定，至少短期內(nèi)不會(huì)大變了，因此，我對(duì)晉城吧的整站進(jìn)行了前端優(yōu)化，把自己所做的操作記錄下來，一是有個(gè)記錄，防止忘掉，二是和網(wǎng)上的朋友們共享下自己的心得。

前端優(yōu)化推薦工具

火狐瀏覽器+Yslow+google pagespeed+Firebug 具體下載地址請(qǐng)自行百度

一、DX后臺(tái) 及DIY的優(yōu)化

1.首頁DIY避免過多層的嵌套

DX的每一個(gè)框架都會(huì)產(chǎn)生非常多非常多非常多的代碼。我的首頁已經(jīng)盡可能簡(jiǎn)單了，結(jié)果光 DOM 有1600+，囧死我了。

所以，盡可能不要用過多的框架嵌套

2.避免過多的用戶頭像調(diào)用

首頁的會(huì)員調(diào)用是使用重定向的，會(huì)減慢網(wǎng)頁的速度，UCenter倒是能改為偽靜態(tài)，但是目前是有BUG的，沒有自定義頭像的會(huì)員頭像是無法顯示的

3.打開Gzip

在網(wǎng)站后臺(tái) 或者到config.php文件將Gzip打開

4.背景圖盡可能重復(fù)利用，減少背景圖的數(shù)量

各個(gè)欄目的背景圖盡可能一樣，這樣可以重復(fù)利用圖片，要找到美觀和速度之間的平衡，這一條，我其實(shí)也還在不斷的嘗試中，這里推薦監(jiān)控寶的服務(wù)器訪問速度跟蹤，可以全局掌握自己網(wǎng)站被用戶訪問時(shí)的速度狀況。

5.打開并設(shè)置好后臺(tái)的各種優(yōu)化和緩存

關(guān)于這方面的資料很多，我就不在這里浪費(fèi)時(shí)間了，（被pia飛~~~）

二、代碼及空間優(yōu)化

1.利用minify壓縮合并js

DX的CSS 基本合并的很好，一個(gè)頁面一到2個(gè)，但是JS就很多了。打開你的模板的common目錄的header.htm，看到么。密密麻麻的js ,而過多的文件會(huì)造成連接過多，減慢速度。

這里我們利用minify將其合并壓縮緩存

首先，下載minify的壓縮包，解壓，將min文件夾上傳到網(wǎng)站根目錄。

然后修改2個(gè)文件：

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

什么？？這個(gè)文件在哪里？？？？我被你們打敗了。。

修改如下，將第一段代碼替換為第二段

替換為

<script type="text/javascript" src="/min/g=forum"></script>
                    
                            <script type="text/javascript" src="/min/g=home"></script>
                    
                            <script type="text/javascript" src="/min/g=userapp"></script>
                    
                            <script type="text/javascript" src="/min/g=portal"></script>
                    
                   
                           <script type="text/javascript" src="{$_G[setting][jspath]}portal.js?{VERHASH}"></script>
                   
                   {subtemplate common/css_diy}

打開晉城吧首頁，點(diǎn)開源代碼，看看開頭的 head 里的 js 是不是少了很多啊

2.修改圖片、flash、css、js的緩存時(shí)間

為上述東東設(shè)置緩存一個(gè)長(zhǎng)長(zhǎng)的緩存時(shí)間。比如1年，那么在第一次訪問后，用戶在這一年中都不用下載背景圖，flash，css，js 。當(dāng)然前提是你沒有修改

方法是修改網(wǎng)站根目錄.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>

三、總結(jié)

恩，暫時(shí)的優(yōu)化就是這些，通過這些優(yōu)化，晉城吧的yslow評(píng)分從50 D 上升到80+ B ，有些頁面的評(píng)分為90+?。粒傮w還是很有效果的。

如果你需要轉(zhuǎn)發(fā)此文，還請(qǐng)保留晉城吧鏈接，如果能幫忙做個(gè)友鏈，那就太感謝了。。。

附上一些網(wǎng)站在０７年Yslow的評(píng)分

Ａｍａｚｏｎ　　　　?。?/P>

ＡＯＬ　　　　　　　　Ｆ

ＣＮＮ　　　　　　　?。?/P>

ｅＢａｙ　　　　　　　Ｃ

Ｇｏｏｇｌｅ　　　　?。?/P>

ＭＳＮ　　　　　　　　Ｆ

ＭｙＳｐａｃｅ　　　?。?/P>

Ｗｉｋｉｐｅｄｉａ　　Ｃ