前言

彦祖们,前端开发中对于 setTimeout setInterval 一定用得烂熟于心了吧?

但你知道你的定时器并没那么靠谱吗?

本文涉及技术栈(非必要)

• vue2

场景复现

今天笔者在开发业务的时候就遇到了这样一个场景

前后端有一个 ws 通道,我们暂且命名为 channel

前后端约定如下:

文章还没写两分钟,一只暴躁的测试老哥说道:"你们的 ws 也太不稳定了,几十秒就断开一次?废物?"

骂骂咧咧的甩过来一张截图

笔者心想:"为什么我的界面稳如老狗?浏览器问题,绝对是浏览器问题..."

起身查看,遂发现毫无问题,和笔者一模一样的 chrome 版本...

静心而坐,对着浏览器屏幕茶颜悦色(哦,察言观色)...

10 分钟过去了,半小时过去了...还是稳如老狗,根本不断

问题分析

那么问题到底出在哪里呢?

笔者坐在测试妹纸身边仔细观察了她的操作后!

发现她不断得切屏,此时已初步心虚,不禁问道 GPT

当浏览器标签页变为非活动状态时，setInterval 和 setTimeout 的执行频率通常会被降级。大多数现代浏览器将其执行频率限制在 1 秒（1000 毫秒）或更高，以减少 CPU 和电池的消耗。

问题原因大致是这样了

问题复现

此时笔者在本地写了个 demo

let prev = performance.now()



setInterval(()=>{

  const offset = performance.now() - prev

  prev = performance.now()

  console.log('__SY__🎄 ~ setInterval ~ offset:', offset)



},1000)

理想的情况,我们这个 offset 应该是一直维持在 1000ms 左右

那么后续我们就要看页面激活 | 失活时候的情况了

页面激活时

我们先看下页面激活时的打印数据

没什么问题,符合我们的期望值

页面失活时

接下来我们,切换到其他浏览器标签,保持几分钟,几分钟后我们看下打印数据

明显发现有些数据不符合我们的期望值

甚至有些夸张到长达 41003ms,将近 40 倍,不靠谱!

寻找方案

用 setTimeout 模拟 setInterval

其实网上最多的方案就是说用 setTimeout 模拟 setInterval

但是很可惜,笔者亲自模拟下来,也是同样的结果,我们看截图

而且发现更加不靠谱了...错误的概率明显更高了...

其实可想而知,setInterval 和 setTimeout 在事件循环中都属于 Task

事件循环的优先级是一样的,同样都属于主线程任务(标记起来,后面考重点)

Web Worker

其实网上还有类似于 requestAnimationFrame 的方案

但是测试下来更离谱,就不浪费彦祖们的时间了

进入正题吧

其实上文说了,主线程任务的优先级会被降低,那么我们思考一下子线程任务呢?

子线程任务在前端领域,我们不就能想到 Web Worker 吗?

当然除了 Web Worker,还有 SharedWorker Service Worker

非本文重点,不做赘述

什么是 Web Worker

首先我们来认识下什么是 Web Worker

Web Worker 是一种运行在浏览器后台的独立 JavaScript 线程，允许我们在不阻塞主线程（即不影响页面 UI 和用户交互的情况下）执行一些耗时的任务，比如数据处理、文件操作、复杂计算等。

不阻塞主线程这恰恰是我们的所需要的!

使用 Web Worker

其实 Web Worker 在常规使用和 vue 中还是有一定的区别的

常规使用

常规使用其实非常简单,我们还是以上文中的 demo 为例

改造一下

• index.html

const worker = new Worker('./worker.js');

我们还需要一个 worker.js文件

• worker.js

let prev = performance.now()



setInterval(() => {

  const offset = performance.now() - prev

  prev = performance.now()

  console.log('__SY__🎄 ~ setInterval ~ offset:', offset)

}, 1000)

切换 tab 几分钟后让我们来看看打印结果

非常完美,几乎都保持在 1000ms 左右

在 vue 中使用 Web Worker

在 vue 中使用就和常规使用有所不同了

这也是笔者今天踩坑比较多的地方

网上很多文中配置了 webpack 的 worker-loader,然后改造 vue.config.js

但是笔者多次尝试,还是各种报错(如果有大佬踩过坑,请在评论区留言)

最后笔者翻到了之前的笔记,其实早在多年之前就记录了在 vue 中使用 Web Worker 的文章

使用方式非常简单

我们只需要把 worker.js 放置于 public 目录即可!

看下我们此时的代码

• App.vue

// 此处注意要访问 根路径 /

const myWorker = new Worker('/worker.js')

• public
  
  
  
  • worker.js
  
  
  
  

let prev = performance.now()



setInterval(() => {

  const offset = performance.now() - prev

  prev = performance.now()

  console.log('__SY__🎄 ~ setInterval ~ offset:', offset)

}, 1000)

测试一下

非常完美!

解决业务问题

彦祖们此时可能要问道,你只是证明了 Web Worker 不会阻塞主进程

和你的业务有什么关系吗?

其实这还得依赖于Web Worker的通信机制

我们继续改造

• App.vue

const myWorker = new Worker('/worker.js')



myWorker.postMessage('createPingInterval') //向 worker 发送开启定时器的指令

// 接收 Web Worker 的执行指令,执行对应业务

myWorker.onmessage = function (event) {

  console.log('__SY__🎄 ~ event:', event)

}

• worker.js

// 接收到主进程 `开启定时器的指令` 处理定时器逻辑

self.onmessage = function(event) {

  const interval = setInterval(() => {

    self.postMessage('executor') // 定时向主进程发送定时器执行指令

  }, 1000)

}

封装一个 setWorkerInterval

其实有了以上的代码模型,我们就能封装一个不受主进程阻塞的定时器了

我们暂且命名它为 setWorkerInterval

函数设计

首先设计一下我们的函数

为了减少开发者心智负担

我们需要把函数设计成和 setInterval 一样的用法

我们在使用 setInterval 的时候,日常最常用的参数就是 callback 和 delay

它的返回值是一个 intervalID

由此可见我们的函数签名如下

function setWorkerInterval(callback,delay){

    const intervalID = xxx(callback,delay) // 定时执行

    return intervalID

}

动手实现

有了上面的函数设计,我们就开始来实现

目前我们遇到一个问题,那就是上文中的 xxx 具体是个啥?

这其实就是 Web Worker 中的 setInterval

