前端性能优化大总结

减少HTTP请求

合并脚本与样式文件

使用雪碧图

图像使用data url

图片被转换成base64编码的字符串形式，内嵌于CSS或HTML中，而不必单独请求。

<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">

data url适用的场景：

• 访问外部资源受限
• 图片是在服务器端动态生成的，每个用户显示的都不同时
• 图片体积较小，占用一个HTTP回话不是很值得。

但data-url也有一些缺点：

• Base64编码的数据体积通常是原数据的体积4/3，也就是Data URL形式的图片会比二进制格式的图片体积大。
• Data URL形式的图片不会被浏览器缓存，这意味着每次访问这样页面时都被下载一次。

划分主域

一是可以使访问静态资源的请求避免每次请求都带上主站的cookie，可以做到cookie free。
二是浏览器可以并发地处理几个域名的请求，一般是6个，这样不同域名下的静态资源可以并行请求了。

例如，动态内容放在 csspod.com 上，静态资源放在 static.csspod.com 上。这样可以禁用静态资源域下的 Cookie，减少数据传输

减小请求带宽

开启gzip

在服务器端进行配置，将要传输给浏览器的文件进行gzip编码。对纯文本内容可压缩到原大小的40%。

压缩脚本与样式文件

减小cookie大小

Cookie 通过 HTTP 头在服务器和浏览器间来回传送，减少 Cookie 大小可以降低其对响应速度的影响。

• 去除不必要的 Cookie；
• 尽量压缩 Cookie 大小；
• 注意设置 Cookie 的 domain 级别，如无必要，不要影响到 sub-domain；
• 设置合适的过期时间。

图像优化

使用恰当的图片格式

响应式图片

根据所在设备的不同，加载不同尺寸的图片。

使用picture元素：

HTML <picture> 元素是一个容器，用来为其内部特定的 <img> 元素提供多样的 <source> 元素。
浏览器会根据当前页面的布局以及当前浏览的设备去从中选择最合适的资源。

<picture alt="description">
    <source src="/path/to/medium-image.png" media="(min-width:600px)">
    <source src="/path/to/lar