脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → PHP编程 → php技巧 → DiscuzX 前端优化

晋城吧对DiscuzX进行的前端优化要点

 更新时间：2010年09月05日 01:09:44   作者：  
晋城吧的服务器在美国，延迟相对国内略微要高一些，所以优化就显得非常重要。
最近，康盛的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>
                   <!--{/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 ".(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>

三、总结

恩，暂时的优化就是这些，通过这些优化，晋城吧 的yslow评分从50 D 上升到80+ B ，有些页面的评分为90+　Ａ．总体还是很有效果的。

如果你需要转发此文，还请保留晋城吧链 接，如果能帮忙做个友链，那就太感谢了。。。

附上一些网站在０７年Yslow的评分

Ａｍａｚｏｎ　　　　　Ｄ

ＡＯＬ　　　　　　　　Ｆ

ＣＮＮ　　　　　　　　Ｆ

ｅＢａｙ　　　　　　　Ｃ

Ｇｏｏｇｌｅ　　　　　Ａ

ＭＳＮ　　　　　　　　Ｆ

ＭｙＳｐａｃｅ　　　　Ｄ

Ｗｉｋｉｐｅｄｉａ　　Ｃ

Ｙａｈｏｏ！　　　　　Ａ

ＹｏｕＴｕｂｅ　　　　Ｄ

作者：晋城吧

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

您可能感兴趣的文章:

相关文章

  • php邮箱地址正则表达式验证

    php邮箱地址正则表达式验证

    这篇文章主要介绍了php邮箱地址正则表达式验证，利用php语言实现一下电子邮件地址验证程序，使用的是php语言的正则表达式库，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • PHP文件打开关闭及读写操作示例解析

    PHP文件打开关闭及读写操作示例解析

    这篇文章主要介绍了PHP文件打开关闭及读写操作示例解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • PHP学习笔记之二

    PHP学习笔记之二

    PHP学习笔记之二，开始学习php的朋友可以看下。
    2011-01-01
  • php程序之die调试法 快速解决错误

    php程序之die调试法 快速解决错误

    经常看到有初入PHP道朋友对于php程序出现问题素手无策的情况
    2009-09-09
  • 关于session在PHP5的配置文件中的详细设置参数说明

    关于session在PHP5的配置文件中的详细设置参数说明

    关于session在PHP5的配置文件中的详细设置参数说明，需要的朋友可以参考下。
    2011-04-04
  • php生成RSS订阅的方法

    php生成RSS订阅的方法

    这篇文章主要介绍了php生成RSS订阅的方法,较为详细的分析了一个RSS订阅类及其具体使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • php intval函数用法总结

    php intval函数用法总结

    在本篇内容里小编给大家总结了关于php intval函数用法以及相关知识点总结，需要的朋友们跟着学习下。
    2019-04-04
  • Highcharts 图表中图例显示状态存储的功能设计详解

    Highcharts 图表中图例显示状态存储的功能设计详解

    这篇文章主要介绍了Highcharts 图表中图例显示状态存储的功能设计详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • php foreach 参数强制类型转换的问题

    php foreach 参数强制类型转换的问题

    大家都知道foreach的参数如果不是数组类型，在运行的时候 就会出现类似“Warning: Invalid argument supplied for foreach() in XXX”warning信息。
    2010-12-12
  • 详解Laravel制作API接口

    详解Laravel制作API接口

    API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。本文将详细介绍Laravel制作API接口。
    2021-05-05

最新评论