我们只需要把 Web Worker 中的 setInterval的功能暴露给主线程不就完事了吗?

来看 代码

• setWorkerInterval.js

export default function(callback, delay) {

  //创建一个 worker

  const worker = new Worker('/worker.js')

  worker.postMessage('') // 开启定时器

  // 接收 Web Worker 的消息

  worker.onmessage = function(event) {

    // 收到 worker 的 setInterval 触发,触发对应业务逻辑

  }

}

• worker.js

// 处理定时器逻辑

self.onmessage = function(event) {

  const interval = setInterval(() => {

    self.postMessage({}) // 定时通知主线程,即上文中的 xxx

  }, 1000)

}

这样我们就初步完成了以上 xxx 的逻辑

但随之而来又有两个问题

1.如何触发对应业务逻辑?

2.如何清除定时器?

触发对应业务逻辑

其实第一个问题非常容易解决,我们不是传递了一个 callback 吗?

这不就是我们的业务逻辑吗

改造一下

• setWorkerInteraval.js

export default function(callback, delay) {

  const worker = new Worker('/worker.js')



  worker.postMessage('') // 开启定时器

  // 接收 Web Worker 的消息

  worker.onmessage = function(event) {

    callback() // 定时执行业务 callback

  }

}

清除定时器

这个问题还是踩了坑的,刚开始以为 intervalID 的来源不就在 worker.js吗?

那我们只需要把它通知给主线程即可,后来发现不可行,主线程的 clearInteravl 对于 worker 的 intervalID 并不生效...

那我们换个思路,在主线程发送一个 clear 指令不就行了吗? 说干就干,思路有了,直接看代码

• worker.js

// 处理定时器逻辑

self.onmessage = function(event) {



  const intervalID = setInterval(() => {

    self.postMessage({}) // 定时通知主线程,即上文中的 xxx

  }, 1000)



  /// 收到clear消息后, 清除定时器

  if (event.data === 'clear') {

    clearInterval(intervalID)

  }



}

• setWorkerInteraval

export default function(callback, delay) {

  const worker = new Worker('/worker.js');

  // 因为 onmessage 是异步的, 所以我们要抛出一个 promise

  return new Promise((resolve) => {

    worker.postMessage('') // 开启定时器

    // 接收 Web Worker 的消息

    worker.onmessage = function(event) {

      callback() // 执行业务逻辑

    }

  })

  const clear = () => {worker.postMessage('clear')}

  return clear // 返回一个函数, 用于关闭定时器

}

让我们看下使用方式

let prev = performance.now()

const clear = setWorkerInteraval(function(){

  const offset = performance.now() - prev

  console.log('__SY__🎄 ~ setWorkerInteraval ~ offset:', offset)

  prev = performance.now()

},1000)



setTimeout(clear,5000) // 5000ms 后清除

以上代码看似没问题,但是使用下来并不生效,也就是定时器并未被清除

问题出在哪里呢?

其实我们在发送 clear 指令的时候,也会进入 self.onmessage 函数

那么此时又会新建一个 interval,而我们清空的只是当前 interval 而已

那么我们必须想个方法,使得 interval 在当前实例是唯一的

其实非常简单,借助于 JS 万物皆对象 的思想,我们的 self 不也是一个对象吗?

那我们在它上面挂载一个 interval 有何不可呢?说干就干

• worker.js

// 处理定时器逻辑

self.onmessage = function (event) {

  // 返回一个非零值 所以我们可以大胆使用 ||=

  self.intervalID ||= setInterval(() => {

    self.postMessage({}) // 定时通知主线程,即上文中的 xxx

  }, 1000)



  /// 收到clear消息后, 清除定时器

  if (event.data === 'clear') {

    clearInterval(self.intervalID)

  }

}

测试后,非常完美,至此,一个靠谱的定时器我们就完成了!

当然我们还可以把上文中的 1000ms 改成 delay 传参,直接看完成代码吧

完整代码

• worker.js (vue项目 需要放在 public 中)

// 处理定时器逻辑

self.onmessage = function (event) {

  /// 收到clear消息后, 清除定时器

  if (event.data === 'clear') {

    clearInterval(self.intervalID)

  } else {

    const delay = event.data

    self.intervalID ||= setInterval(() => {

      self.postMessage({}) // 定时通知主线程,即上文中的 xxx

    }, delay)

  }

}

• setWorkerInteraval

export default function(callback, delay) {

  const worker = new Worker('/worker.js');



    worker.postMessage(delay) // 传递 delay 延时参数

    // 接收 Web Worker 的消息

    worker.onmessage = function(event) {

      callback() // 执行业务逻辑

    }

  const clear = () => {worker.postMessage('clear')}

  return clear

}

写在最后

技术服务于业务,但最怕局限于业务

希望彦祖们在开发业务中,能获取更多更深层次的思考和能力!共勉✨

感谢彦祖们的阅读

个人能力有限

如有不对，欢迎指正🌟 如有帮助，建议小心心大拇指三连🌟

彩蛋

宁波团队还有一个资深前端hc， 带你实现海鲜自由。 欢迎彦祖们私信😚

const arr = ['我十分', '喜欢', '写', '代码'];



function sortArr(data) {

    return data.sort((a, b) => a.localeCompare(b, 'zh', { sensitivity: 'base' }))

}

sortArr(arr)

npm install pinyin

const { pinyin } = require('pinyin')



const arr = [ '我十分', '喜欢', '写', '代码' ]



const sortedWords = arr.sort((a, b) => {

    const pinyinA = pinyin(a, { style: pinyin.STYLE_NORMAL }).flat().join('')

    const pinyinB = pinyin(b, { style: pinyin.STYLE_NORMAL }).flat().join('')

    return pinyinA.localeCompare(pinyinB)

})



console.log(sortedWords)

方式3：自己实现一套映射

因为我们的文案不是确定的，且可以随意修改，所以这种方案不提倡，但是如果只有几个固定的文案，这样可以自己实现一套映射

const pinyinMap = {

    我十分: 'woshifen',

    喜欢: 'xihuan',

    写: 'xie',

    代码: 'daima',

}

const arr = [ '我十分', '喜欢', '写', '代码' ]



const sortedWords = arr.sort((a, b) => pinyinMap[a].localeCompare(pinyinMap[b]))

console.log(sortedWords)

