前端面试系列（一）：网站优化的解决方案

该系列是博主研究生即将毕业寻觅工作之际，为更好充实自己的知识库，在网络上和项目中总结的大量经验，现分享出来，愿大家能一同进步。有些地方可能因为时间问题浅尝辄止，各位看客若有疑问或建议，皆可通过站内的联系方式或留言与我交流。

文件合并（目的是减少http请求）

Web性能优化最佳实践中最重要的一条是减少HTTP 请求，减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射 （Image Map）和使用Data URI来编码图片。

图像映射（Image Map）

在<img>标签内使用usemap属性制定一个<map>标签的id；然后在<map>标签内添加不同的<area>标签，每个<area>标签内有shape属性（可定义为rect、circle、poly）、coords属性（代表不同shape的定位）、href属性、alt属性等。即可实现在一张图上的不同区域能够映射不同的图像地址。

Data URL编码图片

通常在<img>标签中使用图片是采用src属性指定一个远程服务器上的资源。当页面加载时，浏览器会针对每个资源向服务器发送一个请求，一般浏览器并发请求数不能超过4个。因此大量使用会导致页面的加载延迟。
使用Data URL将图片以base64字符串的格式嵌入至src属性，则不会产生请求。（IE6/7不支持）
优势：当访问外部资源很麻烦或受限时、当图片是在服务器端用程序动态生成，每个访问用户显示的都不同时、当图片的体积太小，占用一个HTTP会话不是很值得时使用。
劣势：Base64编码的数据体积通常是原数据的体积4/3，也就是Data URL形式的图片会比二进制格式的图片体积大1/3；Data URL形式的图片不会被浏览器缓存，这意味着每次访问这样页面时都被下载一次。
如何避免劣势：在CSS中使用Data URL。通过CSS文件中的backround-image属性引用图片url地址：background-image: url("data:XXX ");他避免了图片单独产生一次HTTP请求，又让图片随CSS被浏览器缓存（所有浏览器都很乐意缓存CSS文件）。
如何使用：在线Data URL生成工具、使用HTML5的FileReader()（详见HTML5新特性中的文件接口）

使用CDN托管

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。最常用的将js库文件地址替换成百度CDN或者BootCDN的地址，其他的图片等就得花钱去买例如百度云CDN。

文件压缩

使用YUI Compressor压缩JS/CSS文件；用GZip压缩文件，GZip的压缩之后所有文件都应该能减少30%以上的体积。特别是对于大量使用js的博客有了gzip保驾护航之后速度能提高不少。

缓存的使用

详见文章：前端面试系列（二）：面试常问的几个HTML5特性

图片使用懒加载

首先将网页内的<img>标签内的src属性设为空，将图片的链接放入data-src中，并设置宽高（防止reflow），然后在js中进行判断，只有当页面滚动到某个<img>所在的位置时，再将data-src中的地址赋值给<img>的src。可以利用JQueryLazyload或者echo.js实现。