백엔드 개발 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 Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

프런트 엔드 최적화를 통해 Python 웹 사이트의 액세스 속도를 향상시키는 방법은 무엇입니까? 프런트 엔드 최적화를 통해 Python 웹 사이트의 액세스 속도를 향상시키는 방법은 무엇입니까? Aug 05, 2023 am 10:21 AM

프런트 엔드 최적화를 통해 Python 웹 사이트의 액세스 속도를 향상시키는 방법은 무엇입니까? 인터넷의 발달과 함께 웹사이트 접속 속도는 사용자 경험의 중요한 지표 중 하나가 되었습니다. Python을 사용하여 개발된 웹사이트의 경우 프런트 엔드 최적화를 통해 액세스 속도를 향상시키는 방법은 해결해야 할 문제입니다. 이 기사에서는 Python 웹 사이트의 액세스 속도를 향상시키는 데 도움이 되는 몇 가지 프런트 엔드 최적화 기술을 소개합니다. 정적 파일 압축 및 병합 웹 페이지에서 CSS, JavaScript 및 이미지와 같은 정적 파일은 많은 대역폭과 로드를 차지합니다.

유지 관리 가능한 WordPress 메타 박스 보장: 프런트 엔드 부분 완성 유지 관리 가능한 WordPress 메타 박스 보장: 프런트 엔드 부분 완성 Aug 27, 2023 pm 11:33 PM

이 기사 시리즈에서는 유지 관리가 더 쉬운 WordPress 플러그인을 구축하는 데 사용할 수 있는 몇 가지 팁과 전략을 검토하고, 이전 기사에서 우리는 탭 메타 상자를 활용하는 플러그인의 맥락 내에서 모든 작업을 수행할 것입니다. 우리 탭을 위해 특별히 기능을 구현했으며 일부 사용자 입력을 캡처하는 데 사용되는 첫 번째 텍스트 영역도 구현했습니다. 지금까지 관심을 가져오셨던 분들을 위해 말씀드리자면, 우리는 단지 탭을 기능적으로 만들었습니다. 사용자가 상호 작용할 수 있는 단일 UI 요소를 도입했습니다. 우리는 데이터를 정리하고, 검증하고, 저장하는 실제 프로세스를 거치지 않았습니다. 카드의 나머지 옵션을 소개할 필요도 없습니다. 다음 두 기사에서 우리는 바로 그 일을 해보겠습니다. 특히 이번 글에서는 계속해서

React 모바일 적응 가이드: 다양한 화면에서 프런트엔드 애플리케이션의 디스플레이 효과를 최적화하는 방법 React 모바일 적응 가이드: 다양한 화면에서 프런트엔드 애플리케이션의 디스플레이 효과를 최적화하는 방법 Sep 29, 2023 pm 04:10 PM

React 모바일 적응 가이드: 다양한 화면에서 프런트 엔드 애플리케이션의 표시 효과를 최적화하는 방법 최근 모바일 인터넷의 급속한 발전으로 인해 점점 더 많은 사용자가 휴대폰을 사용하여 웹 사이트를 탐색하고 다양한 애플리케이션을 사용하는 데 익숙해졌습니다. . 그러나 다양한 휴대폰 화면의 크기와 해상도는 매우 다양하므로 프런트엔드 개발에 특정 문제가 발생합니다. 웹사이트와 애플리케이션이 다양한 화면에서 좋은 디스플레이 효과를 가지려면 모바일 단말기에 적응하고 이에 따라 프런트엔드 코드를 최적화해야 합니다. 반응형 레이아웃 사용 반응형 레이아웃은

웹 사이트 속도를 향상시키는 핵심 최적화 모드, 모든 프런트엔드 개발자가 마스터해야 합니다! 웹 사이트 속도를 향상시키는 핵심 최적화 모드, 모든 프런트엔드 개발자가 마스터해야 합니다! Feb 02, 2024 pm 05:36 PM

프런트엔드 개발자의 필수품: 최적화 모드를 마스터하고 웹사이트를 멋지게 만드세요! 인터넷의 급속한 발전과 함께 웹사이트는 기업 홍보와 커뮤니케이션의 중요한 채널 중 하나로 자리 잡았습니다. 성능이 좋고 로딩 속도가 빠른 웹사이트는 사용자 경험을 향상시킬 뿐만 아니라 더 많은 방문자를 유치합니다. 프런트엔드 개발자로서 몇 가지 최적화 패턴을 익히는 것이 중요합니다. 이 기사에서는 개발자가 웹 사이트를 더 잘 최적화하는 데 도움이 되도록 일반적으로 사용되는 몇 가지 프런트 엔드 최적화 기술을 소개합니다. 압축 파일 웹 사이트 개발에서 일반적으로 사용되는 파일 형식에는 HTML, CSS 및 J가 포함됩니다.