上面三种方式，可以看的出来，第一种还是存在一定的误差，但是我还是选择了第一种实现方式，有以下几个原因

以上就是我对根据汉字拼音排序实现方案的理解，欢迎大家补充，希望大家一起进步！

一、前言

大家好！我是sum墨，一个一线的底层码农，平时喜欢研究和思考一些技术相关的问题并整理成文，限于本人水平，如果文章和代码有表述不当之处，还请不吝赐教。

在线人数统计这个功能相信大家一眼就明白是啥，这个功能不难做，实现的方式也很多，这里说一下我常使用的方式：使用Redis的有序集合(zset)实现。
核心方法是这四个：zadd、zrangeByScore、zremrangeByScore、zrem。

二、实现步骤

1. 如何认定用户是否在线？

认定用户在线的条件一般跟网站有关，如果网站需要登录才能进入，那么这种网站就是根据用户的token令牌有效性判断是否在线；
如果网站是公开的，是那种不需要登录就可以浏览的，那么这种网站一般就需要自定一个规则来识别用户，也有很多方式实现如IP、deviceId、浏览器指纹，推荐使用浏览器指纹的方式实现。

浏览器指纹可能包括以下信息的组合：用户代理字符串 (User-Agent string)、HTTP请求头信息、屏幕分辨率和颜色深度、时区和语言设置、浏览器插件详情等。现成的JavaScript库，像 FingerprintJS 或 ClientJS，可以帮助简化这个过程，因为它们已经实现了收集上述信息并生成唯一标识的算法。

使用起来也很简单，如下：

// 安装：npm install @fingerprintjs/fingerprintjs



// 使用示例：

import FingerprintJS from '@fingerprintjs/fingerprintjs';



// 初始化指纹JS Library

FingerprintJS.load().then(fp => {

  // 获取访客ID

  fp.get().then(result => {

    const visitorId = result.visitorId;

    console.log(visitorId);

  });

});

这样就可以获取一个访问公开网站的用户的唯一ID了，当用户访问网站的时候，将这个ID放到访问链接的Cookie或者header中传到后台，后端服务根据这个ID标示用户。

2. zadd命令添加在线用户

（1）zadd命令介绍
zadd命令有三个参数

key：有序集合的名称。
score1、score2 等：分数值，可以是整数值或双精度浮点数。
member1、member2 等：要添加到有序集合的成员。
例子：向名为 myzset 的有序集合中添加一个成员：ZADD myzset 1 "one"

（2）添加在线用户标识到有序集合中

// expireTime给用户令牌设置了一个过期时间

LocalDateTime expireTime = LocalDateTime.now().plusSeconds(expireTimeout);

String expireTimeStr = DateUtil.formatFullTime(expireTime);

// 添加用户token到有序集合中

redisService.zadd("user.active", Double.parseDouble(expireTimeStr), userToken);

由于一个用户可能户会重复登录，这就导致userToken也会重复，但为了不重复计算这个用户的访问次数，zadd命令的第二个参数很好的解决了这个问题。
我这里的逻辑是：每次添加一个在线用户时，利用当前时间加上过期时间计算出一个分数，可以有效保证当前用户只会存在一个最新的登录态。

3. zrangeByScore命令查询在线人数

（1）zrangeByScore命令介绍

key：指定的有序集合的名字。
min 和 max：定义了查询的分数范围，也可以是 -inf 和 +inf（分别表示“负无穷大”和“正无穷大”）。
例子：查询分数在 1 到 3之间的所有成员：ZRANGEBYSCORE myzset 1 3

（2）查询当前所有的在线用户

// 获取当前的日期

String now = DateUtil.formatFullTime(LocalDateTime.now());

// 查询当前日期到"+inf"之间所有的用户

Set userOnlineStringSet = redisService.zrangeByScore("user.active", now, "+inf");

利用zrangeByScore方法可以查询这个有序集合指定范围内的用户，这个userOnlineStringSet也就是在线用户集，它的size就是在线人数了。

4. zremrangeByScore命令定时清除在线用户

（1）zremrangeByScore命令介绍

key：指定的有序集合的名字。
min 和 max：定义了查询的分数范围，也可以是 -inf 和 +inf（分别表示“负无穷大”和“正无穷大”）。
例子：删除分数在 1 到 3之间的所有成员：ZREMRANGEBYSCORE myzset 1 3

（2）定时清除在线用户

// 获取当前的日期

String now = DateUtil.formatFullTime(LocalDateTime.now());

// 清除当前日期到"-inf"之间所有的用户

redisService.zremrangeByScore(""user.active"","-inf", now);      

由于有序集合不会自动清理下线的用户，所以这里我们需要写一个定时任务去定时删除下线的用户。

5. zrem命令用户退出登录时删除成员

（1）zrem命令介绍

key：指定的有序集合的名字。
members：需要删除的成员
例子：删除名为xxx的成员：ZREM myzset "xxx"

（2）定时清除在线用户

// 删除名为xxx的成员

redisService.zrem("user.active", "xxx");      

删除 zset中的记录，确保主动退出的用户下线。

三、小结一下

这种方案的核心逻辑就是，创建一个在线用户身份集合为key，利用用户身份为member，利用过期时间为score，然后对这个集合进行增删改查，实现起来还是比较巧妙和简单的，大家有兴趣可以试试看。

测定网速

navigator.connection.downlink 是一个用于表示当前连接下行速度的属性，它是 JavaScript 的 Network Information API 的一部分。此属性返回一个数值，单位为 Mbps（Megabits per second），表示网络的下行带宽。

例如，你可以通过以下方式使用它：

if (navigator.connection) {

    const downlink = navigator.connection.downlink;

    console.log(`当前下行速度为: ${downlink} Mbps`);

} else {

    console.log("当前浏览器不支持Network Information API");

}

需要注意的是，Network Information API 并不是所有浏览器都支持，因此在使用时最好进行兼容性检查。

在智能手机上启用振动

window.navigator.vibrate 是一个用于触发设备震动的 Web API，通常用于移动设备上。这个方法允许开发者控制设备的震动模式，它接受一个数字或一个数组作为参数。

• 如果传入一个数字，这个数字表示震动的时长（以毫秒为单位）。


• 如果传入一个数组，可以定义震动和静止的模式，例如 [200, 100, 200] 表示震动200毫秒，静止100毫秒，再震动200毫秒。

以下是一个简单的示例：

// 使设备震动 500 毫秒

