首頁 後端開發 php教程 晋城吧对DiscuzX进行的前端优化要点_php技巧

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

May 17, 2016 am 09:23 AM
前端優化

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

  

三、总结

恩,暂时的优化就是这些,通过这些优化,晋城吧 的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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何透過前端優化提升Python網站的存取速度? 如何透過前端優化提升Python網站的存取速度? Aug 05, 2023 am 10:21 AM

如何透過前端優化提升Python網站的存取速度?隨著網路的發展,網站的存取速度成為使用者體驗的重要指標之一。而對於使用Python開發的網站來說,如何透過前端優化來提升存取速度是一個必須解決的問題。本文將介紹一些前端優化的技巧,幫助提升Python網站的存取速度。壓縮和合併靜態檔案在網頁中,靜態檔案如CSS、JavaScript和圖片等會佔用大量的頻寬和載入

提升網站速度的關鍵最佳化模式,每個前端開發者都必須掌握! 提升網站速度的關鍵最佳化模式,每個前端開發者都必須掌握! Feb 02, 2024 pm 05:36 PM

前端開發者必備:掌握這些最佳化模式,讓網站飛起來!隨著網路的快速發展,網站已成為企業宣傳和交流的重要管道之一。一個效能優良、載入迅速的網站不僅可以提升使用者體驗,還可以吸引更多的訪客。身為前端開發者,掌握一些最佳化模式是不可或缺的。本文將介紹一些常用的前端優化技術,幫助開發者更好地優化網站。壓縮檔案在網站開發中,經常使用的檔案類型包括HTML、CSS和J

React行動裝置適配指南:如何最佳化前端應用在不同螢幕上的顯示效果 React行動裝置適配指南:如何最佳化前端應用在不同螢幕上的顯示效果 Sep 29, 2023 pm 04:10 PM

React行動裝置適配指南:如何優化前端應用程式在不同螢幕上的顯示效果近年來,隨著行動網路的快速發展,越來越多的使用者習慣使用手機來瀏覽網站和使用各種應用程式。然而,不同手機螢幕的尺寸和解析度千差萬別,這給前端開發帶來了一定的挑戰。為了讓網站和應用程式在不同螢幕上都有良好的顯示效果,我們需要進行行動端適配,並對前端程式碼進行相應的最佳化。使用響應式佈局響應式佈局是一種根據螢幕

確保可維護的WordPress元框:完成前端部分 確保可維護的WordPress元框:完成前端部分 Aug 27, 2023 pm 11:33 PM

在本系列文章中,我們將回顧一些可用於構建更易於維護的WordPress插件的技巧和策略,並且我們將通過利用選項卡式元框的插件的上下文來實現這一切.在上一篇文章中,我們專門為我們的選項卡實現了功能,並且還實現了第一個textarea,它將用於捕獲一些用戶輸入。對於那些一直關注的人來說,您知道我們只做到了:使選項卡發揮作用引入用戶可以與之交互的單個UI元素我們尚未完成清理、驗證和保存數據的實際過程,也沒有費心介紹其餘選項卡的內容。在接下來的兩篇文章中,我們將正是這樣做的。具體來說,在本文中,我們將繼

揭秘前端優化絕招:讓網站快速載入! 揭秘前端優化絕招:讓網站快速載入! Feb 02, 2024 pm 09:11 PM

前端優化大揭密:讓網站速度飛起來!在現今的網路時代,網站已成為人們獲取資訊和溝通的重要管道。然而,隨著網路的普及和發展,使用者對網站速度的要求也越來越高。一旦網站載入過慢,用戶很可能會選擇離開,甚至轉向競爭對手的網站。因此,網站的速度優化變得至關重要。本文將揭秘前端優化的技巧和方法,幫助你讓網站速度飛起來!壓縮和合併檔案在前端開發中,通常會使用大量的C

WebMan技術在線上商務平台的應用與最佳化 WebMan技術在線上商務平台的應用與最佳化 Aug 26, 2023 pm 09:15 PM

WebMan技術在線上商務平台中的應用與最佳化引言:隨著網路的發展,越來越多的商務活動轉移到了線上平台。線上商務平台具有全天候、跨地域的優勢,為商家和消費者提供了更廣泛的市場和更方便的交易方式。而在這個過程中,WebMan技術扮演著重要的角色。本文將介紹WebMan技術在線上商務平台中的應用,並提出一些最佳化的方法。一、WebMan技術在線上商務平台的應用

改善網站速度的前端優化技巧試試看! 改善網站速度的前端優化技巧試試看! Feb 02, 2024 pm 05:02 PM

網站太慢?試試這些前端優化模式吧!隨著網路的快速發展,網站已成為許多人獲取資訊和互動的主要途徑。然而,網站的速度對於使用者體驗來說非常重要。如果網站加載緩慢,用戶可能會感到不耐煩並很快離開。為了解決這個問題,前端優化成為了一個重要的議題。前端優化是一系列技術和策略的集合,旨在提高網站的效能和載入速度。以下介紹幾種常見的前端優化模式,幫助您優化網站,提升用戶體

如何透過前端優化提高Java網站的存取速度? 如何透過前端優化提高Java網站的存取速度? Aug 06, 2023 pm 07:04 PM

如何透過前端優化提高Java網站的存取速度?隨著網路的發展,網站的存取速度對使用者體驗影響越來越大。為了提高網站的存取速度,前端優化成為了關鍵的環節。本文將介紹如何透過前端優化來提高Java網站的存取速度,並給出對應的程式碼範例。壓縮和合併靜態資源靜態資源如CSS、JavaScript和圖片等可以透過壓縮和合併來減少請求的數量和大小,從而加快網站的載入速度。

See all articles