网页加载性能优化方法

 在公司做了好多网页项目，这里合并下一些网页性能优化的帖子，作为知识目录

减少网站加载时间的最有效方式如下：

• 减少网站的HTTP请求数。
• 优化图片
• 合并压缩脚本

1.减少HTTP请求数：可通过CSS Sprite（又称CSS雪碧）—将多个图片整合到一个图片中，使用CSS来进行定位显示。页面加载时，一次性加载整图，有效减轻服务器压力。同时，缩短了悬停加载图片所需的时间延迟，使得用户浏览行为更加流畅，不会停顿。

2.优化图片：推荐使用PNG8格式，PNG8格式在一般情况下，无论是体积压缩比还是对各浏览器透明度兼容都很不错。
图片优化还可以从另外两方面进行，色盘范围和压缩算法，先通过输出时精准的色数设定，再加上输出后的二次优化，可以使得图片质量和大小达到一个极优点，二次优化工具有：
当然最新的一种格式是Google强推的WebP格式，关于WebP更多内容可参看36Kr此篇报道

具备以下条件的图像更适合用PNG8格式进行存储：
1、图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充。
2、具备较大亮度差异以及强烈对比的简单图像（如“立刻购买”按钮中的背景和文字）。
根据经验具备上述条件的图像一般是使用photoshop或其他软件中的矢量工具进行绘制然后再保存成位图的图像。

对于写实的摄影图像或是颜色层次非常丰富的图像采用JPG的图片格式保存一般能达到最佳的压缩效果。

在存储图像时采用JPG还是PNG主要依据图像上的色彩层次和颜色数量进行选择。一般层次丰富颜色较多的图像采用JPG存储，而颜色简单对比强烈的则需要采用PNG。但也会有一些特殊情况，例如有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含的颜色数量有限时，也可以尝试用PNG进行存储。而有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次，这个时候就需要采用JPG进行存储了。
另外还有一个原则就是用于页面结构的基本视觉元素，如容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储，这样才能更好的保证设计品质。而其他一些内容元素，如广告Banner、商品图片等对质量要求不是特别苛刻的，则可以用JPG去进行存储从而降低文件大小。

对于图片的压缩，最常见的分有损，无损压缩。无损压缩譬如去除exif信息，重新排列像素存储方式等，有损压缩譬如合并相似像素，减少可见像素点等。现在这些压缩算法都可以用现成的成熟的库实现，以PHP为例子，可以使用pngcrush做PNG 的无损压缩，pngquant做PNG 的有损压缩。JPEG可使用imageMagick和jpegtran。这里推荐下imageMagick，相对于其他图片处理的库，这个库可控制的功能更多，并且支持多种编程语言。

可使用类似智图这类的压缩应用进行压缩。

3.合并&压缩脚本：对CSS和JavaScript进行合并和压缩。
脚本拆分可以让维护人员更容易找到对应内容，但同时增加了页面链接数，因此可适当合并脚本。

使用Minify压缩JS和CSS
Minify把CSS和JS压缩和削减(Minify：去掉空格回车符等)，以及把多个CSS，JS文件整合到一个文件里。不要以为你的大带宽没有必要进 行这类优化。使用它的理由更重要的是文件合并，而不是压缩，文件整合可以减少浏览器端不断发出新的连接请求，就像FTP服务器一样，多个小文件 和一个大文件耗时是不一样的。
Minify使用PHP编写，项目地址

CSS 在线压缩：

• Cleancss.com
  功能最强大，设置项最多

• Css_compressor
  可压缩代码片段、URL、文件

• CSS Drive:CSS Compressor
  直观易用

JS压缩工具：

• UglifyJS
  UglifyJS 是用 NodeJS 编写的 JavaScript 压缩工具，是目前最流行的JS压缩工具，JQuery 就是使用此工具压缩，UglifyJS 压缩率高，压缩选项多，并且具有优化代码，格式化代码功能，目前国内能提供UglifyJS压缩的都还处在1.0版本，本站率先升级到 2.0 时代。

• YUI compressor
  YUI compressor 是Java编写的压缩工具，由雅虎发布，压缩是 100％ 的安全，比大多数其他工具有更高的压缩比， 一般代码的压缩率达到 40％ 至 60％，YUI compressor 也能够压缩CSS文件，国内互联网公司，阿里、淘宝、百度等都是采用 YUI compressor 内核压缩后发布代码。

• JSPacker
  JSPacker 由PHP编写的压缩工具，可以混淆代码保护知识产权，产生的代码兼容IE、FireFox等常用浏览器，国内大部分在线工具网站都采用这种算法压缩，只因为此算法采用PHP编写，正则表达式替换语句，没有语法分析内核，环境搭建成本低，压缩率上远不如以上两种内核，并且混淆代码页不符合开源精神。

• JsMin
  JsMin 是用C语言编写的一个轻量级JS压缩器，去除JavaScript文件中的注释和不必要的空格。它通常减少了一半的文件大小，从而导致更快的下载速度。

另外一些不是属于提升性能方法，而是通过别的加载手段使得用户感受度提升的方式：

· 缓存
使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）
a) 缓存一切可缓存的资源
b) 使用长Cache（使用时间戳更新Cache）
c) 使用外联式引用CSS、JavaScript

· 按需加载
将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量
PS：按需加载会导致大量重绘，影响渲染性能
a) LazyLoad
b) 滚屏加载
c) 通过Media Query加载

· 预加载
大型重资源页面（如游戏）可使用增加Loading的方法，资源加载完成后再显示页面。但Loading时间过长，会造成用户流失
对用户行为分析，可以在当前页加载下一页资源，提升速度
a) 可感知Loading(如进入空间游戏的Loading)
b) 不可感知的Loading（如提前加载下一页）

· 减少Cookie
Cookie会影响加载速度，所以静态资源域名不使用Cookie

· 避免重定向
重定向会影响加载速度，所以在服务器正确设置避免重定向

· 异步加载第三方资源
第三方资源不可控会影响页面的加载和显示，因此要异步加载第三方资源

参考：

• 书籍-UI群英汇
• 智图—源于QQ空间图片WebP化的思考
• 13 个免费的 PNG 图像的优化和压缩工具
• 移动H5前端性能优化指南
• 移动前端系列——移动页面性能优化
• 网页设计师表达创意和想法:正确的图片格式