Open shoutingwei opened 6 years ago
首次有效渲染(FMP,是指主要内容出现在页面上所需的时间), 重要渲染时间(页面最重要部分渲染完成所需的时间), 可交互时间(TTI,是指页面布局已经稳定,关键的页面字体已经可见,主进程可以足够的处理用户的输入 —— 基本的时间标记是,用户可以在 UI 上进行点击和交互), 输入响应,接口响应用户操作所需的时间, Speed Index,测量填充页面内容的速度。 分数越低越好, 自定义度量,由你的业务需求和用户体验来决定。
不同域名下加载资源。一个域名下,可同时发出资源请求数量限制
减少Http请求(合并资源文件,Css Sprit,打包)
浏览器缓存
先加载小图片,再加载大图片
启用压缩Gzip,Brotil(网页,文本,脚本,样式适合,图片不适合)
精简Javascript
减少DNS查找(使用相同域,注意与第一条平衡)
使用外部Javascript,CSS
避免CSS表达式(background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); )
避免重定向
css,Javascript加载顺序(async加载完执行,defer所有加载完全部资源执行)
减少cookies传输
CDN(可控性降低)
反向代理
过渡动画
待研究 ETag Ajax缓存 添加Expire头
首次有效渲染(FMP,是指主要内容出现在页面上所需的时间), 重要渲染时间(页面最重要部分渲染完成所需的时间), 可交互时间(TTI,是指页面布局已经稳定,关键的页面字体已经可见,主进程可以足够的处理用户的输入 —— 基本的时间标记是,用户可以在 UI 上进行点击和交互), 输入响应,接口响应用户操作所需的时间, Speed Index,测量填充页面内容的速度。 分数越低越好, 自定义度量,由你的业务需求和用户体验来决定。
不同域名下加载资源。一个域名下,可同时发出资源请求数量限制
减少Http请求(合并资源文件,Css Sprit,打包)
浏览器缓存
先加载小图片,再加载大图片
启用压缩Gzip,Brotil(网页,文本,脚本,样式适合,图片不适合)
精简Javascript
减少DNS查找(使用相同域,注意与第一条平衡)
使用外部Javascript,CSS
避免CSS表达式(background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); )
避免重定向
css,Javascript加载顺序(async加载完执行,defer所有加载完全部资源执行)
减少cookies传输
CDN(可控性降低)
反向代理
过渡动画