前端代码（多方面）性能优化

前端代码（多方面）性能优化

结构层

1、布局采用 DIV+CSS 替换table布局减少代码
2、删除多余空格和换行，有效压缩代码占用字节
3、涉及到table展示数据 采用table布局
4、减少对DOM的操作

表现层

1、图片尽量采用 CSS Sprites,它允许你将一个页面涉及到的所有零星图片都包含到一张大图中。
2、尽量少使用 子选择器 （浏览器对css解析从右往左）

行为层

1、js封装准则：高内聚、低耦合
2、减少闭包使用，会使内存泄漏
3、绑定事件，要使用事件委托，减少循环DOM绑定事件
4、函数节流、函数防抖

网络请求

1、尽量采用 JSON格式来进行数据交换

原理：JSON 是一种轻量级的数据交换格式，它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率（JSON和XML）。

2、利用http 状态码返回304 Not Modified 来做缓存减少http请求（不推荐）
3、使用CDN加速（Content Delivery Network内容分发网络）

页面整体

1、CSS引用放置到head里面 采用link标签与DOM同时加载；
JS引用放置body后
2、能用css实现的效果就不用js实现，能用js实现的就不用第三方插件
3、避免使用frame 耗性能
4、图片预加载、懒加载