if (navigator.vibrate) {

    navigator.vibrate(500);

} else {

    console.log("当前浏览器不支持震动 API");

}



// 使用数组来创建震动模式

if (navigator.vibrate) {

    navigator.vibrate([200, 100, 200, 100, 200]);

}

请注意，并不是所有的设备和浏览器都支持震动 API，因此在使用时最好确认设备的兼容性。

禁止插入文字

你可能不希望用户在输入字段中粘贴从其他地方复制的文本（请仔细考虑清楚是否真的要这样做）。通过跟踪事件paste并调用其方法preventDefault()就很容易完成了。

<input type="text"></input>

<script>

  const input = document.querySelector('input');



  input.addEventListener("paste", function(e){

    e.preventDefault()

  })



</script>

好了，现在你无法复制粘贴，必须得手动编写和输入所有的内容了

快速隐藏dom

要隐藏DOM元素，不是非得用到JavaScript。原生的HTML属性完全可以实现hidden。效果类似于添加样式display: none;。元素就从页面上消失了。

<p hidden>我在页面看不到了</p>

注意，这个技巧不适用于伪元素

快速使用定位

你知道CSS的inset属性吗？这是我们所熟悉的top，left，right和bottom的缩写版本。通过类比短语法margin或属性padding，只要一行代码就可以设置元素的所有偏移量。

/* 普通写法 */ 

div {

  position: absolute;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

}



/* inset写法 */ 

div {

  position: absolute;

  inset: 0;

}

使用简短的语法可以大大减小CSS文件的体积，这样代码看起来更干净。但是，可别忘了inset是一个布尔属性，它考虑了内容排版方向。换句话说，如果站点使用的是具有rtl方向（从右到左）的语言，那么left要变成right，反之亦然。

你不知道的Console的用法

通常我们用的最多的console.log(xxx)，其实在 JavaScript 中，console 对象提供了一些很有用的方法用于调试和查看信息。以下是一些可能不太常见的 console 用法：

禁止下拉刷新

下拉刷新是当前流行的移动开发模式。如果你不喜欢这样做，只需将overscroll-behavior-y属性的值设为contains即可达到此效果。

body {

 overscroll-behavior-y: contain;

}

这个属性对于组织模态窗口内的滚动也非常有用——它可以防止主页在到达边框时拦截滚动

使整个网页的 <body> 内容可编辑

document.body.contentEditable='true'; 是一段 JavaScript 代码，用于使整个网页的 <body> 内容可编辑。这意味着用户可以直接在浏览器中点击并编辑文本，就像在文本编辑器中一样。

以下是一些相关的要点：

示例代码：

// 启用编辑功能

document.body.contentEditable = 'true';



// 禁用编辑功能

// document.body.contentEditable = 'false';

这种功能可以非常方便地用于快速原型设计或需要快速内容编辑的应用，但在生产环境中要慎重使用。

带有Id属性的元素，会创建全局变量

在一张HTML页面中，所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量，这意味着document.getElementById像人的智齿一样显得多余了。但实际项目中最好还是老老实实该怎么写就怎么写，毕竟常规代码出乱子的机会要小得多。

<div id="test"></div>

<script>

    console.log(test)

</script>

网站平滑滚动

在 <html> 元素中添加 scroll-behavior: smooth，以实现整个页面的平滑滚动。

html{    

    scroll-behavior: smooth;  

}

:empty 表示空元素

此选择器定位空的 <p> 元素并隐藏它们

p:empty{   

   display: none;  

}

我记得五六年前，当我在 Android 开发领域尚处初出茅庐阶段之时，我曾有一个执念——想看下大公司在研发一款产品的流程和技术上跟小公司有什么区别。公司之大，对开发来说，不在于员工规模，而在于产品的用户量级。只有用户量级够大，研发过程中的小问题才会被放大。当用户量级够大，公司才愿意在技术上投入更多的人力资源。因此，在大公司里做技术，对个人的眼界、技术细节和深度的提升都有帮助。

我记得之前我曾跟同事调侃说，有一天我离职了，我可以说我毕业了，因为我这几年学到了很多。现在我想借这个机会总结下这些年在公司里经历的让我印象深刻的技术。

1、研发流程

首先在产品的研发流程上，我把过去公司的研发模式分成两种。

第一种是按需求排期的。在评审阶段一次性评审很多需求，和开发沟通后可能删掉优先级较低的需求，剩下的需求先开发，再测试，最后上线。上线的时间根据开发和测试最终完成的时间确定。

第二种是双周迭代模式，属于敏捷开发的一种。这种开发机制里，两周一个版本，时间是固定的。开发、测试和产品不断往时间周期里插入需求。如下图，第一周和第三周的时间是存在重叠的。具体每个阶段留多少时间，可以根据自身的情况决定。如果需求比较大，则可以跨迭代，但发布的时间窗口基本是固定的。

有意思的是，第二种开发机制一直是我之前的一家公司里负责人羡慕的“跑火车”模式。深度参与过两种开发模式之后，我说下我的看法。

首先，第一种开发模式适合排期时间比较长的需求。但是这种方式时间利用率相对较低。比如，在测试阶段，开发一般是没什么事情做的（有的会在这个时间阶段布置支线需求）。这种开发流程也有其好处，即沟通和协调成本相对较低。

注意！在这里，我们比较时间利用率的时候是默认两种模式的每日工作时间是相等的且在法律允许范围内。毕竟，不论哪一种研发流程，强制加班之后，时间利用率都“高”（至少老板这么觉得）。

第二种开发方式的好处：

但这种开发方式也有缺点：

做了这么多年开发，让人很难拒绝一个事实是，绝大多数互联网公司的壁垒既不是技术，也不是产品，而是“快速迭代，快速试错”。从这个角度讲，双周迭代开发机制更适应互联网公司的要求。就像我们调侃公司是给电脑配个人，这种开发模式里就是给“研发流水线”配个人，从产品、到开发、到测试，所有人都像是流水线上的一员。

2、一个需求的闭环

以上是需求的研发流程。如果把一个需求从产品提出、到上线、到线上数据回收……整个生命周期列出来，将如下图所示，

这里我整合了几个公司的研发过程。我用颜色分成了几个大的流程。相信每个公司的研发流程里或多或少都会包含其中的几个。在这个闭环里，我说一下我印象比较深刻的几个。

2.1 产品流程

