js变量和函数优化

1.尽量使用ID选择器

2.尽量避免使用eval

3.js函数尽量保持简洁

4.使用事件节流函数

5.使用事件委托

js动画优化

1.避免添加大量js动画

2.尽量使用css3动画

3.尽量使用canvas动画

4.合理使用requestAnimationFrame可以在正确的时间渲染，settimeout和setInterval无法保证callback回调函数的执行时机。

合理使用缓存

1.合理缓存DOM对象

2.缓存列表长度

3.使用可缓存的Ajax

sessionStotage存储键值对

页面之间传值

IndexedDb索引数据库

应用：

存储大量结构化数据

没网络情况下使用（石墨文档）

LocalStorage本地存储

应用：缓存静态文件内容css/js/api接口数据（百度M站）

缓存不常变更的API接口数据

存储地理位置信息

浏览在页面的具体位置

js模块化加载方案和选型

CommonJS

旨在web浏览器之外为javascript建立模块生态系统

Node.js模块化方案受commonjs

AMD异步模块定义

requirejs模块化加载器

CMD通用模块定义

ES6 import

减少浏览器的回流和重绘

css

1.避免过多样式嵌套

2.避免使用css表达式

3.使用绝对定位，可以让动画元素脱离文档流

4.避免使用table布局

5.尽量不使用float布局

6.图片最好设置好width和height

7.尽量简化浏览器不必要的任务，减少页面重新布局

8.使用viewport设置屏幕缩放级别

9.避免频繁设置样式，最好把最新的样式属性设置完成后一次性更改

JS

最小化回流和重排，避免频繁操作DOM，可以合并多次对DOM的修改，一次性批量处理

控制绘制过程和绘制区域，避免绘制过程开销比较大的属性，减少绘制的区域范围

控制DOM大小

合理的业务逻辑

延迟加载即将呈现的内容

静态文件打包方案

公共组件拆分

压缩js/css/图片

合并：js/css文件合并，css sprite

combo：js/css文件 combo http://cdn.com/??a.js,b.js 服务端合并文件内容

静态文件版本号更新策略

缓存更新，cdn或ng后台刷新文件路径，更新文件header头

文件name.v1-v100.js

大功能和小功能更新，年末统一配置所有版本302至最新版

时间戳文件name.js

文件hash.文件 name.js

以文件内容hash值做Key

每次上线，文件路径不一致

前端构建工具介绍和选型建议

Grunt 最早，质量参差不齐

Gulp 通过流来简化多个任务间的配置和输出，配置代码相对较少

webpack 预编译，中间文件在内存中处理，支持多种模块化，配置简单（比较流行）

FIS

JDF