前端优化
1. 利用工具
1.1编辑器：webstorm
1.2浏览器开发工具
pc端
移动端
1.3其他工具
切图工具：cutterman
图片压缩：智图
生成雪碧图
调试工具
2.前端工程化
（1）初始，生成基础目录结构和样式库
（2）开发，实时预览/预编译
（3）构建，预编译、合并压缩js，css，图片、自动生成雪碧图，base64图片
（4）发布，将构建后静态文件发布上线
（5）打包，资源路径转换，源码打包
3.速度性能
雅虎
优化方向及优化手段
请求数量 ： JS、CSS文件选择性合并，小图片合并雪碧图或直接生成base64图片，拆分初始化负载--懒加载
请求带宽 ：开启GZip，精简JavaScript，移除重复脚本，图像优化
缓存利用 ：使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存
页面结构 ：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
代码校验 ：避免CSS表达式，避免重定向
grunt or gulp or webpack or npm scripts
老-->新
pc和移动端工具选择
特点：
webpack--模块化
简单命令可用npm scripts
复杂的用gulp 或 grunt
gulp命令比grunt简洁直观
参考文献：