前台页面优化全攻略（二）

　在上一篇文章中，咱们讨论了一些基本的页面优化和减肥方案，如今咱们的页面已经被缩减了30%-50%，若是你尚未阅读上一篇文章，我建议你完成那些基础热身以后再继续进阶的训练。

　　若是你已经尝试了基础的热身，那咱们就继续采起一些更极客的解决方案。

　　1. 移除网站中社交网络的组件

　　看到这个标题请不要惊讶，我并非让你放弃第三方社交平台，而是但愿你能放弃那些肥胖的官方组件。你的网站中有社交平台的分享按钮么？这些按钮会为你的网站增重大概0.5M。咱们知道，这些分享功能都是由JavaScript实现的，有些分享组件的网络链接会强制在加载页面以前进行。

　　太大的社交组件彻底没有必要，你彻底能够添加一个轻量级的社交分享按钮在你的网页中，几行html代码就能搞定的事为何要弄的这么复杂呢？不少人可能都没有在乎到一个小细节，FaceBook的官方”赞“按钮就要270KB！如今你应该明白这么作的必要性了，咱们应该深刻研究如何优化社交组件。

　　若是你以为一个简单的按钮没法提供数据统计等功能，能够看一看这篇文章，学习一下若是添加高性能的轻量级社交组件。

　　2. 检查全部第三方组件的大小

　　社交网络并非惟一的缘由，其它第三方的组件也大大增大了你网站的大小，这些组件有时候甚至会加载其它网站的内容，这些加载的数据可能高达几百KB。

　　若是你必需要使用这个组件，那咱们要考虑的就是如何更好的处理和简化这个组件了。理想状况下，JavaScript组件应该都是轻量级的，它们在页面底部被加载，

　　3. 考虑使用懒加载或内容点播

　　假设你的网站是用来显示视频供应商提供的视频。不管用户是否有意要播放，页面都会加载视频API和其它相关的资源。为何不让用户请求以后再加载这些东西呢？

　　你也能够采用滚动式页面，在用户往下拉滚动条时再开始加载新的内容，这样作虽然可能会对SEO形成影响，可是在特定的状况下，如照片展现，微博内容展现等都会有不错的效果。

　　4. 用CSS取代图片

　　你还在用切片技术建立图片的圆角边框等样式吗？咱们都知道，CSS能够生成不少种前台效果，包括各类样式的按钮，背景……虽然他们在不一样的浏览器中可能会有不一样的展现样式，但用户并不会在乎这些，他们不会像你同样开不少个浏览器对比一样的代码会有什么样的区别。

　　你彻底不用担忧古代浏览器会对CSS样式形成影响，当你构建一个响应式设计的页面，你要通配各类大小的屏蔽，这个时候若是你仍是用图片就会有不少问题，因此CSS是很好的选择。

　　不过须要注意的是重绘CSS的阴影和梯度代价也是很是大的，特别是你同时在几十个元素中都添加了这些特性。因此你必须屡次去实践，对比在你的网站中是用CSS好仍是用图片好。这些都要因网站具体状况而定。

　　5. 用CSS效果和动画取代JavaScript

　　若是在你的JavaScript代码中处处都是$("#x").fade() 和 $("#y").slideDown()这会对你的网站形成很大的影响。在几年前咱们必须得这么作，可是如今不一样了，咱们能够选择用CSS3的animations, transitions 和 transformations取代了JavaScript的效果，缘由以下：

　　1). CSS3 animation是由本地浏览器自主绘制的，在没有错误的状况下，它会比JavaScript效果好，并且快不少。

　　2). CSS3 animation代码更容易编写，并且代码量少。

　　3). 若是JavaScript不使用第三方类库，3D效果的实现会比CSS3提供3D转换难不少。

　　6. 使用可缩放矢量图(SVGs)

　　SVGs 包括点，线和图形，它们被以矢量的形式被定义在XML中，SVGs是响应式设计中比更理解的解决方案，它们能够缩放成任意大小并且不会影响到显示的效果，并且文件大小通常都会小于bitmap。

　　固然，SVGs并非在任何状况下都适用，若是是相册或是混合通道的图片就应该使用JPG或是PNG格式。其余好比logo，图表能够放心选用SVGs。

　　有一些工具能够直接把bitmaps格式的图转成矢量格式，可是多少影响到图片的效果。这里推荐Inkscape 和 SVG edit，它们都是很不错的建立SVGs的工具包。 

　　7. 用图标字体(icon fonts)代替图片

　　利用字体工具把咱们平时 Web 上用的图形图标（icons）转换成 web fonts，就成了 icon fonts，它能够借助 CSS 的 @font-face 嵌入到网页里，用以显示 icons。由于字体是矢量化图形，它天生具备「分辨率无关」的特性，在任何分辨率和PPI下面，均可以作到完美缩放，不会像传统位图，如：png，jpeg，放大后有锯齿或模糊现象。

　　因为图标字体的灵活性和易用性使得图标字体使用愈来愈普遍了，咱们常常能够看到不一样的UI框架都整合了各类的图标字体。

　　除了「分辨率无关」这个最大的优势以外，icon fonts 还具备：

