程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> 對DiscuzX 進行的前端優化要點

對DiscuzX 進行的前端優化要點

編輯:關於PHP編程

    本文為晉城吧技術團隊原創,轉發請勿刪除本文鏈接。

    晉城吧的服務器在美國,延遲相對國內略微要高一些,所以優化就顯得非常重要。最近,康盛的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

     

    什麼??這個文件在哪裡????我被你們打敗了。。

    1. 上一頁:
    2. 下一頁:
    Copyright © 程式師世界 All Rights Reserved