前端基础优化

前端性能优化：前端代码从服务端下载到浏览器再运行

1. 代码部署

• 代码压缩合并
• 图片、css、js等静态资源使用和主站不同的域名地址空间，从而使得在传输资源时不会带上不必要的cookie信息
• 使用内容分发网络CDN
• 为文件设置文件头Last-Modified、Expired、Etag(时间戳)
• 使用GZIP压缩传送
• 权衡DNS查找次数（使用不同域名会增加次数）
• 避免不必要的重定向（域名末加/会快一点）

2. 编码

1). html：

• 使用结构清晰、简单、语义化的标签
• 避免空的src和href
• 不要再HTML中缩放图片

2). css：精简css选择器

• 把css放到顶部
• 避免用@import引入样式
• 使用base64图片数据取代图片文件，减少请求数
  在线转base64格式网站：http://tool.css-js.com/base64.html
• 使用css动画代替js动画
• 使用字体图标
• 使用css sprite雪碧图
• 使用svg图形
• 避免使用CSS表达式
• 避免使用css滤镜

3). JavaScript：

• 减少引用库的个数
• 使用requiresjs和seajs异步加载js
• Js放到页面底部引入
• 避免全局查找
• 使用原生方法
• 用switch替代复杂的if else语句
• 减少语句数，如合并声明
• 使用字面量表达式初始化数组或对象
• 使用inner HTML取代复杂的元素注入
• 使用事件委托
• 访问dom选择集（for var i=0;i<$li.length\grave{a}$len…）
• 高频触发事件设置使用函数节流
• 使用WebStorage缓存数据