前端性能优化

1、你如何对网页的文件和资源进行优化？

文件合并：

（目的是减少http请求）：web性能优化最佳实践中最重要的一件是减少HTTP请求，它也是YSLow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射现在已经随处可见了，但由于IE6和IE7不支持Data URL以及性能问题，这项技术尚未大量使用。目前大部分网页中的JavaScript和CSS文件数量和开发时一致，少量的网页会根据实际情况采取本地合并，这些合并中相当多的是有选择的手动完成，每次新的合并都需要重在本地完成并上传到服务器，比较的随意和繁琐，同样的文件的压缩也有类似的情况。而利用服务器端的合并和压缩，我们就可以按照开发的逻辑尽可能让文件的颗粒度变小。而利用服务器的合并和压缩，我们就可以按照开发的逻辑尽可能让文件的颗粒度变小，利用网页中URL的规则来自动实现文件的合并和压缩，这会相当的灵活和高效。参照http://www.iamued.com/qianduan/1462.html

文件最小化/文件压缩：

目的是直接减少文件下载的体积；常用的工具是YUI
compressor参考 http://www.cnblogs.com/Darren code/archive/2011/12/31/property.html

使用cdn托管：

其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层只能虚拟网络，cdn系统能够实时的根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。
缓存的使用：（并且多个域名来提供缓存）

2、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化图片的加载，给用户更好的体验。

图片懒加载，在页面上的未可视区可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为css图片，可以使用csssprite,lconfont,base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器根据业务需要先进行图片压缩，图片压缩后大小与展示一致。

3、图项目中图片处理相关的优化，项目中用到的优点方案，图片大小达到多少的时候选择处理？

• 首先了解在web开发中常见的图片有那些格式。
  JPG 通常使用的背景图片，照片图片，商品图片等等。这一类型的图片都属于大尺寸图片或较大尺寸图片一般使用的是这种格式。png这种格式的又分为两种 一种png-8,一种png-24。png-8格式不支持半透明，也是IE6兼容的图片存储方式。png-24图片质量要求较高的半透明或全透明背景，保存成png-24更合适（为了兼容IE可以试用js插件pngfix）一般是背景图标中试用多。gif这种格式显而易见的是在需要gif动画的时候使用了。
• 优化方案
  样式代替图片例如：半透明、圆角、阴影、高光、渐变等。这些效果主流的浏览器都能够完美支持，而对于那些低端浏览器，我们并不完全抛弃他们，“渐进增强”则是一个很好的解决方案。精灵图Css sprites,将同类型的图标或按钮等背景图合到一张大图中，减少页面请求。字体图标ICon Font，将图标做成字体文件。优点是图标支持多个尺寸，兼容所有的浏览器，减少页面请求等。美中不足的是只支持纯色的icon。SVG，对于绝大多数图案、图标等、矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！Base64将图片转化为base64编码格式，资源内嵌于css或html中，不必单独请求。base64格式data：[]；[:charset=][;base64],base64在css中使用.demoImg{background-image:url(“data:image/jpg;base64,/9j/4QMZRXhp…”);}Base64在html中使用图片响应式通常图片加都是可以通过lazy加载的形式来的，那么可以在加载的时候来判断屏幕的尺寸来达到加载大图还是小图的母的来达到优化。像资源的优化方法