web前端性能优化总结
根据web访问流程的各个阶段进行总结：
1. 浏览器缓存 2.查询DNS 3.建立连接 4.发送请求 5.等待响应 6.接收数据 7.处理元素 8.渲染元素
1. 浏览器缓存
查询cache: 读取cache或发送304请求。
优化规则-- 添加Expire或Cache-Control
应用于不经常变化的组件，包括脚本、样式表、Flash组件、图片
Expires和Cache-Control
2. 查询DNS
1. DNS缓存 浏览器DNS缓存 计算机DNS缓存 服务器DNS缓存（TTL）
当缓存时间长时：减少DNS的重复查找，节省时间
当缓存时间短时：及时检测网站服务器的变化，保证正确性
2. 减少DNS查找
当客户端的DNS缓存为空时，DNS查找的数量与Web页面中唯一主机名的数量相等。减少唯一主机名的数量就可以减少DNS查找的数量。较少的域名来减少DNS查找（2-4个主机）
3.建立连接
3.1 使用内容分发网络CDN
在离用户最近的地方放置一台性能好链接顺畅的副本服务器，让用户能够以最近的距离，最快的速度获取内容。
3.2 用域名划分页面内容
按页面内容划分域名，在合适的资源服务器上存放文件
4.发送请求
4.1 减少HTTP请求
合并文件：图片（CSS Spirite），css文件合并，js文件合并
4.2 避免404错误
4.3 不要使用frameset,少使用过iframe
搜索引擎不友好、即时内容为空，加载也需要时间、会阻止页面加载
禁止使用iframe引入外部资源，不包括allyes广告，不包括about:blank的空页面。
5.等待响应
5.1 避免重定向(多一次请求就多费时间）
重定向：原始请求被重新转向到了其它请求
6.接收数据（针对上线版本）
6.1 压缩组件
HTML文档，脚本和样式表，XML和JSON的文本响应，压缩
6.2 最小化css和js文件
去除不必要的空白符，格式符，注释符
简写方法名，参数名，压缩js脚本
6.3 尽量 使用外部的Js和Css文件
尽可能使用外部Js和Css，因为我们目前大部分Js和Css都做了Gzip和缓存技术，可以充分利用。
使用外部文件优点： 提高复用性和可维护性，减小页面体积，
写在页面内有点：较少页面请求，提升页面渲染速度。
写在页面内情况：只应用于一个页面，页面不经常被访问到，脚本和样式很少。
6.4 尽量缩减页面大小
页面必须小于150k(不含图片）
静态文件是否gzip,图片是否压缩优化过。
7. 处理元素
不要对image和pdf等二进制文件进行gzip压缩
8.渲染元素
8.1 CSS样式表文件放在页面顶部
8.2 js脚本文件放在页面底部
8.3 优化图片
尽量使用png/gif格式的图片，png的图片优先，但是必须注意如要兼容IE6，则png使用一定要注意透明问题。
图片在上次前一定要先用工具压缩优化（png、jpg）
8.4 移出重复脚本
8.5 避免回流：
1.复杂的表现变化，如动画，让它脱离文档流，用绝对定位或 fixed 定位来完成。脱离文档流后不会造成任何回流。
2.避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU。
2. 以下这些属性，只要是改动了他们的值，就会造成回流，建议将他们合并到一起操作，可以减少回流的次数。这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight；scrollTop、scrollLeft、scrollWidth、scrollHeight；clientTop、clientLeft、clientWidth、clientHeight；getComputedStyle() 、currentStyle（）。
3. Javascript控制样式的最优解，不要直接修改具体CSS样式，通过编码class来改变样式，
8.4 避免CSS Expressions(表达式） 影响浏览器渲染时间
其它注意:
动态加载和渲染非关键区域
在页面中某些区域并不是用户重点关注的区域，例如页面的广告，一些统计信息等，此类内容可以等待页面关键区域加载后通过javascript代码动态加载和显示。
谨慎使用iframe
iframe有两个缺点：1，iframe会阻塞主页面的Onload事件；2，iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。
如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
