前端优化

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简洁直观

参考文献：

NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

有关 Grunt - 自动化构建工具的奇技淫巧