点了没反应的那两百毫秒，怎么归因到具体代码

交互延迟这件事，用户只会说“卡了一下”。要把这一下拆开，得先知道它由哪几段组成，再让浏览器把每一段的耗时交出来。

三段延迟

一次点击到画面更新，中间有三段：输入延迟，主线程正在忙别的事，事件排队等着；处理时间，事件回调本身跑了多久；呈现延迟，改完之后到下一帧画出来。三段里任何一段超了，用户感觉都是同一个字。

用什么测

事件计时接口能在页面上报每一次交互的耗时和目标元素，配合观察器在交互结束后取数。生产环境不要全量采集，按比例采样，把交互类型、元素选择器、耗时一起带上。样本量够看分布就行，不必人人上报。

定位到长任务

主线程上超过五十毫秒的任务会被记为长任务。把交互时间点和长任务时间轴对齐，基本能看出是哪个任务卡住了。再往下看调用栈，往往落在一段同步渲染或一次强制布局上。

常见的四个元凶

一次性渲染几百条列表，没有分批也没有虚拟滚动；在循环里读取布局属性，触发反复重排；第三方脚本在主线程上做同步计算；页面注水阶段把整棵树重建一遍。这四种问题的共同点是：代码看着没问题，量一大就顶不住。

修复的先后

先切分，把长任务拆成小段，在段与段之间让出主线程；再减量，能不算的不算，能延后的延后；最后才考虑换框架。顺序反了，换完框架问题照旧，因为根源在工作量上。

别用平均值判断

交互延迟的分布很偏，少量极慢的交互会把平均值拉得没有意义。看第七十五百分位，也看最慢的那类交互是点击、输入还是滚动。输入类交互超标，通常是输入事件里做了重计算，这是最容易改也最容易被忽略的一处。

验收要在中端机上做

桌面高配机器上，两百毫秒的差距几乎感知不到。用两三年前的中端手机，在正常网络下重复同一串操作，改前改后各记录一组。这个对比比任何分数都直接。

关于冉冉科技

江苏冉冉信息科技有限公司（品牌“冉冉科技”）成立于2017年，位于江苏省常州市新北区，是一家从事互联网信息服务、电子商务应用与企业应用系统开发的技术服务企业。公司业务涵盖网站建设、网页设计、SEO优化、竞价包年、域名注册、虚拟主机、企业邮箱、整合营销及企业形象策划等，以“只做有效果的网络营销”为服务主张，累计完成三千余起网站建设与服务。