`
taro
  • 浏览: 136654 次
  • 性别: Icon_minigender_1
  • 来自: 东京
社区版块
存档分类
最新评论

快速提高网站性能三步骤【操作篇】

阅读更多

 

本文从前端开发角度介绍提高网站性能的三个简单方法,操作简单,却可以迅速提高网站性能。

1、图片无损压缩

通常图片占据一个网页加载的大部分流量,从图片下手优化网站会得到意想不到的。

<1>首先,压缩成适合页面显示的适当尺寸。

例如现在有一个256 x 256px的苹果图片,而网页上只需要显示为150 x 150px大小,那就把图片压缩到150 x 150px,这样会压缩很多字节。

                                               

压缩前(尺寸:256 x 256px, 大小:68KB)         压缩后(尺寸:150 x 150px, 大小:36.2KB)

压缩结果:压缩为原始大小的:53%

差异:除非放大页面,否则两张图片显示上没区别。

推荐软件:Microsoft Office自带Picture Manager就可以压缩,这类软件太多Google搜搜就出来了。

<2>其次,通过图片无损压缩软件优化图片大小。

                                              

无损处理前(尺寸:150 x 150px, 大小:36.2KB)     处理后(尺寸:150 x 150px, 大小:24.2KB)

压缩结果:

使用Yahoo Smush.it压缩,居然节省了33.11%流量,效果明显!

差异:视觉上基本无差异。

推荐软件和在线应用程序:

1、【云应用】 Yahoo Smush.it(http://www.smushit.com) 支持批量压缩

如果你是个云爱好者或者有洁癖,不喜欢在电脑上安装一大堆软件让系统变得乱糟糟,Yahoo Smush.it是很好的选择。不知国内的网速是否给力......

2、【桌面软件】PNGGauntlet  (http://pnggauntlet.com/) 支持批量压缩

如果网速不给力,无力在云里飘来飘去,这个桌面软件是不错的选择。   百度空间里有篇使用介绍:PNG压缩工具PNGGauntlet

2、Javascipt压缩

Javascript压缩不仅可以达到节省空间的效果,还可以混淆JS代码,让你的JS代码无法被别人阅读,当然我崇尚开源鄙视加密代码的行为。 例如:JS文件很大时压缩效果很明显:jQuery 1.7.2版压缩前247KB,压缩后93KB。

以下为quicksand插件压缩前后对比。

压缩前的JS代码(function ($) {

$.fn.quicksand = function (collection, customOptions) {
    var options = {
        duration: 750,
        easing: 'swing',
        attribute: 'data-id', // attribute to recognize same items within source and dest
        adjustHeight: 'auto', // 'dynamic' animates height during shuffling (slow), 'auto' adjusts it before or after the animation, false leaves height constant
        useScaling: true, // disable it if you're not using scaling effect or want to improve performance
        enhancement: function(c) {}, // Visual enhacement (eg. font replacement) function for cloned elements
        selector: '> *',
        dx: 0,
        dy: 0
    };
    $.extend(options, customOptions);
    //...... 省略 ......
  

压缩后的JS代码

(function(a){a.fn.quicksand=function(b,c){var e={duration:750,easing:"swing",attribute:"data-id",adjustHeight:"auto",useScaling:true,enhancement:function(a){},selector:"> *",dx:0,dy:0};a.extend(e,c);
//...... 省略 ......

推荐在线应用程序

在线Javascript压缩工具:Online Javascript Compression Tool

3、CSS压缩

CSS压缩与Javascript压缩操作相似,压缩效果客观。CSS压缩虽然可以起到视觉混淆的效果,但只需要通过浏览器就可以读到清晰地CSS代码。

压缩前的CSS代码

/* --------------------------------------------------
 SiteName : 祁有此理
 FileName : common.css
 Update : 2012/05/28
-------------------------------------------------- */

/* --------------------------------------------------
 Reset Style
-------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html{overflow-y:scroll;}
body{
     font-size:85%;
     text-align:center;
     line-height:1.5;
     font-family:Arial, Osaka, Helvetica,Geneva,sans-serif;
     margin:0 auto;
     background:#252d36;
}
//...... 省略 ......

 

压缩后的CSS代码

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}html{overflow-y:scroll}body{font-size:85%;text-align:center;line-height:1.5;font-family:Arial,Osaka,Helvetica,Geneva,sans-serif;margin:0 auto;background:#252d36}
//...... 省略 ......

 

推荐在线应用程序

在线CSS压缩工具:CSS Compressor

 

链接:

个人站点:www.tarobjtu.com

个人站点博客:www.tarobjtu.com/blog

分享到:
评论

相关推荐

    信息学奥赛一本通提高篇 第1部分 基础算法(提高篇) 数据点

    《信息学奥赛一本通提高篇》是针对信息学竞赛的高级教程,主要聚焦于基础算法的提升。在第1部分“基础算法(提高篇)”中,作者深入探讨了数据结构与算法的基础知识,旨在帮助参赛者提升解决复杂问题的能力。这部分...

    性能监测篇:Performance、LightHouse 与性能 API(1).md

    在前端性能优化的领域,理解和应用性能监测工具是提高网站性能的关键步骤。本小册内容涵盖了性能优化的基础知识体系、实践方法以及性能监测工具的使用技巧。 首先,性能优化是一个需要理论和实践相结合的过程。性能...

    flash内存 性能优化篇.

    6. **F2FS(Flexible Log-structured File System)文件系统**:为适应Flash特性而设计的文件系统,如F2FS,能够减少不必要的写入操作,提高I/O性能,并支持快速启动和恢复。 7. **多级单元(MLC/TLC/QLC)和3D堆叠...

    FANUC数控系统AC伺服电机_伺服调整步骤(基础篇).pdf

    《FANUC数控系统AC伺服电机伺服...总之,这份基础篇的伺服调整步骤指南提供了从基础到进阶的全面指导,涵盖了FANUC AC伺服电机在实际应用中的常见调整问题,旨在帮助操作人员优化系统性能,提升生产效率和加工质量。

    电子商务网站性能优化(毕业设计)

    【电子商务网站性能优化】是指通过一系列技术和策略提升网站运行效率,增强用户体验,确保在高并发访问下仍能稳定、快速地提供服务。本篇毕业设计主要关注的是针对中小型电子商务网站的性能提升,尤其是针对MySQL...

    最新提高window 7性能的方法 加快开机速度

    在本篇文章中,我们将深入探讨如何通过一系列优化措施来显著提升Windows 7系统的性能,并加快其启动速度。根据最新的研究成果,这些方法能够帮助用户将Windows 7的启动时间缩短至35秒左右,并且整体系统性能可以提升...

    完整word版-Dell-r730服务器操作系统安装教程.doc

    服务器操作系统安装教程 本篇文章是关于 Dell r730 服务器操作系统安装的详细教程,旨在指导...本篇文章详细介绍了服务器操作系统安装的每一步骤,为读者提供了详细的指导,帮助读者快速完成服务器操作系统的安装。

    PHP构建高性能WEB站点

    1. **代码优化**:编写高效、整洁的PHP代码是提高性能的第一步。避免使用全局变量,减少数据库查询,使用预编译语句(如PDO预处理语句)来防止SQL注入,以及利用PHP内置的函数而非自定义函数,都能提升执行效率。 2...

    行业文档-设计装置-提高装饰原纸综合性能的方法.zip

    本篇文档将深入探讨如何通过设计装置来提升装饰原纸的综合性能,使其在耐用性、色彩稳定性、环保性等方面达到更高的标准。 首先,我们要理解装饰原纸的生产过程。它通常包括制浆、造纸、浸胶、烘干、压花等步骤。在...

    FANUC+B-65264CM-01伺服调整步骤(基础篇).pdf

    FANUC伺服调整步骤涉及的内容十分广泛,包含基础篇的伺服调整、高速高精度伺服参数的设定、TuningNavigator(调整导航器)的使用、加/减速的调整、圆弧和四角的调整以及HRV3控制相关的操作等。以下是对文档中提及...

    《Android性能测试》 PDF

    本篇文章将依据书中的核心内容,详细阐述Android性能测试的各个方面。 一、性能测试的重要性 在Android平台上,性能测试是确保应用程序流畅运行、提升用户体验的关键步骤。它涉及到CPU利用率、内存管理、电池寿命...

    在VC++6.0环境下的C语言操作步骤提示

    1. **下载VC++6.0安装包**:可以通过官方网站或第三方软件下载网站获取VC++6.0的安装包。 2. **安装过程**: - 运行安装程序。 - 按照安装向导的提示完成安装,注意选择合适的安装路径和组件。 - 安装完成后,...

    PIC单片机实用教程——提高篇 pdg 李学海

    《PIC单片机实用教程——提高篇》 pdg 李学海 北京航天航空大学出版社 本书兼顾PIC全系列,共分9章,内容包括:基本概念、PIC16F877硬件概况、指令系统、汇编程序设计、集成开发环境、在线调试工具、定时器、中断...

    C# 集合的索引性能比较

    List同样提供了O(1)的索引访问,由于其泛型特性,避免了装箱和拆箱操作,提高了性能。在大多数情况下,List是处理索引操作的最佳选择。 再者,Hashtable是键值对存储的非排序集合,它不支持索引访问。要获取特定值...

    提升Linux协议栈转发性能的探讨与设计.pdf

    然而,随着硬件资源的限制和网络流量的剧增,如何在有限的硬件条件下优化性能,尤其是提高Linux操作系统协议栈的转发性能,成为了一个重要的研究课题。 Linux协议栈是操作系统的核心组成部分,负责处理网络数据包的...

    如何做性能测试报告

    本篇将围绕“如何做性能测试报告”这一主题,结合源码分析和工具应用,详细探讨报告的制作过程与关键要素。 一、性能测试的目标与范围 在开始性能测试之前,明确测试目标至关重要。这可能包括响应时间、并发用户数...

    设计高性能的WCF解决方案 经典中的经典

    确保正确管理代理和通道,避免频繁创建新的代理,尤其是在有状态的情况下,重复使用通道可以显著提高性能。同时,异步调用是提高客户端响应能力的关键,特别是在处理长时间运行的操作时。 除此之外,还应注意缓存...

    行业文档-设计装置-一种用于内灌混凝土快速浇筑的钢柱操作平台.zip

    本篇将围绕"一种用于内灌混凝土快速浇筑的钢柱操作平台"的设计装置进行详细探讨。 标题中的“设计装置”指的是为优化混凝土浇筑工艺而研发的一种创新设备,它专门针对钢柱的内灌混凝土过程,旨在提高施工速度和质量...

Global site tag (gtag.js) - Google Analytics