【web性能优化-客户端】参考（一）

参考： 我们爱分享：web项目性能优化

JavaScript文件源代码可以采用混淆压缩的方式，CSS文件源代码进行普通压缩，JPG图片可以根据具体质量来压缩为50%到70%，PNG可以使用一些开源压缩软件来压缩，比如24色变成8色、去掉一些PNG格式信息等。

• **合并静态资源：**包括CSS、JavaScript和小图片，减少HTTP请求。有很大一部分用户访问会因为这一条而取得最大受益

• **开启服务器端的Gzip压缩：**这对文本资源非常有效，对图片资源则没那么大的压缩比率。

• **延长静态资源缓存时间：**这样，频繁访问网站的访客就能够更快地访问。不过，这里要通过修改文件名的方式，确保在资源更新的时候，用户会拉取到最新的内容。

• **把CSS放在页面头部，把JavaScript放在页面底部：**这样就不会阻塞页面渲染，让页面出现长时间的空白。
  【针对这条有人的疑问：其实我对这条抱怀疑态度。通常很多页面都是靠js(比如easyui框架之类)去排版布局，如果不先加载js，页面会乱七八糟一片。】

---

a. 下面的图片优化内容转自：Web性能优化：图片优化七大技巧，你都知道吗？
b. 另一篇图片优化内容供学习：Web性能优化：图片优化
c. 这里就是做个记录，供自己学习使用

每个前端网站都有可能引入很多的图片来达到酷炫或者展示的效果，有人会问：为什么非要用图片？因为有些技术上达不到的效果展示，只能用图片来代替，比如淘宝天猫京东这些商城的酷炫的创意广告图。

图像是web上提供的最基本的内容类型之一，一张图片胜过千言万语。但是如果你不小心的话，图片大小有时高达几十兆。而且图片越多请求次数越多，造成延迟的可能性也就越大。

为什么要对图片进行优化？
对于大多数前端工程师来说，图片就是UI设计师（或者自己）切好的图，你要做的只是把图片丢进项目中，然后用以链接的方式呈现在页面上，而且我们也经常把精力放在项目的打包优化构建上，如何分包，如何抽取第三方库…有时我们会忘了，图片才是一个网站最大头的那块加载资源(见下图)：

虽然图片加载可能不会阻碍页面渲染，但优化图片，绝对可以让网站的体验提升一个档次。

如何对图片进行优化？

1、图片格式的选择

选择图片格式是优化的第一步。我们经常听到的词语包括矢量图、标量图、SVG、有损压缩、无损压缩等等，我们首先说明各种图片格式的特点：

图片格式选择过程如下：

2、选择适当的图片宽度尺寸（即响应式图片）

不管是pc还是移动端，都会有很多不同尺寸的图片，如果你做的是响应式网站和移动端的话，那么你就更需要考虑图片尺寸的选择问题了。

移动端的屏幕分辨率和尺寸太多，所以就可能需要不同的尺寸加载不同尺寸的图片，这样就节省了网站的访问流量，以及页面渲染的效率。

3、图片压缩

选择了正确的图片格式，按照正确的大小生成了图片后，要进一步提升优化效果，可以通过有损或无损压缩来减少图片的大小。

我们的目的是降低图片的大小kb，有很多工具可以做。例如在智图中压缩图片，选择更小kb的图片格式，以达到最优的显示效果。

4、合并图片sprite（雪碧图）

将多个页面上用到的背景图片合并成一个大的图片在页面中引用，这样可以有效的较少请求个数，而且，而不影响开发体验，使用构建插件可以做到对开发者透明。这种方法适用于页面图片多且丰富的场景。

5、使用编码代替图片

将图片转换为编码字符串inline到页面或css中，这样就可以减少http的请求次数，并可以放到后台数据库中，只传输字符串，有较多的构建工具可以直接实现。

但是这种方法仅限于图片总数较少，而且图片大小小于2KB的情况，否则图片字符串会变得很长很长。

6、字体图库代替图标

随着技术的更新和浏览器的更新，字体图库去代替一些图标我认为还是极好的，使用字体图库你不仅可以改变大小，而且还可以改变颜色。

字体图标在多终端显示还是比较有优势的。再也不用担心放大图标显示模糊，也不用担心在苹果的视网膜屏幕模糊，因为它是矢量的。所以如果站点中很多图标是纯色的，推荐使用字体图标。

7、图片懒加载

在页面图片非常多的情况下，可以使用懒加载。只加载第一屏的图片，当用户通过滚动访问后面的内容时再加载相应图片。方法是先用一张极小的占位图代替图片，占位图只需下载一次，将原本图片的src存储在另一个属性中，判断当图片快进入可视区域就将路径赋值给src并下载图片进行展示。

图片优化既是一门艺术，也是一门科学，要找到图片的最优设置，需要按照许多维度进行认真分析：格式能力、编码数据内容、像素尺寸等。快去在实战中练习上面所讲的方法吧！如果你有更好的优化方案，也可以在下面留言和大家分享~
免责声明：内容和图片源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。

---

使用CDN

【Content Delivery Network：内容分发网络】 一些公开库使用第三方提供的静态资源地址（比如jQuery、normalize.css）。一方面增加并发下载量（即同时下载我们需要的静态资源），另一方面能够和其他网站共享缓存。

CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

CDN的关键技术主要有内容存储和分发技术。（将源站内容分发至最接近用户的节点，若这个节点因为意外出现了故障，网站依然可以由其他正常的节点进行响应）

CDN优点小结：

1、CDN可以将网站部署至全国各地多台服务器上，可以让用户就近访问，减少因距离产生的网络延迟。

2、可以不在受运营商相互访问较慢的限制，比如企业服务器是电信宽带，联通用户访问速度就会稍慢，那么CDN就可以避免这一情况，因为CDN几乎涵盖所有的线路，自动帮用户选择最快访问。 　
　
3、可靠性高，CDN在技术上实现了多点冗余，即使一个节点因为意外出现了故障，网站依然可以由其他正常的节点进行响应。 　
　
4、在线率高、优化效果好，所谓在线率是指企业网站能被正常访问的概率，因为程序或网络故障导致源网站打不开，用户依然可以访问CDN节点上的缓存数据，对SEO效果也起到了辅助作用。

5、降低企业服务器成本，主流的CDN厂商均可实现全国部署，对企业来讲不必考虑服务器的投入和宽带的成本。