大公司做产品一个显著的特点是数据驱动，一切都拿数据说话。一个需求的提出只是一个假设，开发上线之后效果评估依赖于数据。数据来源主要有埋点上报和舆情监控。

1. 数据埋点

埋点数据不仅用于产品需求的验证，也用于推荐算法的训练。因此，大公司对数据埋点的重视可以说是深入骨髓的。埋点数据也经常被纳入到绩效考核里。

开发埋点大致要经过如下流程，

• 1). 产品提出需要埋的点。埋点的类型主要包括曝光和点击等，此外还附带一些上报的参数，统计的维度包括用户 uv 和次数 pv.


• 2). 数据设计埋点。数据拿到产品要埋的点之后，设计埋点，并在埋点平台录入。


• 3). 端上开发埋点。端上包括移动客户端和 Web，当然埋点框架也要支持 RN 和 H5.


• 4). 端上验证埋点。端上埋点完成之后需要测试，上报埋点，然后再在平台做埋点校验。


• 5). 产品提取埋点数据。


• 6). 异常埋点数据修复。

由此可见，埋点及其校验对开发来说也是需要花费精力的一环。它不仅需要多个角色参与，还需要一个大数据平台，一个录入、校验和数据提取平台，以及端上的上报框架，可以说成本并不低。

2. 舆情监控

老实说，初次接触舆情监控的时候，它还是给了我一点小震撼的。没想到大公司已经把舆情监控做到了软件身上。

舆情监控就是对网络上关于该 APP 的舆情的监控，数据来源不仅包括应用内、外用户提交的反馈，还包括主流社交平台上关于该软件的消息。所有数据在整合到舆情平台之后会经过大数据分析和分类，然后进行监控。舆情监控工具可以做到对产品的负面信息预警，帮助产品经理优化产品，是产品研发流程中重要的一环。

3. AB 实验

很多同学可能对 AB 实验都不陌生。AB 实验就相当于同时提出多套方案，然后左右手博弈，从中择优录用。AB 实验的一个槽点是，它使得你代码中同时存在多份作用相同的代码，像狗皮膏药一样，也不能删除，非常别扭，最后导致的结果是代码堆积如山。

4. 路由体系建设

路由即组件化开发中的页面路由。但是在有些应用里，会通过动态下发路由协议支持运营场景。这在偏运营的应用里比较常见，比如页面的推荐流。一个推荐流里下发的模块可能打开不同的页面，此时，只需要为每个页面配置一个路由路径，然后推荐流里根据需要下发即可。所以，路由体系也需要 Android 和 iOS 双端统一，同时还要兼容 H5 和 RN.

在路由协议的定义上，我们可以参考 URL 的格式，定义自己的协议、域名、路径以及参数。以 Android 端为例，可以在一个方法里根据路由的协议、域名对原生、RN 和 H5 等进行统一分发。

2.2 开发流程

在开发侧的流程里，我印象深的有以下几个。

1. 重视技术方案和文档

我记得之前在一家公司里只文档平台就换了几个，足见对文档的重视。产品侧当然更重文档，而对研发侧，文档主要有如下几类：1). 周会文档；2).流程和规范；3).技术方案；4).复盘资料等。

对技术方案，现在即便我自己做技术也保留了写大需求技术方案先行的习惯。提前写技术方案有几个好处：

• 1). 便于事后回忆：当我们对代码模糊的时候，可以通过技术方案快速回忆。


• 2). 便于风险预知：技术方案也有助于提前预知开发过程中的风险点。前面我们说敏捷开发提前发现风险很重要，而做技术方案就可以做到这点。


• 3). 便于全面思考：技术方案能帮助我们更全面地思考技术问题。一上来就写代码很容易陷入“只见树木，不见森林”的困境。

2. Mock 开发

Mock 开发也就是基于 Mock 的数据进行开发和测试。在这里它不局限于个人层面（很多人可能有自己 Mock 数据开发的习惯），而是在公司层面将其作为一种开发模式，以实现前后端分离。典型的场景是客户端先上线预埋，而后端开发可能滞后一段时间。为了支持 Mock 开发模式，公司需要专门的平台，提供以接口为维度的 Mock 工具。当客户端切换到 Mock 模式之后，上传到网络请求在后端的网关直接走 Mock 服务器，拉取 Mock 数据而不是真实数据。

这种开发模式显然也是为了适应敏捷开发模式而提出的。它可以避免前后端依赖，减轻人力资源协调的压力。这种开发方式也有其缺点：

• 1). 数据结构定义之后无法修改。客户端上线之后后端就无法再修改数据结构。因此，即便后端不开发，也需要先投入人力进行方案设计，定义数据结构，并拉客户端进行评审。


• 2). 缺少真实数据的验证。在传统的开发模式中，测试要经过测试和 UAT 两个环境，而 UAT 本身已经比较接近线上环境，而使用 Mock 开发就完全做不到这么严谨。当我们使用 Mock 数据测试时，如果我们自己的 Mock 的数据本身失真比较严重，那么在意识上你也不会在意数据的合理性，因此容易忽视一些潜在的问题。

3. 灰度和热修复

灰度的机制是，在用户群体中选择部分用户进行应用更新提示的推送。这要求应用本身支持自动更新，同时需要对推送的达到率、用户的更新率进行统计。需要前后端一套机制配合。灰度有助于提前发现应用中存在的问题，这对超大型应用非常有帮助，毕竟，现在上架之后发现问题再修复的成本非常高。

但如果上架之后确实出现了问题就需要走热修复流程。热修复的难点在于热修复包的下发，同时还需要审核流程，因此需要搭建一个平台。这里涉及的细节比较多，后面有时间再梳理吧。

4. 配置下发

配置下发就是通过平台录入配置，推送，然后在客户端读取配置信息。这也是应用非常灵活的一个功能，可以用来下发比如固定的图片、文案等。我之前做个人开发的时候也在服务器上做了配置下发的功能，主要用来绕过某些应用商店的审核，但是在数据结构的抽象上做得比较随意。这里梳理下配置下发的细节。

• 首先，下发的配置是区分平台特征的。这包括，应用的目标版本（一个范围）、目标平台（Android、iOS、Web、H5 或者 RN）。


• 其次，为了适应组件化开发，也为了更好地分组管理，下发的配置命名时采用 模块#配置名称 的形式。


• 最后，下发的数据结构支持，整型、布尔类型、浮点数、字符串和 Json.

