前端性能优化有哪些方面

雅虎军规

• 内容
  • 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错误
• 样式
  • Put Stylesheets At The Top：置顶样式
  • Avoid CSS Expressions：避免CSS表达式
  • Choose Over @import：选择代替@import
  • Avoid Filters：避免滤镜
• 脚本
  • 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：开发高效的事件处理
• 图像
  • Optimize Images：优化图片
  • Optimize CSS Sprites：优化CSS精灵图
  • Don’t Scale Images In HTML：不在HTML中缩放图片
  • Make Favicon.ico Small And Cacheable：使用小体积可缓存的favicon
• 缓存
  • Reduce Cookie Size：减少Cookie大小
  • Use Cookie-Free Domains For Components：使用无Cookie域名的资源
• 移动端
  • Keep Components Under 25kb：保持资源小于25kb
  • Pack Components Into A Multipart Document：打包资源到多部分文档中
• 服务器
  • 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：避免图片空链接

2-5-8原则

在前端开发中，此规则作为一种开发指导思路，针对浏览器页面的性能优化。

• 用户在2秒内得到响应，会感觉页面的响应速度很快 Fast
• 用户在2~5秒间得到响应，会感觉页面的响应速度还行 Medium
• 用户在5~8秒间得到响应，会感觉页面的响应速度很慢，但还可以接受 Slow
• 用户在8秒后仍然无法得到响应，会感觉页面的响应速度垃圾死了(此时会有以下四种可能)
  • 难道是网速不好，发起第二次请求 => 刷新页面
  • 什么垃圾页面呀，怎么还不打开 => 离开页面，有可能转投竞争对手的网站
  • 垃圾程序猿，做的是什么页面啊 => 咒骂开发此页面的程序猿
  • 断网了 => 网线断了？Wi-Fi断了？信号不好？话费用完了？

3秒钟首屏指标

此规则适用于M端，顾名思义就是打开页面后3秒钟内完成渲染并展示内容。