浏览器如果花费很长的时间去绘制一帧的话，就会丢失另一帧。最糕的情况下，浏览器会直接卡死。
图片是网页重要的一部分，设计师在设计网页的时候也经常通过图片来使网页更加的炫丽。随着计算机相关技术的发展，用户对图片的质量要求也在不断的上升，这意味着我们要给用户提供更棒的图片、更大的内存占用、更多的绘制cpu消耗。如果是移动设备，这些往往还意味着电池寿命。在许多网站中，图片都占去了它们大部分的加载带宽，图片也是网页性能中很大的一部分负担。好像，有必要给图片做一下优化了。
和大部分资源一样，首先应该使用压缩工具减小资源文件的大小，往往这是性价比最高的方式。但是和文本资源不同，图像资源的压缩也意味着图像质量可能有所损失。那么，合理的压缩策略就很重要了，不过度压缩、不重复压缩，还需要根据不同的图像文件格式设置不同的压缩方式。
我们每一次打开网页，都需要获取比如js、css、图像、字体等各种资源。如果每一次都从网络上下载，显示并不是一个理智的选择。http 缓存提供了一种机制，浏览器首次加载
网页时，会将页面资源存储在 HTTP缓存中。当浏览器下次访问该页面时，它可以在缓存中查找以前获取的资源并从磁盘检索它们，这通常比从网络上下载资源要快。合理的利用http 缓存，可以使你的网站再次被访问时的渲染速度大大提高。
cache-control 是http1.1 协议中定义在header头里用来告诉浏览器和服务器对缓存机制的支持情况，通过给他设置不同的值来定义缓存策略。
<!–markdown–>## 前言
之前对雪碧图的自适应大小并没有太多的了解，一直停留在scale大法的地步。今天趁着另一个同学来问我，去好好了解了一下。
主要参考了 http://www.cnblogs.com/aaronjs/archive/2015/08/20/4744014.html。这位同学写得很好，简单明了清晰。
当我们在使用 rem 做移动端布局的时候,在享受rem的方便的时候，往往也很头痛雪碧图的自适应问题。毕竟雪碧图无法像 rem 一样跟着屏幕一起变大变小。于是乎就有了像 scale、或者使用多套雪碧图来适配多种屏幕等等。这里讲另一种方法。通过
background-position 和 background-size 的百分比属性。
<p data-height="265" data-theme-id="0" data-slug-hash="PzbVRp" data-default-tab="css,result" data-user="hijimo" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/hijimo/pen/PzbVRp/">PzbVRp</a> by jimo (<a href="http://codepen.io/hijimo">@hijimo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
在线demo:传送门
字蛛是腾讯前端小组推出的一个font-face工具，主要用于解决网站设计时的字体问题。简述与用例见传送门
它提供了一些便利允许你在某些情况下，让你的设计师随心所欲的使用字体而没后顾之忧。并且，这些字体是可以被使用到网页中去的。
<p><!–more–></p>
设计师给我们的设计图上的字体往往美丽动人，但并非所有的客户机都拥有这漂亮的字体。font-face 允许我们使用自定义的字体，在加载网页的时候向客户发送字体文件。但和英文字体不同，中文字体往往都是10M以上，这在天朝的的网络大概需要40秒的加载时间。
字蛛作为一个工具，提供了一种便利：通过爬取网站内已使用的文本，将字体文件中不需要的字体通通删除后重新打包成eof,woff,ttf，svg等流行的web字体。新打包的字体文件由于只包含了很少的字体，所以可以得到令人满意的大小。
官网上有很详细的使用说明。其实可以说是简单到了极致，只需要一句命令行语句就搞定了
font-spider /Users/jimo/Documents/website/demo.hijimo.com/fontspider/*.html
嗯，我写了一个小demo.使用了目前很火的思源字体。 传送门
字蛛使用了三个插件：
好像很久很久没有写博客了…
今天七夕,老板不让加班…
最近在工作中使用到了rem，随之引发了一个奇怪的bug…
w3c对rem只有简短的一句概述：root em, a unit equal to the em size for the document root (usually html)。 使用根元素html的字体大小。它的出现，可以让我们更加快乐简单的去完成自适应布局顺带连字体大小都一起自适应了。
<p><!–more–></p>
在ie11(还有微软新的旗鱼浏览器)下，部分使用了rem单位的元素仅能在预设的fontsize下工作，之后不管如何再更改html的大小，都不再起作用。最后花了半天的时间定位到原因为，失效的父容器中设置了font-size:0;
<p data-height="268" data-theme-id="0" data-slug-hash="ZGdKXP" data-default-tab="result" data-user="hijimo" class='codepen'>See the Pen <a href='http://codepen.io/hijimo/pen/ZGdKXP/'>ZGdKXP</a> by jimo (<a href='http://codepen.io/hijimo'>@hijimo</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
–bug呈现原因与解决方案
最终解决方案，在父容器中取消了font-size:0的css样式。关于bug出现的原因，鉴于其他浏览器都能正常工作，结合国内外友人碰到的ie11下的fontsize 与 em rem 的bug来看。暂定于这是ie11的bug!（此结论仅由目前我所拥有的知识与信息所得出，随时拥有变更的可能性，且不具有任何借鉴意义！）
<!–markdown–>原文地址：iyunlu
随着 Retina 屏幕的逐渐普及，网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰，曾经一度困扰着网页开发者，好在 CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢？
<p><!–more–></p>
响应式图片是指：用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。
对于很多 IOS 开发者来说可能已经不太陌生了，为了适配Retina 屏幕，传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片，然后通过 Media Queries 使背景图片尺寸减小一倍「background-size:50% 50%;」，例如：
.mod .hd h3 { background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png );/* 普通屏幕 */
/* ------------ Retina ------------ */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */
only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */
only screen and (min-resolution: 240dpi), /* 标准 */
only screen and (min-resolution: 2dppx) /* 标准 */
{
.mod .hd h3{
background-image:url(http://img02.taobaocdn.com/tps/i2/T1t9wzXlxXXXczY8cm-212-310.png);
background-size: 106px 155px;
}
}
两张图片的对比效果：
如果类似上图一样是纯文字内容的图片，不要直接从大图片缩放为小图片，这样文字效果会有些失真，这是 Photoshop 渲染的问题。应该调整字号，再重新排版。可以直接看看一淘首页的效果
蓝框内是直接缩放图片大小的效果，红框内是把字号从32号改成16号的效果。
CSS3 Media Queries 中用来定义设备分辨率的是 「resolution」 媒体特性，同时派生出两个媒体特性，分别是 「min-resolution」和 「max-resolution」。该规范中规定：若查询 Non-Square Pixels (专业术语，指高度与宽度不等的像素，可以理解为「非正方形像素」。计算机屏幕上及高清晰度视频信号中的像素是正方形的（像素宽高比为 1:1）。标准清晰度数码视频信号中的像素都不是正方形的。例如：NTSC制式的像素高度大于宽度，而PAL制式的像素宽度则大于高度。)设备，在「&&min-resolution&&」查询中指定的值必须与最稀疏尺寸进行比较，在「max-resolution」查询中必须与最密集尺寸进行比较。对于「resolution」（没有「min-」或「max-」前缀）从不查询 Non-Square Pixels 设备。另外在 CSS image Level 3 image-resolution 属性中定义了一些单位，比如「dppx」，各浏览器支持情况如下：
需要注意几点：
显而易见，通过 Media Queries 来实现「响应式图片」还是很麻烦，CSS 代码的可维护性不高，有一些 hack 的味道。我们更期望一种原生的语法来选择不同的图片，值得庆幸的是 CSS image Level 4 中就实现了这种原生语法的 image-set。 image-set 语法：
<image-set> = image-set( [ <image-set-decl>, ]* [ <image-set-decl> | <color>] ) <image-set-decl> = [ <image> | <string> ] <resolution>
那么上面的例子我们可以改为：
background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */
background-image: -webkit-image-set(
url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png) 1x,
url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png) 2x);/* Retina */
这里的单位「x」等同于「dppx」，将来是否统一还有待进一步讨论。注意 Webkit 目前只实现了 url() 形式的取值，color、-gradient() 等暂不支持，而且「x」取负值似乎也是合法的。
以下是一些常见移动设备的「min-device-pixel-ratio」值：
CSS image-set 解决了背景图片的响应式问题，但是 HTML中的 img 元素怎么办呢？正当我一筹莫展的时候，2011年11月 @brucel 提出了HTML5 的一个草案：
<picture alt="">
<source src=hires.png media="min-width:800px">
<source src=midres.png media="min-width:480px">
<source src=lores.png>
<!-- 不支持的浏览器降级处理 -->
<img src=midres.png alt="">
</picture>
于此同时，其他的一些想法如雨后春笋般涌现出来，于是 W3C 社区讨论组 Responsive Images Community Group 应运而生。最新的规范在这里：http://picture.responsiveimages.org/ 。截止本文发布时间，最近一次更新是 2013年1月7日，规范示例：
<picture width="500" height="500">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg" alt="">
<p>Accessible text</p>
</picture>
可以看到这里的「srcset」属性类似 image-set，通常情况下，srcset 里面的资源是具有 fallback 特性的，也就是说第一个图片资源无法加载的时候可以跳过加载后面的备用资源。 但是 Apple 的 eoconnor 提出的方案是这样的：
<img src="foo-lores.jpg" srcset="foo-hires.jpg 2x,
foo-superduperhires.jpg 6.5x"
alt="decent alt text for foo.">
诚然，任何一个新标准的提出，都会存在各种不同的声音，这是好事，作为网页的最终开发者其实并不太关心实现语法。有任何问题大家也可以直接到 HTML5 中文兴趣小组参与讨论。
本来想把新年的第一篇文章写的欢乐一些，不过貌似没啥槽点。HTML5 响应式图片的草案还刚刚开始，不过前景还是很美好的。目前我们能做的就是在CSS 中使用 image-set 属性值，因为目前大部分 Retina 屏幕的设备的浏览器都是基于 Webkit 内核的，如果有特殊的需求可以使用 Media Queries。