前端性能优化

[bluejfox]

1. 加载优化

1. 使用nginx对js，css，img资源进行缓存
2. 将依赖库通过url形式单独加载
3. 启动代码压缩(compress, gzip)
   • js和css压缩
   • 开启gzip
4. 无阻塞
   • css通过link方式在head引入
   • 脚本在body尾部引入(原因为脚本是同步执行)
5. 按需加载
   • 使用vue-router的路由懒加载
6. 预加载
   • 使用loading提示
7. 压缩图像
   • 使用TinyJpg和TinyPng压缩图像
   • 使用CSS3、SVG、IconFont代替图像
   • 使用img的srcset按需加载图像
   • 选择合适的图像：webp优于jpg，png8优于gif
   • 选择合适的大小：首次加载不大于1014kb、不宽于640px
   • PS切图时D端图像保存质量为80，M端图像保存质量为60

2.样式优化

3.脚本优化

4.常规

a.内容

• Make Fewer HTTP Requests：减少HTTP请求数
• Reduce DNS Lookups：减少DNS查询
• Avoid Redirects：避免重定向
• Make Ajax Cacheable：缓存AJAX请求
• Postload Components：延迟加载资源
• Preload Components：预加载资源
• Reduce The Number Of DOM Elements：减少DOM元素数量
• Split Components Across Domains：跨域拆分资源
• Minimize The Number Of Iframes：减少iframe数量
• No 404s：消除404错误

b.样式

• Put Stylesheets At The Top：置顶样式
• Avoid CSS Expressions：避免CSS表达式
• Choose \<link> Over @import：选择代替@import
• Avoid Filters：避免滤镜

c.脚本

• Put Scripts At The Bottom：置底脚本
• Make JavaScript And CSS External：使用外部JS和CSS
• Minify JavaScript And CSS：压缩JS和CSS
• Remove Duplicate Scripts：删除重复脚本
• Minimize DOM Access：减少DOM操作
• Develop Smart Event Handlers：开发高效的事件处理

d.图像

• Optimize Images：优化图片
• Optimize CSS Sprites：优化CSS精灵图
• Don't Scale Images In HTML：不在HTML中缩放图片
• Make Favicon.ico Small And Cacheable：使用小体积可缓存的favicon

e.缓存

• Reduce Cookie Size：减少Cookie大小
• Use Cookie-Free Domains For Components：使用无Cookie域名的资源

f.移动端

• Keep Components Under 25kb：保持资源小于25kb
• Pack Components Into A Multipart Document：打包资源到多部分文档中

g.服务器

• Use A Content Delivery Network：使用CDN
• Add An Expires Or A Cache-Control Header：响应头添加Expires或Cache-Control
• Gzip Components：Gzip资源
• Configure ETags：配置ETags
• Flush The Buffer Early：尽早输出缓冲
• Use Get For AJAX Requests：AJAX请求时使用get
• Avoid Empty Image Src：避免图片空链接