| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>用来衡量什么问题 | WEEX</title> |
| <meta name="description" content="Weex"> |
| <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png"> |
| <script src="//g.alicdn.com/alilog/mlog/aplus_v2.js"></script> |
| <meta name="data-spm" dataSpmProtocol="i" content="a2c7j"> |
| <meta name="aplus-ajax" content="chksum"> |
| <meta name="aplus-waiting" content="MAN"> |
| <meta name="google-site-verification" content="FbH8DPHpxdDJlfkKLKXuXWOu69DI8ZRRP8O2Phg8UKw"> |
| <meta name="baidu-site-verification" content="WRr1iWvsYK"> |
| |
| <link rel="preload" href="/assets/css/styles.0ff943f0.css" as="style"><link rel="preload" href="/assets/js/app.0ff943f0.js" as="script"><link rel="preload" href="/assets/js/113.b1c17feb.js" as="script"><link rel="prefetch" href="/assets/css/1.styles.aa72e838.css"><link rel="prefetch" href="/assets/css/10.styles.1fff5b86.css"><link rel="prefetch" href="/assets/css/11.styles.a03faa50.css"><link rel="prefetch" href="/assets/css/2.styles.fc5d9892.css"><link rel="prefetch" href="/assets/css/21.styles.9ebad2b1.css"><link rel="prefetch" href="/assets/css/3.styles.6b94323a.css"><link rel="prefetch" href="/assets/css/36.styles.6dbb9d8c.css"><link rel="prefetch" href="/assets/css/4.styles.706a5607.css"><link rel="prefetch" href="/assets/css/7.styles.469d3b64.css"><link rel="prefetch" href="/assets/css/8.styles.b36167bf.css"><link rel="prefetch" href="/assets/css/9.styles.5bed6ebe.css"><link rel="prefetch" href="/assets/js/10.1fff5b86.js"><link rel="prefetch" href="/assets/js/100.09076a87.js"><link rel="prefetch" href="/assets/js/101.71fa3538.js"><link rel="prefetch" href="/assets/js/102.8a9926d6.js"><link rel="prefetch" href="/assets/js/103.d6c3649e.js"><link rel="prefetch" href="/assets/js/104.adb2425b.js"><link rel="prefetch" href="/assets/js/105.a063ca34.js"><link rel="prefetch" href="/assets/js/106.620e227f.js"><link rel="prefetch" href="/assets/js/107.1c97d156.js"><link rel="prefetch" href="/assets/js/108.d1f236a9.js"><link rel="prefetch" href="/assets/js/109.10a909cc.js"><link rel="prefetch" href="/assets/js/11.a03faa50.js"><link rel="prefetch" href="/assets/js/110.6f9200c8.js"><link rel="prefetch" href="/assets/js/111.9c1831b3.js"><link rel="prefetch" href="/assets/js/112.e5c0d546.js"><link rel="prefetch" href="/assets/js/114.c24b95ed.js"><link rel="prefetch" href="/assets/js/115.d7e38c3b.js"><link rel="prefetch" href="/assets/js/116.1aaa95ab.js"><link rel="prefetch" href="/assets/js/117.1a9e5539.js"><link rel="prefetch" href="/assets/js/118.8d915477.js"><link rel="prefetch" href="/assets/js/119.77f0a126.js"><link rel="prefetch" href="/assets/js/12.16a9b730.js"><link rel="prefetch" href="/assets/js/120.3cf0ba10.js"><link rel="prefetch" href="/assets/js/121.47fefbf1.js"><link rel="prefetch" href="/assets/js/122.3dd022e8.js"><link rel="prefetch" href="/assets/js/123.84abc63f.js"><link rel="prefetch" href="/assets/js/124.2568e233.js"><link rel="prefetch" href="/assets/js/125.5b665f24.js"><link rel="prefetch" href="/assets/js/126.25b58a0a.js"><link rel="prefetch" href="/assets/js/127.d62a58c6.js"><link rel="prefetch" href="/assets/js/128.e5774a02.js"><link rel="prefetch" href="/assets/js/129.9a813c06.js"><link rel="prefetch" href="/assets/js/13.f8bde866.js"><link rel="prefetch" href="/assets/js/130.edddc316.js"><link rel="prefetch" href="/assets/js/131.760aa65c.js"><link rel="prefetch" href="/assets/js/132.559d5ba7.js"><link rel="prefetch" href="/assets/js/133.cbdd35c7.js"><link rel="prefetch" href="/assets/js/134.c02d92e1.js"><link rel="prefetch" href="/assets/js/135.e6d5496a.js"><link rel="prefetch" href="/assets/js/136.8826af60.js"><link rel="prefetch" href="/assets/js/137.28b4573d.js"><link rel="prefetch" href="/assets/js/138.d370fc15.js"><link rel="prefetch" href="/assets/js/139.8d9150fc.js"><link rel="prefetch" href="/assets/js/14.a98602cc.js"><link rel="prefetch" href="/assets/js/140.f0a9b5e1.js"><link rel="prefetch" href="/assets/js/141.297fa6fe.js"><link rel="prefetch" href="/assets/js/142.82bbcbaa.js"><link rel="prefetch" href="/assets/js/143.2d1ed3b2.js"><link rel="prefetch" href="/assets/js/144.69a9bc6a.js"><link rel="prefetch" href="/assets/js/145.74d52c12.js"><link rel="prefetch" href="/assets/js/146.12ecdaf4.js"><link rel="prefetch" href="/assets/js/147.daad4b96.js"><link rel="prefetch" href="/assets/js/148.bb356182.js"><link rel="prefetch" href="/assets/js/149.56fdaace.js"><link rel="prefetch" href="/assets/js/15.ea6e5024.js"><link rel="prefetch" href="/assets/js/150.ee9c4994.js"><link rel="prefetch" href="/assets/js/151.2feae618.js"><link rel="prefetch" href="/assets/js/152.c7703521.js"><link rel="prefetch" href="/assets/js/153.3b555eab.js"><link rel="prefetch" href="/assets/js/154.c6329253.js"><link rel="prefetch" href="/assets/js/155.334c4ea4.js"><link rel="prefetch" href="/assets/js/156.1a29657f.js"><link rel="prefetch" href="/assets/js/157.ba8f07bc.js"><link rel="prefetch" href="/assets/js/158.a60a60ba.js"><link rel="prefetch" href="/assets/js/159.9ce96d49.js"><link rel="prefetch" href="/assets/js/16.14acc638.js"><link rel="prefetch" href="/assets/js/160.2a970224.js"><link rel="prefetch" href="/assets/js/161.a26e2b53.js"><link rel="prefetch" href="/assets/js/162.73535662.js"><link rel="prefetch" href="/assets/js/163.7518a0a5.js"><link rel="prefetch" href="/assets/js/164.17367778.js"><link rel="prefetch" href="/assets/js/165.46c8f055.js"><link rel="prefetch" href="/assets/js/166.1cc22037.js"><link rel="prefetch" href="/assets/js/167.3fbcb5c6.js"><link rel="prefetch" href="/assets/js/168.a3f80f1e.js"><link rel="prefetch" href="/assets/js/169.a6565c29.js"><link rel="prefetch" href="/assets/js/17.d6f2f3b8.js"><link rel="prefetch" href="/assets/js/170.566ddeda.js"><link rel="prefetch" href="/assets/js/171.4fd97bee.js"><link rel="prefetch" href="/assets/js/172.5295c6b9.js"><link rel="prefetch" href="/assets/js/173.ff25fd05.js"><link rel="prefetch" href="/assets/js/174.22ea6a1b.js"><link rel="prefetch" href="/assets/js/175.c6a04367.js"><link rel="prefetch" href="/assets/js/176.d3810924.js"><link rel="prefetch" href="/assets/js/177.facd2802.js"><link rel="prefetch" href="/assets/js/178.f4c6fbe9.js"><link rel="prefetch" href="/assets/js/179.1a3a2c12.js"><link rel="prefetch" href="/assets/js/18.83f6b39a.js"><link rel="prefetch" href="/assets/js/180.b54c8e90.js"><link rel="prefetch" href="/assets/js/181.88495b4c.js"><link rel="prefetch" href="/assets/js/182.8341d23c.js"><link rel="prefetch" href="/assets/js/183.332bcfe2.js"><link rel="prefetch" href="/assets/js/184.d8996a56.js"><link rel="prefetch" href="/assets/js/185.b8584f07.js"><link rel="prefetch" href="/assets/js/186.fa89e23f.js"><link rel="prefetch" href="/assets/js/187.90340eeb.js"><link rel="prefetch" href="/assets/js/188.efe631f8.js"><link rel="prefetch" href="/assets/js/189.72897b1a.js"><link rel="prefetch" href="/assets/js/19.94f071c0.js"><link rel="prefetch" href="/assets/js/190.1ec691ee.js"><link rel="prefetch" href="/assets/js/2.fc5d9892.js"><link rel="prefetch" href="/assets/js/20.13f7bbff.js"><link rel="prefetch" href="/assets/js/21.9ebad2b1.js"><link rel="prefetch" href="/assets/js/22.764b643d.js"><link rel="prefetch" href="/assets/js/23.f533737e.js"><link rel="prefetch" href="/assets/js/24.4eaa533c.js"><link rel="prefetch" href="/assets/js/25.e9877e57.js"><link rel="prefetch" href="/assets/js/26.8905d6a0.js"><link rel="prefetch" href="/assets/js/27.b199a955.js"><link rel="prefetch" href="/assets/js/28.524af0cf.js"><link rel="prefetch" href="/assets/js/29.b772949f.js"><link rel="prefetch" href="/assets/js/3.6b94323a.js"><link rel="prefetch" href="/assets/js/30.f5bcac64.js"><link rel="prefetch" href="/assets/js/31.c55e03aa.js"><link rel="prefetch" href="/assets/js/32.e575600a.js"><link rel="prefetch" href="/assets/js/33.3fff5656.js"><link rel="prefetch" href="/assets/js/34.82598567.js"><link rel="prefetch" href="/assets/js/35.8e1290ba.js"><link rel="prefetch" href="/assets/js/36.6dbb9d8c.js"><link rel="prefetch" href="/assets/js/37.d27fdc88.js"><link rel="prefetch" href="/assets/js/38.f8fc7b20.js"><link rel="prefetch" href="/assets/js/39.bf967d40.js"><link rel="prefetch" href="/assets/js/4.706a5607.js"><link rel="prefetch" href="/assets/js/40.e1864fd6.js"><link rel="prefetch" href="/assets/js/41.61bd3b64.js"><link rel="prefetch" href="/assets/js/42.34d8d61d.js"><link rel="prefetch" href="/assets/js/43.1aee493f.js"><link rel="prefetch" href="/assets/js/44.22177e9b.js"><link rel="prefetch" href="/assets/js/45.5c743d2f.js"><link rel="prefetch" href="/assets/js/46.4feffac9.js"><link rel="prefetch" href="/assets/js/47.367f9103.js"><link rel="prefetch" href="/assets/js/48.0c246d45.js"><link rel="prefetch" href="/assets/js/49.ee354be9.js"><link rel="prefetch" href="/assets/js/5.7d9779f7.js"><link rel="prefetch" href="/assets/js/50.bd81c7f0.js"><link rel="prefetch" href="/assets/js/51.a5f432dd.js"><link rel="prefetch" href="/assets/js/52.537aded4.js"><link rel="prefetch" href="/assets/js/53.84814584.js"><link rel="prefetch" href="/assets/js/54.5f780e97.js"><link rel="prefetch" href="/assets/js/55.9d44c91d.js"><link rel="prefetch" href="/assets/js/56.fc164b43.js"><link rel="prefetch" href="/assets/js/57.959b2d44.js"><link rel="prefetch" href="/assets/js/58.bd5c38e0.js"><link rel="prefetch" href="/assets/js/59.3eaece52.js"><link rel="prefetch" href="/assets/js/6.49a49457.js"><link rel="prefetch" href="/assets/js/60.4b8cb735.js"><link rel="prefetch" href="/assets/js/61.b54b9195.js"><link rel="prefetch" href="/assets/js/62.0116614c.js"><link rel="prefetch" href="/assets/js/63.85b1247d.js"><link rel="prefetch" href="/assets/js/64.8f1be6b5.js"><link rel="prefetch" href="/assets/js/65.6a241647.js"><link rel="prefetch" href="/assets/js/66.08c8bd13.js"><link rel="prefetch" href="/assets/js/67.002e0071.js"><link rel="prefetch" href="/assets/js/68.6c6a7c94.js"><link rel="prefetch" href="/assets/js/69.64d90e5d.js"><link rel="prefetch" href="/assets/js/7.469d3b64.js"><link rel="prefetch" href="/assets/js/70.b2c287c9.js"><link rel="prefetch" href="/assets/js/71.b7ad1135.js"><link rel="prefetch" href="/assets/js/72.7391b5c2.js"><link rel="prefetch" href="/assets/js/73.c5c77d81.js"><link rel="prefetch" href="/assets/js/74.96f80ffd.js"><link rel="prefetch" href="/assets/js/75.2920c7b7.js"><link rel="prefetch" href="/assets/js/76.a90bd3c9.js"><link rel="prefetch" href="/assets/js/77.3a0eeccd.js"><link rel="prefetch" href="/assets/js/78.6791678c.js"><link rel="prefetch" href="/assets/js/79.8b0c78e4.js"><link rel="prefetch" href="/assets/js/8.b36167bf.js"><link rel="prefetch" href="/assets/js/80.2641b89d.js"><link rel="prefetch" href="/assets/js/81.03d1925e.js"><link rel="prefetch" href="/assets/js/82.71061708.js"><link rel="prefetch" href="/assets/js/83.df220a8f.js"><link rel="prefetch" href="/assets/js/84.99fbef8f.js"><link rel="prefetch" href="/assets/js/85.dee8bcae.js"><link rel="prefetch" href="/assets/js/86.5200e4ce.js"><link rel="prefetch" href="/assets/js/87.96df0d82.js"><link rel="prefetch" href="/assets/js/88.e9171a32.js"><link rel="prefetch" href="/assets/js/89.53987bbc.js"><link rel="prefetch" href="/assets/js/9.5bed6ebe.js"><link rel="prefetch" href="/assets/js/90.8da0ff06.js"><link rel="prefetch" href="/assets/js/91.4bcce2cd.js"><link rel="prefetch" href="/assets/js/92.aca18707.js"><link rel="prefetch" href="/assets/js/93.93fdf568.js"><link rel="prefetch" href="/assets/js/94.e893b256.js"><link rel="prefetch" href="/assets/js/95.cb1d62b6.js"><link rel="prefetch" href="/assets/js/96.5529545c.js"><link rel="prefetch" href="/assets/js/97.d01eda68.js"><link rel="prefetch" href="/assets/js/98.384bebd6.js"><link rel="prefetch" href="/assets/js/99.fa349b8f.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.aa72e838.js"> |
| <link rel="stylesheet" href="/assets/css/styles.0ff943f0.css"> |
| </head> |
| <body> |
| <div id="app" data-server-rendered="true"><div class="theme-container vuepress-theme-fast"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/zh/" class="home-link router-link-active"><img src="/logo@2x.svg" alt="WEEX" class="logo"></a><span class="version"><a href="/download/download.html" class="version-bg"><img src="/assets/img/version-bg.ab65ded9.svg" alt="v0.28"><span class="version-no">v0.28</span></a></span><div class="links"><form id="search-form" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form><nav class="nav-links can-hide"><div class="nav-item"><a href="/zh/guide/" class="nav-link">指南</a></div><div class="nav-item"><a href="/zh/docs/" class="nav-link">文档</a></div><div class="nav-item"><a href="/zh/tools/" class="nav-link">第三方工具</a></div><div class="nav-item"><a href="/zh/download/" class="nav-link">下载</a></div><div class="nav-item"><a href="/zh/community/" class="nav-link">社区</a></div><div class="nav-item"><a href="/zh/blog/" class="nav-link router-link-active">博客</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">选择语言</span><span class="arrow right"></span></a><ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----><a href="/" class="nav-link">English</a></li><li class="dropdown-item"><!----><a href="/zh/blog/interaction-optimization.html" class="nav-link router-link-exact-active router-link-active">简体中文</a></li></ul></div></div></nav><a href="https://github.com/apache/incubator-weex" target="_blank" rel="noopener noreferrer" class="repo-link"><img src="/assets/img/github.7cb484a9.svg" alt="github" class="github-icon"></a></div></header><div class="sidebar-mask"></div><div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/zh/guide/" class="nav-link">指南</a></div><div class="nav-item"><a href="/zh/docs/" class="nav-link">文档</a></div><div class="nav-item"><a href="/zh/tools/" class="nav-link">第三方工具</a></div><div class="nav-item"><a href="/zh/download/" class="nav-link">下载</a></div><div class="nav-item"><a href="/zh/community/" class="nav-link">社区</a></div><div class="nav-item"><a href="/zh/blog/" class="nav-link router-link-active">博客</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">选择语言</span><span class="arrow right"></span></a><ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----><a href="/" class="nav-link">English</a></li><li class="dropdown-item"><!----><a href="/zh/blog/interaction-optimization.html" class="nav-link router-link-exact-active router-link-active">简体中文</a></li></ul></div></div></nav><ul class="sidebar-links"><li><a href="/zh/blog/write-a-blog.html" class="sidebar-link">写一篇博客</a></li><li><a href="/zh/blog/weex-auto-test-locating.html" class="sidebar-link">Weex自动化测试元素定位方案</a></li><li><a href="/zh/blog/ios-weexcore.html" class="sidebar-link">iOS WeexSDK 接入 WeexCore</a></li><li><a href="/zh/blog/weexcore-multiprocess-evolution.html" class="sidebar-link">WeexCore 多进程多线程架构演进</a></li><li><a href="/zh/blog/interaction-optimization.html" class="active sidebar-link">可交互时间的探索和首屏时间的改进之路</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/blog/interaction-optimization.html#衡量标准是什么" class="sidebar-link">衡量标准是什么</a></li><li class="sidebar-sub-header"><a href="/zh/blog/interaction-optimization.html#可交互时间的算法实现" class="sidebar-link">可交互时间的算法实现</a></li><li class="sidebar-sub-header"><a href="/zh/blog/interaction-optimization.html#测试验证数据" class="sidebar-link">测试验证数据</a></li><li class="sidebar-sub-header"><a href="/zh/blog/interaction-optimization.html#可交互时间参考改进数据" class="sidebar-link">可交互时间参考改进数据</a></li></ul></li><li><a href="/zh/blog/what_is_the_most_important_assest_to_an_open_souce_project.html" class="sidebar-link">什么是一个开源项目最重要的资产？</a></li><li><a href="/zh/blog/weex-third-party-extensions.html" class="sidebar-link">Weex 三方插件</a></li></ul></div><div class="page"><div class="content"><h1 id="用来衡量什么问题"><a href="#用来衡量什么问题" class="header-anchor">#</a> 用来衡量什么问题</h1><p>衡量一个weex页面质量的角度有很多种，不管哪种角度，都是为了在端侧给用户更好的体验。</p><p>通常来说，用户接触最频繁、影响最大、感受最明显的是页面的加载时间。在之前的版本中，weex提供了首屏时间这个概念，来衡量这个时间。但是随着业务复杂度的增加，引入底图、框架壳子，首屏越来越有局限性，只能算是加载时间的一部分，并不能作为度量整个加载时间的指标。</p><p>目前业务的逻辑大概是</p><p><img src="/blog/interaction-optimization/1532953927448-6af8006c-efa9-4a83-a33e-31ac264e2320.png" alt="img_js_logic_normal"></p><p>老的秒开时间最多只能监测到第3步的时间，但是业务方真正想要的、和用户感官最接近的应该是第5步完成的时间</p><p>因此，我们做了两件事，来处理这个问题</p><ul><li><p>推出<code>可交互时间</code>这个指标，来衡量 <strong>开始渲染到屏幕(<code>instance</code>)内view稳定渲染完成的时间</strong> (开始渲染bundle—>异步请求—>屏幕内view树稳定、渲染完成)</p></li><li><p>修正首屏算法，使用新的字段<code>newFSRenderTime</code>来作为新的首屏指标 （<strong>老首屏字段不受影响</strong>）</p></li></ul><h1 id="可交互时间"><a href="#可交互时间" class="header-anchor">#</a> 可交互时间</h1><h2 id="衡量标准是什么"><a href="#衡量标准是什么" class="header-anchor">#</a> 衡量标准是什么</h2><p>如上所示，可交互时间的起始点分别是</p><ul><li>起始点 : render(url)</li><li>结束 : 屏幕内view渲染完成且view树稳定的时间</li></ul><p>对于起始点，应该没什么疑问，对于结束点的两个限定条件，做一些说明。</p><h3 id="第一个限定条件：屏幕内view树稳定下来："><a href="#第一个限定条件：屏幕内view树稳定下来：" class="header-anchor">#</a> 第一个限定条件：屏幕内view树稳定下来：</h3><p>可交互时间是对首屏时间的补充，首屏后，因为有异步刷新的缘故，view还是会不断增删刷新，所以第一个限定条件是 屏幕内view树且稳定下来，不再出现增删的操作。</p><p><img src="/blog/interaction-optimization/1532953850732-b0d52294-a6c6-4fbb-bd08-ee7e2a4b84b8.png" alt="img_async_data_case"></p><h3 id="第二个限定条件：屏幕内view渲染完成"><a href="#第二个限定条件：屏幕内view渲染完成" class="header-anchor">#</a> 第二个限定条件：屏幕内view渲染完成</h3><p>定义可交互的时候，碰到一个问题，什么时候算是可交互呢？</p><ul><li>只有一个view 也可以点</li><li>view渲染半屏的时候可以点</li><li>view全屏的完成的时候可以点</li><li>在渲染屏幕外的view的时候，屏幕内的view也是可以交互的</li></ul><p>如上所述，无论是渲染到什么程度，事实上都是可以交互的。</p><p><img src="/blog/interaction-optimization/1532953896764-72b52689-f4b2-4442-9f0f-9a2e4edb007f.png" alt="img_interaction_screen_case"></p><p>最后选择屏幕内所有view渲染完成这个结点(图3)作为约束的边界点</p><ul><li>其一，按照经验，大部分用户打开页面后，基本都会等一会儿，等屏幕内view稳定，不再有剧烈变动后，再开始操作。</li><li>其二，一般设计的时候屏幕内展示的内容优先级是最高最重要的，整屏的数据比半屏的数据更有说服力，不管从数据层面还是感官体验层面</li></ul><h2 id="可交互时间的算法实现"><a href="#可交互时间的算法实现" class="header-anchor">#</a> 可交互时间的算法实现</h2><p>回想一下可交互时间的两个限制条件</p><ul><li>屏幕内view渲染完成</li><li>屏幕内view树稳定下来</li></ul><p>所以思路很简单，当屏幕内发生view的add/rm操作时，认为是可交互点,记录数据。直到没有再发生为止。</p><p>实现过程中，碰到3个bad case</p><ul><li>渲染过程中，用户点击了view，有可能触发刷新或者其它什么逻辑。</li><li>由于没办法知道什么时候是最后一次add/rm 操作，要有个截止时间。</li><li>fix元素,比如会场的购物津贴，或者某个悬浮元素，晚个几s出来。</li></ul><p>这几个case的解决方案如下，如果大家有更好的想法，可以提出来</p><ul><li>点击事件case，每次add/rm操作时，如果当前weex页面发生过点击事件，不再记录，以上一次时间为准。</li><li>截止时间case，按照历史数据，首屏基本在2s内，加上可交互延长的时间，最差大概在5s内，考虑到线上复杂情况，截止时间设置为8s，8s后数据不在记录。</li><li>fix元素问题，和天猫、淘宝会场同学讨论后，一致认为在前端中，fix元素一般都是悬浮view或者导航，对用户体验来说影响不大。所以，最终排除对fix元素的计算。</li><li>算法优化，去掉rm操作的监测，对结果影响很小，但是理论上会减少一半的计算量。</li></ul><p><img src="/blog/interaction-optimization/ac84ce579b28867aac2e8ba18e40e954.png" alt="img_interaction_logic"></p><p>iOS 代码实现</p><div class="language- extra-class"><pre class="language-text"><code>//when addview，call _handleRenderTime |
| |
| - (void) _handleRenderTime:(WXComponent*)targetComponent withModifyTime:(double)modifyTime |
| { |
| //超过8s不再记录 |
| double diff = modifyTime - self.renderTimeOrigin; |
| if (diff > 8000) { |
| return; |
| } |
| |
| // 去除不必要的多余计算 |
| if (diff < self.interactionTime) { |
| //useless calulcate ,for imporove performance |
| return; |
| } |
| |
| //有点击事件，直接返回 |
| UIView *root = targetComponent.weexInstance.rootView; |
| if (root && [root isKindOfClass:[WXRootView class]]) { |
| WXRootView* wxRootView = (WXRootView *)root; |
| if ([wxRootView isHasEvent]) { |
| return; |
| } |
| } |
| |
| //屏蔽fix元素 |
| if ([targetComponent.isfix]) { |
| return; |
| } |
| |
| CGRect absoluteFrame = [targetComponent.view.superview convertRect:targetComponent.view.frame toView:targetComponent.weexInstance.rootView]; |
| CGRect rootFrame = targetComponent.weexInstance.rootView.frame; |
| CGPoint leftTop = absoluteFrame.origin; |
| CGPoint rightBottom = CGPointMake(absoluteFrame.origin.x+absoluteFrame.size.width, absoluteFrame.origin.y+absoluteFrame.size.height); |
| |
| |
| bool inScreen = CGRectContainsPoint(rootFrame, leftTop) || CGRectContainsPoint(rootFrame, rightBottom); |
| |
| //屏幕外的view，不care |
| if (!inScreen) { |
| return; |
| } |
| |
| //更新可交互时间 |
| self.interactionLimitAddOpCount++; |
| self.interactionAddCount = self.interactionAddCountRecord; |
| self.interactionTime = self.interactionTime < diff ? diff :self.interactionTime; |
| } |
| </code></pre></div><h2 id="测试验证数据"><a href="#测试验证数据" class="header-anchor">#</a> 测试验证数据</h2><table><thead><tr><th style="text-align:left">系统</th><th style="text-align:left">系统版本</th><th style="text-align:left">机型</th></tr></thead><tbody><tr><td style="text-align:left">iOS</td><td style="text-align:left">11.2</td><td style="text-align:left">iPhone 8</td></tr><tr><td style="text-align:left">Android</td><td style="text-align:left">8.0</td><td style="text-align:left">华为P10</td></tr></tbody></table><p>摄像机帧率50，即20ms/帧</p><h3 id="验证数据结果"><a href="#验证数据结果" class="header-anchor">#</a> 验证数据结果</h3><table><thead><tr><th style="text-align:left">业务</th><th style="text-align:left">埋点时间</th><th style="text-align:left">摄像机拍摄体感时间</th><th style="text-align:left">网络时间</th><th style="text-align:left">误差</th></tr></thead><tbody><tr><td style="text-align:left">有好货Android</td><td style="text-align:left">2297</td><td style="text-align:left">2900</td><td style="text-align:left">16</td><td style="text-align:left">-20%</td></tr><tr><td style="text-align:left">有好货iOS</td><td style="text-align:left">1437</td><td style="text-align:left">1300</td><td style="text-align:left">8</td><td style="text-align:left">11%</td></tr><tr><td style="text-align:left">有好货Android</td><td style="text-align:left">5678</td><td style="text-align:left">5960</td><td style="text-align:left">96</td><td style="text-align:left">-3%</td></tr><tr><td style="text-align:left">头条iOS</td><td style="text-align:left">529</td><td style="text-align:left">660</td><td style="text-align:left">8</td><td style="text-align:left">-18</td></tr><tr><td style="text-align:left">天天特价Android（首次）</td><td style="text-align:left">3831</td><td style="text-align:left">4440</td><td style="text-align:left">100</td><td style="text-align:left">-13%</td></tr><tr><td style="text-align:left">天天特价iOS（首次）</td><td style="text-align:left">1308</td><td style="text-align:left">1500</td><td style="text-align:left">144</td><td style="text-align:left">3%</td></tr><tr><td style="text-align:left">天天特价Android（非首次）</td><td style="text-align:left">3288</td><td style="text-align:left">3480</td><td style="text-align:left">60</td><td style="text-align:left">-4%</td></tr><tr><td style="text-align:left">天天特价iOS（非首次）</td><td style="text-align:left">1280</td><td style="text-align:left">1460</td><td style="text-align:left">74</td><td style="text-align:left">6%</td></tr><tr><td style="text-align:left">爱逛街Android</td><td style="text-align:left">2463</td><td style="text-align:left">2240</td><td style="text-align:left">20</td><td style="text-align:left">10%</td></tr><tr><td style="text-align:left">爱逛街iOS</td><td style="text-align:left">830</td><td style="text-align:left">940</td><td style="text-align:left">16</td><td style="text-align:left">-10%</td></tr></tbody></table><h3 id="验证case示例"><a href="#验证case示例" class="header-anchor">#</a> 验证case示例</h3><p>展示三个测试case。</p><p>天天特价iOS（首次）</p><p><img src="/blog/interaction-optimization/1532953955583-a020c31d-9e1e-4d5f-8754-ba9b42e04eb6.png" alt="img_tttj_first_iOS"></p><p>有好货Android |
| <img src="/blog/interaction-optimization/1532953968812-86ca8419-7b4f-4ac1-987a-1cc32049e385.png" alt="img_yhh_android"></p><p>爱逛街iOS</p><p><img src="/blog/interaction-optimization/1532953779052-391a0eb5-2902-4a76-bb7d-ecb79fad40d5.png" alt="img_agj_iOS"></p><h2 id="可交互时间参考改进数据"><a href="#可交互时间参考改进数据" class="header-anchor">#</a> 可交互时间参考改进数据</h2><p>有同学可能问了，衡量指标给了，那有没有优化的建议或者参考信息呢</p><p>当然有的，不都讲究一条龙服务吗 （手动滑稽.jpg）</p><h3 id="使用-weex-dev-tool"><a href="#使用-weex-dev-tool" class="header-anchor">#</a> 使用 weex-dev-tool</h3><p>github 地址：https://github.com/weexteam/weex-devtool-iOS</p><p>整体耗时：</p><p><img src="http://ata2-img.cn-hangzhou.img-pub.aliyun-inc.com/e5aae2e2c2da360fb6204f64b1e3cd31.png" alt="图片.png"></p><p>详细view渲染到屏幕上的时序</p><p><img src="http://ata2-img.cn-hangzhou.img-pub.aliyun-inc.com/45e36879f4baed04dfbad0382c23dd8a.png" alt="屏幕快照 2019-02-22 下午2.59.31.png"></p><h3 id="其它信息"><a href="#其它信息" class="header-anchor">#</a> 其它信息</h3><p>weex在统计可交互时间的同时，同时记录了以下几个辅助信息数据</p><table><thead><tr><th style="text-align:left">字段</th><th style="text-align:left">含义</th><th style="text-align:left">备注</th></tr></thead><tbody><tr><td style="text-align:left">wxInteractionComponentCreateCount</td><td style="text-align:left">可交互时间内，创建component个数</td><td style="text-align:left">创建组件要耗时的<br>肾5s上，3ms/个</td></tr><tr><td style="text-align:left">wxInteractionScreenViewCount</td><td style="text-align:left">可交互时间内添加view的次数(屏幕内)</td><td style="text-align:left">屏幕内view，直接影响可交互时间结果</td></tr><tr><td style="text-align:left">wxInteractionAllViewCount</td><td style="text-align:left">可交互时间内添加view的次数 (屏幕内+屏幕外)</td><td style="text-align:left">参考数据<br>不影响可交互时间<br>但不建议在屏幕外创建大量组件，耗时又耗内存</td></tr></tbody></table><h1 id="首屏时间的修正"><a href="#首屏时间的修正" class="header-anchor">#</a> 首屏时间的修正</h1><p>在讲首屏修正方案之前，先回忆下现在的前端逻辑</p><p><img src="/blog/interaction-optimization/1532953927448-6af8006c-efa9-4a83-a33e-31ac264e2320.png" alt="img_js_logic_normal"></p><p>前面说过，老版首屏最多能监控到第3步的情况。实际上。在业务支撑过程中，发现第3步时未必到达用户真实“首屏”感受</p><ul><li>在createfinish时，业务方只渲染了了一半（爱逛街），剩下一半搞异步渲染，这时老的首屏时间最多只能算“半屏时间”</li><li>业务方只render一个view壳子，真正的内容异步填充，这时候老白屏意义不大，因为屏幕内70%的内容几乎都是在异步渲染</li></ul><p>鉴于以上case，修正了首屏时间的算法</p><ul><li>以叶子结点（text/img/button）填满屏幕作为结束点 ，不关心容器（viewgroup）是否填满</li><li>若果叶子结点未填满，以createfinish时间为准。</li></ul><p>新的字段<code>newFsRenderTime</code> 作为新的首屏参考 <strong>老字段不受影响</strong></p><p>测试数据比较,以iOS数据为例，如下图所示</p><p><img src="/blog/interaction-optimization/1533126050649-50116f85-0101-4389-99f5-35f3ef4813d9.png" alt="img_wx_render_compare"></p><h1 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h1><p>算法和数据结果如上文所述，这里放一张图总结一下首屏(老)、首屏(新)、可交互时间的覆盖范围</p><p><img src="/blog/interaction-optimization/1533125815712-c17b4df4-e072-42b7-8c77-560deabf7696.png" alt="img_wx_screen_render_stream"></p><p>欢迎广大业务方来提改进，和bad case 优化可交互时间的算法</p><p>毕竟业务认可的，和实际感官相符的，才是正确的。</p></div><div class="page-nav"><p class="inner"><span class="prev"> |
| ← |
| <a href="/zh/blog/weexcore-multiprocess-evolution.html" class="prev"> |
| WeexCore 多进程多线程架构演进 |
| </a></span><span class="next"><a href="/zh/blog/what_is_the_most_important_assest_to_an_open_souce_project.html"> |
| 什么是一个开源项目最重要的资产？ |
| </a> |
| → |
| </span></p></div><div class="page-edit"><div class="last-updated"><span class="prefix">上次更新: </span><span class="time">2020/12/10</span></div><div class="edit-link"><a href="https://github.com/apache/incubator-weex-site/edit/master/docs/zh/blog/interaction-optimization.md" target="_blank" rel="noopener noreferrer">编辑此页</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><a href="https://github.com/apache/incubator-weex-site/issues/new?body=https%3A%2F%2Fweex.io%2F" target="_blank" rel="noopener noreferrer" class="issueText">提交建议</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="score"><span class="choice"><img src="https://img.alicdn.com/tfs/TB1h7TSqpYqK1RjSZLeXXbXppXa-20-18.svg" class="score-icon">文档写得很棒</span><span class="choice"><img src="https://img.alicdn.com/tfs/TB1h7TSqpYqK1RjSZLeXXbXppXa-20-18.svg" class="score-icon bad">文档写得很差</span></div></div><div class="license-wrap" style="display:none;"><footer class="footer-container" data-v-0ad13d84><div class="footer-body" data-v-0ad13d84><img src="/logo@2x.svg" class="logo" data-v-0ad13d84><img src="//img.alicdn.com/tfs/TB11BRiIW6qK1RjSZFmXXX0PFXa-365-365.png" class="apache" data-v-0ad13d84><div class="cols-container" data-v-0ad13d84><div class="col col-12" data-v-0ad13d84><h3 data-v-0ad13d84>Disclaimer</h3><p data-v-0ad13d84>Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the |
| Incubator. Incubation is required of all newly accepted projects until a further review indicates that the |
| infrastructure, communications, and decision making process have stabilized in a manner consistent with |
| other successful ASF projects. While incubation status is not necessarily a reflection of the completeness |
| or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>ASF</dt><dd data-v-0ad13d84><a href="http://www.apache.org" target="_self" data-v-0ad13d84>Foundation</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/licenses/" target="_self" data-v-0ad13d84>License</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/events/current-event" target="_self" data-v-0ad13d84>Events</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/foundation/sponsorship.html" target="_self" data-v-0ad13d84>Sponsorship</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/foundation/thanks.html" target="_self" data-v-0ad13d84>Thanks</a></dd></dl></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>Documentation</dt><dd data-v-0ad13d84><a href="/guide/develop/create-a-new-app.html" target="_self" data-v-0ad13d84>Quick start</a></dd><dd data-v-0ad13d84><a href="/guide/develop/setup-develop-environment.html" target="_self" data-v-0ad13d84>Developer guide</a></dd></dl></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>Resources</dt><dd data-v-0ad13d84><a href="/blog/write-a-blog.html" target="_self" data-v-0ad13d84>Blog</a></dd><dd data-v-0ad13d84><a href="/community/" target="_self" data-v-0ad13d84>Community</a></dd><dd data-v-0ad13d84><a href="/guide/contribute/thanks.html" target="_self" data-v-0ad13d84>Thanks by Weex</a></dd><dd data-v-0ad13d84><a href="https://www.apache.org/security/" target="_self" data-v-0ad13d84>Security</a></dd></dl></div></div><div class="copyright" data-v-0ad13d84><span data-v-0ad13d84>Copyright © 2018-2019 The Apache Software Foundation. Apache and the Apache feather |
| logo are trademarks of The Apache Software Foundation.</span></div></div></footer></div></div><!----></div></div> |
| <script src="/assets/js/app.0ff943f0.js" defer></script><script src="/assets/js/113.b1c17feb.js" defer></script> |
| </body> |
| </html> |
