一张图片优化5k带来的带宽成本及其前端页面的优化方法 【原】提升网站加载速度的3项黄金守则

上周，我参加了公司的一门课程《网站性能优化》，讲师提出了一个问题：一张图片优化后减小5K，1年内能够大概省下多少宽带成本呢？很是好奇，仔细听完讲师分析，计算出来的数据让小伙伴们都惊呆了，仅仅5K，看起来真的没什么，一年内大概节省540元~1440元，这说明一个问题，用户数庞大的网站中，一点优化可能会带来巨大的带宽成本节省，表现出价值是特别高的，不容忽视小小优化带来的意义。相信不少同窗也好奇这个数据是怎么计算的，公司的内部数据很差透露，给你们从新举个例子：

<!-- 
    公司内某个活动的最高峰半小时PV大概占总PV的3%，某天PV大概去到50万 高峰期的半小时PV大概就是500000*0.03 = 15000，每秒PV是15000/1800 = 8.3(次每秒)（活动页面通常只访问一次，不考虑客户端缓存的状况） 一张图片优化了5K，减小的宽带就是5*8.3 = 41.6kByte/s Byte是字节数，bit是位数，在计算机中每八位为一字节，也就是1Byte＝8bit 那么5K产生的带宽就是41.6*8/1024 = 0.325Mbit/s 不一样地区的IDC服务效果不一样，价钱差别也比较大，每个月100M大概在1万~2.68万不等(09年市场带宽成本价算的，数字不必定精准，但也是有力的数据) 　 5K的图片所带来的0.325M带宽的成本，大概每个月32.5元~87.1元 那么，一年大概节省390元~1045元 -->

这个例子只是图片的优化，对于实际工做中，还有不少节省宽带成本的方法，若是要去算，那这个影响会放大10倍，100倍甚至是1000倍以上的数量级。网站性能的优化是一个一直不容忽视的话题，曾经写过《提升网站加载速度的3项黄金守则》一文，有兴趣能够了解下，平时多关心本身网站的性能优化，无形地为公司省钱，老板不止关心赚钱的事情，省钱的事情老板也会关注，若是你为老板省钱，说不定他一高兴就涨你工资了~

今天写这篇文章不止是想告诉你们小小优化带来的价值，另外给你们带来jpg图片的优化技巧，相信如何优化图片也是你们特别关心的问题。

实际运营的业务，不少图片存在被被忽视的优化，近期我在部门网站上下载了4张jpg广告图共300K+，这几张广告图上线前已被公司内部的优图工具压缩过，而我本身再经过软件进行二次压缩，保证图片质量良好下，优化后能够减小150K+，压缩率100%，那么，是什么软件压缩率这么好呢？

相信不少同窗会猜测是咱们很是熟悉的photoshop，ps的确是很是优秀的图像处理软件，基本上作web开发都会使用它，咱们可使用它压缩图片，效果也很是不错，之前我一直是使用它的存储为web格式的功能来压缩图片。今天介绍另外一款图片处理软件，回顾博文《PNG的使用技巧》， 推荐过你们在移动端使用PNG8 alpha格式，该格式不只文件小，节省流量，并且半透明效果良好，而导出它的软件正是传说中fireworks，没错，就是它，强大的图片压缩软件，为 网页设计而出生的做图软件， 是一款建立与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具，咱们来看实例~

保证图片质量良好的状况下，使用firework与photosop分别对jpg图片的进行，对比它们压缩率

下图是上上周上线的一张广告图：

1.用photoshop CS6压缩处理图片

按存储为web全部格式(CTRL+ALT+SHIFT+S)，弹出以下界面，设置以下，优化后的图片大小为55.5K，减小了40.8K

2.用firework CS6压缩处理图片

 以下界面，在优化面板中选择：JPEG - 较高质量

使用导出功能来压缩图片，优化后的图片大小为49.2K，减小了47.1K

通过笔者屡次尝试使用后，firework对图片(jpg、png、gif)压缩处理上比photoshop要优秀（例外：photoshop在png32的压缩处理稍微好点），关于png的压缩处理，能够参考《PNG的使用技巧》。强烈推荐你们使用firework，即使是Adobe公司在CC版本中止了firework，但相比其余图片处理软件，值得确定的是，它的压缩图片功能(压缩图片的算法)是一流，将来咱们仍是能够继续使用。