我自己在做配置下发的时候还遇到一个比较棘手的问题——多语言适配。国内公司的产品一般只支持中文，这方面就省事得多。

5. 复盘文化

对于敏捷开发，复盘是不可或缺的一环。有助于及时发现问题，纠正和解决问题。复盘的时间可以是定期的，在一个大需求上线之后，或者出现线上问题之后。

3、技术特点

3.1 组件化开发的痛点

在大型应用开发过程中，组件化开发的意义不仅局限于代码结构层面。组件化的作用体现在以下几个层面：

• 1). 团队配合的利器。想想几十个人往同一份代码仓库里提交代码的场景。组件化可以避免无意义的代码冲突。


• 2). 提高编译效率。对于大型应用，全源码编译一次的时间可能要几十分钟。将组件打包成 aar 之后可以减少需要编译的代码的数量，提升编译效率。


• 3). 适应组织架构。将代码细分为各个组件，每个小团队只维护自己的组件，更方便代码权限划分。

那么，在实际开发过程中组件化开发会存在哪些问题呢？

1. 组件拆分不合理

这在从单体开发过渡到组件化开发的应用比较常见，即组件化拆分之后仍然存在某些模块彼此共用，导致提交代码的时候仍然会出现冲突问题。冲突包含两个层面的含义，一是代码文件的 Git 冲突，二是在打包合入过程中发布的 aar 版本冲突。比较常见的是，a 同学合入了代码到主干之后，b 同学没有合并主干到自己的分支就打包，导致发布的 aar 没有包含最新的代码。这涉及打包的问题，是另一个痛点问题，后面再总结。

单就拆分问题来看，避免上述冲突的一个解决办法是在拆分组件过程中尽可能解耦。根据我之前的观察，存在冲突的组件主要是数据结构和 SPI 接口。这是我之前公司没做好的地方——数据结构仓库和 SPI 接口是共用的。对于它们的组件化拆分，我待过的另一家公司做得更好。他们是如下拆分的，这里以 A 和 B 来命名两个业务模块。那么，在拆分的时候做如下处理，

模块：A-api

模块：A

模块：B-api

模块：B

即每个业务模块拆分成 api 和实现两部分。api 模块里包含需要共享的数据结构和 SPI 接口，实现模块里是接口的具体实现。当模块 A 需要和模块 B 进行交互的时候，只需要依赖 B 的 api 模块。可以参考开源项目：arch-android.

2. 打包合入的痛点

上面我们提到了一种冲突的情况。在我之前的公司里，每个组件有明确的负责人，在每个迭代开发的时候，组件负责人负责拉最新 release 分支。其他同学在该分支的开发需要经过负责人同意再合入到该分支。那么在最终打包的过程中，只需要保证这个分支的 aar 包含了全部最新的代码即可。也就是说，这种打包方式只关心每个 aar 的版本，而不关心实际的代码。因为它最终打包是基于 aar 而不是全源码编译。

这种打包方式存在最新的分支代码没有被打包的风险。一种可行的规避方法是，在平台通过 Git tag 和 commit 判断该分支是否已经包含最新代码。此外，还可能存在某个模块修改了 SPI 接口，而另一个模块没有更新，导致运行时异常的风险。

另一个公司是基于全源码编译的。不过，全源码编译只在最终打包阶段或者某个固定的时间点进行，而不是每次合入都全源码编译（一次耗时太久）。同时，虽然每个模块有明确的负责人，但是打包的 aar 不是基于当前 release 分支，而是自己的开发分支。这是为了保障当前 release 分支始终是可用的。合并代码到 release 分支的同时需要更新 aar 的版本。但它也存在问题，如果合并到 release 而没有打包 aar，那么可能导致 release 分支无法使用。如果打包了 aar 但是此时其他同学也打包了 aar，则可能导致本次打包的 aar 落后，需要重新打包。因此，这种合入方式也是苦不堪言。

有一种方法可以避免上述问题，即将打包和合入事件设计成一个消息队列。每次合入之前自动化执行上述操作，那么自然就可以保证每次操作的原子性（因为本身就是单线程的）。

对比两种打包和合入流程，显然第二种方式更靠谱。不过，它需要设计一个流程。这需要花费一点功夫。

3. 自动化切源码

我在之前的一家公司开发时，在开发过程中需要引用另一个模块的修改时，需要对另一个模块打 SNAPSHOT 包。这可行，但有些麻烦。之前我也尝试过手动修改 settings.gradle 文件进行源码依赖开发。不过，太麻烦了。

后来在另一个公司里看到一个方案，即动态切换到源码开发。可以将某个依赖替换为源码而只需要修改脚本即可。这个实践很棒，我已经把它应用到独立开发中。之前已经梳理过《组件化开发必备：Gradle 依赖切换源码的实践》.

3.2 大前端化开发

1. React Native

如今的就业环境，哪个 Android 开发不是同时会五六门手艺。跨平台开发几乎是不可避免的。

之前的公司为什么选择 React Native 而不是 Flutter 等新锐跨平台技术呢？我当时还刻意问了这个问题。主要原因：

• 1). 首先是 React Native 相对更加成熟，毕竟我看了下 Github 第一个版本发布已经是 9 年前的事情了，并且至今依旧非常活跃。


• 2). React Native 最近更新了 JavaScript 引擎，页面启动时间、包大小和内存占用性能都有显著提升。参考这篇文章《干货 | 加载速度提升15%，携程对RN新一代JS引擎Hermes的调研》.


• 3). 从团队人才配置上，对 React Native 熟悉的更多。

React Native 开发是另一个领域的东西，不在本文讨论范围内。每个公司选择 React Native 可能有它的目的。比如，我之前的一家公司存粹是为了提效，即一次开发双端运行。而另一家公司，则是为了兼顾提效和动态化。如果只为提效，那么本地编译和打包 js bundle 就可以满足需求。若要追求动态化，就需要搭建一个 RN 包下发平台。实际上，在这个公司开发 RN 的整个流程，除了编码环节，从代码 clone 到最终发布都是在平台上执行的。平台搭建涉及的细节比较多，以后用到再总结。对于端侧，RN 的动态化依赖本地路由以及 RN 容器。

2. BFF + DSL

