ホームページ バックエンド開発 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 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

フロントエンドの最適化によってPython Webサイトのアクセス速度を向上させるにはどうすればよいですか? フロントエンドの最適化によってPython Webサイトのアクセス速度を向上させるにはどうすればよいですか? Aug 05, 2023 am 10:21 AM

フロントエンドの最適化によってPython Webサイトのアクセス速度を向上させるにはどうすればよいですか?インターネットの発展に伴い、Web サイトのアクセス速度はユーザー エクスペリエンスの重要な指標の 1 つになりました。 Pythonで開発されたWebサイトでは、フロントエンドの最適化によりアクセス速度をいかに向上させるかが解決すべき課題となります。この記事では、Python Web サイトのアクセス速度の向上に役立つフロントエンドの最適化テクニックをいくつか紹介します。静的ファイルの圧縮と結合 Web ページでは、CSS、JavaScript、画像などの静的ファイルは多くの帯域幅と負荷を占有します。

保守可能な WordPress メタボックスの確保: フロントエンド部分の完成 保守可能な WordPress メタボックスの確保: フロントエンド部分の完成 Aug 27, 2023 pm 11:33 PM

この一連の記事では、より保守しやすい WordPress プラグインを構築するために使用できるいくつかのヒントと戦略を確認し、タブ付きメタ ボックスを利用するプラグインのコンテキスト内ですべてを実行します。タブ専用の機能を実装し、ユーザー入力をキャプチャするために使用される最初のテキストエリアも実装しました。フォローしてくださっている方は、私たちがやったことは次のことだけであることをご存知でしょう。 タブを機能させる ユーザーが操作できる単一の UI 要素を導入する データのクリーニング、検証、保存という実際のプロセスはまだ行っていません。残りのオプション、カードの内容をわざわざ紹介しましたか。次の 2 つの記事では、まさにそれを行います。具体的には、この記事では引き続き、

React Mobile Adaptation Guide: さまざまな画面上のフロントエンド アプリケーションの表示効果を最適化する方法 React Mobile Adaptation Guide: さまざまな画面上のフロントエンド アプリケーションの表示効果を最適化する方法 Sep 29, 2023 pm 04:10 PM

React Mobile Adaptation Guide: さまざまな画面でフロントエンド アプリケーションの表示効果を最適化する方法 近年、モバイル インターネットの急速な発展に伴い、携帯電話を使用して Web サイトを閲覧したり、さまざまなアプリケーションを使用したりするユーザーが増えています。 。ただし、携帯電話の画面のサイズと解像度は大きく異なるため、フロントエンド開発に一定の課題が生じます。 Web サイトやアプリケーションがさまざまな画面上で適切な表示効果を発揮するには、モバイル端末に適応し、それに応じてフロントエンド コードを最適化する必要があります。レスポンシブ レイアウトの使用 レスポンシブ レイアウトは、

ウェブサイトの速度を向上させるための主要な最適化モードは、すべてのフロントエンド開発者がマスターする必要があります。 ウェブサイトの速度を向上させるための主要な最適化モードは、すべてのフロントエンド開発者がマスターする必要があります。 Feb 02, 2024 pm 05:36 PM

フロントエンド開発者の必需品: これらの最適化モードをマスターして、Web サイトをスムーズに作成しましょう。インターネットの急速な発展に伴い、Web サイトは企業のプロモーションとコミュニケーションのための重要なチャネルの 1 つになりました。パフォーマンスが良く、読み込みが速い Web サイトは、ユーザー エクスペリエンスを向上させるだけでなく、より多くの訪問者を惹きつけます。フロントエンド開発者として、いくつかの最適化パターンをマスターすることが不可欠です。この記事では、開発者が Web サイトをより適切に最適化できるように、一般的に使用されるフロントエンド最適化テクニックをいくつか紹介します。圧縮ファイル Web サイト開発で一般的に使用されるファイルの種類には、HTML、CSS、J などがあります。

