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

视网膜图像

你不需要将所有都提高到视网膜级别。在标准分辨率下，同样的图像放大2倍将包含四倍数量的像素。四倍啊。然而这并不意味着需要通过连接传输四倍的文件大小——感谢图片自身的编码格式——也就是说一旦图像解压并在浏览器中渲染，有四倍数量于平常的像素需要存储于内存。

如果停下来思考一下；视网膜图像最常（即使不是总是）需要用于给手机提供一个保真的UI。手机内存比其他设备少很多。视网膜效果给内存并不很多的设备提供了消耗内存的图像……反复全面的考虑一下你是真的需要视网膜图像，或者还是你可以做出一个明智的妥协？

视网膜效果是一种很棒的，清晰的体验，但如果需要5秒钟时间下载的话，将不会有清爽的体验。在大多数情形速度要胜过美感。

为了给每个人提供足够好的图片，你可以很聪明的给所有设备提供1.5倍的图像，但就我的观点——最好的选择是节俭的使用视网膜。

如果统计数据表明有足够富余，你就可以针对矢量图形优化，或者用字体图标代替位图。在CSS魔法网站我使用了矢量图形，这给我带来了如下好处：

• 分辨率无关
• 可简化
• 可压缩

在工作中 Matt Allen 给我们做了一种字体图标，可以同主要元素一起使用提供一种准视网膜的，可伸缩的图标。

你也可以看看怎样使用类似ReSRC.it的服务，以便基于设备与上下文加载图片。

渐进的 JPGs

性能的一个有趣的方面是感知性能；不是非要你的数字告诉你，而是一个站点感觉起来有多快。

当显示大的JPG图像时，可能你对它的一顿一顿的下载再熟悉不过；图像传输一百个像素，停顿，再五十个，停顿，突然一下子再两百个像素，整个图像加载完毕。

这是JPG图像的传统的工作基准，真的是一种非常卡的体验。通过切换到渐进的JPGs，你能使它们以一种更优异的流行方式加载；它们首次显示的是整个图像，但像素不是很清晰，然后慢慢的聚焦。这听起来比前面的方法要糟糕，但它感觉起来更快；用户立即就有东西可看，而且图像的质量逐渐的提高。典型的这些图像要比它们的基准副本大一点，但是却使整个体验感觉快了许多。

启用渐进的JPGs，你只要简单的在photoshop中为web与设备保存图像时，检查一下相关的复选项；完工!