话说回来，按照文章开头的计算，该广告图使用ps和fw压缩后可剩下多少钱多少流量呢，相信这也是一个惊人的数据，具体还跟页面的PV、广告的上下线时间等有关系。。

【原】提升网站加载速度的3项黄金守则

如何优化网页加载速度是每一个前端开发工程师须要了解的，也是前端开发工程师须要具有的基本条件。

优化网站加载速度的原理主要是减小网站文件的大小，减小HTTP请求数。网站文件越小，浏览器加载页面会比较轻松，打开页面的速度也会提高；一个HTTP请求，对页面打开速度形成的延时大概是0.01秒，HTTP的请求数越多，网站打开的速度就会越慢。

那么如何减小网站文件的大小，减小HTTP请求数呢？笔者作前端(重构方向)有2年多了，这里分享3项优化网站加载速度的方法，但愿能给有须要的同窗以及刚接触前端的初学者带来帮助~

comm on！一块儿来优化你的网站~

一、优化图片

使用Css Sprites（适用于大流量的网站）

其原理是把网页中一些背景图片整合到一张图片文件中，再利用CSS的"background"的进行背景定位。Css Sprites 最大的好处是减小http请求数，减轻服务器的压力，但使用它是须要付出"下降开发效率，增大维护成本的代价"，对流量小的网站带来的好处并不明显，使用 它取决网站的流量。

图片合成的工具如：Photoshop，输出样式的工具如：LinrPStoolkit-5、腾讯鬼哥的Css Sprites 样式生成工具；这样作的好处是尽量减小图片数，将HTTP请求减小到最低，减轻服务器的压力。

示例：合并5张小图

合并后的代码

.ico-1,.ico-2,.ico-3,.ico-4,.ico-5
{
display:inline-block;
background: url(img/ico.png) no-repeat;
overflow:hidden;
}
.ico-1{width:106px;height:104px;background-position:0 0;}
.ico-2{width:44px;height:104px;background-position:-107px 0;}
.ico-3{width:25px;height:104px;background-position:-152px 0;}
.ico-4{width:44px;height:52px;background-position:-178px 0;}
.ico-5{width:44px;height:51px;background-position:-178px -53px;}

合并后的Css sprite图片

给图片减肥
保证图片不失真的前提，适当压缩是图片大小，不只能够减小用户等待时间，下降公司带宽使用，节约成本。

下面的截图是去年公司的一张轮播广告图，每张图片大小都超过100K左右，在0.5M低带宽下，最大一张等待了7秒，仅仅4张轮播广告图就等了20秒，这种状况用户还会继续等待吗？

查了缘由，了解这些图片从设计师给过来后，产品经理直接经过广告系统发布上线，并无进行压缩图片，致使了用户在低网速状况下等待时间太久，无疑会流失不少用户。

如何压缩jpg图片呢？

这里以广告图为例，一般广告图的内容和色彩是比较丰富的jpg图片，jpg是有损压缩格式，压缩的时候主要注意保证图片清晰为前提，把图像上一些人眼不敏感的细节去掉，来达到减小图片大型的效果。使用最多见图片处理软件PS，存储为web全部格式(快捷键是alt+shift+ctrl+s)可压缩jpg图片。

把图片质量调整为中，品质在45~60之间，可必定幅度减小jpg图片的大小，你们能够试试看。

如何压缩png图片呢？

一淘UX的一丝冰凉，有篇png的秘密，写得很是好，对png图片解释的很是详细，文章最后有png的各类压缩工具，这边我搬过来了，以下：

推荐压缩工具 PngOptimizer （http://psydk.org/PngOptimizer)
推荐压缩工具 Pngout (http://advsys.net/ken/utils.htm)
推荐压缩工具 雅虎: Smush.it（http://www.smushit.com/ysmush.it/）

2.优化HTML页面

删除没必要要的空白字符和注释

删除对执行结果无影响的空格、换行、tab和注释

减小DOM元素数量

HTML页面中节点数目越多须要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢，减小没必要要的标签嵌套可提高页面性能。

使用链接式link缓存CSS和JS文件

使用外部链接式link，加载CSS和JS文件，浏览器第一次访问页面后缓存他们，之后调用他们拥有更快的页面加载速度。
内置在HTML页面中的CSS和JS，会在每次请求中随HTML文档从新下载，这虽然减小了HTTP请求的次数，却增长了HTML文档的大小。从另外一方面来讲，若是外部文件中的CSS和JS被浏览器缓存，在没有增长HTTP请求次数的同时能够减小HTML文档的大小。

<link href="global.css?v=20130219" rel="stylesheet" type="text/css" />

大型网站主页内置CSS和JS

比较适合使用内置代码的例外就是大型网站的主页，主页在一次打开中拥有较少（可能只有一次）的浏览量，采用了减小HTTP请求的方法，把CSS写到HTML文件里，而不采用外部调用的方法，也能够防止css没有加载完毕出现页面乱的现象，内置CSS和JS对于终端用户来讲会加快响应时间，用户体验好。 

<style type="text/css">
......
</style>

<script type="text/javascript">
......
</script>

减小css、js文件数目

CSS和JS文件能够合并的最好合并

例如
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="common.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" type="text/css" href="page.css" />
<script type="text/javascript" src="page.js"></script>
<script type="text/javascript" src="v4.js"></script>

1.reset.css和common.css是公用的样式，可合并为global.css

2.index.css和page.css为私有的样式，可合并为index.css

3.page.js和v4.js为私有脚本，能够合并为index.js

合并后：

<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
<script  type="text/javascript" src="index.js"></script>

这样一来能够减小3个http请求

css放页头head标签中，js文件放页面底部

用户没有太多的耐心等待页面加载，咱们可利用网页先展示给用户，后加载功能原则

1.优先加载css：

浏览器渲染HTML的顺序是从上到下，下载和渲染是同时进行的，在载入HTML元素以前，先加载css，能够避免HTML出现无样式状态，先将网页展示给用户

2.最后加载js：

若是js文件放到页面顶部，浏览器加载网页，加载js时，尚未加载HTML代码，网页显示为空白，脚本阻塞了HTML的加载，也可能会出现js捕捉不到操做的节点，就会报错

网址后加反斜杠

有些网址，好比"https://www.tenpay.com/v2/mapp"，当服务器收到这样一个地址请求的时候，它须要花费时间去肯定这个地址 的文件类型。在网址后多加一个斜杠，让其变成"https://www.tenpay.com/v2/mapp/"，这样服务器就能一目了然地知道要访问 该目录下的index文件，从而节省了加载时间。

img、table、iframe标签标明高度和宽度

例如网页上添加图片时，标明它们的高度和宽度，也就是height和width参数。若是浏览器没有找到这两个参数，它须要一边下载图片一边计算大小，若是图片不少，浏览器须要不断地调整页面。这不但影响速度，也影响浏览体验。
下面是一个比较友好的图片代码：
<img width="120" height="40" src="logo.gif" alt="logo" />
当浏览器知道了高度和宽度参数后，即便图片暂时没法显示，页面上也会腾出图片的空位，而后继续加载后面的内容，从而加载时间快了，浏览体验也更好了。

三、优化CSS文件

不要在ID或者class选择器前使用标签名
通常写法：span.ico-peun
更好写法：.ico-peun
尽可能少使用层级关系，使用长命名
通常写法：.main .line span.txt{...}
更好写法：.main-line-txt{...}

为何要这样写呢？浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。 好比.main .line .txt{...}，浏览器的查找顺序以下：先查找html中全部class='txt'的span元素，找到后，再查找其父辈元素中是否有 class="line"的元素，再判断.line的父元素中是否有class="main"元素，若是都存在则匹配上。 浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。

长命名的写法有2个好处：一来能够减小代码量，二来能够提升选择器解析css代码的速度。

使用class代替层级关系
通常写法：.main ul li a{display:block;}
更好写法：.block{display:block;}

CSS代码简写

简写的好处是代码简练，提升开发速度，并减小多余的代码量

.test{
      margin-top: 10px;
      margin-right: 20px;
      margin-bottom: 10px;
      margin-left: 20px;
}
简化为：
.test{margin: 10px 20px 10px 20px;}

CSS代码一行式编码风格，去掉不须要的空白字符（空格、换行、tab缩进）

一行式的好处是有效减小css文件的行数和空白符，最终减小文件的大小

.test{
      width:50px;
      height:100px;
      color:#000000;
}
简化为：
.test{width:50px;height:100px;color:#000000;}

压缩css，最有效的减小文件大小(去除注释、空白字符)

如把css文件复制成为2份，把其中一份保留原稿，令一份压缩并添加min后缀，并把压缩这份用于线上使用

常见压缩工具：YUICompressor，淘宝封装的css和js压缩工具TBCompressor，站长工具等，都适合css和js文件的压缩，去掉不须要的空白字符（空格、换行、tab缩进）