晉城吧對DiscuzX進行的前端最佳化要點

來源:互聯網
上載者:User
最近,康盛的DX版本基本確定,至少短期內不會大變了,因此,我對晉城吧的整站進行了前端最佳化,把自己 所做的操作記錄下來,一是有個記錄,防止忘掉,二是和網上的朋友們共用下自己的心得。

前端最佳化 推薦工具

Firefox瀏覽器+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>
<!--{/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 ".(htmlhtm)$ ">
Header set Cache-Control "max-age=43200″
</FilesMatch>
#cache css, javascript and text files for one week
<FilesMatch ".(jscsstxt)$ ">
Header set Cache-Control "max-age=604800″
</FilesMatch>
#cache flash and images for one month
<FilesMatch ".(flvswficogifjpgjpegpng)$ ">
Header set Cache-Control "max-age=2592000″
</FilesMatch>
#disable cache for script files
<FilesMatch "\.(plphpcgisplscgifcgi)$ ">
Header unset Cache-Control
</FilesMatch>
</ifmodule>

三、總結

恩,暫時的最佳化就是這些,通過這些最佳化,晉城吧 的yslow評分從50 D 上升到80+ B ,有些頁面的評分為90+ A.總體還是很有效果的。

如果你需要轉寄此文,還請保留晉城吧鏈 接,如果能幫忙做個友鏈,那就太感謝了。。。

附上一些網站在07年Yslow的評分

Amazon     D

AOL        F

CNN        F

eBay       C

Google     A

MSN        F

MySpace    D

Wikipedia  C

Yahoo!     A

YouTube    D

作者:晉城吧

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



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。