Heim Backend-Entwicklung PHP-Tutorial 晋城吧对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

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie kann die Zugriffsgeschwindigkeit der Python-Website durch Front-End-Optimierung verbessert werden? Wie kann die Zugriffsgeschwindigkeit der Python-Website durch Front-End-Optimierung verbessert werden? Aug 05, 2023 am 10:21 AM

Wie kann die Zugriffsgeschwindigkeit der Python-Website durch Front-End-Optimierung verbessert werden? Mit der Entwicklung des Internets ist die Geschwindigkeit des Website-Zugriffs zu einem wichtigen Indikator für die Benutzererfahrung geworden. Bei mit Python entwickelten Websites ist die Verbesserung der Zugriffsgeschwindigkeit durch Front-End-Optimierung ein Problem, das gelöst werden muss. In diesem Artikel werden einige Front-End-Optimierungstechniken vorgestellt, die dabei helfen, die Zugriffsgeschwindigkeit von Python-Websites zu verbessern. Statische Dateien komprimieren und zusammenführen Auf Webseiten beanspruchen statische Dateien wie CSS, JavaScript und Bilder viel Bandbreite und Last.

Gewährleistung einer wartbaren WordPress-Metabox: Vervollständigung des Frontend-Teils Gewährleistung einer wartbaren WordPress-Metabox: Vervollständigung des Frontend-Teils Aug 27, 2023 pm 11:33 PM

In dieser Artikelserie besprechen wir einige Tipps und Strategien, mit denen Sie ein besser wartbares WordPress-Plugin erstellen können, und wir werden alles im Kontext eines Plugins tun, das Metaboxen mit Registerkarten verwendet Wir haben Funktionen speziell für unsere Registerkarten implementiert und außerdem einen ersten Textbereich implementiert, der zum Erfassen einiger Benutzereingaben verwendet wird. Diejenigen unter Ihnen, die aufgepasst haben, wissen, dass wir nur Folgendes getan haben: Die Registerkarten funktionsfähig machen. Ein einzelnes UI-Element einführen, mit dem der Benutzer interagieren kann. Wir haben den eigentlichen Prozess der Bereinigung, Validierung und Speicherung der Daten noch nicht durchlaufen. Wir haben uns auch nicht die Mühe gemacht, die restlichen Optionen vorzustellen. Der Inhalt der Karte. In den nächsten beiden Artikeln werden wir genau das tun. Konkret werden wir in diesem Artikel darauf eingehen

React Mobile Adaptation Guide: So optimieren Sie den Anzeigeeffekt von Front-End-Anwendungen auf verschiedenen Bildschirmen React Mobile Adaptation Guide: So optimieren Sie den Anzeigeeffekt von Front-End-Anwendungen auf verschiedenen Bildschirmen Sep 29, 2023 pm 04:10 PM

React Mobile Adaptation Guide: So optimieren Sie den Anzeigeeffekt von Front-End-Anwendungen auf verschiedenen Bildschirmen. Mit der rasanten Entwicklung des mobilen Internets haben sich in den letzten Jahren immer mehr Benutzer daran gewöhnt, Mobiltelefone zum Durchsuchen von Websites und zur Verwendung verschiedener Anwendungen zu verwenden . Allerdings variieren die Größen und Auflösungen verschiedener Mobiltelefonbildschirme stark, was gewisse Herausforderungen für die Frontend-Entwicklung mit sich bringt. Um sicherzustellen, dass die Website und die Anwendung auf verschiedenen Bildschirmen gute Anzeigeeffekte erzielen, müssen wir uns an das mobile Endgerät anpassen und den Front-End-Code entsprechend optimieren. Responsives Layout verwenden Responsives Layout ist ein

Der wichtigste Optimierungsmodus zur Verbesserung der Website-Geschwindigkeit, den jeder Front-End-Entwickler beherrschen muss! Der wichtigste Optimierungsmodus zur Verbesserung der Website-Geschwindigkeit, den jeder Front-End-Entwickler beherrschen muss! Feb 02, 2024 pm 05:36 PM

Ein Muss für Frontend-Entwickler: Beherrschen Sie diese Optimierungsmodi und bringen Sie Ihre Website zum Fliegen! Mit der rasanten Entwicklung des Internets sind Websites zu einem wichtigen Kanal für die Unternehmensförderung und -kommunikation geworden. Eine leistungsstarke und schnell ladende Website verbessert nicht nur das Benutzererlebnis, sondern zieht auch mehr Besucher an. Als Frontend-Entwickler ist es wichtig, einige Optimierungsmuster zu beherrschen. In diesem Artikel werden einige häufig verwendete Techniken zur Front-End-Optimierung vorgestellt, um Entwicklern dabei zu helfen, ihre Websites besser zu optimieren. Komprimierte Dateien Bei der Website-Entwicklung werden häufig folgende Dateitypen verwendet: HTML, CSS und J

