指标&优化
2020-07-22 11:50:49 0 举报性能指标与关键节点
作者其他创作
大纲/内容
Request
startRender timing
文档请求耗时读取本地缓存减少错误重连
为html页面指定cache-Control和Expires
1、SSR2、缓存策略3、Resource timing 中
load
全局web view 方法：客户端启动时，初始化全局webview 待用 隐藏当用户访问了webview时，直接使用预期：可以有效减少首次打开时间问题：内存消耗页面跳转需要晴空上一个页面痕迹，容易内存泄漏或者webview 池
开始解析
CDN加速
vue
离线包请求下载
首屏timing
request
1、请求合并2、移除 <head> 中任何阻塞渲染的脚本或样式表3、wecpack 构建打包优化
数据
response
webpack构建
Resource Timing
渲染timing
缓存DNS查询同域名
Processing
Response
预解析 rel=\"dns-prefetch\"APP 预解析 DNS
业务高峰前预热热门资源–l2节点
Dns
redirectStart
webview 初始化启动浏览器内核
Tcp
静态资源 Etag头和Last-modified 设置
使用CDN缩短距离
TTI ≈ DOM Ready timig
TTSR = RRFB +TTDD + TTHE 不明显
domLoading
1、请求合并2、压缩js、html3、提取css公共代码4、图片处理5、使用雪碧图
顺序css 靠前
涉及二次启动的时间
domComplete
mounted
针对特点使用场景-压缩
前端离线包客户端离线包
TCP
X
减少页面重定向
合理设置Etag和Modified
使用CDN Combo下载传输内容<script src=\
使用可缓存的ajax（尽量使用“GET”）
业务情况允许下 “过滤参数”(反向)流量低的不使用，提供其他命中率
资源下载timing
init
appCache
客户端代理数据请求在客户端初始化WebView的同时，直接由native开始网络请求数据；当页面初始化完成后，向native获取其代理请求的数据。此方法虽然不能减小WebView初始化时间，但数据请求和WebView初始化可以并行进行，总体的页面加载时间就缩短了；缩短总体的页面加载时间
webview 初始化
图片优化webpack
客户端
减少cookie大小并使用cookie隔离
尽量避免重定向
App cache
合并资源请求文件大小控制
DNS
例如：SSR
WKWebView相比下的消耗
网络
回流与重绘
1、同开始时间处理2、connectEnd必须包括建立传输连接的时间间隔以及SSL握手和SOCKS身份验证等其他时间间隔。
webview初始化timing
避免页面中空的href和src属性
流量控制
fetchStart
DOMContentLoaded
使用静态资源CDN来存储文件
redirect
Promptforunload
事件循环与异步更新
responseEnd
总下载timing (完成)
DNS采用和客户端API相同的域名
使用不同webView
re-render
HTTP2
推荐使用异步js ，script标签中使用defer和async属性
全局webview
js、css 优化例如：JSON.stringifyfor 、foreach......
异步加载
避免使用 CSS import 引用加载 CSS
1、减少回流与重绘2、将 FCP 所需的最小样式集内联到 <head> 中（非 HTTP/2）3、异步编程减少关键路径阻塞4、脚本执行顺序调整5、js 使用优化方式6、对图片的处理
白屏timing
使用静态资源分域存放来增加下载并行数
持久链接/应用程序缓存/本地资源----DNS结束时间
雪碧图/Base64Webp处理
动静分离
navigationStart
header里存在css 和 js 存在的问题css 后面有js ，即便是内联的 间接阻塞html解析
离线缓存 manifest，离线数据缓存localStorage
压缩
全局 webview
1、路由懒加载2、按需加载第三方模块等3、插件合理使用(替换UglifyJsPlugin)4、动态链接库5、异步组件6、优化组件的加载时机7、webpack-bundle-analyzer使用8、服务端开启 gzip压缩
页面
使用静态资源分域存放来增加下载并行数使用静态资源CDN来存储文件
本地缓存/持久链接影响此处的时间。～0
直出模版高性能页面服务度端渲染
CSR、NSR、SSR
页面渲染
收藏
职业：本科
0 条评论
下一页
