Key points of front-end optimization of DiscuzX by Jinchengba

Key points of front-end optimization of DiscuzX by Jinchengba_PHP tutorial

WBOY

Release： 2016-07-21 15:34:24

Original

757 people have browsed it

最近，康盛的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

/**
* 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

什么？？这个文件在哪里？？？？我被你们打败了。。

修改如下，将第一段代码替换为第二段

                   {subtemplate common/css_diy}

替换为

                   {subtemplate common/css_diy}

打开晋城吧首页，点开源代码，看看开头的 head 里的 js 是不是少了很多啊

2.修改图片、flash、css、js的缓存时间

为上述东东设置缓存一个长长的缓存时间。比如1年，那么在第一次访问后，用户在这一年中都不用下载背景图，flash，css，js 。当然前提是你没有修改

方法是修改网站根目录.htaccess文件

加入如下代码

    Header set Cache-Control "max-age=43200″

    #cache css, javascript and text files for one week

    Header set Cache-Control "max-age=604800″

    #cache flash and images for one month

   Header set Cache-Control "max-age=2592000″

   #disable cache for script files

   Header unset Cache-Control

3. Summary

Well, these are the temporary optimizations. Through these optimizations, the yslow score of Jincheng Bar has increased from 50 D to 80+ B, and the score of some pages is 90+ A. Overall it is very effective.

If you need to forward this article, please keep the Jincheng Bar link. If you can help me become a friend link, I would be very grateful. . .

Attached are the ratings of some websites on Yslow in 2007

Amazon　　　D

ＡＯＬ　　　Ｆ

ＣＮＮ　　　Ｆ

eBay　　　Ｃ

Google

MSN　　　Ｆ

MySpace D

Wikipedia　C

Yahoo!　　Ａ

YouTube　　Ｄ