DSL 是一种 UI 动态下发的方案。相比于 React Native，DSL 下发的维度更细，是控件级别的（而 RN 是页面级别的）。简单的理解是，客户端和后端约定 UI 格式，然后按照预定的格式下发的数据。客户端获取到数据之后渲染。DSL 不适合需要复杂动画的场景。若确实要复杂动画，则需要自定义控件。

工作流程如下图中左侧部分所示，右侧部分是每个角色的责任。

客户端将当前页面和位置信息传给 DSL 服务器。服务器根据上传的信息和位置信息找到业务接口，调用业务接口拉取数据。获取到数据后根据开发过程中配置的脚本对数据进行处理。数据处理完成之后再交给 DSL 服务器渲染。渲染完成之后将数据下发给客户端。客户端再根据下发的 UI 信息进行渲染。其中接口数据的处理是通过 BFF 实现的，由客户端通过编写 Groovy 脚本实现数据结构的转换。

这种工作流程中，大部分逻辑在客户端这边，需要预埋点位信息。预埋之后可以根据需求进行下发。这种开发的一个痛点在于调试成本高。因为 DSL 服务器是一个黑盒调用。中间需要配置的信息过多，搭建 UI 和编写脚本的平台分散，出现问题不易排查。

总结

所谓他山之石，可以攻玉。在这篇文章中，我只是选取了几个自己印象深刻的技术点，零零碎碎地写了很多，比较散。对于有这方面需求的人，会有借鉴意义。

本文使用threejs开发一款风力发电机物联可视化系统，包含着色器效果、动画、补间动画和开发过程中使用模型材质遇到的问题，内含大量gif效果图，

视频讲解及源码见文末

技术栈

• three.js 0.165.0


• vite 4.3.2


• nodejs v18.19.0

效果图

一镜到底动画

切割动画

线稿动画

外壳透明度动画

展开齿轮动画

发光线条动画

代码及功能介绍

着色器

文中用到一个着色器，就是给模型增加光感的动态光影

创建顶点着色器 vertexShader:

varying vec2 vUv;

void main() {

    vUv = uv;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

}

创建片元着色器 vertexShader:

varying vec2 vUv;

uniform vec2 u_center; // 添加这一行  