프런트엔드 최적화의 비밀을 밝혀보세요. 웹사이트를 빠르게 로드하세요! 프런트엔드 최적화의 비밀을 밝혀보세요. 웹사이트를 빠르게 로드하세요! Feb 02, 2024 pm 09:11 PM

프런트엔드 최적화의 큰 비밀: 웹사이트 속도를 빠르게 만드세요! 오늘날의 인터넷 시대에 웹사이트는 사람들이 정보를 얻고 소통하는 중요한 채널이 되었습니다. 그러나 인터넷의 대중화와 발전으로 인해 사용자는 웹 사이트 속도에 대한 요구 사항이 점점 더 높아지고 있습니다. 웹사이트가 너무 느리게 로드되면 사용자는 경쟁사의 웹사이트를 떠나거나 심지어는 경쟁업체의 웹사이트로 전환할 가능성이 높습니다. 따라서 웹사이트 속도 최적화가 중요해집니다. 이 기사에서는 웹 사이트를 더 빠르게 만드는 데 도움이 되는 프런트 엔드 최적화 기술과 방법을 공개합니다! 파일 압축 및 병합 프론트 엔드 개발에서는 일반적으로 C가 많이 사용됩니다.

프런트 엔드 최적화를 통해 Python 웹 사이트의 렌더링 속도를 향상시키는 방법은 무엇입니까? 프런트 엔드 최적화를 통해 Python 웹 사이트의 렌더링 속도를 향상시키는 방법은 무엇입니까? Aug 06, 2023 am 08:36 AM

프런트 엔드 최적화를 통해 Python 웹 사이트의 렌더링 속도를 향상시키는 방법은 무엇입니까? 개요: 인터넷의 급속한 발전으로 인해 사용자는 웹 사이트 로딩 속도에 대한 요구 사항이 점점 더 높아지고 있습니다. Python 웹 사이트의 경우 프런트 엔드 최적화는 웹 사이트의 렌더링 속도와 사용자 경험을 향상시키는 데 중요한 역할을 할 수 있습니다. 이 기사에서는 몇 가지 일반적인 프런트 엔드 최적화 기술과 이를 Python 웹 사이트에 구현하는 방법을 소개합니다. 1. 정적 리소스 압축 및 병합: CSS, JavaScript, 이미지 등의 정적 리소스는 웹사이트 로딩 시간의 큰 부분을 차지합니다.

페이지 성능의 핵심: 페이지 다시 그리기 및 리플로우를 방지하기 위해 프런트 엔드 최적화 페이지 성능의 핵심: 페이지 다시 그리기 및 리플로우를 방지하기 위해 프런트 엔드 최적화 Jan 26, 2024 am 09:30 AM

프런트 엔드 최적화를 위한 필수 사항: 페이지 다시 그리기 및 리플로우를 효과적으로 방지하려면 특정 코드 예제가 필요합니다. 인터넷의 급속한 발전으로 인해 웹 페이지 성능을 최적화하는 데 있어 프런트 엔드 개발이 점점 더 중요해지고 있습니다. 그중에서도 페이지 다시 그리기 및 리플로우를 방지하는 것은 웹 페이지 성능을 향상시키는 핵심 요소입니다. 이 기사에서는 프런트 엔드 개발자가 페이지 다시 그리기 및 리플로우를 효과적으로 줄이고 사용자 경험을 향상시키는 데 도움이 되는 몇 가지 효과적인 방법과 구체적인 코드 예제를 소개합니다. 1. 페이지 다시 그리기 및 리플로우의 원인과 효과 페이지 다시 그리기: 요소의 스타일이 변경되면 브라우저가 해당 요소를 다시 그려야 함을 의미합니다.

최신 분산 시스템 아키텍처의 절충 분석 최신 분산 시스템 아키텍처의 절충 분석 Mar 06, 2024 pm 12:28 PM

최신 소프트웨어 시스템, 특히 분산 아키텍처를 따르는 시스템은 복잡성과 가변성으로 잘 알려져 있습니다. 이러한 시스템은 많은 요소로 구성되며 각 요소는 비용, 성능, 확장성 및 안정성과 같은 요소에 영향을 미칠 수 있는 잠재적인 절충안을 도입합니다. 이러한 장단점을 이해하는 것은 소프트웨어 현대화 및 혁신의 세계를 탐색하는 IT 설계자, 비즈니스 분석가, 데이터 설계자, 소프트웨어 엔지니어 및 데이터 엔지니어에게 중요합니다. 이 기사는 분산 아키텍처에서 절충 분석을 수행하는 과정과 중요성을 조명하고, 이 복잡하지만 통합적인 관행과 관련된 방법, 기술, 도구 및 경쟁 접근 방식에 대한 통찰력을 제공하는 것을 목표로 합니다. 소프트웨어 아키텍처는 항상 절충과 결정의 영역이었습니다. 정밀성과 혁신을 지향하는 이 분야에서는 모든 결정에 결과가 따릅니다.

See all articles