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

女爷i 2022-03-30 06:46 187阅读 0赞

详见：[http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt213][http_blog.yemou.net_article_query_info_tytfjhfascvhzxcyt213]

在上一篇文章中，我们讨论了一些基本的页面优化和减肥方案，现在我们的页面已经被缩减了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中访问到了，像这样：

1.  .sprite \{
2.  width: 16px;
3.  height: 16px;
4.  background: url("sprite.png") 0 0 no-repeat;
5.  \}
6.  .sprite.help \{ background-position: 0 -16px; \}
7.  .sprite.info \{ background-position: 0 -32px; \}
8.  .sprite.user \{ background-position: 0 -48px; \}

# 9. 使用data URIs #

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

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

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

1.  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA
2.  
3.  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的站长分析工具都很好用。

# 总结 #

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

[http_blog.yemou.net_article_query_info_tytfjhfascvhzxcyt213]: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt213