@H_4030@一、网络优化
@H403_0@YSlow有23条规则，中文可以参考这里。这几十条规则最主要是在做消除或减少不必要的网络延迟，将需要传输的数据压缩至最少。
@H_403_0@1）合并压缩CSS、JavaScript、图片，静态资源CDN缓存
@H_4030@通过构建工具Gulp，可以在开发的时候就将合并压缩的事情一起做掉。
@H4030@之所以要做合并压缩是因为：HTTP 1.x不允许一个连接上的多个响应数据交错到达（多路复用），因而一个响应必须完全返回后，下一个响应才会开始传输。
@H4030@也就是说即使客户端同时发送了两个请求，而且CSS资源先准备就绪，服务器也会先发送HTML响应，然后再交付CSS。
@H403_0@
@H_403_0@使用CDN是为了让用户访问的时候能用最近的资源，减少来回传输时间。
@H_4030@HTTP2.0改进了HTTP1.x很多方面。
@H403_0@<span style="color: #800000">2）CSS放顶部，JavaScript放底部
@H_4030@CSS可以并行下载，而JavaScript加载之后会造成阻塞。
@H4030@但凡事还是会有例外，如果把行内脚本放在样式表之后，会明显地延迟资源的下载（结果是样式表下载完成并且行内脚本执行完毕时，后续资源才能开始下载）。
@H403_0@这是因为行内脚本可能含有依赖于样式表中样式的代码，比如document.getElementsByClassName()。
<div class="jb51code">
<pre class="brush:js;">
@H_403_0@重定向
@H_403_0@在做一个“女神评选活动”的时候，需要在微信中访问能够获取用户的openid，微信获取用户基本信息是需要经过几个步骤的：
@H_403_0@先获取code，再通过code获取openid，最后再跳转访问静态页面。
@H_403_0@由于公司将业务分成了多个小组，所以短短的三步其实需要三个小组配合，需要重定向多个域名。
@H_403_0@下图是未优化前的瀑布图，但不是最坏情况，有时候访问到静态页面需要经过10多秒，完全不能接受，下图中会跳转4个域名：
@H_403_0@
二、JavaScript优化
@H_403_0@图片预加载 @H_403_0@在做一个“秋名山活动”的时候，使用了图片预加载。这个活动中有120多张图片。 @H_403_0@流程很简单，就是答题，最后给评论结果，再分享出去。 @H_403_0@
提示框
*/
var Alert = function(content,options) {
var d = DialogFactory('alert',options);
//其他逻辑省略
return d;
};
/**
* 确认框
*/
var Confirm = function(content,options) {
var d = DialogFactory('confirm',options);
//其他逻辑省略
return d;
};
@H_403_0@代码异步加载
@H_403_0@第三方代码，例如百度统计、微信SDK等，这些完全可以在将业务资源加载完后再添加。
/** * 百度统计设置 */ util.baidu = function(key) { global._hmt = global._hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?" + key; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm,s); })(); };@H_403_0@ @H_403_0@有了缓存后，就能减少与服务器的通信，在本地操作。 @H_403_0@公司有个查违章的业务，在本地添加好车辆后，再次进入页面的时候就需要能直接选择事先添加好的车辆。 @H_403_0@最理想的方式就是添加好后，就在本地缓存起来，下次进入直接调取缓存。
@H_403_0@
@H_4030@我会优先使用localStorage，下面的表格就是对比：
@H4030@
cookie
@H4030@localStorage
@H4030@数据生命周期
@H4030@可设置失效时间除非被清除，否则永久保存
@H4030@数据大
@H4030@大约4KB 大约5M
@H4030@与服务器通信
@H403_0@每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
不参与和服务器的通信
@H_4030@本地存储，之前的历史大概如下图所示：
@H403_0@
@H_403_0@localStorage在浏览器兼容方面，IE8居然也支持了。
@H_403_0@
@H_4030@<span style="color: #800000">5）事件委托
@H403_0@使用事件委托技术能让你避免对特定的每个节点添加事件监听器。
@H_403_0@事件监听器是被添加到它们的父元素上，通过事件冒泡，触发执行。
@H_403_0@在开发的时候，经常会出现动态添加元素的情况。
@H_403_0@如果每次都重新绑定一次事件，那会有很多多余操作，而绑定在此元素的父级，就只需绑定一次即可。
<div class="jb51code">
<pre class="brush:js;">
document.getElementById('ul').onclick = function(e) {
var e = e || window.event,tar = e.target || e.srcElement;
if (tar.nodeName.toLowerCase() == 'li') {
tar.style.background = 'black';
}
}