• 文件小：相比图片几十几百KB的容量，icon fonts 几乎是羽翼级轻量。
• 加载性能好：由于图标都被打包进一套字体内，http request 减小。这如同咱们经常使用的 css sprites 技术。
• 支持CSS样式：和普通字体同样，你能够利用CSS来定义大小、颜色、阴影、hover状态、透明度、渐变等等…
• 兼容性好：web fonts 起源很早，别说主流浏览器，连IE6/7都能良好支持。除了一些老的移动端浏览器，如Android 2.1如下的初代浏览器，Opera mini 这类自限型浏览器。

　　固然 icon fonts 也有它的不足：

• 样式单一，没法针对不一样分辨率来调整icon 的细节，好比下降大尺寸icon 的线条粗细。
• 颜色单一，CSS 没法方便的去定义彩色的 icon，却是有经过叠加组合的方式来达到彩色图标的目的。
• 移动端浏览器兼容性还不够完善，像Opera mini、Windows phone 7.0-7.8 都不能正常显示icon fonts。
• 有少许的移动设备有可能会和 icon fonts 的字符编码冲突，致使icon 显示不正常（咱们本身风车Android 版本就碰到了这个问题）。

　　因此 icon fonts 也并非一套完美的响应式图片的解决方案，当它适宜你的应用场景时，好比：

• 你的网站是扁平化或简约风格，图标样式单一，颜色为纯色。
• 你的目标用户使用桌面浏览器为主，或者，
• 你愿意为非兼容设备作兼容hack。

　　icon fonts 是一个令设计师和前端工程师都心花盛开的方案。

　　icon fonts 的制做主要有两条思路：

1. 利用字体工具手动制做
2. 利用在线工具自动生成

　　8. 使用sprite来优化图片资源

　　Sprite”(精灵)这个词在计算机图形学中有它独特的定义，因为游戏、视频等画质愈来愈高，必须有一种技术能够智能的处理材质和贴图，而且要同时保持画面流畅。“Sprite”就是这样一种技术，它将许多图片组合到一个网格上，而后经过程序将每一个网格的内容定位到画面上。

　　Sprite被定位到一副静态图片上，而且经过简单的程序或硬件便可正肯定位到画面上，一幅幅图片就像是被“变”出来的，他们并无单独占用内存，因此被取名为“Sprite精灵”。

　　时间进行到2000年，Web设计向着精致、巧妙的方向发展。设计师们开始考虑使用非Javascript的方 式制做鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生，它基于同上文提到的游戏Sprite一样的原理，而且使用CSS更容易控制，很快的流行开来。

　　当页面加载时，不是加载每一个单独图片，而是一次加载整个组合图片。这是一个了不得的改进，它大大减小了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所须要的时间延迟，使效果更流畅，不会停顿。

　　CSS Sprites能够用在不少场合，大型网站能够将许多单独的图片，以有机的方式组合起来，从而使其便于维护和更新。图片之间一般会留出较大的空白，使 得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中，它的弹性较差，收到定位等因素的制约。因此，你须要在可维护性vs下降负载之间权衡利弊，选择最适合你的项目 的方式。

　　在网站图片的解决方案中，CSS3应该是首选，其次是SVG和icon font,最后才是Bitmap。常用的Bitmap文件应该打包放在一个单独的sprite中，这样一来图片就能够在CSS中访问到了，像这样：

    .sprite {
    width: 16px;
    height: 16px;
    background: url("sprite.png") 0 0 no-repeat;
    }
    .sprite.help { background-position: 0 -16px; }
    .sprite.info { background-position: 0 -32px; }
    .sprite.user { background-position: 0 -48px; }

　　9. 使用data URIs

　　假设你有一个图片，把它在网页上显示出来的标准方法是：

<img src="http://gbtags.com/images/A.png"/>

　　这种取得资料的方法称为 http URI scheme ，一样的效果使用 data URI scheme 能够写成：

    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA
    7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />

　　换句话说咱们把图像档案的内容内置在 HTML 档案中，节省了一个 HTTP 请求。

　　data uri的主要优势是减小了http请求数，调用起来比css sprite更加灵活，缺点是增长了客户端的资源消耗。

　　在全部浏览器的非缓存的模式下， CSS sprite 方式比 data URI 方式快了数百微秒。但事实上 CSS Sprite 比 Data URI 方式多发送了一次链接请求，包括 TCP 慢启动招致全部相关的链接开销。

　　缓存条件下 Android 4.2 和 iOS 6 的 CSS sprite 模式都有大概 2 倍的速度提高，只是 iOS 条件下减小了 220ms 而 Android 减小了 70ms （原生浏览器）。相对来讲，Chrome 和 Firefox 的状况平衡得好点，缓存和非缓存状况下只有 50% 到 60ms 左右的性能差别。

　　在这里我建议将 data URIs 用于很是小的资源，而且不能在 CSS 和 内联 HTML 中屡次使用它们。

　　10. 使用网站评估工具

　　检查是否减肥成功的最好方法就是站到称上称一下，一样，你须要使用网站评估工具评估一下你给网站瘦身的效果。不少开发者工具和免费的在线测试工具都不错，百度和Google的站长分析工具都很好用。

　　总结

　　你们能够明显的发现这篇文章比第一篇不正常多了，更显极客范儿，相信能把实践跟到这的站长已经很少了。对于咱们来讲，极客的瘦身之道远不只如此，在下一篇文章中，我会列出更加疯狂的瘦身技巧。成功的都是坚持到最后的那些人，共勉之~