フロントエンド最適化の秘密を明らかにします。Web サイトの読み込みを高速化します。 フロントエンド最適化の秘密を明らかにします。Web サイトの読み込みを高速化します。 Feb 02, 2024 pm 09:11 PM

フロントエンド最適化の大きな秘密: ウェブサイトのスピードを飛躍的に向上させます!今日のインターネット時代において、ウェブサイトは人々が情報を入手し、コミュニケーションを図るための重要なチャネルとなっています。しかし、インターネットの普及と発展に伴い、ユーザーは Web サイトの速度に対する要求をますます高くしています。 Web サイトの読み込みが遅すぎると、ユーザーは離れたり、競合他社の Web サイトに切り替えたりする可能性があります。したがって、Web サイトの速度の最適化が重要になります。この記事では、Web サイトの高速化に役立つフロントエンド最適化のテクニックと方法を明らかにします。ファイルの圧縮とマージ フロントエンド開発では通常、多くの C が使用されます。

フロントエンドの最適化を通じて Python Web サイトのレンダリング速度を向上させるにはどうすればよいですか? フロントエンドの最適化を通じて Python Web サイトのレンダリング速度を向上させるにはどうすればよいですか? Aug 06, 2023 am 08:36 AM

フロントエンドの最適化を通じて Python Web サイトのレンダリング速度を向上させるにはどうすればよいですか?概要: インターネットの急速な発展に伴い、ユーザーの Web サイトの読み込み速度に対する要求はますます高まっています。 Python Web サイトの場合、フロントエンドの最適化は、Web サイトのレンダリング速度とユーザー エクスペリエンスを向上させる上で重要な役割を果たします。この記事では、いくつかの一般的なフロントエンド最適化手法と、それらを Python Web サイトに実装する方法を紹介します。 1. 静的リソースの圧縮とマージ: CSS、JavaScript、画像などの静的リソースは、Web サイトの読み込み時間の大部分を占めます。

最新の分散システム アーキテクチャのトレードオフ分析 最新の分散システム アーキテクチャのトレードオフ分析 Mar 06, 2024 pm 12:28 PM

最新のソフトウェア システム、特に分散アーキテクチャに従うものは、その複雑さと多様性で知られています。これらのシステムは多くの要素で構成されており、それぞれがコスト、パフォーマンス、スケーラビリティ、信頼性などの要素に影響を与える可能性のある潜在的なトレードオフをもたらします。これらのトレードオフを理解することは、ソフトウェアの最新化と変革の世界をナビゲートする IT アーキテクト、ビジネス アナリスト、データ アーキテクト、ソフトウェア エンジニア、およびデータ エンジニアにとって重要です。この記事は、分散アーキテクチャでトレードオフ分析を実行するプロセスと重要性に光を当て、この複雑だが不可欠な実践に関連する方法、テクニック、ツール、および競合するアプローチについての洞察を提供することを目的としています。ソフトウェア アーキテクチャは常にトレードオフと意思決定の領域でした。精度とイノベーションを重視するこの分野では、あらゆる決定が結果をもたらします。

ページのパフォーマンスの鍵: ページの再描画やリフローを回避するためにフロントエンドを最適化する ページのパフォーマンスの鍵: ページの再描画やリフローを回避するためにフロントエンドを最適化する Jan 26, 2024 am 09:30 AM

フロントエンド最適化の要点: ページの再描画とリフローを効果的に回避する方法、具体的なコード例が必要です インターネットの急速な発展に伴い、Web ページのパフォーマンスを最適化する上でフロントエンド開発の重要性がますます高まっています。中でも、ページの再描画とリフローを回避することは、Web ページのパフォーマンスを向上させるための重要な要素です。この記事では、フロントエンド開発者がページの再描画とリフローを効果的に削減し、ユーザー エクスペリエンスを向上させるのに役立ついくつかの効果的な方法と具体的なコード例を紹介します。 1. ページの再描画とリフローの原因と影響 ページの再描画: 要素のスタイルが変更されると、ブラウザは要素を再描画する必要があることを意味します。

See all articles