雅虎军规
- 内容
- 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秒钟内完成渲染并展示内容。