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

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

赞 (0)

相关推荐

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

    最近,康盛的DX版本基本确定,至少短期内不会大变了,因此,我对晋城吧的整站进行了前端优化,把自己 所做的操作记录下来,一是有个记录,防止忘掉,二是和网上的朋友们共享下自己的心得. 前端优化 推荐工具 火狐浏览器+Yslow+google pagespeed+Firebug 具体下载地址 请自行百度 一.DX后台 及DIY的优化 1.首页DIY避免过多层的嵌套 DX的每一个框架都会产生非常多非常多非常多的 代码.我的首页已经尽可能简单了,结果光 DOM 有1600+,囧死我了. 所以,尽可能不要用

  • 提高Web性能的前端优化技巧总结

    这篇文章讲述可以帮助 改善优化前端的技术,非常有用.主要内容有清理代码.压缩图片.压缩外部资源.使用CDN,以及一些其它方法.这些方法会为你的网站带显著的速度提升和整体性能提升. 一. 清理 HTML 文档 HTML,即超文本标记语言,几乎是所有网站的支柱.HTML 为网页带来标题.子标题.列表和其它一些文档结构的格式.在最近更新的 HTML5 中,甚至可以创建图表. HTML 很容易被网络爬虫识别,因此搜索引擎可以根据网站的内容在一定程度上实时更新.在写 HTML 的时候,你应该尝试让它 简洁

  • Javascript前端优化代码

    if 判断的优化 JavaScript条件语句在我们平时的开发中是不可避免要用到的,但是很多时候我们的代码写的并不好,一连串的if-else或者多重嵌套判断都会使得代码很臃肿,下面举例进行优化. 需求:现在有 4 个产品,分别是手机.电脑.电视机.游戏机,当然每个产品显示的价格不一样. 1.最简单的方法:if 判断 let commodity = { phone: '手机', computer: '电脑', television: '电视', gameBoy: '游戏机', } function

  • 关于vue-cli 3配置打包优化要点（推荐）

    关于vue-cli 3配置打包优化要点（推荐）

    配置路由懒加载,封装了异步组件引入的方法,接收一个地址做参数 /** * 返回异步组件 * @tips 请注意页面只能挂载在views文件下,非此路径请勿使用 */ const AsyncComponentHook = (path: String): Function => (): any => { // 通过 webpack 的内联注释,设置模块名 let component = import(/* webpackChunkName: "view-[request]" *

  • 网页前端优化之滚动延时加载图片示例

    为什么要延时加载呢?页面加载的时候就显示全部的图片不就得了?有必要多此一举吗?答案是肯定的.当要加载的图片或者内容很多时,如果一次性加载完毕,那么整个页面将会加载很久,意味着要用户等待很久,这是对用户不友好的.或许你还会问,那不就做个分页不就得了?其实这种滚动延时加载的技巧正是用来代替手动点击下一页的分页技术.每换一页都要用户点击一次,这也是对用户不友好的.所以才有了滚动延时加载. 我这里把加载图片作为例子,就好像百度图片里的一样,你往下滚动,它就会继续显示下一页的图片. 要求是这样的,比如我要

  • 整理AngularJS框架使用过程当中的一些性能优化要点

    整理AngularJS框架使用过程当中的一些性能优化要点

    1. 简介 无论你正在编写一个旧的应用程序还是在一个大型应用中采用AngularJS,性能是一个重要的方面.了解是什么原因导致AngularJS应用程序慢下来非常重要,要知道,在开发过程中做出权衡是很重要的.本文将介绍一些AngularJS比较常见的性能问题,以及优化的建议. 2. 性能测试工具 本文采用jsPerf http://jsperf.com/ 性能测试的基准. 3. 软件性能 评价软件性能有两个基本的因素: 首先是算法的时间复杂度.一个简单的例子就是线性搜索和二分检索有着非常显著的性

  • 19个MySQL性能优化要点解析

    以下就是跟大家分享的19个MySQL性能优化主要要点,一起学习学习. 1.为查询优化你的查询 大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理的.当有很多相同的查询被执行了多次的时候,这些查询结果会被放到一个缓存中,这样,后续的相同的查询就不用操作表而直接访问缓存结果了. 这里最主要的问题是,对于程序员来说,这个事情是很容易被忽略的.因为,我们某些查询语句会让MySQL不使用缓存.请看下面的示例: // 查询缓存不开启 $r = mysq

  • 前端性能优化及技巧

     前言        为什么要优化性能对于前端工程师如此重要 在行业内有句话不知道大家有没有听说过,'懂得性能优化并且研究过jquery源代码的人和不懂得性能优化写出来的代码对于性能的消耗会相差上百倍甚至上千倍',现在的javascript属于从ECMAscript3到ECMAscript5以及ECMAscript6的一个过渡的过程.在javascript的编写不健全的时候编写代码方法不得当,引起的问题也是不容忽视的. 性能优化 下面将自己对于性能优化的一些见解与大家分享: 1.精灵图     

  • vue 优化CDN加速的方法示例

    代码敲完,项目上线,然后就要与优化相遇. 项目有抢购的性质content download 时间非常的长加载慢的很,至此开始前端优化之旅 项目根目录运行 npm install webpack-bundle-analyzer --save-dev 在build/webpack.dev.conf.js中引入 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin plugins: [

  • Vue项目打包、合并及压缩优化网页响应速度

    Vue项目打包、合并及压缩优化网页响应速度

    目录 前言 一.请求内容太大 解决方案: CDN引入 压缩请求资源 一.http请求次数太多 解决方案: 总结 前言 影响网页响应速度的因素有很多,例如:请求内容太大.http请求次数太多.服务器本身处理请求太久.JS脚本执行耗时过长.浏览器回流重绘等.网站页面的响应速度与用户体验息息相关,直接影响到用户是否愿意继续访问你的网站.对于Vue项目而言,最普遍的问题可能在于打包后的文件太大,导致加载时间过长.服务器请求处理太久和js脚本执行耗时过长,这两个跟代码的质量和服务器配置关系太重,需要根据具

随机推荐