Entdecken Sie das Geheimnis der Frontend-Optimierung: Sorgen Sie dafür, dass die Website schnell lädt! Entdecken Sie das Geheimnis der Frontend-Optimierung: Sorgen Sie dafür, dass die Website schnell lädt! Feb 02, 2024 pm 09:11 PM

Das große Geheimnis der Frontend-Optimierung: Bringen Sie die Geschwindigkeit Ihrer Website in die Höhe! Im heutigen Internetzeitalter sind Websites zu einem wichtigen Kanal für Menschen geworden, um Informationen zu erhalten und zu kommunizieren. Mit der Popularität und Entwicklung des Internets stellen Benutzer jedoch immer höhere Anforderungen an die Geschwindigkeit einer Website. Sobald die Website zu langsam lädt, besteht die Gefahr, dass Nutzer die Website eines Mitbewerbers verlassen oder sogar dorthin wechseln. Daher ist die Optimierung der Website-Geschwindigkeit von entscheidender Bedeutung. In diesem Artikel werden die Techniken und Methoden der Frontend-Optimierung vorgestellt, die Ihnen dabei helfen, Ihre Website schneller zu machen! Komprimieren und Zusammenführen von Dateien In der Frontend-Entwicklung wird normalerweise viel C verwendet

Wie kann die Rendering-Geschwindigkeit einer Python-Website durch Front-End-Optimierung verbessert werden? Wie kann die Rendering-Geschwindigkeit einer Python-Website durch Front-End-Optimierung verbessert werden? Aug 06, 2023 am 08:36 AM

Wie kann die Rendering-Geschwindigkeit einer Python-Website durch Front-End-Optimierung verbessert werden? Überblick: Mit der rasanten Entwicklung des Internets stellen Nutzer immer höhere Anforderungen an die Ladegeschwindigkeit von Websites. Bei Python-Websites kann die Frontend-Optimierung eine wichtige Rolle dabei spielen, die Rendering-Geschwindigkeit und das Benutzererlebnis der Website zu verbessern. In diesem Artikel werden einige gängige Front-End-Optimierungstechniken und deren Implementierung in Python-Websites vorgestellt. 1. Statische Ressourcen komprimieren und zusammenführen: Statische Ressourcen wie CSS, JavaScript und Bilder nehmen einen großen Teil der Ladezeit der Website in Anspruch.

Der Schlüssel zur Seitenleistung: Optimieren Sie das Frontend, um Seitenneuzeichnungen und -umbrüche zu vermeiden Der Schlüssel zur Seitenleistung: Optimieren Sie das Frontend, um Seitenneuzeichnungen und -umbrüche zu vermeiden Jan 26, 2024 am 09:30 AM

Grundlagen für die Front-End-Optimierung: Wie man Seiten-Neuzeichnungen und Reflows effektiv vermeidet, sind spezifische Codebeispiele erforderlich. Mit der rasanten Entwicklung des Internets ist die Front-End-Entwicklung für die Optimierung der Webseitenleistung immer wichtiger geworden. Unter anderem ist die Vermeidung von Seitenneuzeichnungen und -umbrüchen ein Schlüsselfaktor für die Verbesserung der Webseitenleistung. In diesem Artikel werden einige effektive Methoden und spezifische Codebeispiele vorgestellt, die Front-End-Entwicklern dabei helfen, das Neuzeichnen und Umfließen von Seiten effektiv zu reduzieren und die Benutzererfahrung zu verbessern. 1. Ursachen und Auswirkungen des Neuzeichnens und Umfließens von Seiten. Neuzeichnen von Seiten: Bedeutet, dass der Browser das Element neu zeichnen muss, wenn sich der Stil eines Elements ändert

Kompromissanalyse moderner verteilter Systemarchitekturen Kompromissanalyse moderner verteilter Systemarchitekturen Mar 06, 2024 pm 12:28 PM

Moderne Softwaresysteme, insbesondere solche, die auf verteilten Architekturen basieren, sind für ihre Komplexität und Variabilität bekannt. Diese Systeme bestehen aus vielen Elementen, von denen jedes potenzielle Kompromisse mit sich bringt, die sich auf Faktoren wie Kosten, Leistung, Skalierbarkeit und Zuverlässigkeit auswirken können. Das Verständnis dieser Kompromisse ist für IT-Architekten, Geschäftsanalysten, Datenarchitekten, Softwareentwickler und Dateningenieure, die sich in der Welt der Softwaremodernisierung und -transformation zurechtfinden, von entscheidender Bedeutung. Ziel dieses Artikels ist es, den Prozess und die Bedeutung der Durchführung von Kompromissanalysen in verteilten Architekturen zu beleuchten und Einblicke in die Methoden, Techniken, Werkzeuge und konkurrierenden Ansätze zu geben, die mit dieser komplexen, aber integralen Praxis verbunden sind. Softwarearchitektur war schon immer ein Bereich von Kompromissen und Entscheidungen. In diesem präzisions- und innovationsorientierten Bereich hat jede Entscheidung Konsequenzen.

See all articles