网页设计师和前端开发者看的前端性能优化

压缩与简化

对于你的文本资源，有两个实在很简单的事情是你能（而且也应该）做的；简化他们移除任何注释和空格，并且进一步的压缩它们大小。

如果你想选择其一，单独的压缩要比单独的简化更有效。然而，如果可能的话你应该两个都做。

实施压缩经常需要一点.htaccess诡计，但如我的好朋友 Nick Payne指出的，.htaccess实际上从服务端的观点来看不是特别有性能；.htaccess评估每一个到达请求，因此实际它有很多开销。

这取自 Apache 文档 ：

你应该完全避免使用.htaccess文件，如果你可以直接访问http主服务器的配置文件的话。 使用.htaccess文件使你的Apache http server慢下来。任何你能包含进一个.htaccess文件的指令最好设置在一个字典 块,因为它具有同样的效用并且有更好的性能。

如果你确实只是访问.htaccess，那么我不会担心；这个开销的代价通常无需关心。实际上通过.htaccess来压缩实现起来很简单。而简化不是那么容易，除非你有一个构建过程，或者用一些类似代码工具套件，或者能直接编译输出最小化的预处理器。

有趣的是，我移动inuit.css到Sass的主要原因最初是——我可以方便的编译一个简化的版本。

简化（Minification）最主要的部分是简单的删除空格与注释；如果你在代码中写的注释像我一样多，那么你确实需要缩减你的资源。

像任何压缩算法一样，压缩（Gzip）将任何基于文本的输入，基于重复的/可重复的字符串对其进行压缩。通过gzip大多数代码压缩得很好，因为所有代码都有包含重复字符串的倾向;例如CSS中一遍又一遍的background-image，标签中一遍又一遍的<strong>…

压缩真的大量的压榨掉资源的大小，你应该明确的启用它。为了能有规范的.htaccess片段，查阅 HTML5 样板处理资源 。

压缩内容引起大量的节约。在写操作的时候，inuit.css 输入有77k大小。压缩以后只有5.52k。简化与压缩给我们节省了93%。而且因为gzip对基于文本的资源工作的很好，你甚至可以压缩可缩放矢量图形（SVGs）和一些字体格式文件！

优化图像

相比通过优化工具运行而言，我对优化图像的艺术不是非常的知识广博，但通过图像自身，后加工来解决是一个相当有趣的话题。

Spriting (精灵)

如果想要一个性能优异的网站，Sprites（精灵，一种网页图片应用处理方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去）是几乎强制性的；在一个HTTP请求里加载一个大的图片，而不是若干个请求若干个图片。但是问题在于，不是所有的图片都可以立即精灵化；可能你有一个图标，需要将它作为一个弹性宽度元素的背景图像，但你显然不能将其精灵化，因为sprites对非固定尺寸元素不起作用。你通常只要在sprite表中的图像周围放许多空格，但这样在sprite中浪费像素它们自己就影响到性能了。

为了解决特定元素的不可精灵化，我们需要一种称为”精灵元素”的东西。这基本是一个空元素，一般是一个<i>，它的核心工作就是保持空并且加载一个背景图像。

在我创建Sky Bet时我用过这些，YouTube用它们, Facebook用它们， Jonathan Snook 有 一篇SMACSS的文章整个章节都关于他们。

基本的前提是，如果因为一个元素是流态的而不能精灵化，那么你在它里面放置一个空元素解决尺寸的问题，然后就可以精灵化了，例如：

1 2 3 4 5

<li> <a href="/profile/"> <i></i> Profile </a> </li>

这里我们不能精灵化<li>或者<a>，所以我们在那里有一个空的<i>，它替代加载图标。这是关于性能我最喜欢的事情之一；你正将聪明的技术整合来改善页面速度，却仍然在使用传统的”坏”标记。有趣的定西！