前端优化

1. 利用工具

1.1编辑器:webstorm
1.2浏览器开发工具

pc端

前端优化_第1张图片

前端优化_第2张图片

移动端

前端优化_第3张图片

前端优化_第4张图片

1.3其他工具
切图工具:cutterman
图片压缩:智图
生成雪碧图
调试工具

2.前端工程化

(1)初始,生成基础目录结构和样式库
(2)开发,实时预览/预编译
(3)构建,预编译、合并压缩js,css,图片、自动生成雪碧图,base64图片
(4)发布,将构建后静态文件发布上线
(5)打包,资源路径转换,源码打包

3.速度性能

雅虎

前端优化_第5张图片

优化方向及优化手段

请求数量 : 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简洁直观

前端优化_第6张图片

参考文献:

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

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

你可能感兴趣的:(前端工程化前端前端优化)