关于优化
1.对网站文件和资源的优化？
解决方案：文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用（多个域名来提供缓存）
减少页面加载时间的方法：
1.优化图片
2.图像格式的选择（gif:提供的颜色较少，可用在一些对颜色要求不高的地方）；
3.优化css（压缩合并css）
4.网址后加斜杠（如：www.campus.com/目录，会判断这个目录是什么文件或者是什么目录）
5.表明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断的调整页面，这不但影响速度也影响浏览体验；当浏览器知道了宽高参数之后即使图片暂时无法显示页面也会腾出图片的空位，然后继续加载后面的内容，从而加快了加载，浏览体验也好了）
6.减少http请求（合并文件，合并图片）。
2.性能优化的方法有哪些？
1）：减少http请求次数：CSS Sprites，JS、CSS源码压缩，图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
2）：前端模板JS+数据，减少由于html标签导致的带宽浪费，前端用变量保存ajax请求结果，每次操作本地变量，不用请求，减少请求次数；
3）：用innerHTML代替DOM操作，减少DOM操作次数，优化JavaScript性能；
4）：当需要设置的样式很多时设置className而不是直接操作style；
5）:少使用全局变量，缓存DOM节点查找的结果，减少DOM操作；
6）：避免使用CSS表达式，（又称动态属性）；
7）：图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳；
附：代码压缩的用法举例：YUI Compressor 压缩js和css文件的工具
使用方法：压缩js： java -jar ycompressor-2.4.2.jar --type js --charset uf-8 -v src.js > packed.js
压缩css: java - jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css >packed.css
3.网站重构的理解？
在不改变外部行为的前提下，简化结构，添加可读性，而在网站前端保持一致的行为，也就是说在不改变ui的情况下对网站进行优化，在扩展的同时保持一致的UI。
对于传统的网站来说重构通常是：表格table布局改为DIV+CSS；使前端兼容于现代浏览器，对于移动平台的优化，针对于SEO进行优化；
深层次的网站重构应该考虑别的方面：
减少代码间的耦合；让代码保持弹性；严格按规范编写代码；设计可扩展的API；代替旧有的框架、语言；增强用户体验；通
常来说对于速度的优化也包含在重构中：
压缩JS、CSS、img等前端资源（通常是由服务器来解决）；
程序的性能优化（如数据读写）
采用CDN来加速资源加载；
对于JS DOM的优化；
http服务器的文件缓存；
4.谈谈性能优化
代码层面：避免使用css表达式，避免使用高级选择器，通配选择器；
缓存利用：缓存ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务器端配置Etag，减少DNS查找等；
请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载；
请求带宽：压缩文件，开启GZIP。
5.移动H5前端性能优化指南
加载优化：
减少http请求：手机浏览器同时响应请求为4个请求（Android支持4个，iOS5后可支持6个）所以尽量减少页面的请求数，首次加载同时请求数量不能超过4个
1.合并css、JavaScript；2.合并小图片、使用雪碧图；
缓存：可以使用缓存减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（更新可使用时间戳）：
3.缓存一切可缓存的资源；4.使用长cache；5.使用外联式引用css,JavaScript;
压缩HTML、css、JavaScript：减少资源大小可以加快网页显示速度，所以要对HTML、css、JavaScript等进行代码压缩，并在服务器端设置GZip：
6.压缩html，css，JavaScript（如多余的空格、换行、缩进）；7.启用GZip；
无阻塞：写在html头部的JavaScript（无异步）和写在HTML标签中的Style会阻塞页面的渲染；因此css放在页面头部并使用link方式引入，避免在HTML标签中写Style，JavaScript放在页面尾部或使用异步方式加载；
8.使用首屏加载：首屏的快速显示可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化；
9.使用按需加载：将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要自愿的显示速度和降低总体流量；（但是按需加载会导致大量重绘，影响渲染性能）：
lazyLoad
10.使用滚屏加载；
11.通过Media Query加载；
预加载：12.增加Loading进度条；大型重资源页面可使用Loading的方法，资源加载完成后再显示页面，但Loading时间过长会造成用户流失；对用户行为分析，可以在当前页加载下一页资源，提升速度：
可感知Loading（如进入空间游戏的Loading）
不可感知Loading（如提前加载下一页）
13.减少Cookie；Cookie会影响加载速度，所以静态资源域名不适用Cookie
14.避免重定向；重定向会影响加载速度，所以在服务器正确设置避免重定向；
15.异步加载第三方资源；第三方资源不可控会影响页面的加载和显示，因此要异步加载第三方资源；
图片优化：
压缩图片：图片是最占流量的资源，因此尽量避免使用，使用时选择最合适的格式（实现需求的前提下以大小判断）合适的大小，然后使用智图压缩，同时在代码中使用Srcset来按需显示：
1.使用智图；
2.使用CSS3、SVG、IconFont代替图片；
3.使用Srcset；
4.webP优于JPG；
5.PNG8 优于GIF；
6.首次加载不大于1014KB（基于网速）；7.图片固定大小（最好不宽于640）；
脚本优化：
1.减少重绘和回流；
避免不必要的DOM操作；
尽量改变Class而不是Style，使用classList代替className
避免使用document.write
减少drawImage
2.缓存DOM选择与计算；每次DOM选择都要计算，使用缓存，减少计算
3.缓存列表length；每次length都要计算，第一次计算之后用一个变量保存起来减少计算量；
4.尽量使用事件代理，避免批量绑定；
5.尽量使用ID选择器；ID选择器最快；
6.TOUCH事件优化：使用touchStart、touchEnd代替click；touch响应过快易发生误操作；
脚本执行优化：
脚本处理不当会阻塞页面加载、渲染，因此在使用时需当注意：
1.css写在头部，JavaScript写在尾部或异步；
2.避免图片与iframe等的空src；空src会重新加载当前页面，影响速度和效率；
3.尽量避免重设图片大小；重设图片大小是指在页面、css、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能；
4.图片尽量避免使用DataURL；DataURL图片没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长；
CSS优化：
1.尽量避免写在HTML标签中写style属性；
2.避免css表达式；css表达式的执行需跳出CSS树的渲染，应尽量避免css表达式；
3.移除空的css规则；空的css规则会增加css文件的大小，且影响css树的执行；
4.正确使用Display属性：
display：inline后不应该再使用width、height、margin、padding、float；
display：inline-block后不应该再用float；
display：block后不应该在使用vertical-align；
display：table-*后不应该在使用margin或float；
5.不滥用FLoat；float在渲染时计算量比较大，应尽量少使用；
6.不滥用Web字体；web字体需要下载，解析，重绘当前页面，尽量少使用；
7.不声明过多的Font-size；过多的font-size会影响css树的效率；
8.值为0时不要带单位；为了浏览器兼容和性能 值为0 时尽量不要带单位；
9.标准化各种浏览器前缀：
无前缀应放在最后；
css动画只用（-webkit- 无前缀）两种即可；
其他前缀为：-webkit- -moz- -ms- 无前缀四种（-o-Opera浏览器改用blink内核，所以淘汰）
10.避免让选择符看起来像正则表达式；高级选择器执行耗时长且不易读懂，避免使用；
渲染优化：
1.html使用Viewport；viewport可以加速页面的渲染：<meta name="viewport" content="width=device-width,innitial-scale=1">
2.减少DOM节点；
3.动画优化：尽量使用css3动画；
4.合理使用requestAnimationFrame动画代替setTimeOut；
5.适当使用canvas动画；
高频事件优化：6.Touchmove、Scroll事件会导致多次渲染；
使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染；
增加响应变化的时间间隔，减少重绘次数；
GPU加速：
7.使用CSS3 transitions、Opacity、Canvas、WebGLobal、Video 来触发GPU渲染；过度使用会引发耗电增加；
关于前端优化的博客：http://www.cnblogs.com/Darren_code/archive/2011/12/31/property.html
附：
==============================补充========================================
1.CDN
（CDN内容分发网络，CDN系统能够实时的根据网络流量和各节点的链接，负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上，目的是使用户可就近取得所需内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度）。
关键技术：内容存储和分发技术；
包括：分布式存储，负载均衡，网络请求的重定向，和内容管理4个要件；内容管理和全局的网络流量管理是CDN的核心所在；
var $div = $("#myDiv"); var loop = setInterval(function(){ if($div.position().left > 500){ clearInterval(loop); loop = null; }else{ $div.css("left", $div.posisition().left + 5 + "px"); } }, 20);
再看requestAnimationFrame的写法：
var $div = $("#myDiv"); var loop = function(){ if($div.position().left < 500){ $div.css("left", $div.position().left + 5 + "px"); requestAnimationFrame(loop); } };
requestAnimationFrame是一个监听帧的API，即每绘制完一帧后就执行一下requestAnimationFrame函数
setTimeInterval/setTimeout是指定的固定时间，对于帧的控制不能精确，不能随动态变化会出现丢帧现象；而requestAnimationFrame会随着帧的变化绘制，动态绘制。
3.lazyLoad
