menu 刘兴刚博客
more_vert
chevron_right 首页 » WEB开发 » 正文
谈谈网站性能优化
2016-12-16 | WEB开发 | 暂无评论 | 7592 次阅读 | 1895字

对于网站的搭建变的越来越简单,搭建好后前期访问最多的主要还是自己贡献流量,如果网站打开慢自己都感觉再浪费时间,别说网站客户会停留了,所以对于网站性能的优化还是非常必要的,加上像我们这种小白买的vps带宽毕竟有限,想着充分发挥服务器的性能,所以节省带宽流量也是的考虑的,当然网站优化的好,百度的排名肯定也是加分的,记得前年也做个电子商城的优化,就按百度上没有思路的弄过,效果一般,今天正好有空屡屡思路,把遇到的坑一个个解决掉。
对于本博客通过gulp对css、js、html、img都做过压缩,虽然用的国外空间,速度自己还能接受,但当时做完这些以后,一直耿耿于怀没有合并css、js,当然gulp合并也是非常简单,但修改hexo却是复杂一些,就没折腾,最近在弄企业网站的优化,合并css、js是必须的,并经这些东西一般网站搭建好后不再有大的变动,所以缓存这些文件也是必须的。下面主要是记录我优化企业网站性能遇到的坑。<!--more-->

一劳永逸神器,使用Minify来优化网站性能。

Minify 是用PHP5开发的应用,通过遵循一些Yahoo的优化规则来提高网站的性能。它会合并多个CSS或者JavaScript文件,
移除一些不必要的空格和注释,进行gzip压缩,并且会设置浏览器的缓存头。Minify 在设计上和Yahoo的Combo Handler Service非常像,
不过Minify可以合并任何你想要合并的JavaScript和CSS文件。

可以说这个东东正好是我上面想要实现的所有功能了,操作起来也是非常简单,下载解压后,拷贝 "min" 文件夹到自己网站的DOCUMENT_ROOT下,引用地址写成
/min/?b=css&f=test.css
而不是
/min/b=css&f=test.css 这样写需要服务器支持urlrewrite,如何让服务器支持rewrite呢,我从网上找的方法似乎对于我的服务器都不管用,虽然win 2003官方已经停止更新,对于跟xp使用习惯爱好一样,我的服务器我还是装了2003,毕竟服务器配置一般。

下面介绍下win2003如何支持rewrite:

一、安装:
1、从官网下载完全版ISAPI_Rewrite3(http://www.helicontech.com/download/isapi_rewrite/ISAPI_Rewrite3_0073.msi)并安装;

2、将Rewrite破解文件夹中的ISAPI_Rewrite.dll文件覆盖到程序安装目录下替换即可;

3、打开安装目录下的httpd.conf文件,在里面输入以下内容并保存,这样就没有使用天数的限制了;
RegistrationName= wlqcwin
RegistrationCode= 2EAD-35GH-66NN-ZYBA

4、安装好后记得给ISAPI_Rewrite3软件安装目录network service的读权限,否则会出现无法加载ISAPI_Rewrite的错误。

以上操作完以后,我删除了iis-》网站-》属性ISAPI筛选器中自动生成的ISAPI_Rewrite,在我自己的网站上右击属性添加ISAPI_Rewrite,重启iis后,网上介绍的网站的ISAPI_Rewrite变绿,而我的没有变绿,刚才删除的所有网站的ISAPI筛选是绿的,但此时ISAPI_Rewrite3.0没有生效,直接在网站目录上面添加IIS_WPG组读权限即可,我为纠结网站筛选器变绿重启了N遍IIS,网站支持不支持rewrite根本和这个没关系,我就是把所有网站的筛选器删除了,也是支持rewrite的。
同时网上绝大多数说如果是linux服务器就在网站根目录下放个.htaccess,win服务器网站根目录下放个httpd.ini(里面为伪静态规则),当然对于linux服务器应该是没啥问题,不过对于win服务器,有可能会遇到一些问题,可以选择在ISAPI_Rewrite3的安装目录下的httpd.conf中添加伪静态规则,不过这是对服务器中所有网站都应用这个伪静态规则,很容易让其他网站运行有问题。
写着写着就破题了,继续介绍minify

修改配置文件(min目录下config.php):

<?php
//默认为false,设置为true后可以开启Web视图获取url
$min_enableBuilder = true;
![web视图获取url](/uploads/2016/12/demo1.jpg) 
//Web视图登陆密码,用户名为admin
$min_builderPassword = '123456';
 
//安装时的根目录,例如/www为网站目录,min目录在/www/min下
$min_documentRoot = $_SERVER['DOCUMENT_ROOT'];
 
//调试模式
$min_allowDebugFlag = false;
 
//min程序生成缓存的目录,可以启用更快的APC或memcached或redis 
$min_cachePath = '/tmp'; //linux服务器可以这样指定到网站根目录下的tmp文件夹,
windows服务器必须改成dirname(__FILE__) .'/tmp'(tmp文件夹在min的目录下面)或者$min_cachePath = 'd:\\wwwroot\\tmp'(tmp文件夹位置可以不用必须在min文件夹下面了);

//设置过期时间,单位s。注意:nginx或apache设置过期时间在minify中将失效,以该参数为准
//minify支持url后带上参数设置过期时间,例如:E.g. /min/f=hello.css&123456 对于js、css一般没有太大变化可以缓存时间长一些。我设置为了315360000;
$min_serveOptions['maxAge'] = 1800;

Web 前端优化 – 缓存页面组

在 Web 前端优化里,缓存页面组件是很重要的一项。不常改动的图片、CSS 、JavaScript 文件等,可以缓存在浏览器中,这样,用户再次访问时,浏览器直接从缓存中读取文件,一来减少浏览器请求数,加快用户访问速度,二来服务器需要返回的内容少了,减轻服务器负担。 
缓存页面组件的方法有多种,这一种是修改 HTTP 头。 
假设服务器是 Apache,可以通过配置 .htaccess 文件来启用缓存: 
<IfModule mod_expires.c>
    # 启用缓存
    ExpiresActive On

    #默认缓存时间为 1 天
    ExpiresDefault "access plus 1 day"

    #图片的缓存时间设置为一周
    ExpiresByType image/x-icon "access plus 7 days"
    ExpiresByType image/jpeg "access plus 7 days"
    ExpiresByType image/png "access plus 7 days"
    ExpiresByType image/gif "access plus 7 days"


    ExpiresByType application/x-shockwave-flash "access plus 7 days"

    #CSS 的缓存时间也设置成一周
    ExpiresByType text/css "access plus 7 day"

    #Javascript 的缓存时间同样设置为一周
    ExpiresByType text/javascript "access plus 7 day"
    ExpiresByType application/x-javascript "access plus 7 day"


    ExpiresByType text/html "access plus 10 minutes"
    ExpiresByType application/xhtml+xml "access plus 10 minutes"
</IfModule>
<IfModule mod_headers.c>
    #设置代理缓存
  <FilesMatch "\.(js|css|xml|gz|html)$">
    Header append Vary: Accept-Encoding
  </FilesMatch>
</IfModule>

以上配置针对不同类型文件设置不同有效期限,比如 jpeg/png/gif 图片,从用户第一次访问算起,7 天内有效,如果用户在 7 天内还访问这个网站,则直接从浏览器缓存中读取该图片,无需服务器上再返回。 
打开 firebug,启用 Net 面板,刷新页面,如果看到有返回状态码 304 Not Modified 的文件,说明设置成功。

由于我的网站css路径太长,加上js调用的多,我就用了minify组的功能,修改groupsConfig.php

return array(
     'js' => array('//templates/default/js/kxbdMarquee.js','//templates/default/js/jquery.kxbdsupermarquee.js'),
     'css' => array('//templates/default/images/css.css', '//templates/default/images/css_structure.css'),
);

在前台只需要如下简洁调用即可。

<link rel="stylesheet" type="text/css" href="/min/g=css" />
<script src="/min/g=js" type="text/javascript"></script>

min/builder/index.php 可以选择合并的文件进行可视化操作,但安装完毕后移动 min/builder/index.php 文件到安全位置。防止其他人访问。
这就是这一工具的强大之处,它不需要你再去手动压缩源码,只需要你按照最简单的方式保留一份完整的源码,它会自动帮你进行压缩,使用缓存后执行效率相当高,配合cdn加速那就更完美了。
使用 Google PageSpeed 工具检测了一下网站提示图片需要优化,就像本博客用gulp压缩一下图片把,不知道为什么压缩图片非常下,就安装了grunt,安装方法挺简单跟gulp差不多,关键就是一步步安装,不要颠倒了安装顺序,毕竟对这些自动化的工具主要还是使用,原理理解的少的太多了。

grunt快速入门了一下:

安装 CLI:npm install -g grunt-cli
配置好package.json 和 Gruntfile 文件,将命令行的当前目录转到项目的根目录下,执行npm install命令安装项目依赖的库,我这里用到imagemin插件,所以如下命令

切换到项目文件夹,

cd projectName
npm install grunt-contrib-imagemin --save-dev

接下来配置 Gruntfile.js 文件,定义优化图片大小的任务:

/*global module:false*/
module.exports = function (grunt) {
  'use strict'
  grunt.initConfig({
    imagemin: {
      /* 压缩图片大小 */
      dist: {
        options: {
          optimizationLevel: 3 // 定义 PNG 图片优化水平
        },
        files: [{
          expand: true,
          cwd: 'img/',
          src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片
          dest: 'img/' // 优化后的图片保存位置,覆盖旧图片,并且不作提示
        }]
      }
    },
  })
  grunt.loadNpmTasks('grunt-contrib-imagemin')
  grunt.registerTask('img', ['imagemin'])
}

运行 grunt imagemin 命令:这样就可以很好的优化一下图片了。

发表评论
暂无评论
textsms
account_circle
email
link
arrow_back 上一篇
arrow_forward 下一篇
""