void main() {

    // 泡泡颜色

    vec3 bubbleColor = vec3(0.9, 0.9, 0.9); // 乳白色

    // 泡泡中心位置

   vec2 center = u_center;  

    // 计算当前像素到泡泡中心的距离

    float distanceToCenter = distance(vUv, center);

    // 计算透明度，可以根据实际需要调整

    float alpha = smoothstep(0.1, 0.0, distanceToCenter);



    gl_FragColor = vec4(bubbleColor, alpha);

创建着色器材质 bubbleMaterial

export const bubbleMaterial = new THREE.ShaderMaterial({

    vertexShader: vertexShader,

    fragmentShader: fragmentShader,

    transparent: true, // 开启透明

    depthTest: true, // 开启深度测试

    depthWrite: false, // 不写入深度缓冲

    uniforms: {

        u_center: { value: new THREE.Vector2(0.3, 0.3) } // 添加这一行  

    },

});

从代码中可以看到 uniform声明了一个变量u_center，目的是为了在render方法中动态修改中心位置，从而实现动态光效的效果，

具体引用 render 方法中

 // 更新中心位置（例如，每一帧都改变）  

    let t = performance.now() * 0.001; 

    bubbleMaterial.uniforms.u_center.value.x = Math.sin(t) * 0.5 + 0.5; // x 位置基于时间变化  

    bubbleMaterial.uniforms.u_center.value.y = Math.cos(t) * 0.5 + 0.5; // y 位置基于时间变化  

官网案例 # Uniform，详细介绍了uniform的使用方法，支持通过变量对着色器材质中的属性进行改变

从模型上可能看不出什么，下面的图是在一个圆球上加的这个效果

着色器中有几个参数可以自定义也可以自己修改， float alpha = smoothstep(0.6, 0.0, distanceToCenter);中的smoothstep 是一个常用的函数，用于在两个值之间进行平滑插值。具体来说，smoothstep(edge0, edge1, x) 函数会计算 x 在 edge0 和 edge1 之间的平滑过渡值。当 x 小于 edge0 时，返回值为 0；当 x 大于 edge1 时，返回值为 1；而当 x 在 edge0 和 edge1 之间时，它返回一个在 0 和 1 之间的平滑过渡值。

切割动画

切割动画使用的是数学库平面THREE.Plane和属性 constant，通过修改constant值即可实现动画，从normal法向量起至constant的距离为可展示内容。

从原点到平面的有符号距离。 默认值为 0.

constant取模型的box3包围盒的min值，至max值做补间动画，以下是代码示意

const wind = windGltf.scene

const boxInfo = wind.userData.box3Info;



const max = boxInfo.worldPosition.z + boxInfo.max.z

const min = boxInfo.worldPosition.z + boxInfo.min.z

    

let tween = new TWEEN.Tween({ d: min - 0.2 })

    .to({ d: max + 0.1 }, 1000 * 2)

    .start()

    .onUpdate(({ d }) => {

        clippingPlane.constant = d

    })

详看切割效果图

图中添加了切割线的辅助线，可以通过右侧的操作面板显示或隐藏。

模型材质需要注意的问题

由于齿轮在风车的内容部，并且风车模型开启了transparent=true，那么计算透明度深度就会出现问题，首先要设置 depthWrite = true，开启深度缓存区，renderOrder = -1，

这个值将使得scene graph（场景图）中默认的的渲染顺序被覆盖， 即使不透明对象和透明对象保持独立顺序。 渲染顺序是由低到高来排序的，默认值为0。

threejs的透明材质渲染和不透明材质渲染的时候，会互相影响，而调整renderOrder顺序则可以让透明对象和不透明对象相对独立的渲染。

depthWrite对比

renderOrder 对比

自定义动画贝塞尔曲线

众所周知，贝塞尔曲线通常用于调整关键帧动画，创建平滑的、曲线的运动路径。本文中使用的tweenjs就内置了众多的运动曲线easing(easingFunction?: EasingFunction): this;类型，虽然有很多内置，但是毕竟需求是无限的，接下来介绍的方法就是可以自己设置动画的贝塞尔曲线，来控制动画的执行曲线。

具体使用

// 使用示例

const controlPoints = [    { x: 0 },    { x: 0.5 },    { x: 2 },    { x: 1 }];

const cubicBezier = new CubicBezier(controlPoints[0], controlPoints[1], controlPoints[2], controlPoints[3]);



let tween = new TWEEN.Tween(edgeLineGr0up.scale)

.to(windGltf.scene.scale.clone().set(1, 1, 1), 1000 * 2)

.easing((t) => {

    return cubicBezier.get(t).x

})

.start()

.onComplete(() => {

    lineOpacityAction(0.3)

    res({ tween })

})

在tween的easing的回调中添加一个方法，方法中调用了cubicBezier，下面就介绍一下这个方法

源码

[p0] – 起点  

[p1] – 第一个控制点  

[p2] – 第二个控制点  

[p3] – 终点

export class CubicBezier {

    private p0: { x: number; };

    private p1: { x: number; };

    private p2: { x: number; };

    private p3: { x: number; };



    constructor(p0: { x: number; }, p1: { x: number; }, p2: { x: number; }, p3: { x: number; }) {

        this.p0 = p0;

        this.p1 = p1;

        this.p2 = p2;

        this.p3 = p3;

    }



    get(t: number): { x: number; } {

        const p0 = this.p0;

        const p1 = this.p1;

        const p2 = this.p2;

        const p3 = this.p3;



        const mt = 1 - t;

        const mt2 = mt * mt;

        const mt3 = mt2 * mt;

        const t2 = t * t;

        const t3 = t2 * t;



        const x = mt3 * p0.x + 3 * mt2 * t * p1.x + 3 * mt * t2 * p2.x + t3 * p3.x;



        return { x };

    }

}

类CubicBezier支持get方法，通过四个关键点位信息，绘制三次贝塞尔曲线，参数t在0到1之间变化，当t从0变化到1时，曲线上的点从p0平滑地过渡到p3。

mt = 1 - t;：这是t的补数（1减去t）。
mt2 = mt * mt; 和 mt3 = mt2 * mt;：计算mt的平方和立方。
t2 = t * t; 和 t3 = t2 * t;：计算t的平方和立方。

这是通过取四个点的x坐标的加权和来完成的，其中权重是基于t的幂的。具体来说，p0的权重是(1-t)^3，p1的权重是3 * (1-t)^2 * t，p2的权重是3 * (1-t) * t^2，而p3的权重是t^3。

{ x: 0 },{ x: 0.5 },{ x: 2 },{ x: 1 } 这组数据形成的曲线效果是由start参数到end的两倍参数再到end参数

具体效果如下

齿轮

齿轮动画

模型中自带动画

源码中有一整套的动画播放类方法，HandleAnimation，其中功能包含播放训话动画，切换动画，播放一次动画，绘制骨骼，镜头跟随等功能。

具体使用方法：

   // 齿轮动画

     /**

     * 

     * @param model 动画模型

     * @param animations 动画合集

     */

    motorAnimation = new HandleAnimation(motorGltf.scene, motorGltf.animations)

    // 播放动画 take 001 是默认动画名称

    motorAnimation.play('Take 001')

在render中调用

motorAnimation && motorAnimation.upDate()

齿轮展开（补间动画）

补间动画在齿轮展开时调用，使用的tweenjs，这里讲一下定位运动后的模型位置，使用# 变换控制器（TransformControls），代码中有封装好的完整的使用方法，在TransformControls.ts中，包含同时存在轨道控制器时与变换控制器对场景操作冲突时的处理。

使用方法：

/**

 * @param mesh 受控模型

 * @param draggingChangedCallback  操控回调

 */

 TransformControls(mesh, ()=>{

    console.log(mesh.position)

})

齿轮发光

发光效果方法封装在utls/index.ts中的unreal方法，使用的是threejs提供的虚幻发光通道RenderPass,UnrealBloomPass,以及合成器EffectComposer，方法接受参数如下

// params 默认参数

const createParams = {

    threshold: 0,

    strength: 0.972, // 强度

    radius: 0.21,// 半径

    exposure: 1.55 // 扩散

};



/**

 * 

 * @param scene 渲染场景

 * @param camera 镜头

 * @param renderer 渲染器

 * @param width 需要发光位置的宽度

 * @param height 发光位置的高度

 * @param params 发光参数

 * @returns 

 */

调用方法如下：

const { finalComposer: F,

       bloomComposer: B,

       renderScene: R, bloomPass: BP } = unreal(scene, camera, renderer, width, height, params)

    finalComposer = F

    bloomComposer = B

    renderScene = R

    bloomPass = BP

    bloomPass.threshold = 0

除了调用方法还有一些需要调整的地方，比如发光时模型什么材质，又或者不发光时又是什么材质，这里需要单独定义，并在render渲染函数中调用

 if (guiParams.isLight) {

        if (bloomComposer) {

            scene.traverse(darkenNonBloomed.bind(this));

            bloomComposer.render();

        }

        if (finalComposer) {

            scene.traverse(restoreMaterial.bind(this));

            finalComposer.render();

        }

    }

在scene.traverse的回调中，检验模型是否为发光体，再进行材质的更换，这里用的标识是 object.userData.isLight为true时，判定该物体为发光物体。其他物体则不发光

回调方法

function darkenNonBloomed(obj: THREE.Mesh) {

    if (bloomLayer) {

        if (!obj.userData.isLight && bloomLayer.test(obj.layers) === false) {

            materials[obj.uuid] = obj.material;

            obj.material = darkMaterial;

        }

    }



}



function restoreMaterial(obj: THREE.Mesh) {

    if (materials[obj.uuid]) {

        obj.material = materials[obj.uuid];

        // 用于删除没必要的渲染

        delete materials[obj.uuid];

    }

}

再场景的右上角我们新增了几个参数，用来调整线条的发光效果，下面通过动图看一下，图片有点大，请耐心等待加载

好啦，本篇文章到此，如看源码有不明白的地方，可私信~

最近正在筹备工具库，以上可视化常用的方法都将涵盖在里面

历史文章

three.js——商场楼宇室内导航系统 内附源码

three.js——可视化高级涡轮效果+警报效果 内附源码

高德地图巡航功能 内附源码

three.js——3d塔防游戏 内附源码

three.js+物理引擎——跨越障碍的汽车 可操作 可演示

百度地图——如何计算地球任意两点之间距离 内附源码

threejs——可视化地球可操作可定位

three.js 专栏

源码及讲解

源码 http://www.aspiringcode.com/content?id=…

体验地址：display.aspiringcode.com:8888/html/171422…