昨晚看了一篇“传说中”的“世界上最健康的作息时间表”，开始纠结自己还要不要5点半起床。

都说程序员这一行，猝死概率极高，究其原因还是加班太狠、作息不规律、缺乏运动....

今天和大家分享一下这篇文章，还是非常值得参考的，随时提醒自己吧，毕竟身体可是自己的哦。

7:30

起床

英国威斯敏斯特大学的研究人员发现，那些在早上5:22-7:21分起床的人，其血液中有一种能引起心脏病的物质含量较高，因此，在7:21之后起床对身体健康更加有益。

(我是不是要调整作息时间了，不再是每天5点半起床，改成7点半吧~)

开灯

（这也是我家小孩晚上睡觉最爱说的话，晚上爱开灯睡觉，每次关灯讲故事，总会说：“开灯”。究其原因还是小孩不想睡觉，所以要“开灯”）

为什么要说上面小孩要开灯的例子呢？发现国外有位科学家也反馈了类似的理论：“一醒来，就将灯打开，这样将会重新调整体内的生物钟，调整睡眠和醒来模式。”拉夫堡大学睡眠研究中心教授吉姆·霍恩说。

开关灯就是一种信号：关灯的信号是告诉身体要睡觉，开灯的信号是告诉身体要起床啦。

喝水

喝一杯水：水是身体内成千上万化学反应得以进行的必需物质。早上喝一杯清水，可以补充晚上的缺水状态。

7:30-8:00

在早饭之前刷牙：“在早饭之前刷牙可以防止牙齿的腐蚀，因为刷牙之后，可以在牙齿外面涂上一层含氟的保护层。

要么，就等早饭之后半小时再刷牙。”英国牙齿协会健康和安全研究人员戈登·沃特金斯说。

8:00-8:30

吃早饭：“早饭必须吃，因为它可以帮助你维持血糖水平的稳定。” 伦敦大学国王学院营养师凯文·威尔伦说。早饭可以吃燕麦粥等，这类食物具有较低的血糖指数。

（我起床早的很大一部分动力就是吃早饭，晚上9点之后不吃东西只喝水。饿了就劝自己早点睡觉，明天吃一顿丰盛的早饭）

自从我坚持5点半起床和每天晚上9点之后不吃东西以后，体重从最高的170斤+，降到了最近的150斤-

8:30-9:00

避免运动

来自布鲁奈尔大学的研究人员发现，在早晨进行锻炼的运动员更容易感染疾病，因为免疫系统在这个时间的功能最弱。

(看来我不晨练是对的，哈哈哈~)

步行上班

马萨诸塞州大学医学院的研究人员发现，每天走路的人，比那些久坐不运动的人患感冒病的几率低25%。

（这段时间应该还在地铁上~）

9:30

开始一天中最困难的工作：纽约睡眠中心的研究人员发现，大部分人在每天醒来的一两个小时内头脑最清醒。

10:30

让眼睛离开屏幕休息一下：如果你使用电脑工作，那么每工作一小时，就让眼睛休息3分钟。

11:00

吃点水果：这是一种解决身体血糖下降的好方法。吃一个橙子或一些红色水果，这样做能同时补充体内的铁含量和维生素C含量。

12:00-13:00

干饭：你需要一顿可口的午餐，并且能够缓慢地释放能量。“烘烤的豆类食品富含纤维素，番茄酱可以当作是蔬菜的一部分。”维伦博士说。 （干饭人，干饭魂，干饭人吃饭得用盆）

13:00-14:00

午休一小会儿：雅典的一所大学研究发现，那些每天中午午休30分钟或更长时间，每周至少午休3次的人，因心脏病死亡的几率会下降37%。

16:00

喝杯酸奶：这样做可以稳定血糖水平。在每天三餐之间喝些酸牛奶，有利于心脏健康。 （看来我爱喝酸奶是个好习惯呀）

17:00-19:00

锻炼身体：根据体内的生物钟，这个时间是运动的最佳时间，舍菲尔德大学运动学医生瑞沃·尼克说。 （没错，这个时间段该下班了，通勤路上多走一走，少开车、少骑车）

19:30

晚餐少吃点：晚饭吃太多，会引起血糖升高，并增加消化系统的负担，影响睡眠。晚饭应该多吃蔬菜，少吃富含卡路里和蛋白质的食物。吃饭时要细嚼慢咽。

21:45

这个时间看会儿手机、电视放松一下，有助于睡眠，但要注意，尽量不要躺在床上看电视，这会影响睡眠质量。

或者睡前读读书，也挺好，正好我最近搞了免费送书活动，感兴趣可以参与一下：免费送3本书，肯定有你喜欢的

23:00

洗个热水澡：“体温的适当降低有助于放松和睡眠。”拉夫堡大学睡眠研究中心吉姆·霍恩教授说。

23:30

上床睡觉：如果你早上7点30起床，现在入睡可以保证你享受8小时充足的睡眠。

看到这里，我准备调整作息了，不再5点半就起床了，怕伤害我宝贵的小心脏。

时间、健康的小常识

要知道，任何试图更改生物钟的行为，都将给身体留下莫名其妙的疾病，等到20、30年之后再后悔，已经来不及了。下面再补充一些和时间、健康有关的小常识，继续供大家参考：

• 晚上9-11点为免疫系统（淋巴）排毒时间，此段时间应安静或听音乐。

• 晚间11-凌晨1点，肝的排毒，需在熟睡中进行。

• 凌晨1-3点，胆的排毒，亦同。

• 凌晨3-5点，肺的排毒。此即为何咳嗽的人在这段时间咳得最剧烈，因排毒动作已走到肺；不应用止咳药，以免抑制废积物的排出。

• 凌晨5-7点，大肠的排毒，应上厕所排便。

• 凌晨7-9点，小肠大量吸收营养的时段，应吃早餐。疗病者最好早吃，在6点半前，养生者在7点半前，不吃早餐者应改变习惯，即使拖到9、10点吃都比不吃好。

• 半夜至凌晨4点为脊椎造血时段，必须熟睡，不宜熬夜。

参考链接：sleepyocean.github.io/pages/55d14…

你的作息时间是怎么样的，或者你还知道哪些保持健康的好习惯，欢迎在评论区留言~

作者：王中阳Go
来源：juejin.cn/post/7200779100124921912

在vue中，需要绑定触发的事件

<div
  id="testchatBox"
  class="chatWrap"
  :style="{paddingTop: chatScroollTop + 'px'}"
  @touchstart="touchStart" 
  @touchmove="touchMove"
  @touchend="touchEnd">
</div>

代码片段使用到了三个回调函数：

• touchstart: 手指触摸到屏幕的那一刻的时候

• touchmove: 手指在屏幕上移动的时候

• touchend: 手指离开屏幕的时候

从paddingTop可以看出，我们是通过控制这个容器距离的顶部的padding来实现下拉的效果。所以说我们的重调就是通过上面的三个回调函数来确定chatScroollTop的值。

通过chatScroollTop 这个命名就可以知道，我们这个下拉刷新是用在聊天框容器当中.

我们需要使用这些变量：

data() {
  return {
    chatScroollTop: 0, // 容器距离顶部的距离 
    isMove: false, // 是否处于touchmove状态
    startY: 0, // 当前手指在屏幕中的y轴值
    pageScrollTop: 0, // 滚动条当前的纵坐标
    
  }
}

三个回调函数对应三个阶段，而我们核心代码也分为三个部分：

第一部分：初始化当前容器的到顶部的距离,以及初始化当前是否处于滑动的状态,并获取当前滚动条的纵坐标。

touchStart(e) {
  // e代表该事件对象，e.targetTouches[0].pageY可以拿到手指按下的 y轴点
  this.startY = e.targetTouches[0].pageY
  // 开启下拉刷新状态
  this.isMove = false
  this.pageScrollTop = document.documentElement && document.documentElement.scrollTop
}

第二部分：根据当前手指当前距离触摸屏幕时刻的纵坐标差来确定容器和顶部的距离。但是由于不能一直的滑动，所以给了一个0 -> 80的氛围。为了让滑动更加的有趣，添加了一个step步进值来调整滑动的距离比例，所谓的距离比例就是手指距离一开始的距离越远，那么容量跟着滑动的距离就越短。实现一个类似阻尼的效果。

touchMove(e) {
  // 这个 touchMove，只要页面在动都会发生的，所以 touching就起作用了
  // 获取移动的距离
  let diff = e.targetTouches[0].pageY - this.startY
  let step = 60
  if (diff > 0 && diff < 80 && this.pageScrollTop === 0) {
     step++ // 越来越大
     this.chatScroollTop += (diff / (step * 0.1)) // 越向下给人的阻力感越大
     this.isMove = true
  }
}

第三部分：手指松开之后，给一个距离顶部的距离是为了添加加载滚动条。

  touchEnd() {
    if(this.isMove) {
      this.chatScroollTop = 40
      this.downCallback() // api拉取数据
    }
  }
  async downCallback() {
    try {
       // 拿数据 
    } catch() {} 
    finall{
      this.chatScrollTop = 0
    }
  }

作者：砂糖橘加盐
来源：juejin.cn/post/7200388232106704952

近日脉脉出现热帖，传闻小米今年年终奖大打折扣，不如被裁员拿N+2的赔偿有性价比。

众所周知，小米在2022年底进行了大规模裁员，涉及多个业务部门。但是赔偿政策比较良心，赔偿金额按N+2计算，未休完的年假按照双倍金额折算赔偿。

同时，小米的年终奖由以往的年前发放改为了3月发放。小米对外宣传的年终奖普遍是两个月，按照绩效浮动。但是从本次的绩效结果和年终奖数量来看，小米的年终奖情况极有可能打了5折或者3折，远远不及员工的预期。

来源：mp.weixin.qq.com/s/Ap9fwG_-ri7JMFo5pAoSdw

这本来是一篇柯里化的介绍文章，但是在我准备例子的时候，越写越不知道自己写什么。因为柯里化这个东西我现在无法真正的理解。所以这篇文章的标题其实是一个疑问句。

一、柯里化是什么？

有这么一道面试题：*实现一个add函数 满足add(1,2,3)与add(1)(2)(3)结果相同。*

实现如下：

const addCurry = (a) => (b) => (c) => a + b + c;
console.log(addCurry(1)(2)(3)) // 6

// 等同于
const addCurry = function (a) {
  return function (b) {
    return function (c) {
      return a + b + c;
    }
  }
}

就是利用闭包 的特性，函数运行之后不马上销毁对象来实现的。

再来一个进阶的，如果要同时满足add(1)(2, 3)、add(1, 2)(3)。实现如下：

const curry = (fn, ...args) => 
    // 函数的参数个数可以直接通过函数数的.length属性来访问
    args.length >= fn.length // 这个判断很关键！！！
    // 传入的参数大于等于原始函数fn的参数个数，则直接执行该函数
    ? fn(...args)
    /**
     * 传入的参数小于原始函数fn的参数个数时
     * 则继续对当前函数进行柯里化，返回一个接受所有参数（当前参数和剩余参数） 的函数
    */
    : (..._args) => curry(fn, ...args, ..._args)

function add1(x, y, z) {
    return x + y + z
}
const add = curry(add1)
console.log(add(1, 2, 3)) // 6
console.log(add(1)(2)(3)) // 6
console.log(add(1, 2)(3)) // 6
console.log(add(1)(2, 3)) // 6

上面将fn(a, b, c) ⇒ fn(a)(b)(c)的过程就是柯里化。把前后两者当成一个黑盒子，它们就是完全等价的。

简单总结一下：

柯里化用在工具函数中，提高了函数使用的灵活性和可读性。

二、为什么我老记不住柯里化

因为我只当它是面试的知识点，而不是JS函数式的知识点。

我是这么记忆它的，通过面试题来进行记忆。看到对应的题目就会想到curry()函数。什么是八股文，就是固定的模版，我只用把题干中的参数放入函数当中。和我读书的时候做题很像，看到不同的题目，脑中切换对应的公式，然后从题干中找到变量，将其放入公式当中。这不正是应试。

所以每次面试完之后，就把这个东西给忘得一干二净。下一次面试的时候再来背一次，如此循环，周而复始。

面向面试去学习，不去真正的理解它，平时工作中真遇到了对应场景自然想不到。前端是一门手艺活，不去使用又怎么能够会呢？

JS是一个多范式的语法，柯里化就是我们要学习函数式的重要概念。

也就意味着我们想要真正的学会柯里化，必须要理解函数式解决了问题，它在我们写业务代码的时候如何运用上。

想要真正的理解柯里化的，我们需要知道「多参数函数」和「单参数函数」的概念。想要理解柯里化的作用，我们需要知道「函数组合」是什么？它相比其他方式能够带来什么优点。

我们在学习一个知识点的时候，它不是孤立的一个点，它不是为了面试题而存在的。知识点之间是有联系的，我们要做的就是将这些知识点串联起来，形成自己的知识体系。

三、如何更近一步的理解柯里化

仅就柯里化而言，我们需要学习函数式的思考逻辑，如何学习呢？

在《JavaScript忍者秘籍》说，函数是一等公民。这个是JS具有写函数式的必要条件。

这也意味着JS这种非纯粹的函数式语言仅仅是模拟罢了。和设计模式一样，脱胎于Java，多数设计模式对于JS的使用场景而言根本没有意义，甚至扭曲了本来的意义。

所以说，我们只有学习一门函数式的语言才能够真正的理解函数式，才能够更加的理解为何要柯里化。

正如设计模式之于Java，它本来就是基于Java开发而总结的。不通过Java来学习设计模式，而直接使用JS来学习，理解起来的难度是大于学习一个语言的难度的。

为了理解一些概念就要去学习一门语言么？

如果觉得学习语言已经是一个门槛的话，那么或许真如别人说的那样，前端就是切图仔了。

共勉！

作者：砂糖橘加盐
来源：juejin.cn/post/7204031026338414648

缘由

最近有次开会，谈到个人成长，也涉及到绩效的评定，大家探讨怎么拿到比较好的绩效，怎么有效的成长。有些同学提出了思考的这项能力，理论依据是通过对比，就是普通同学跟比较好的同学他们之间的差异是思考能力。

我是认可这种说法的，但是太泛了，有些东西一旦虚了就容易没有发力点。比如努力会有成就，那往哪方面努力呢？那努力一定会有收获吗？答案显而易见是否定的。

把蛋糕做大

1、角色角度

一般研发团队内部分几种：业务工程师、TL、架构师

业务工程师又分几个层次：第一层可以把活干好，任务按时交付；第二层对业务有较深理解，比如说对当前业务专业内容，对整个链路有清晰的了解，这个是为了解决问题的时候更加快捷；第三个层次是有pm的意识，大部分公司还是pm来主导，如果pm经验比较少，那么很容易把项目带偏了，研发如果有能力还是要具备pm意识。

TL：我认为它职责除了搞技术，还有就是管理，相当于资源管理者，撮合各方去完成任务

那么TL我认为比工程师多了一个管理的职责，还有项目管理、规划，团队任务拆分。技术上也不再局限个人，需要审查团队代码，制定代码规范，各个项目核心代码设计审查。

架构师：微软把架构师分为3种：企业架构师、解决方案架构师、基础架构师。日常最常见的就是后两者。解决方案架构师，比如说梳理整个功能的交互，系统之间的交互，制定合理的技术方案，思考风险点、扩容机制、落地关键步骤，它跟业务工程师又不一样，你需要具备知识面更广以应对各种突发情况，有所备案。

基础架构师，是为了规范各个团队之间协作，制定好规范，封装基础工具包，建设基础设施，让各个研发团队井井有条的运作。它更不一样了，它通过规范、框架来约束开发者动作，它不再局限项目或者某个团队，相当于房子的框架，发挥的作用也更大。

总结时刻

1、把蛋糕做大

你说思考能力是里面层次的影响因素，没有错，但是它放哪里都没有错，那就是没有意义的一个东西。我认为是把蛋糕做大。从上面几个例子，都在告诉我们他们产出的价值都在一层一层的叠加，这里面确实有思考的结果，但是如果思考的东西没有价值，那思考的意义在哪里？或者说思考出来的东西大佬不看好，那又有什么用？

把蛋糕做大，第一层意思就是价值在哪里，该往哪个方向去思考，第二层才是往下去推。

很忌讳一点：为了思考而思考，跟为了技术而技术一个道理。最近遇到一些不太愉快的事情，就是我整理个慢查询东西，一个同学觉得有些是在sql平台查的不需要优化，我觉得这个可以商量不用优化。但是有些同学非要揪着这些点，让我画个数据库架构图，里面select还要统一成dml。

虽然我了解我们数据库架构，它对慢查询改进很大作用吗？我能依靠这个去改架构吗？为了解释yearming平台sql不需要优化我们在那里搞了一天，目的体现有独特思考能力，这跟我的理念冲突了。

把蛋糕做大，我认为做技术有一点就是有成体系，有同学问我，这个项目你跟其他同学做有什么区别？慢查询里面可以发现团队里面连自己数据库规范都没有，包括一些索引都是重复的，需要推动团队规范建设，推动慢查询机制，这就是把蛋糕做大。

包括扣着读写分离不放，我因为主从节点说成读写，揪着不放，不要怀疑我的八股文，19年我面网易、阿里不虚的，只不过平时缺少知识点跟实际应用，揪着这些东西不可能把蛋糕做大。我画了这张图为了跟一个同学解释yearming的慢查询不需要优化，那我其他事情还用不用做了是吧。

2、提升特定的品质

每个岗位都有对应的要求，比如说业务工程师，那么业务能力是要拉满的；比如管理者，对项目管理，资源分配，推动事情能力拉满的。并不是我偏偏要去搞思考能力，逻辑是某个岗位特定的品质拉满。

富人跟穷人本质区别是什么？网上大部分人答案是思维方式不同。这里引用北京大爷的话，穷人变富人，那是很小几率，大富靠命，小富是心态好，知足常乐。

从上面的例子来看，并不是通过两个人对比，就可以看出个所以然。而是需要从群体来看，才能看清。

通才往往是平庸者，偏才成就会更突出，我认为这个世界并不是要你什么技能都去拉满，比如业务工程师很有思考能力，你都不近需求端，你思考对业务作用不是很大，而是在业务场景下技术思考会更有价值，就是这个场景怎么设计会更好。（一般公司还是业务驱动技术）

不同岗位拉满的技能也不一样

3、有时需要点运气，需要点机会

我身边很多业界大佬的，以前跟我聊的有些是技术TL、大厂的leader、开源社区头头，除了本身优秀之外，我认为还是需要点运气，刚好有那么一个机会去来当攻坚人，有机会去大厂磨练，在这之前需要练好自身的本事～

就像哪个富婆忽然看上我是吧，哈哈哈，赶紧把你们的富婆通讯录交出来～

成长的方向

1、不止是思考，而是有价值的思考

比如夏天我穿个短裤跟穿个长裤，对我影响不大，这确实可以体现思考多了，但是意义不大。

2、不要去乱点技能，要有自己的见解，发展特定技能

3、降维打击，也是把蛋糕做大，4维打3维，就像捏死一只蚂蚁，你说思考重要吗？重要，但是维度更重要，比如说一个点到一个体系，一个团队到各个团队协作，它对人品质有要求。

4、既然说到思考，就会涉及结构化思考，当然这也是个人弱项。

作者：大鸡腿同学
来源：https://juejin.cn/post/7203730887786348599

在网上收了一番，找到一个专门收集时钟代码的网站！

这里和大家分享一下！几十款各种各样好玩又酷炫的时钟代码！值得收藏！

概要

网站上的所有代码都来自 codepen 站点。作者把它们收集起来，统一呈现给大家。

作者把它们分为了三大类：BEAUTIFUL STYLE,CREATIVE DESIGN, ELECTRONIC CLOCK.
大师兄看了半天，觉得这分类带有强烈的个人偏好！毕竟大师兄觉得在BEAUTIFUL STYLE下的很多例子都很具有CREATIVE范儿！一起来看下吧！

BEAUTIFUL STYLE CLOCK

这个分类下的时钟，表现形式比较简朴，但不妨碍它的美感！

这个时钟的呈现方式其实也满富有创造力的

这个就像家里的挂钟一样

CREATIVE DESIGN

凡是归纳到这个分类下的设计，都是很具有创作力的！

米老鼠的手臂指着时针、分针，脚和尾巴有规律的动着

通过肢体的动作来表示时间，真是别具一格

ELECTRONIC CLOCK

这个分类就是电子时钟类别了！

如果你的页面需要电子时钟，直接来这个类别找吧！

重点说明

上面只是在每个类别中选了两个给大家展示。官网上还有其他几十种样式供大家学习！

官网地址
drawcall.github.io/clock-shop/

另外，每个例子都有可参考的代码！

（伸手党们的福利！） 如果你现在的项目用不上！那赶紧找一款好看的时钟挂到你的博客主页上, 瞬间会让它变得高大上的。

作者：程序员老鱼
来源：juejin.cn/post/7202619396991352893

人生当中，总有一个环节，要收拾你一下，让你尝一尝生活的铁拳

大家好，我是柒八九。

今天，我们继续2023前端面试真题系列。我们来谈谈关于浏览器的相关知识点。

如果，想了解该系列的文章，可以参考我们已经发布的文章。如下是往期文章。

你能所学到的知识点

1. 浏览器的进程和线程 推荐阅读指数⭐️⭐️⭐️⭐️⭐️
2. 浏览器渲染过程 推荐阅读指数⭐️⭐️⭐️⭐️⭐️
3. Link rel= "prelaod" 推荐阅读指数⭐️⭐️⭐️⭐️
4. cookie设置的几种方式 推荐阅读指数⭐️⭐️⭐️⭐️⭐️
5. cookie和session的区别和联系 推荐阅读指数⭐️⭐️⭐️⭐️
6. 客户端缓存 推荐阅读指数⭐️⭐️⭐️⭐️⭐️
7. LightHouse v8/v9性能指标 推荐阅读指数⭐️⭐️⭐️⭐️⭐️

好了，天不早了，干点正事哇。

浏览器的进程和线程

进程:某个应用程序的执行程序。
线程:常驻在进程内部并负责该进程部分功能的执行程序。

当你启动一个应用程序，对应的进程就被创建。进程可能会创建一些线程用于帮助它完成部分工作，新建线程是一个可选操作。在启动某个进程的同时，操作系统(OS)也会分配内存以用于进程进行私有数据的存储。该内存空间是和其他进程是互不干扰的。

有人的地方就会有江湖，如果想让多人齐心协力的办好一件事，就需要一个人去统筹这些工作，然后通过大喇叭将每个人的诉求告诉对方。而对于计算机而言，统筹的工作归OS负责，OS通过Inter Process Communication (IPC)的机制去传递消息。

网页中的主要进程

浏览器渲染过程（13步）

1. 页面渲染起始标识

   • 当垂直同步信号（VSync）被排版线程接收到，新的屏幕渲染开始

2. 输入事件回调

   • 输入事件的数据信息从排版线程向主线程的事件回调中传递。
   • 所有输入事件的回调(touchmove/scroll/click)应该先被调用，并且每帧都应该触发，但是这不是必须的

3. rAF（requestAnimationFrame）

   • 这是一个用于屏幕视觉更新的理想的位置。
   • 因为，在此处能够获取到垂直同步事件最新的输入数据。

4. {解析HTML|Parse HTML}

   • 通过指定的解析器，将不能被浏览器识别的HTML文本，转换为浏览器能识别的数据结构:DOM对象。

5. 重新计算样式

   • 对新生成或被修改的元素进行样式信息计算。
   • 生成CSSOM
   • 将元素样式和DOM元素结合起来，就会生成Render Tree

6. {布局|Layout}

   • 计算每个可视元素的位置信息(距离视口的距离和元素本身大小)。
   • 并生成对应的Layout Tree。

7. {更新图层树|Update Layer Tree}

   • 在 Render 树的基础上，我们会将拥有相同z 坐标空间的 Layout Objects归属到同一个{渲染层|Paint Layer}中。
   • Paint Layer 最初是用来实现{层叠上下文|Stacking Context}
     • 它主要来保证⻚面元素以正确的顺序合成。

8. {绘制|Paint}：

   • 该过程包含两个过程，
   • 第一个过程是绘制操作(painting)
     • 该过程用于生成任何被新生成或者改动元素的绘制信息(包含图形信息和文本信息)；
   • 第二个过程是栅格化(Rasterization),
     • 用于执行上一个过程生成的绘制信息。

9. {页面合成|Composite}：

   • 将图层信息(layer)和图块信息提交(commit)到合成线程(排版线程)中。并且在合成线程中会对一些额外的属性进行解释处理。
   • 例如：某些元素被赋值will-change或者一些使用了硬件加速的绘制方式(canvas)。

10. {栅格化|Rasterize} ：

    • 在绘制阶段(Paint)生成的绘制记录(Paint Record)被合成线程维护的{图块工作线程|Compositor Tile Worker}所消费。
    • 栅格化是根据图层来完成的，而每个图层由多个图块组成。

11. 页面信息提交：

    • 当页面中所有的图层都被栅格化，并且所有的图块都被提交到{合成线程|Compositor}，此时{合成线程|Compositor}将这些信息连同输入数据(input data)一起打包，并发送到GPU线程。

12. 页面显示：

    • 当前页面的所有信息在GPU中被处理，GPU会将页面信息传入到双缓存中的后缓存区，以备下次垂直同步信号到达后，前后缓存区相互置换。然后，此时屏幕中就会显示想要显示的页面信息。

13. requestIdleCallback：如果在当前屏幕刷新过程中，主线程在处理完上述过程后还有剩余时间(<16.6ms)，此时主线程会主动触发requestIdleCallback。

Link rel= "prelaod"

元素的rel属性的preload值允许你在HTML的中声明获取请求，指定页面将很快需要的资源，你希望在页面生命周期的早期开始加载这些资源，在浏览器的主线程启动之前。这确保了它们更早可用，不太可能阻塞页面的呈现，从而提高了性能。即使名称包含术语load，它也不会加载和执行脚本，而只是安排以更高的优先级下载和缓存脚本。

将rel属性设置为preload，它将转换为我们想要的任何资源的预加载器。

还需要指定其他的属性：

• href属性设置资源的路径。
• as属性设置资源类型

  "utf-8" />

  "preload" href="style.css" as="style" />

  "preload" href="main.js" as="script" />





复制代码

预加载还有其他优点。使用as指定要预加载的内容类型允许浏览器:

• 更准确地优先考虑资源加载。
• 存储在缓存中以备将来的请求，并在适当时重用该资源。
• 对资源应用正确的内容安全策略（CSP）。
  • 内容安全策略(CSP)是一个额外的安全层，它有助于检测和减轻某些类型的攻击，包括
  • 跨站脚本(XSS)
  • 数据注入攻击。
• 为它设置正确的Accept请求标头。

预加载资源的类型(as的值类型)

cookie设置的几种方式

通常我们有两种方式给浏览器设置或获取Cookie：

1. 第一种 通过 HTTP 方式对 Cookie 进行赋值，又分为 Request 和 Response：
   • HTTP Response Headers 中的 Set-Cookie Header
   • HTTP Request Headers 中的 Cookie Header
2. 第二种 通过JavaScript对document.cookie进行赋值或取值。

两种方式的区别

HTTP Cookie

Set-Cookie Header，除了必须包含Cookie正文，还可以选择性包含6个属性：

1. path、
2. domain、
3. max-age、
4. expires、
5. secure、
6. httponly

它们之间用英文分号和空格（"; "）连接;

JS Cookie

在浏览器端，通过 document.cookie 也可以设置Cookie，JS Cookie 的内容除了必须包含正文之外，还可选5个属性：

1. path、
2. domain、
3. max-age、
4. expires、
5. secure

JS 中设置 Cookie 和 HTTP 方式相比较，少了对 HttpOnly 的控制，是因为 JS 不能读写HttpOnly Cookie。

http请求什么情况下会携带cookie

Cookie 请求头字段是客户端发送请求到服务器端时发送的信息

如果满足下面几个条件：（domain/http/path）

1. 浏览器端某个 Cookie 的 domain（.a.com） 字段等于请求的域名或者是请求的父域名，请求的域名需要是 a.com/b.a.com 才可以
2. 都是 http 或者 https，或者不同的情况下 Secure 属性为 false（即 secure 是 true 的情况下，只有 https 请求才能携带这个 cookie）
3. 要发送请求的路径，跟浏览器端 Cookie 的 path 属性必须一致，或者是浏览器端 Cookie 的 path 的子目录，
   • 比如浏览器端 Cookie 的 path 为 /test，那么请求的路径必须为/test 或者/test/xxxx 等子目录才可以

上面 3 个条件必须同时满足，否则该请求就不能自动带上浏览器端已存在的 Cookie

客户端怎么设置跨域携带 cookie

1. 前端请求时在request对象中
   • 配置"withCredentials": true；
2. 服务端在response的header中
   • 配置"Access-Control-Allow-Origin", "http://xxx:${port}";
   • 配置"Access-Control-Allow-Credentials", "true" `

cookie和session的区别和联系

Session比Cookie安全，Session是存储在服务器端的，Cookie是存储在客户端的

1. cookie数据存放在客户端，session数据放在服务器上。
2. cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗
   • 考虑到安全应当使用session
3. session会在一定时间内保存在服务器上，当访问增多，会比较占用服务器的性能
   • 考虑性能应当使用cookie
4. 不同浏览器对cookie的数据大小限制不同，个数限制也不相同。
5. 可以考虑将登陆信息等重要信息存放为session，不重要的信息可以放在cookie中。

客户端缓存

本地存储小容量

1. Cookie 主要用于用户信息的存储，Cookie的内容可以自动在请求的时候被传递给服务器。
   • 服务器在响应 HTTP 请求时，通过发送 Set-Cookie HTTP 头部包含会话信息。
   • 浏览器会存储这些会话信息，并在之后的每个请求中都会通过 HTTP 头部 cookie 再将它们发回服务器。
   • 有一种叫作 HTTP-only 的 cookie。HTTP-only 可以在浏览器设置，也可以在服务器设置，但只能在服务器上读取
2. Web Storage
   • 提供在 cookie 之外的存储会话数据的途径
   • 提供跨会话持久化存储大量数据的机制
   • Web Storage 的第 2 版定义了两个对象：
   • 1.LocalStorage 的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止。
   • 2.SessionStorage 的其他属性同LocalStorage，只不过它的生命周期同标签页的生命周期，当标签页被关闭时，SessionStorage也会被清除。 。

本地存储大容量

1. IndexDB:是浏览器中存储结构化数据的一个方案
   • IndexedDB 是类似于 MySQL 或 Web SQL Database 的数据库
2. WebSQL: 用于存储较大量数据的缓存机制。
   • 已废弃并且被IndexDB所替代
3. Application Cache:允许浏览器通过manifest配置文件在本地有选择的存储JS/CSS/图片等静态资源的文件级缓存机制
   • 已废弃并且被ServerWorkers所替代
4. ServerWorkers：离线缓存

{服务工作线程|Service Worker}

{服务工作线程|Service Worker}是一种类似浏览器中代理服务器的线程，可以拦截外出请求和缓存响应。这可以让网页在没有网络连接的情况下正常使用，因为部分或全部页面可以从服务工作线程缓存中提供服务。

服务工作线程在两个主要任务上最有用：

• 充当网络请求的缓存层
• 启用推送通知

在某种意义上

• 服务工作线程就是用于把网页变成像原生应用程序一样的工具
• 服务工作线程对大多数主流浏览器而言就是网络缓存

创建服务工作线程

ServiceWorkerContainer 没有通过全局构造函数创建，而是暴露了 register()方法，该方法以与 Worker()或 SharedWorker()构造函数相同的方式传递脚本 URL。

serviceWorker.js

// 处理相关逻辑



main.js

navigator.serviceWorker.register('./serviceWorker.js');

复制代码

register()方法返回一个Promise

• 该 Promise 成功时返回 ServiceWorkerRegistration 对象
• 在注册失败时拒绝

serviceWorker.js

// 处理相关逻辑



main.js

// 注册成功，成功回调（解决）

navigator.serviceWorker.register('./serviceWorker.js')

 .then(console.log, console.error);

// ServiceWorkerRegistration { ... }





// 使用不存在的文件注册，失败回调（拒绝）

navigator.serviceWorker.register('./doesNotExist.js')

 .then(console.log, console.error);

// TypeError: Failed to register a ServiceWorker:

// A bad HTTP response code (404) was received 

// when fetching the script.

复制代码

即使浏览器未全局支持服务工作线程，服务工作线程本身对页面也应该是不可见的。这是因为它的行为类似代理，就算有需要它处理的操作，也仅仅是发送常规的网络请求。

考虑到上述情况，注册服务工作线程的一种非常常见的模式是基于特性检测，并在页面的 load 事件中操作。

if ('serviceWorker' in navigator) {

 window.addEventListener('load', () => {

     navigator.serviceWorker

     .register('./serviceWorker.js');

 });

} 

复制代码

如果没有 load 事件做检测，服务工作线程的注册就会与页面资源的加载重叠，进而拖慢初始页面渲染的过程

使用 ServiceWorkerContainer 对象

ServiceWorkerContainer 接口是浏览器对服务工作线程生态的顶部封装

ServiceWorkerContainer 始终可以在客户端上下文中访问：

console.log(navigator.serviceWorker);

// ServiceWorkerContainer { ... }

复制代码

ServiceWorkerContainer 支持以下事件处理程序

• oncontrollerchange：
  在 ServiceWorkerContainer 触发 controllerchange 事件时会调用指定的事件处理程序。
  • 在获得新激活的 ServiceWorkerRegistration 时触发。
  • 可以使用 navigator.serviceWorker.addEventListener('controllerchange',handler)处理。
• onerror：
  在关联的服务工作线程触发 ErrorEvent 错误事件时会调用指定的事件处理程序。
  • 在关联的服务工作线程内部抛出错误时触发
  • 也可以使用 navigator.serviceWorker.addEventListener('error', handler)处理
• onmessage：
  在服务工作线程触发 MessageEvent 事件时会调用指定的事件处理程序
  • 在服务脚本向父上下文发送消息时触发
  • 也可以使用 navigator.serviceWorker.addEventListener('message', handler)处理

ServiceWorkerContainer 支持下列属性

• ready：返回 Promise
  • 成功时候返回激活的 ServiceWorkerRegistration 对象。
  • 该Promise不会拒绝
• controller：
  返回与当前页面关联的激活的 ServiceWorker 对象，如果没有激活的服务工作线程则返回 null。

ServiceWorkerContainer 支持下列方法

• register()：
  使用接收的 url 和 options 对象创建或更新 ServiceWorkerRegistration
• getRegistration()：返回 Promise
  • 成功时候返回与提供的作用域匹配的 ServiceWorkerRegistration对象
  • 如果没有匹配的服务工作线程则返回 undefined
• getRegistrations()：返回 Promise
  • 成功时候返回与 ServiceWorkerContainer 关联的 ServiceWorkerRegistration 对象的数组；
  • 如果没有关联的服务工作者线程则返回空数组。
• startMessage()：开始传送通过 Client.postMessage()派发的消息

使用 ServiceWorkerRegistration 对象

ServiceWorkerRegistration 对象表示注册成功的服务工作线程。该对象可以在 register() 返回的解决Promise的处理程序中访问到。通过它的一些属性可以确定关联服务工作线程的生命周期状态。

调用 navigator.serviceWorker.register()之后返回的Promise会将注册成功的 ServiceWorkerRegistration 对象（注册对象）发送给处理函数。

在同一页面使用同一 URL 多次调用该方法会返回相同的注册对象:即该操作是幂等的

navigator.serviceWorker.register('./sw1.js')

  .then((registrationA) => {

     console.log(registrationA);



     navigator.serviceWorker.register('./sw2.js')

       .then((registrationB) => {

         console.log(registrationA === registrationB);

         // 这里结果为true

       });

});

复制代码

ServiceWorkerRegistration 支持以下事件处理程序

• onupdatefound：
  在服务工作线程触发 updatefound 事件时会调用指定的事件处理程序。
  • 在服务工作线程开始安装新版本时触发，表现为 ServiceWorkerRegistration.installing 收到一个新的服务工作者线程
  • 也可以使用 serviceWorkerRegistration.addEventListener('updatefound',handler)处理

LightHouse v8/v9性能指标 （6个）

1. FCP(First Contentful Paint)
   • FCP衡量的是，在用户导航到页面后，浏览器呈现第一块DOM内容所需的时间。
   • 页面上的图片、非白色元素和svg都被认为是DOM内容;
   • iframe内的任何内容都不包括在内
   • 优化手段：缩短字体加载时间
2. SI(Speed Index)
   • SI指数衡量内容在页面加载期间视觉显示的速度。Lighthouse首先在浏览器中捕获页面加载的视频，并计算帧之间的视觉进展
   • 优化手段：1. 减少主线程工作 2. 减少JavaScript的执行时间
3. LCP(Largest Contentful Paint)
   • LCP测量视口中最大的内容元素何时呈现到屏幕上。这接近于用户可以看到页面的主要内容
4. TTI(Time to Interactive)
   • TTI测量一个页面变成完全交互式需要多长时间
   • 当页面显示
   • 有用的内容(由First Contentful Paint衡量)，
   • 为大多数可见的页面元素注册了事件处理程序
   • 并且页面在50毫秒内响应用户交互时，
   • 页面被认为是完全交互式的。
5. TBT(Total Blocking Time)
   • TBT 测量页面被阻止响应用户输入（例如鼠标点击、屏幕点击或按下键盘）的总时间。总和是FCP和TTI之间所有长时间任务的阻塞部分之和
   • 任何执行时间超过 50 毫秒的任务都是长任务。50 毫秒后的时间量是阻塞部分。
   • 例如，如果检测到一个 70 毫秒长的任务，则阻塞部分将为 20 毫秒。
6. CLS(Cumulative Layout Shift)
   • 累积布局偏移 (CLS) 是测量视觉稳定性的一个以用户为中心的重要指标
   • CLS 较差的最常见原因为：
   • 1.无尺寸的图像
   • 2.无尺寸的嵌入和 iframe
   • 3.动态注入的内容
   • 优化手段1. 除非是对用户交互做出响应，否则切勿在现有内容的上方插入内容 2. 倾向于选择transform动画

优化LCP

导致 LCP 不佳的最常见原因是：

1. 缓慢的服务器响应速度
2. 阻塞渲染的 JavaScript 和 CSS
3. 缓慢的资源加载速度
4. 客户端渲染

缓慢的服务器响应速度

使用{首字节时间|Time to First Byte}(TTFB) 来测量您的服务器响应时间

1. 将用户路由到附近的 CDN
2. 缓存资产
   • 如果 HTML 是静态的，且不需要针对每个请求进行更改，那么缓存可以防止网页进行不必要的重建。通过在磁盘上存储已生成 HTML 的副本，服务器端缓存可以减少 TTFB 并最大限度地减少资源使用。
   • 配置反向代理（Varnish、nginx）来提供缓存内容
   • 使用提供边缘服务器的 CDN
3. 优先使用缓存提供 HTML 页面
   • 安装好的 Service Worker 会在浏览器后台运行，并可以拦截来自服务器的请求。此级别的程序化缓存控制使得缓存部分或全部 HTML 页面内容得以实现，并且只会在内容发生更改时更新缓存。
4. 尽早建立第三方连接
   • 对第三方域的服务器请求也会影响 LCP，尤其是当浏览器需要这些请求来在页面上显示关键内容的情况下。
   • 使用rel="preconnect"来告知浏览器您的页面打算尽快建立连接。
   • 还可以使用dns-prefetch来更快地完成 DNS 查找。
   • 尽管两种提示的原理不同，但对于不支持preconnect的浏览器，可以考虑将dns-prefetch做为后备。

阻塞渲染的 JavaScript 和 CSS

1. 减少 CSS 阻塞时间
   1. 削减 CSS: CSS 文件可以包含空格、缩进或注释等字符。这些字符对于浏览器来说都不是必要的，而对这些文件进行削减能够确保将这些字符删除。使用模块打包器或构建工具，那么可以在其中包含一个相应的插件来在每次构建时削减 CSS 文件：对于 webpack5：css-minimizer-webpack-plugin i
   2. 延迟加载非关键 CSS：使用 Chrome 开发者工具中的代码覆盖率选项卡查找您网页上任何未使用的 CSS。
      对于任何初始渲染时不需要的 CSS，使用 loadCSS 来异步加载文件，这里运用了rel="preload"和onload。
      
   3. 内联关键 CSS:把用于首屏内容的任何关键路径 CSS 直接包括在中来将这些 CSS 进行内联。
2. 减少 JavaScript 阻塞时间
   1. 缩小和压缩 JavaScript 文件：
      缩小是删除空格和不需要的代码，从而创建较小但完全有效的代码文件的过程。Terser 是一种流行的 JavaScript 压缩工具;
      压缩是使用压缩算法修改数据的过程。Gzip 是用于服务器和客户端交互的最广泛使用的压缩格式。Brotli 是一种较新的压缩算法，可以提供比 Gzip 更好的压缩结果。
      静态压缩涉及提前压缩和保存资产。这会使构建过程花费更长的时间，尤其是在使用高压缩级别的情况下，但可确保浏览器获取压缩资源时不会出现延迟。如果您的 web 服务器支持 Brotli，那么请使用 BrotliWebpackPlugin 等插件通过 webpack 压缩资产，将其纳入构建步骤。否则，请使用 CompressionPlugin 通过 gzip 压缩您的资产。
   2. 延迟加载未使用的 JavaScript
      通过代码拆分减少 JavaScript 负载,- SplitChunksPlugin
   3. 最大限度减少未使用的 polyfill

最大限度减少未使用的 polyfill

Babel 是最广泛使用的编译代码的工具，它将包含较新语法的代码编译成不同浏览器和环境都能理解的代码。

要使用 Babel 只传递用户需要的信息

1. 确定浏览器范围
2. 对@babel/preset-env设置适当的浏览器目标
3. 使用

经过半年的幻想,一个多月的准备,十天的开发,我终于开源了自己的脚手架。

背景

在我最开始学习 React 的时候,使用的脚手架就是 create-react-app,我想大部分刚开始学的时候都是使用这个脚手架吧。

使用这个脚手架挺适合新手的,零配置,执行该脚手架命令安装特定的模板,安装相关依赖包,通过执行 npm start 即可把项目运行起来。

但是这个脚手架在开发的过程中我要引入相对应的模块,例如要引入一个组件 import NiuBi from '../../../components/niubi.jsx',这个路径看起来就很丑,而且编写的时候极度困难,因此我们可以通过 Webpack 配置路径别名,可那时候我哪会配置 Webpack 啊,善于思考的我决定打开百度,发现可以使用 carco 配置 Webpack,但是发现 carco 版本和 react-script 版本并不兼容,因为这个问题把我折磨了一天,因此这个时刻我想自己去开源一个脚手架的想法从此诞生,虽然那时候的我技术非常菜,不过我现在的技术也菜,但是我胆子大啊!!!😏😏😏

所以在这里我总结一下 create-react-app 脚手架的一些缺点,但是这仅仅是个人观点:

• 难定制: 如果你需要自定义配置 Webpack,你需要额外使用第三方工具 carco 或者 eject 保留全部 Webpack 配置文件;

• 模板单一: 模板少而且简单,这意味着我们每次开发都要从零开始;

那么接下来就来看看我的这个脚手架是怎么使用的。

基本使用

全局安装

npm install @obstinate/react-cli -g

该脚手架提供的的全局指令为 crazy,查看该脚手架帮助,你可以直接使用:

crazy

输入该命令后,输出的是整个脚手架的命令帮助,如下图所示:

创建项目

要想创建项目,你可以执行以下命令来根据你想要的项目:

crazy create <projectName> [options]

例如创建一个名为 moment,如果当前终端所在的目录下存在同名文件时直接覆盖,你可以执行以下命令:

crazy create moment -f

如果你不想安装该脚手架,你也可以使用 npx 执行,使用 npx @obstinate/react-cli 代替 crazy 命令,例如,你要创建一个项目,你可以执行以下命令:

npx @obstinate/react-cli create moment -f

如果没有输入 -f,则会在后面的交互信息询问是否覆盖当前已存在的文件夹。

之后便有以下交互信息,你可以根据这些交互选择你想要的模板:

最终生成的文件如下图所示:

当项目安装完成之后你就可以根据控制台的指示去启动你的项目了。

创建文件

通过该脚手架你可以快速创建不同类型的文件,你可以指定创建文件的指定路径,否则则使用默认路径。

要想成创建创建文件,请执行以下指令:

crazy mkdir <type> [router]

其中 type 为必选命令,为你要创建的文件类型,现在可供选择的有 axios、component、page、redux、axios,router 为可选属性,为创建文件的路径。

具体操作请看下列动图:

输入不同的类型会有不同的默认路径,并且无需你输入文件的后缀名,会根据你的项目生成相对应的文件后缀名,其中最特别的是创建 redux 文件会自动全局导入 reduxer,无需你自己手动导入,方便了日常的开发效率。

灵活配置

与 create-react-app 不同的是,该脚手架提供了自定义 Webpack 和 babel 配置,并通过 webpack-merge 对其进行合并,美中不足的是暂时并还没有提供 env 环境变量,要区分环境你可以在你通过脚手架下来的项目的 webpack.config.js 文件中这样操作:

// 开发环境
const isDevelopment = process.argv.slice(2)[0] === "serve";

module.exports = {
  // ...
};

最后一个小提示,如果全局安装失败,检查是否权限不够,可以通过管理员身份打开 cmd 即可解决。

这些就是目前仅有的功能,其他的功能正在逐渐开发中......

未来(画饼)

• 逐步优化用户体验效果,编写更完美的使用文档;

• 添加对 vue 的支持;

• 提供更多代码规范化配置选择,例如 husky;

• 提供单元测试;

• 添加 env 环境变量配置;

• 增加更多的完美配置,减少用户对项目的额外配置;

• 添加更多的模板,例如后台管理系统;

• 将来会考虑开发一些配套的生态,例如组件库;

• 等等......

如何贡献

项目从开发到现在都是我自己一人在开发,但仅凭一己之力会慢慢变得疲惫,其实现在这个版本早在几天前就已经写好了,就单纯不想写文档一直拖到现在。

所以希望能在这里找到一些志同道合的朋友一起把这个脚手架完善,我希望在不久的将来能创造出一个比 create-react-app 更好玩且好用的脚手架。

本人的联系方式请查看评论区图片。

最后

本人是一个掘金的活跃用户,一天里可能就两三次上 GitHub,如果你联系不到我,如果你不想添加我微信好友你可以通过掘金里私信我,掘金私信有通知,如果我不忙,我可能很快就能回复到你。

如果该脚手架有什么问题或者有什么想法可以通过 Github 的 issue 给我留言。

如果觉得该项目对你有帮助,也欢迎你给个 star,让更多的朋友能看到。

如果本篇文章的点赞或者评论较高,后期会考虑出一期文章来讲解如何基于 pnpm + monorepo + webpack 开发的脚手架,如果本篇文章对你有帮助,希望你能随时点个赞,让更多的人看到!!!😉😉😉

最后贴上一些地址:

• GitHub

• npm

• 小破站项目演示

作者：Moment
来源：juejin.cn/post/7202891949380173880

作为一个前端开发者，一定有接触过 reduce 函数，它是一个强大而实用的数组方法，熟练掌握 reduce 的使用可以在开发中提高开发效率和代码质量。本文介绍的 reduce 的 10 个技巧值得拥有，可以让你少写很多代码！

reduce 方法在数组的每个元素上执行提供的回调函数迭代器。它传入前一个元素计算的返回值，结果是单个值，它是在数组的所有元素上运行迭代器的结果。

迭代器函数逐个遍历数组的元素，在每一步中，迭代器函数将当前数组值添加到上一步的结果中，直到没有更多元素要添加。

语法

参数包含回调函数和可选的初始值，如下：

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

• callback

  （必须）：执行数组中每个值（如果没有提供

  initialValue

  则第一个值除外）的

  reducer

  函数，包含四个参数

  • accumulator（必须）：累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，初始值可以通过initialValue定义，默认为数组的第一个元素值，累加器将保留上一个操作的值，就像静态变量一样

  • currentValue（必须）：数组中正在处理的元素

  • index（可选）：数组中正在处理的当前元素的索引。 如果提供了 initialValue，则起始索引号为 0，否则从索引 1 起始。

    注意：如果没有提供 initialValue，reduce 会从索引 1 的地方开始执行 callback 方法，跳过第一个索引。如果提供 initialValue，从索引 0 开始。

  • array（可选）：调用 reduce() 的数组

• initialValue（可选）：作为第一次调用 callback 函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

1. 计算数组的最大值和最小值

有很多种方式可以获取数组的最大值或最小值？

使用 Math.max 和 Math.min

使用 Math 的 API 是最简单的方式。

const arrayNumbers = [-1, 10, 6, 5, -3];
const max = Math.max(...arrayNumbers); // 10
const min = Math.min(...arrayNumbers); // -3
console.log(`max=${max}`); // max=10
console.log(`min=${min}`); // min=-3

使用 reduce

一行代码，就可以实现与 Math 的 API 相同的效果。

const arrayNumbers = [-1, 10, 6, 5, -3];
const getMax = (array) => array.reduce((max, num) => (max > num ? max : num));
const getMin = (array) => array.reduce((max, num) => (max < num ? max : num));

const max = getMax(arrayNumbers); // 10
const min = getMin(arrayNumbers); // -3
console.log(`max=${max}`); // max=10
console.log(`min=${min}`); // min=-3

或者写成一个函数：

const arrayNumbers = [-1, 10, 6, 5, -3];

const getMaxOrMin = (array, type = "min") =>
    type === "max"
        ? array.reduce((max, num) => (max > num ? max : num))
        : array.reduce((max, num) => (max < num ? max : num));

const max = getMaxOrMin(arrayNumbers, "max"); // 10
const min = getMaxOrMin(arrayNumbers, "min"); // -3
console.log(`max=${max}`); // max=10
console.log(`min=${min}`); // min=-3

2. 数组求和和累加器

使用 reduce ，可以轻松实现多个数相加或累加的功能。

// 数组求和
const sum = (...nums) => {
    return nums.reduce((sum, num) => sum + num);
};

// 累加器
const accumulator = (...nums) => {
    return nums.reduce((acc, num) => acc * num);
};
const arrayNumbers = [1, 3, 5];

console.log(accumulator(1, 2, 3)); // 6
console.log(accumulator(...arrayNumbers)); // 15

console.log(sum(1, 2, 3, 4, 5)); // 15
console.log(sum(...arrayNumbers)); // 9

3. 格式化搜索参数

获取 URL 种的搜索参数是经常要处理的功能。

// url https://www.devpoint.cn/index.shtml?name=devpoint&id=100
// 格式化 search parameters
{
    name: "devpoint",
    id: "100",
}

常规方式

这是大多数人使用它的方式。

const parseQuery = (search = window.location.search) => {

    const query = {};

    search

        .slice(1)

        .split("&")

        .forEach((it) => {

            const [key, value] = it.split("=");

            query[key] = decodeURIComponent(value);

        });

    return query;

};

console.log(parseQuery("?name=devpoint&id=100")); // { name: 'devpoint', id: '100' }

使用 reduce

const parseQuery = (search = window.location.search) =>

    search

        .replace(/(^\?)|(&$)/g, "")

        .split("&")

        .reduce((query, it) => {

            const [key, value] = it.split("=");

            query[key] = decodeURIComponent(value);

            return query;

        }, {});



console.log(parseQuery("?name=devpoint&id=100")); // { name: 'devpoint', id: '100' }

4. 反序列化搜索参数

当要跳转到某个链接并为其添加一些搜索参数时，手动拼接的方式不是很方便。如果要串联的参数很多，那将是一场灾难。

const searchObj = {

    name: "devpoint",

    id: 100,

    // ...

};

const strLink = `https://www.devpoint.cn/index.shtml?name=${searchObj.name}&age=${searchObj.id}`;

console.log(strLink); // https://www.devpoint.cn/index.shtml?name=devpoint&age=100

reduce 可以轻松解决这个问题。

const searchObj = {

    name: "devpoint",

    id: 100,

    // ...

};

const stringifySearch = (search = {}) =>

    Object.entries(search)

        .reduce(

            (t, v) => `${t}${v[0]}=${encodeURIComponent(v[1])}&`,

            Object.keys(search).length ? "?" : ""

        )

        .replace(/&$/, "");



const strLink = `https://www.devpoint.cn/index.shtml${stringifySearch(

    searchObj

)}`;

console.log(strLink); // https://www.devpoint.cn/index.shtml?name=devpoint&age=100

5. 展平多层嵌套数组

如何展平多层嵌套数组吗？

const array = [1, [2, [3, [4, [5]]]]];

const flatArray = array.flat(Infinity);



console.log(flatArray); // [ 1, 2, 3, 4, 5 ]

如果运行环境支持方法 flat ，则可以直接用，如果不支持，使用 reduce 也可以实现和flat一样的功能。

const array = [1, [2, [3, [4, [5]]]]];



const flat = (arrayNumbers) =>

    arrayNumbers.reduce(

        (acc, it) => acc.concat(Array.isArray(it) ? flat(it) : it),

        []

    );

const flatArray = flat(array);



console.log(flatArray); // [ 1, 2, 3, 4, 5 ]

6. 计算数组成员的数量

如何计算数组中每个成员的个数？即计算重复元素的个数。

const count = (array) =>

    array.reduce(

        (acc, it) => (acc.set(it, (acc.get(it) || 0) + 1), acc),

        new Map()

    );

const array = [1, 2, 1, 2, -1, 0, "0", 10, "10"];

console.log(count(array));

这里使用了数据类型 Map ，关于 JavaScript 的这个数据类型，有兴趣可以阅读下文：

JavaScript 数据结构之 Map

上面代码的输出结果如下：

Map(7) {

  1 => 2,

  2 => 2,

  -1 => 1,

  0 => 1,

  '0' => 1,

  10 => 1,

  '10' => 1

}

7.获取一个对象的多个属性

这是一个项目开发中比较常遇见的场景。通过 API 获取后端数据，前端很多时候只需要取其中部分的数据。

// 一个有很多属性的对象

const obj = {

    a: 1,

    b: 2,

    c: 3,

    d: 4,

    e: 5,

    // ...

};

// 只是想得到它上面的一些属性来创建一个新的对象

const newObj = {

    a: obj.a,

    b: obj.b,

    c: obj.c,

    d: obj.d,

    // ...

};

这个时候可以使用 reduce 来解决。

/**

 *

 * @param {*} obj 原始对象

 * @param {*} keys 需要获取的属性值列表，数组形式

 * @returns

 */

const getObjectKeys = (obj = {}, keys = []) =>

    Object.keys(obj).reduce(

        (acc, key) => (keys.includes(key) && (acc[key] = obj[key]), acc),

        {}

    );



const obj = {

    a: 1,

    b: 2,

    c: 3,

    d: 4,

    e: 5,

    // ...

};

const newObj = getObjectKeys(obj, ["a", "b", "c", "d"]);

console.log(newObj); // { a: 1, b: 2, c: 3, d: 4 }

8.反转字符串

反转字符串是面试中最常问到的 JavaScript 问题之一。

const reverseString = (string) => {

    return string.split("").reduceRight((acc, s) => acc + s);

};

const string = "devpoint";

console.log(reverseString(string)); // tniopved

9.数组去重

reduce 也很容易实现数组去重。

const array = [1, 2, 1, 2, -1, 10, 11];

const uniqueArray1 = [...new Set(array)];

const uniqueArray2 = array.reduce(

    (acc, it) => (acc.includes(it) ? acc : [...acc, it]),

    []

);



console.log(uniqueArray1); // [ 1, 2, -1, 10, 11 ]

console.log(uniqueArray2); // [ 1, 2, -1, 10, 11 ]

10. 模拟方法 flat

虽然现在的JavaScript有原生方法已经实现了对深度嵌套数组进行扁平化的功能，但是如何才能完整的实现扁平化的功能呢？下面就是使用 reduce 来实现其功能：

// 默认展开一层
Array.prototype.flat2 = function (n = 1) {
    const len = this.length;
    let count = 0;
    let current = this;
    if (!len || n === 0) {
        return current;
    }
    // 确认当前是否有数组项
    const hasArray = () => current.some((it) => Array.isArray(it));
    // 每次循环后展开一层
    while (count++ < n && hasArray()) {
        current = current.reduce((result, it) => result.concat(it), []);
    }
    return current;
};
const array = [1, [2, [3, [4, [5]]]]];
// 展开一层
console.log(array.flat()); // [ 1, 2, [ 3, [ 4, [ 5 ] ] ] ]
console.log(array.flat2()); // [ 1, 2, [ 3, [ 4, [ 5 ] ] ] ]
// 展开所有
console.log(array.flat(Infinity)); // [ 1, 2, 3, 4, 5 ]
console.log(array.flat2(Infinity)); // [ 1, 2, 3, 4, 5 ]

作者：天行无忌
来源：https://juejin.cn/post/7202935318457860151

接：前端程序员是怎么做物联网开发的（上）

mqttController.js

// const mqtt = require('mqtt')

$(document).ready(() => {

  // Welcome to request my open interface. When the device is not online, the latest 2000 pieces of data will be returned

  $.post("https://larryblog.top/api", {

    topic: "getWemosDhtData",

    skip: 0

  },

    (data, textStatus, jqXHR) => {

      setData(data.res)

      // console.log("line:77 data==> ", data)

    },

  );

  // for (let i = 0; i <= 10; i++) {

  //   toast.showToast(1, "test")

  // }

  const options = {

    clean: true, // true: 清除会话, false: 保留会话

    connectTimeout: 4000, // 超时时间

    // Authentication information

    clientId: 'userClient_' + generateRandomString(),

    username: 'userClient',

    password: 'aa995231030',

    // You are welcome to use my open mqtt broker(My server is weak but come on you). When connecting, remember to give yourself a personalized clientId to prevent being squeezed out

    // Topic rule:

    // baseName/deviceId/events

  }

  // 连接字符串, 通过协议指定使用的连接方式

  // ws 未加密 WebSocket 连接

  // wss 加密 WebSocket 连接

  // mqtt 未加密 TCP 连接

  // mqtts 加密 TCP 连接

  // wxs 微信小程序连接

  // alis 支付宝小程序连接

  let timer;

  let isShowTip = 1

  const connectUrl = 'wss://larryblog.top/mqtt'

  const client = mqtt.connect(connectUrl, options)

  client.on('connect', (error) => {

    console.log('已连接:', error)

    toast.showToast("Broker Connected")

    timer = setTimeout(onTimeout, 3500);

    // 订阅主题

    client.subscribe('wemos/dht11', function (err) {

      if (!err) {

        // 发布消息

        client.publish('testtopic', 'getDHTData')

      }

    })

    client.subscribe('home/status/')

    client.publish('testtopic', 'Hello mqtt')



  })

  client.on('reconnect', (error) => {

    console.log('正在重连:', error)

    toast.showToast(3, "reconnecting...")

  })



  client.on('error', (error) => {

    console.log('连接失败:', error)

    toast.showToast(2, "connection failed")

  })

  client.on('message', (topic, message) => {

    // console.log('收到消息：', topic, message.toString())

    switch (topic) {

      case "wemos/dht11":

        const str = message.toString()

        const arr = str.split(", "); // 分割字符串

        const obj = Object.fromEntries(arr.map(s => s.split(": "))); // 转化为对象



        document.getElementById("Temperature").innerHTML = obj.Temperature + " ℃"

        optionTemperature.xAxis.data.push(moment().format("MM-DD/HH:mm:ss"))

        optionTemperature.xAxis.data.length >= 100 && optionTemperature.xAxis.data.shift()

        optionTemperature.series[0].data.length >= 100 && optionTemperature.series[0].data.shift()

        optionTemperature.series[0].data.push(parseFloat(obj.Temperature))

        ChartTemperature.setOption(optionTemperature, true);



        document.getElementById("Humidity").innerHTML = obj.Humidity + " %RH"

        optionHumidity.xAxis.data.push(moment().format("MM-DD/HH:mm:ss"))

        optionHumidity.xAxis.data.length >= 100 && optionHumidity.xAxis.data.shift()

        optionHumidity.series[0].data.length >= 100 && optionHumidity.series[0].data.shift()

        optionHumidity.series[0].data.push(parseFloat(obj.Humidity))

        ChartHumidity.setOption(optionHumidity, true);

        break

      case "home/status/":

        $("#statusText").text("device online")

        deviceOnline()

        $(".statusLight").removeClass("off")

        $(".statusLight").addClass("on")

        clearTimeout(timer);

        timer = setTimeout(onTimeout, 3500);

        break



    }



  })



  function deviceOnline() {

    if (isShowTip) {

      toast.showToast(1, "device online")

    }

    isShowTip = 0

  }



  function setData(data) {

    // console.log("line:136 data==> ", data)

    for (let i = data.length - 1; i >= 0; i--) {

      let item = data[i]

      // console.log("line:138 item==> ", item)

      optionTemperature.series[0].data.push(item.temperature)

      optionHumidity.series[0].data.push(item.humidity)

      optionHumidity.xAxis.data.push(moment(item.updateDatetime).format("MM-DD/HH:mm:ss"))

      optionTemperature.xAxis.data.push(moment(item.updateDatetime).format("MM-DD/HH:mm:ss"))

    }

    ChartTemperature.setOption(optionTemperature);

    ChartHumidity.setOption(optionHumidity);

  }



  function onTimeout() {

    $("#statusText").text("device offline")

    toast.showToast(3, "device offline")

    isShowTip = 1

    document.getElementById("Temperature").innerHTML = "No data"

    document.getElementById("Humidity").innerHTML = "No data"

    $(".statusLight").removeClass("on")

    $(".statusLight").addClass("off")

  }



  function generateRandomString() {

    let result = '';

    let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    let charactersLength = characters.length;

    for (let i = 0; i < 6; i++) {

      result += characters.charAt(Math.floor(Math.random() * charactersLength));

    }

    return result;

  }

});

showTip.js 是我发布在npm上的一个包，如果有需要可以自行npm下载

style.less

* {

  padding: 0;

  margin: 0;

  color: #fff;

}



.app {

  background: #1b2028;

  width: 100vw;

  height: 100vh;

  display: flex;

  flex-direction: column;

  overflow: hidden;



  #deviceStatus {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 20px;



    .statusLight {

      display: block;

      height: 10px;

      width: 10px;

      border-radius: 100px;

      background: #b8b8b8;



      &.on {

        background: #00a890;

      }



      &.off {

        background: #b8b8b8;

      }

    }

  }



  .container {

    width: 100%;

    height: 0;

    flex: 1;

    display: flex;



    @media screen and (max-width: 768px) {

      flex-direction: column;

    }



    >div {

      flex: 1;

      height: 100%;

      text-align: center;



      #echartsViewTemperature,

      #echartsViewHumidity {

        width: 80%;

        height: 50%;

        margin: 10px auto;

        // background: #eee;

      }

    }

  }

}

echarts.js 这个文件是我自己写的，别学我这种命名方式，这是反例

let optionTemperature = null

let ChartTemperature = null

$(document).ready(() => {

  setTimeout(() => {

    // waiting

    ChartTemperature = echarts.init(document.getElementById('echartsViewTemperature'));

    ChartHumidity = echarts.init(document.getElementById('echartsViewHumidity'));

    // 指定图表的配置项和数据

    optionTemperature = {

      textStyle: {

        color: '#fff'

      },

      tooltip: {

        trigger: 'axis',

        // transitionDuration: 0,

        backgroundColor: '#fff',

        textStyle: {

          color: "#333",

          align: "left"

        },

      },

      xAxis: {

        min: 0,

        data: [],

        boundaryGap: false,

        splitLine: {

          show: false

        },

        axisLine: {

          lineStyle: {

            color: '#fff'

          }

        }

      },

      yAxis: {

        splitLine: {

          show: false

        },

        axisTick: {

          show: false // 隐藏 y 轴的刻度线

        },

        axisLine: {

          show: false,

          lineStyle: {

            color: '#fff'

          }

        }

      },

      grid: {

        // 为了让标尺和提示框在图表外面，需要将图表向外扩展一点

        left: '10%',

        right: '5%',

        bottom: '5%',

        top: '5%',

        containLabel: true,

      },

      series: [{

        // clipOverflow: false,

        name: '温度',

        type: 'line',

        smooth: true,

        symbol: 'none',

        data: [],

        itemStyle: {

          color: '#00a890'

        },

        areaStyle: {

          color: {

            type: 'linear',

            x: 0,

            y: 0,

            x2: 0,

            y2: 1,

            colorStops: [{

              offset: 0,

              color: '#00a89066' // 0% 处的颜色

            }, {

              offset: 1,

              color: '#00a89000' // 100% 处的颜色

            }],

            global: false // 缺省为 false

          }

        },

        hoverAnimation: true,

        label: {

          show: false,

        },

        markLine: {

          symbol: ['none', 'none'],

          data: [

            {

              type: 'average',

              name: '平均值',

            },

          ],

        },

      }]

    };

    optionHumidity = {

      textStyle: {

        color: '#fff'

      },

      tooltip: {

        trigger: 'axis',

        backgroundColor: '#fff',

        textStyle: {

          color: "#333",

          align: "left"

        },

      },

      xAxis: {

        min: 0,

        data: [],

        boundaryGap: false,

        splitLine: {

          show: false

        },

        axisTick: {

          //x轴刻度相关设置

          alignWithLabel: true,

        },

        axisLine: {

          lineStyle: {

            color: '#fff'

          }

        }

      },

      yAxis: {

        splitLine: {

          show: false

        },

        axisTick: {

          show: false // 隐藏 y 轴的刻度线

        },

        axisLine: {

          show: false,

          lineStyle: {

            color: '#fff'

          }

        }

      },

      grid: {

        // 为了让标尺和提示框在图表外面，需要将图表向外扩展一点

        left: '5%',

        right: '5%',

        bottom: '5%',

        top: '5%',

        containLabel: true,

      },

      // toolbox: {

      //   feature: {

      //     dataZoom: {},

      //     brush: {

      //       type: ['lineX', 'clear'],

      //     },

      //   },

      // },

      series: [{

        clipOverflow: false,

        name: '湿度',

        type: 'line',

        smooth: true,

        symbol: 'none',

        data: [],

        itemStyle: {

          color: '#ffa74b'

        },

        areaStyle: {

          color: {

            type: 'linear',

            x: 0,

            y: 0,

            x2: 0,

            y2: 1,

            colorStops: [{

              offset: 0,

              color: '#ffa74b66' // 0% 处的颜色

            }, {

              offset: 1,

              color: '#ffa74b00' // 100% 处的颜色

            }],

            global: false // 缺省为 false

          }

        },

        hoverAnimation: true,

        label: {

          show: false,

        },

        markLine: {

          symbol: ['none', 'none'],

          data: [

            {

              type: 'average',

              name: '平均值',

            },

          ],

        },

      }]

    };



    // 使用刚指定的配置项和数据显示图表。

    ChartTemperature.setOption(optionTemperature);

    ChartHumidity.setOption(optionHumidity);

  }, 100)

});

当你看到这里，你应该可以在你的前端页面上展示你的板子发来的每一条消息了，但是还远远做不到首图上那种密密麻麻的数据，我并不是把页面开了一天，而是使用了后端和数据库存储了一部分数据。

后端

后端我们分为了两个部分，一个是nodejs的后端程序，一个是nginx代理，这里先讲代理，因为上一步前端的连接需要走这个代理

nginx

如果你没有使用https连接，那么可以不看本节，直接使用未加密的mqtt协议，如果你有自己的域名，且申请了ssl证书，那么可以参考我的nginx配置，配置如下

http {

    sendfile on;

    tcp_nopush on;

    tcp_nodelay on;

    keepalive_timeout 65;

    types_hash_max_size 2048;

    include /etc/nginx/mime.types;

    default_type application/octet-stream;



    ##

    # SSL Settings

    ##

    server {

    listen 80;

    server_name jshub.cn;

    #将请求转成https

    rewrite ^(.*)$ https://$host$1 permanent;

    }

    server {

        listen 443 ssl;

                server_name jshub.cn;

                location / {

                    root /larryzhu/web/release/toolbox;

                    index index.html index.htm;

                    try_files $uri $uri/ /index.html;

                }

     location /mqtt {

           proxy_pass http://localhost:8083;

           proxy_http_version 1.1;

           proxy_set_header Upgrade $http_upgrade;

           proxy_set_header Connection "upgrade";

         }

        # SSL 协议版本

        ssl_protocols TLSv1.2;

        # 证书

        ssl_certificate /larryzhu/web/keys/9263126_jshub.cn.pem;

        # 私钥

        ssl_certificate_key /larryzhu/web/keys/9263126_jshub.cn.key;

        # ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384;

        # ssl_ciphers AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256;



        # 与False Start没关系，默认此项开启，此处减少抓包的干扰而关闭

        # ssl_session_tickets off;



        # return 200 "https ok \n";

  }

注意这只是部分配置，切不可全部覆盖你的配置。

如果你不会使用nginx，说明你无需配置 ssl ,直接使用 mqtt协议即可。

后端程序部分

这里以egg.js框架为例

首先需要下载egg.js的插件 egg-emqtt ,直接使用npm下载即可，详细配置和启用方法 参见 MQTT系列实践二 在EGG中使用mqtt

上面教程的方法并不全面，可以下载我的示例，仿照着写一下，因为内容相对复杂，地址：gitee.com/zhu_yongbo/…

其中还包含了 mysql 数据库的连接方法，内有我服务器的地址、mysql开放端口，用户名以及密码，我服务器还剩不到十天到期，有缘人看到我的文章可以对我的服务器为所欲为，没有什么重要数据。

mysql

mysql方面，只需要一个库，一个表即可完成全部工作

如图所示，不复杂，仿照我的建库即可

有一点，比较重要，因为mysql本身不适用于存储量级太大的数据，我们的数据重复的又比较多，可以考虑一下压缩算法，或者添加一个事件（每次插入时检查数据量是否超过一定值）。像我的板子大概正常累计运行了几天的时间（每两秒一条数据），到目前可以看到已经累计了七十万条数据了，如果不是因为我设置了插入事件，这个数据量已经可以明显影响查询速度了。

可以仿照我的事件，语句如下：

DELIMITER $$
CREATE TRIGGER delete_oldest_data
AFTER INSERT ON wemosd1_dht11
FOR EACH ROW
BEGIN
   -- 如果数据量超过43200(每两秒插入一条，这是一天的量)条，调用存储过程删除最早的一条数据
  IF (SELECT COUNT(*) FROM wemosd1_dht11) > 43200 THEN
      CALL delete_oldest();
  END IF;
END$$
DELIMITER ;

-- 创建存储过程
CREATE PROCEDURE delete_oldest()
BEGIN
   -- 删除最早的一条数据
   delete from wemosd1_dht11 order by id asc limit 1
   
END$$
DELIMITER ;

BTW：这是chatGPT教我的，我只进行了一点小小的修改。

这样做会删除id比较小的数据，然后就会导致，id会增长的越来越大，好处是可以看到一共累计了多少条数据。但是如果你不想让id累计，那么可以选择重建id，具体做法，建议你咨询一下chatGPT

结语

至此，我们已经完成了前端、后端、设备端三端连通。

我们整体梳理一下数据是怎么一步一步来到我们眼前的：

首先wemos d1开发板会在DHT11温湿度传感器上读取温湿度值，然后开发板把数据通过mqtt广播给某topic，我们的前后端都订阅了此topic，后端收到后，把处理过的数据存入mysql，前端直接使用echarts进行展示，当前端启动时，还可以向后端程序查询历史数据，比如前8000条数据，之后的变化由在线的开发板提供，我们就得到了一个实时的，并且能看到历史数据的温湿度在线大屏。

作者：加伊juejin
来源：juejin.cn/post/7203180003471081531

前端程序员是怎么做物联网开发的

上图是我历时一周做的在线的温湿度可视化项目，可以查看截至目前往前一天的温度、湿度变化趋势，并且实时更新当前温湿度

本文可能含有知识诅咒

概述和基础讲解

该项目用到的技术有：

• 前端：jq、less、echarts、mqtt.js

• 后端：eggjs、egg-emqtt

• 数据库：mysql

• 服务器：emqx（mqtt broker）

• 硬件：

  • 板子：wemos D1 R2(设计基于 Arduino Uno R3 , 搭载esp8266 wifi模块)

• 调试工具：mqttx、Arduino IDE v2.0.3 使用Arduino C开发

必备知识：

• nodejs（eggjs框架）能面向业务即可

• mysql 能写基本插入查询语句即可

• C语言的基本语法了解即可

• 知道mqtt协议的运作方式即可

• arduino 开发板或任何其他电路板的初步了解即可

简单介绍一下上面几个的知识点：

1. 从来没有后端学习经验的同学，推荐一个全栈项目供你参考：vue-xmw-admin-pro ，该项目用到了 前端VUE、后端eggjs、mysql、redis，对全栈学习很有帮助。

2. mysql 只需要知道最简单的插入和查询语句即可，在本项目中，其实使用mongodb是更合适的，但是我为了方便，直接用了现成的mysql

3. 即使你不知道C语言的基本语法，也可以在一小时内快速了解一下，知道简单的定义变量、函数、返回值即可

4. MQTT(消息队列遥测传输)是一种网络协议（长连接，意思就是除了客户端可以主动向服务器通信外，服务器也可以主动向客户端发起），也是基于TCP/IP的，适用于算力低下的硬件设备使用，基于发布\订阅范式的消息协议，具体示例如下：

   

   当某客户端想发布消息时，图大概长这样：

   

   由上图可知，当客户端通过验证上线后，还需要订阅主题，当某客户端向某主题发布消息时，只有订阅了该主题的客户端会收到broker的转发。

   举一个简单的例子：你和我，还有他，我们把自己的名字、学号报告给门卫大爷（broker），门卫大爷就同意我们在警卫室玩一会，警卫室有无数块黑板（topic），我们每个人都可以向门卫请求：如果某黑板上被人写了字，请转告给我。门卫会记住每个人的要求，比如当你向一块黑板写了字（你向某topic发送了消息），所有要求门卫告诉的人都会被门卫告知你写了什么（如果你也要求被告知，那么也包括你自己）。

5. 开发板可以被写入程序，程序可以使用简单的代码控制某个针脚的高低电平，或者读取某针脚的数据。

开始

1. 购买 wemos d1开发板、DHT11温湿度传感器，共计19.3元。

2. 使用arduino ide（以下简称ide） 对wemos d1编程需要下载esp8266依赖 参见：Arduino IDE安装esp8266 SDK

3. 在ide的菜单栏选择：文件>首选项>其他开发板管理器地址填入：arduino.esp8266.com/stable/pack…，可以顺便改个中文

4. 安装ch340驱动参见： win10 安装 CH340驱动 实测win11同样可用

5. 使用 micro-usb 线，连接电脑和开发板，在ide菜单中选择：工具>开发板>esp8266>LOLIN(WEMOS) D1 R2 & mini

6. 选择端口，按win+x，打开设备管理器，查看你的ch340在哪个端口，在ide中选择对应的端口

7. 当ide右下角显示LOLIN(WEMOS) D1 R2 & mini 在comXX上时，连接就成功了

8. 打开ide菜单栏 :文件>示例>esp8266>blink,此时ide会打开新窗口，在新窗口点击左上角的上传按钮，等待上传完成，当板子上的灯一闪一闪，就表明：环境、设置、板子都没问题，可以开始编程了，如果报错，那么一定是哪一步出问题了，我相信你能够根据错误提示找出到底是什么问题，如果实在找不出问题，那么可能买到了坏的板子（故障率还是蛮高的）

wemos d1 针脚中有一个 3.3v电源输出，三个或更多的GND接地口，当安装DHT11传感器元件时，需要将正极插入3.3v口，负极插入GND口，中间的数据线插入随便的数字输入口，比如D5口（D5口的PIN值是14，后面会用到）。

使用DHT11传感器，需要安装库：DHT sensor library by Adafruit , 在ide的左侧栏中的库管理中直接搜索安装即可

下面是一个获取DHT11数据的简单示例，如果正常的话，在串口监视器中，会每秒输出温湿度数据

#include "DHT.h" //这是依赖或者叫库，或者叫驱动也行
#include "string.h"
#define DHTPIN 14     // DHT11数据引脚连接到D5引脚 D5引脚的PIN值是14
#define DHTTYPE DHT11 // 定义DHT11传感器
DHT dht(DHTPIN, DHTTYPE); //初始化传感器

void setup() {
Serial.begin(115200);
//wemos d1 的波特率是 115200
pinMode(BUILTIN_LED, OUTPUT); //设置一个输出的LED
dht.begin(); //启动传感器
}

char* getDHT11Data() {
float h = dht.readHumidity(); //获取湿度值
float t = dht.readTemperature(); //获取温度值
static char data[100];
if (isnan(h) || isnan(t)) {
  Serial.println("Failed to read from DHT sensor!");
  sprintf(data, "Temperature: %.1f, Humidity: %.1f", 0.0, 0.0); //如果任何一个值没有值，直接返回两个0.0，这样我们就知道传感器可能出问题了
  return data;
}
sprintf(data, "Temperature: %.1f, Humidity: %.1f", t, h); //正常就取到值，我这里拼成了一句话
return data;
}

void loop() {
char* data = getDHT11Data(); //此处去取传感器值
Serial.println("got: " + String(data)); // 打印主题内容
delay(1000); //每次循环延迟一秒
}

继续

到了这一步，如果你用的是普通的arduino uno r3板子，就可以结束了。

取到数据之后，你就可以根据数据做一些其他的事情了，比如打开接在d6引脚上的继电器，而这个继电器控制着一个加湿器。

如果你跟我一样，使用了带wifi网络的板子，就可以继续跟我做。

我们继续分步操作：

设备端：

1. 引入esp8266库（上面已经提到安装过程）

   1. #include "ESP8266WiFi.h"
      复制代码

2. 安装mqtt客户端库 ，直接在库商店搜索 PubSubClient ，下载 PubSubClient by Nick O'Leary 那一项，下载完成后：

   1. #include "PubSubClient.h"
      复制代码

3. 至此，库文件已全部安装引入完毕

4. 设置 wifi ssid（即名字） 和 密码，如：

   1. char* ssid = "2104";
      char* passwd = "13912428897";
      复制代码

5. 尝试连接 wifi

   1. WiFiClient espClient;
      int isConnect = 0;
      void connectWIFI() {
       isConnect = 0;
       WiFi.mode(WIFI_STA);  //不知道什么意思，照着写就完了
       WiFi.begin(ssid, passwd); //尝试连接
       int timeCount = 0;  //尝试次数
       while (WiFi.status() != WL_CONNECTED) { //如果没有连上，继续循环
         for (int i = 200; i <= 255; i++) {
           analogWrite(BUILTIN_LED, i);
           delay(2);
        }
         for (int i = 255; i >= 200; i--) {
           analogWrite(BUILTIN_LED, i);
           delay(2);
        }
         // 上两个循环共计200ms左右，在控制LED闪烁而已，你也可以不写
         Serial.println("wifi connecting......" + String(timeCount));
         timeCount++;
         isConnect = 1; //每次都需要把连接状态码设置一下，只有连不上时设置为0
         // digitalWrite(BUILTIN_LED, LOW);
         if (timeCount >= 200) {
           // 当40000毫秒时还没连上，就不连了
           isConnect = 0; //设置状态码为 0
           break;
        }
      }
       if (isConnect == 1) {
         Serial.println("Connect to wifi successfully!" + String("SSID is ") + WiFi.SSID());
         Serial.println(String("mac address is ") + WiFi.macAddress());
         // digitalWrite(BUILTIN_LED, LOW);
         analogWrite(BUILTIN_LED, 250); //设置LED常亮，250的亮度对我来说已经很合适了
         settMqttConfig();  //尝试连接mqtt服务器，在下一步有详细代码
      } else {
         analogWrite(BUILTIN_LED, 255); //设置LED常灭，不要问我为什么255是常灭，因为我的灯是高电平熄灭的
         //连接wifi失败,等待一分钟重连
         delay(60000);
      }
      }
      复制代码

6. 尝试连接 mqtt

   1. const char* mqtt_server = "larryblog.top"; //这里是我的服务器，当你看到这篇文章的时候，很可能已经没了，因为我的服务器还剩11天到期
      const char* TOPIC = "testtopic";           // 设置信息主题
      const char* client_id = "mqttx_3b2687d2";   //client_id不可重复，可以随便取，相当于你的网名
      PubSubClient client(espClient);
      void settMqttConfig() {
      client.setServer(mqtt_server, 1883); //设定MQTT服务器与使用的端口，1883是默认的MQTT端口
      client.setCallback(onMessage); //设置收信函数，当订阅的主题有消息进来时，会进这个函数
      Serial.println("try connect mqtt broker");
      client.connect(client_id, "wemos", "aa995231030"); //后两个参数是用户名密码
      client.subscribe(TOPIC); //订阅主题
      Serial.println("mqtt connected"); //一切正常的话，就连上了
      }
      //收信函数
      void onMessage(char* topic, byte* payload, unsigned int length) {
      Serial.print("Message arrived [");
      Serial.print(topic); // 打印主题信息
      Serial.print("]：");
      char* payloadStr = (char*)malloc(length + 1);
      memcpy(payloadStr, payload, length);
      payloadStr[length] = '\0';
      Serial.println(payloadStr); // 打印主题内容
      if (strcmp(payloadStr, (char*)"getDHTData") == 0) {
        char* data = getDHT11Data();
        Serial.println("got: " + String(data)); // 打印主题内容
        client.publish("wemos/dht11", data);
      }
      free(payloadStr); // 释放内存
      }
      复制代码

7. 发送消息

   1. client.publish("home/status/", "{device:client_id,'status':'on'}");
      //注意，这里向另外一个主题发送的消息，消息内容就是设备在线，当有其他的客户端（比如web端）订阅了此主题，便能收到此消息
      复制代码

至此，板子上的代码基本上就写完了，完整代码如下：

#include "ESP8266WiFi.h"
#include "PubSubClient.h"
#include "DHT.h"
#include "string.h"
#define DHTPIN 14      // DHT11数据引脚连接到D5引脚
#define DHTTYPE DHT11  // DHT11传感器
DHT dht(DHTPIN, DHTTYPE);

char* ssid = "2104";
char* passwd = "13912428897";
const char* mqtt_server = "larryblog.top";
const char* TOPIC = "testtopic";            // 订阅信息主题
const char* client_id = "mqttx_3b2687d2";
int isConnect = 0;
WiFiClient espClient;
PubSubClient client(espClient);
long lastMsg = 0;
void setup() {
 Serial.begin(115200);
 // Set WiFi to station mode
 connectWIFI();
 pinMode(BUILTIN_LED, OUTPUT);
 dht.begin();
}
char* getDHT11Data() {
 float h = dht.readHumidity();
 float t = dht.readTemperature();
 static char data[100];
 if (isnan(h) || isnan(t)) {
   Serial.println("Failed to read from DHT sensor!");
   sprintf(data, "Temperature: %.1f, Humidity: %.1f", 0.0, 0.0);
   return data;
}
 sprintf(data, "Temperature: %.1f, Humidity: %.1f", t, h);
 return data;
}
void connectWIFI() {
 isConnect = 0;
 WiFi.mode(WIFI_STA);
 WiFi.begin(ssid, passwd);
 int timeCount = 0;
 while (WiFi.status() != WL_CONNECTED) {
   for (int i = 200; i <= 255; i++) {
     analogWrite(BUILTIN_LED, i);
     delay(2);
  }
   for (int i = 255; i >= 200; i--) {
     analogWrite(BUILTIN_LED, i);
     delay(2);
  }
   // 上两个循环共计200ms左右
   Serial.println("wifi connecting......" + String(timeCount));
   timeCount++;
   isConnect = 1;
   // digitalWrite(BUILTIN_LED, LOW);
   if (timeCount >= 200) {
     // 当40000毫秒时还没连上，就不连了
     isConnect = 0;
     break;
  }
}
 if (isConnect == 1) {
   Serial.println("Connect to wifi successfully!" + String("SSID is ") + WiFi.SSID());
   Serial.println(String("mac address is ") + WiFi.macAddress());
   // digitalWrite(BUILTIN_LED, LOW);
   analogWrite(BUILTIN_LED, 250);
   settMqttConfig();
} else {
   analogWrite(BUILTIN_LED, 255);
   //连接wifi失败,等待一分钟重连
   delay(60000);
}
}
void settMqttConfig() {
 client.setServer(mqtt_server, 1883);  //设定MQTT服务器与使用的端口，1883是默认的MQTT端口
 client.setCallback(onMessage);
 Serial.println("try connect mqtt broker");
 client.connect(client_id, "wemos", "aa995231030");
 client.subscribe(TOPIC);
 Serial.println("mqtt connected");
}
void onMessage(char* topic, byte* payload, unsigned int length) {
 Serial.print("Message arrived [");
 Serial.print(topic);  // 打印主题信息
 Serial.print("]：");
 char* payloadStr = (char*)malloc(length + 1);
 memcpy(payloadStr, payload, length);
 payloadStr[length] = '\0';
 Serial.println(payloadStr);  // 打印主题内容
 if (strcmp(payloadStr, (char*)"getDHTData") == 0) {
   char* data = getDHT11Data();
   Serial.println("got: " + String(data));  // 打印主题内容
   client.publish("wemos/dht11", data);
}
 free(payloadStr);  // 释放内存
}
void publishDhtData() {
 char* data = getDHT11Data();
 Serial.println("got: " + String(data));  // 打印主题内容
 client.publish("wemos/dht11", data);
 delay(2000);
}
void reconnect() {
 Serial.print("Attempting MQTT connection...");
 // Attempt to connect
 if (client.connect(client_id, "wemos", "aa995231030")) {
   Serial.println("reconnected successfully");
   // 连接成功时订阅主题
   client.subscribe(TOPIC);
} else {
   Serial.print("failed, rc=");
   Serial.print(client.state());
   Serial.println(" try again in 5 seconds");
   // Wait 5 seconds before retrying
   delay(5000);
}
}
void loop() {
 if (!client.connected() && isConnect == 1) {
   reconnect();
}
 if (WiFi.status() != WL_CONNECTED) {
   connectWIFI();
}
 client.loop();
 publishDhtData();
 long now = millis();
 if (now - lastMsg > 2000) {
   lastMsg = now;
   client.publish("home/status/", "{device:client_id,'status':'on'}");
}
 // Wait a bit before scanning again
 delay(1000);
}

服务器

刚才的一同操作很可能让人一头雾水，相信大家对上面mqtt的操作还是一知半解的，不过没有关系，通过对服务端的设置，你会对mqtt的机制了解的更加透彻

我们需要在服务端部署 mqtt broker，也就是mqtt的消息中心服务器

在网络上搜索 emqx , 点击 EMQX: 大规模分布式物联网 MQTT 消息服务器 ，这是一个带有可视化界面的软件，而且画面特别精美，操作特别丝滑，功能相当强大，使用起来基本上没有心智负担。点击立即下载，并选择适合你的服务器系统的版本：

这里拿 ubuntu和windows说明举例，相信其他系统也都大差不差

在ubuntu上，推荐使用apt下载，按上图步骤操作即可，如中途遇到其他问题，请自行解决

1. sudo ufw status 查看开放端口，一般情况下，你只会看到几个你手动开放过的端口，或者只有80、443端口

2. udo ufw allow 18083 此端口是 emqx dashboard 使用的端口，开启此端口后，可以在外网访问 emqx看板控制台

当你看到如图所示的画面，说明已经开启成功了

windows下直接下载安装包，上传到服务器，双击安装即可

1. 打开 “高级安全Windows Defender 防火墙”，点击入站规则>新建规则

2. 点击端口 > 下一步

3. 点击TCP、特定本地端口 、输入18083，点击下一步

4. 一直下一步到最后一步，输入名称，推荐输入 emqx 即可

当你看到如图所示画面，说明你已经配置成功了。

完成服务端程序安装和防火墙端口配置后，我们需要配置服务器后台的安全策略，这里拿阿里云举例：

如果你是 ESC 云主机，点击实例>点击你的服务器名>安全组>配置规则>手动添加

添加这么一条即可：

如果你是轻量服务器，点击安全>防火墙>添加规则 即可，跟esc设置大差不差。

完成后，可以在本地浏览器尝试访问你的emqx控制台

直接输入域名:18083即可，初始用户名为admin，初始密码为public,登录完成后，你便会看到如下画面

接下来需要配置 客户端登录名和密码，比如刚刚在设备中写的用户名密码，就是在这个系统中设置的

点击 访问控制>认证 > 创建，然后无脑下一步即可，完成后你会看到如下画面

点击用户管理，添加用户即可，用户名和密码都是自定义的，这些用户名密码可以分配给设备端、客户端、服务端、测试端使用，可以参考我的配置

userClient是准备给前端页面用的 ，server是给后端用的，995231030是我个人自留的超级用户，wemos是设备用的，即上面设备连接时输入的用户名密码。

至此，emqx 控制台配置完成。

下载 mqttx，作为测试端尝试连接一下

点击连接，你会发现，根本连接不上......

因为，1883（mqtt默认端口）也是没有开启的，当然，和开启18083的方法一样。

同时，还建议你开启：

• 1803 websocket 默认端口

• 1804 websockets 默认端口

• 3306 mysql默认端口

后面这四个端口都会用到。

当你开启完成后，再次尝试使用mqttx连接broker,会发现可以连接了

这个页面的功能也是很易懂的，我们在左侧添加订阅，右侧的聊天框里会出现该topic的消息

你是否还记得，在上面的设备代码中，我们在loop中每一秒向 home/status/ 发送一条设备在线的提示，我们现在在这里就收到了。

当你看到这些消息的时候，就说明，你的设备、服务器、emqx控制台已经跑通了。

前后端以及数据库

前端

前端不必多说，我们使用echarts承载展示数据，由于体量较小，我们不使用任何框架，直接使用jq和echarts实现，这里主要讲前端怎么连接mqtt

首先引入mqtt库

然后设置连接参数

  const options = {

    clean: true, // true: 清除会话, false: 保留会话

    connectTimeout: 4000, // 超时时间

    clientId: 'userClient_' + generateRandomString(),

    //前端客户端很可能比较多，所以这里我们生成一个随机的6位字母加数字作为clientId，以保证不会重复

    username: 'userClient',

    password: 'aa995231030',

  }

   function generateRandomString() {

    let result = '';

    let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    let charactersLength = characters.length;

    for (let i = 0; i < 6; i++) {

      result += characters.charAt(Math.floor(Math.random() * charactersLength));

    }

    return result;

  }

 

连接

  // const connectUrl = 'mqtt://larryblog.top/mqtt' 当然你可以使用mqtt协议，但是有可能会遇到 ssl 跨域的问题，如果你不使用 https 可以忽略这一项，直接使用mqtt即可

  const connectUrl = 'wss://larryblog.top/mqtt' //注意，这里使用了nginx进行转发，后面会讲

  const client = mqtt.connect(connectUrl, options)

因为前端代码不多，我这里直接贴了

html:

index.html

  

  

  

  

  

  

  







  


    


      

      Loading device status

      

    


    


      


        


        Current temperature:

        loading...

      


      


        


        Current humidity:

        loading...

      


    


  

续：前端程序员是怎么做物联网开发的（下）

作者：加伊juejin
来源：juejin.cn/post/7203180003471081531

让全网沸腾的 ChatGPT，其背后团队不足百人。

ChatGPT 发布以来，在短短 2 个月时间月活破亿，成为历史上用户增长最快的消费应用。有分析机构感叹：“在互联网领域发展 20 年来，我们想不出有哪个消费者互联网应用比它上升速度更快。”

这样一个“最强 AI”的背后，是怎样的一支团队？

根据 OpenAI 官网显示，为 ChatGPT 项目做出贡献的人员共 87 人。近日，智谱研究联合 AMiner 发布了一份《ChatGPT 团队背景研究报告》。报告显示，ChatGPT 团队的显著特征是“年纪很轻”、“背景豪华”、“聚焦技术”、“积累深厚”、“崇尚创业”和“华人抢眼”。

报告原文：

https://originalfileserver.aminer.cn/sys/aminer/ai10/pdf/ChatGPT-team-background-research-report.pdf

ChatGPT 背后的 AI“梦之队”

多为名校毕业，华人成员占比 10%

报告显示，ChatGPT 团队成员绝大多数拥有名校学历，且具有全球知名企业工作经历。从成员毕业高校分布看，校友最多的前 5 大高校是斯坦福大学（14 人）、加州大学伯克利分校（10 人）、麻省理工学院（7 人）、剑桥大学（5 人）、哈佛大学（4 人）和佐治亚理工学院（4 人）。

此外，ChatGPT 团队有 9 位华人，占团队总人数的 10%。

其中，5 人本科就读于国内高校，3 人本科教育经历在美国高校完成。梳理毕业于中国高校的 ChatGPT 华人成员成长路径发现，他们本科毕业后赴美深造，获得硕士或博士学位后，加入美国的一些创新型公司，诸如 Dropbox、OpenAI 等。

报告认为，华人学者欧阳龙参与了与 ChatGPT 相关的 7 大技术项目中的 4 大项目的研发，他是 InstructGPT 论文的第一作者，是 RLHF 论文的第二作者，可见他是这两个关键技术项目的核心人员。

注：*与 ChatGPT 相关的先前关键技术项目有 RLHF3、GPT14、GPT25、 GPT36、codex7、InstructGPT8、webGPT9 等 7 项。统计发现，ChatGPT 团队中，有 2 人参与了其中 4 项关键技术项目的研发，他们分别是高级研究员欧阳龙和研发工程师 Christopher Hesse，二人均为机器学习领域专家。*

“90 后”是主力军，女性力量占一成

报告显示，从 ChatGPT 团队年龄分布看，20~29 岁的成员有 28 人，占全体成员（剔除年龄信息缺失的 5 位成员）的 34%；30~39 岁的共 50 人，占 61%；40~49 岁的仅 3 人，无 50~59 岁年龄段的成员，60 岁以上的有 1 人。

经计算， ChatGPT 团队平均年龄为 32 岁。

报告认为，“90 后”是这支团队的主力军，他们引领了这一波大语言大模型技术的创新风潮， 这说明经常被认为研发经验不足的年轻人，完全有可能在前沿科技领域取得重大突破。

性别分布方面，ChatGPT 团队中有女性 9 人，占总数的 10%；男性共 78 人，占 90%。9 位女性成员中，有 2 位是华人，分别是曾就读于北京大学的翁丽莲，以及 Steph Lin。

10 人从谷歌跳槽加入，1 人曾在百度任职

人员流动方面，ChatGPT 团队成员主要来自外部公司（81%）、高校应届毕业生（13%）、科研机构 （4%）和高校教职人员（3%）等。

其中，人数来源最多的外部企业是谷歌， 共 10 人跳槽加入；来源人数超过 2 人（含）以上的外部企业还有 Facebook、Stripe、Uber、 Quora、NVIDIA、Microsoft、Dropbox、DeepMind 等知名科技公司。作为应届生直接加入 ChatGPT 团队的共 11 人。

报告发现，ChatGPT 研究员 Heewoo Jun 曾在 2015-2019 年间在百度（美国研究院，Sunnyvale, California, USA.）担任研究员，2019 年从百度离职后加入 OpenAI 担任研究员至今。

到目前为止，ChatGPT 团队已离职员工有 4 人（离职率为 4.6%），他们是 Jacob Hilton、Igor Babuschkin、Matthias Plappert 和 Andrew Carr，去向分别为 Alignment Research Center、DeepMind、Github 和 Gretel.ai。

报告认为，从 ChatGPT 团队离职的人员，并非为外界想象的加入所谓“大厂”，而是仍然选择具有创新潜力的创业公司或机构。

报告还根据以上信息，就国内人工智能前沿技术发展提出了几点建议：

• 注重科技兴趣和信仰培育，鼓励优秀年轻人投身于前沿技术创新浪潮；

• “大厂”前沿科技创新疲态显现，鼓励年轻人将目光投向创业公司；

• 海外华人学者是全球科技创新的重要力量， 鼓励加强对外学术交流。

ChatGPT 爆火引发 AIGC 人才战

在 ChatGPT 爆火之前，人工智能行业人才缺口就已显现。

脉脉人才智库数据显示，2022 年人工智能行业人才紧缺指数（人才需求量 /⼈才投递量）达 0.83，成为人才最紧缺的行业。人工智能行业人才需求集中于技术研发、产品开发和商业化部门。其中软件人才需求最高，其次是产品、销售、算法、运营和项目经理。

随着 ChatGPT 在全球范围内爆火，进一步带动了相关的岗位需求。

2 月 14 日，脉脉创始人兼 CEO 林凡在社交平台发文表示，在脉脉高聘上 AIGC 相关岗位来看，科技巨头、头部猎企纷纷下场抢人，甚至开出 10 万月薪挖人。林凡认为，ChatGPT 带动的 AIGC 创业热潮要来了。这波 AIGC 创业热潮的兴起，必将推动人工智能人才的薪资再攀高峰。

根据脉脉网站显示，目前招聘 AIGC 相关人才的科技公司包括百度、腾讯、阿里、商汤、美团等。据甲子光年报道，CGL 深圳前沿科技组合伙人梁弘进表示，过去两周，已经有超过10家客户找到他。这些客户基本都是国内一二梯队的互联网大厂。客户们的诉求只有一条：“就想找OpenAI项目里的华人”，而且“薪资不设限，越快越好”。

日前，猎聘大数据研究院发布的《ChatGPT 相关领域就业洞察报告》（以下简称“报告”）显示，人工智能人才供不应求，需求是五年前的近 3 倍，紧缺程度持续高于互联网总体水平。

报告对比了各季度的人工智能和互联网的新发职位数，结果显示，五年来，互联网人才需求（新发职位）增长趋势平缓，而人工智能在 2020 年之后处于总体迅速上升态势。2022 年四季度，人工智能新发职位是 2018 年一季度的 2.74 倍，而互联网仅是 2018 年一季度的 1.06 倍。

薪资方面，过去五年，人工智能和互联网的招聘薪资均处于上涨态势，人工智能年均招聘薪资均明显高出互联网。2022 年，人工智能招聘平均年薪为 33.15 万元，比互联网高出 4.27 万元，即 14.78%。

报告显示，人工智能以计算机算法为核心基础，因而对算法工程师需求最大，近一年新发职位占比为 7.26%，招聘平均年薪为 46.40 万元。此外，智能网联工程师、图像算法、机器视觉、深度学习、自然语言处理等职能排名靠前，跻身热招职能 TOP15，招聘平均年薪均超 39 万。

参考链接：

mp.weixin.qq.com/s/Y_LjjsuoEEmhIg5WO_iQhA

economy.gmw.cn/2023-02/14/content_36366347.htm?s=gmwreco2

整理：凌敏

前言

其实很多人都会碰到文本不对齐，文字不对齐的情况，但是只要不明显被提出，一般都会置之不理。我关注这个问题是因为有个老哥问我倒计时的时候，10以上和10以下会出现宽度变化，因为2位数变1位数确实会变化很大，有的人会说1位数的时候前面补零，这也是一个方法，还有人说，你设置控件的宽度固定不就行了吗？其实还真不好，即便你宽度固定，你的文字内容也是会变的。

所以我就去想这个问题，虽然不是一个什么大问题，但当你去探究，确实能收获一些不一样的东西。

基础概念

首先回顾一些基础的东西。

1字节是8位，所以1字节能有256种组合，说到这个，就能联系出ASCII码，ASCII码都熟吧，就是数字和字母啊这些。然后ASCII码的定义的符号，是没有到256的，这个也很容易理解，去看看ASCII码的表就知道了。所以，ASCII码中的符号，都能用1个字节表示。

但是你的汉字是没办法用256表示的，我们中华文化博大精深，不是区区256能容纳得下的。所以汉字得用2个字节表示，甚至3个字节表示。然后emoji好像是要占3个字节还是4个字节得，这个我记得不太清了。而且不同的编码占的也不同。

回顾一下这些内容主要是为了找找感觉。

半角和全角

这个相信大家也有点了解，我们平时用输入法的时候就能进行半角全角的切换。

简单来说，全角em是指一个字符占用两个标准字符位置，半角en是指一个字符占用一个标准字符的位置。注意这里说的是占多少的位置，和上面提的字节没关系，不是说你2个字节就占2个位置，1个字节只占一个位置。

但是一般半角和圆角都是针对ASCII码里面的符号的（这个我没找到相应的概念，我是根据现象推导的）

所以先来看看直接设置半角和全角的效果

上面是半角，下面是全角，能明显看出来，中文的半角和全角都是占了两个标准字符的位置，而ASCII码中的符号，在半角的情况下是占一个，在全角的情况下是占两个。

汉字是这样，但是我在找资料的时候看到一个挺有意思的场景。就是日文，因为编码方式，会出现部分日文的半角效果和全角效果是不同的。可以参考这个老哥写的juejin.cn/post/716953… ，用的是JIS C 6220这种编码方式。

那说到这里，其实你就已经有一个概念了，数字中，每个数字在半角情况下都是占一个字符（我这里说占一个坑位可能会更好理解），默认变量输出都是半角，那两位数，就占两个坑位。所以要让1位数的显示和两位数的相同，让1位数占两个坑位不就行了吗，把1位数转成全角就行了。

看我这的效果，蓝色的区域就是全角的效果，看得出是比之前好过一些，但也没办法完全等于两个半角数字的宽度，还是差了点意思。

空格

除了用半角全角的思路去处理，还有办法吗？当然有了，发挥想象力想想，要实现1位数和2位数对齐，我可以给1位数的两边加上空格，不就行了吗，所以这空格也是有讲究滴。

我们可以来看看Unicode中有哪些空格（只列举部分）：

• U+0020：ASCII空格

• U+00A0：不间断空格

• U+2002：EN空格

• U+2003：EM空格

• U+2004：⅓EM空格

• U+2005：¼EM空格

• U+2006：⅙EM空格

• U+2007：数字空格

• U+2009：窄空格

• U+3000：文字空格

如果先了解了半角你就知道什么是en，什么是em，看这些的时候也会更有感觉。那这么多空格，我怎么知道哪个合适？那合不合适，试试不就知道了吗，这不就和谈女朋友一样，去试试嘛

首先看到ASCII空格是合适的，会不会有人看到这里有答案就跑了 ，然后还有几个看着也相近，我们可以单独拿出来比一下。U+2004、U+2005和U+2009

发现都不合适，那这个代码具体要怎么加呢，其实也很简单，直接写\u0020就行，比如我这里的布局就是这样

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/blue"
    android:textColor="#000000"
    android:text="\u00206\u0020"
    android:textSize="26sp"
    />

其它

上面都是通过编码的方向去解决这个问题，那还有其它方式吗？当然又有，其实一开始就有人想说了，用几个textview去拼接，然后设置数字的textview固定宽度并且内容居中。

这当然可以。比如“倒计时30秒”这段文字，拆成3个textview，让第二个textview固定宽度并且内容居中，也能实现这个效果，但是这实现方式也太......，所以需要去探索不同的方式去处理。

那绘制可以吗，我不用textview，我自定义一个view然后画上去，我自己画的话能很好把控各种细节的处理。我倒是觉得这是一个好的主意。这是通过绘制的方式去解决这个问题。

所以从这里可以看出，其实解决这个问题的方式有很多，可以从不同的角度去处理。

作者：流浪汉kylin
来源：juejin.cn/post/7202501888616431672

每一个人都应该明白的ChatGPT所带来的意义

ChatGPT的横空问世，因其更高的智能程度、更宽泛的领域知识、更灵活的响应能力、更自然的对话语境使整个互联网都受到极大的冲击。 我本人试用了一段时间后，并结合在网上看到的文章、评论、观点，想说说我对ChatGPT的看法，以及它应该带给我们的革命。
因本人是互联网行业从业者，本文更多叙述ChatGPT+编程开发从业相关。

本文内容将阐述如下观点：

• 观点1：ChatGPT给互联网从业者带来的革命-智能时代的每一个人都应成为架构师。

• 观点2：ChatGPT可以取代哪一部分人？

• 以上内容包含延伸观点1：人类和人工智能的对决，人类要学会弯道超车

• 以上内容包含延伸观点2：所有人都要学会“如何提问”
  本文尽可能不讲如上面摘要第一句话那种对背景的复述，相信ChatGPT问世以来大家以从不同渠道获取过很多背景知识，我将尽可能只讲干货。

ChatGPT给互联网从业者带来的革命-智能时代的每一个人都应成为架构师

学会限定答案的边界条件，提高效率

对于互联网从业者来说，我们通过 ChatGPT 可以快速地得到需要的信息和解决问题，但前提是必须学会如何提问并限定答案的边界条件，以提高效率。 首先，请想象一个场景：

我是一名开发工程师，今天接到一个需求，是实现一个冒泡排序方法。

于是我在ChatGPT上提问如下：

它完成了吗？是的，完成了。可是如果我这样提问：

可能我这个场景举例不是很恰当，但是我相信这个例子能够表达出我的意思：大家用的ChatGPT是一样的，在不同的人手中，它将发挥差异巨大的效果。
许多Java工程师都在使用Java，那么他们编写代码的能力不同，难道是因为Java版本？显然不是。而不管是搜索引擎，还是人工智能对话都需要一个能力， “学会提问”以及“运用你所知道知识丰富你的提问”。虽然这个事情大家可能早已听到无数次了，但是“你不会百度吗？”带来的冲击远远没有使用ChatGPT对话 还是无法让人工智能听懂并准确表达出你的意思来的冲击力大。我们应该认识到：“无论是工作中的需求对接、会议上的观点阐述、开发上的问题提问，我们要学习高效地、 准确的、全面的表达和提问方法。”

所以，从ChatGPT问世以来，我极力推荐在面试中添加一个问题：“如果你遇到技术问题，你的解决方式是？”
当然，这是一个笼统的问题，接下来再抛出一个具体的问题

• 如“你在开发一套系统，开发完成后测试正常，交付运维部署后发现无法访问，询问运维发现日志中报错，可是你在本地无法复现因为没有问题，请想象自己 并不懂这个情况发生的原因，你如何表达你的问题？”

• 再如“你在编写Hive sql，a列值为10，b列值为20，你编写了 select a + b，可是结果并不是30，请想象自己并不懂这个情况发生的原因，你如何表达你的问题？”

请相信我，这个问题的回答通常不会让面试官根据此就决定录用或取消录用，面试结果是多个问题、多方面考虑综合得到的结果。并且此问题的回答并无真正意义上的对错之分，如第一个问题 ，我可以说“请问我的系统本地正常，部署就不正常了，为啥？”，也可以说“请问我的系统本地运行正常，交付后部署在k8s集群化环境，页面不断重定向/404，为啥？”。 那么两个回答都行的前提是什么？在询问同事的时候。 如果是自己在互联网上、ChatGPT上提问呢？显然第一个问题将会收到无数种情况，你需要在无数种情况中挑选符合自己的情况。 这其实就是在限定答案的边界条件。

学会提问，与掌握所有知识相比约为0成本

很有意思，这让我想起了人工钻与天然钻。当然我不是很了解这个方面的知识，只是听说人工钻在各个 方面已经超越了天然钻，可是天然钻价格依然居高不下，理由是“纯天然”。
类比一下，如果你认为知识放在自己脑子里才是最好的，非要使用大脑和数千台、数万台服务器构成的人工智能去对决 ， 那也没有问题，但是我想说的是无非是你知道“茴”有3种写法，人工智能只知道“茴”有2种写法的区别，你学习的速度能够赶上24小时 不休息的神经网络、深度学习算法吗？革命就在于此，我们应转变思想，我们不再需要知道使用鱼竿怎么钓鱼，但是我们要知道可以使用哪些工具钓鱼。

什么叫做“我们不再需要知道使用鱼竿怎么钓鱼，但是我们要知道可以使用哪些工具钓鱼？”
我大概说一个岗位大家就明白了，这个岗位是“架构师”。我们通常说，在一个点钻研就有可能成为这个领域的专家， 贪多可能嚼不烂，哪个领域都平平无奇，但是时代变了。在人工智能领域，我们扩宽知识面的优先级要高于深挖非自己感兴趣的、非自己常用的知识面。
这就是弯道超车。

ChatGPT可以取代哪一部分人？

我可以直接说出结论：

思维固化，工作只会接收指令输出内容的人。或者反向说不能取代的是需要具有创造性和判断力的领域，人类的创造力和想象力是不可替代的。

只会产品介绍，遇到问题只会说“您的问题我收到了，已经向上反馈了，请您耐心等待电话哦”的客服，是我认为目前职业危机最重的职业，因为它的主要工作内容 交给人工智能来做不会有任何风险，并且人工智能不带有情绪，可以保持高强度高效率的沟通，而且遇到实际问题，人工智能也可以自动往上反馈呀，它没有自主决定的 权力，所以不会因人工智能的行为产生巨大的风险。可惜的是，这类客服岗位的大量存在相信不用我去证明。我们应意识到ChatGPT的发力点在哪里，学会运用它，而不是被它取代。

下面，我使用ChatGPT为本文生成总结：
总的来说，这篇文章提供了一个重要的思考框架，即如何在智能时代更好地与ChatGPT互动，以提高个人和社会的效率和创造力。
作为职场人，学会如何提问是非常重要的，因为一个好的问题可以帮助你更快地解决问题，提高工作效率。在与ChatGPT交互时，我们更需要学会如何提问，因为ChatGPT的回答往往依赖于我们提出的问题。一个好的问题可以帮助我们得到更准确、更有用的答案。
ChatGPT能够取代一部分人，但并不是所有人。ChatGPT可以模拟人类的思维，能够回答一些常见的问题，但是它并不能替代具有专业知识和经验的人类专家。
我们需要学会如何与人工智能合作，发挥各自的优势，以提高个人和社会的效率和创造力，创造更好的未来。

作者：我感觉我变聪明了
来源：juejin.cn/post/7201540320654524473

前言

现在不是一个大鱼吃小鱼，而是一个快鱼吃慢鱼的时代。我们都学过马克思主义经济学原理，知道一个社会必要劳动时间的概念，要想提高个人的竞争力，就要使自己做同样的工作，在保证质量的情况下，自己所花费的时间低于社会必要劳动时间。那么如何提高效率,使自己的必要劳动时间低于社会平均劳动时间呢? 这是一个仁者见仁,智者见智的话题，笔者结合自己工作经验,列举几条,供大家参考，如有不同意见和补充，欢迎留言区讨论。

定期整理

对工作中，生活中经常用到的技能或遇到的问题进行归类整理。散乱的没有联系的知识，碎片化的知识，一般没有多大用处。只有成体系，有联系的系统知识，实用价值才比较高。散乱碎片化的知识经过自己一番悉心整理之后，才能变成自己的知识。为我所用。做为一名程序员，我会定期梳理项目中遇到过的刁钻的bug(不单单是自己的)，和常用的一些编程语法点和业务方法，业务知识。这么做的好处是：我发现许多人将整个项目的业务串通不起来，只对自己做的那一块比较熟, 而我可以。另外平常在开发功能的过程中，得益于这个习惯，让我找到了许多可以复用的模块，编码得心应手，在开发时间方面几无压力。还有生产环境遇到未知缺陷时，我也比工作年限相同的同事思路开阔，底气也足。总结起来就是一句话，定期整理能提高你解决问题时的联想能力和反应速度。

不要钻牛角尖

钻牛角尖这种事情，一般都发生在我们觉得某件事情很简单, 实际在做的过程中，在某个细节之处出现了意料之外的困难，我们太过执拗，自己跟自己斗气，欲罢不能。不理性的后果就是大半天过去了，甚至好几天过去了，工作进展不大。事后我们发现，有许多简单重复性劳动，我们却没做，心中懊悔不已。如果半个小时过去了，看似简单的问题还未解决，就要引起我们的警觉，每件事情的难易程度是不同的，自己在一天之中的思维活跃度也是有波峰和波谷。我们要及时做自己的思想工作，调整自己的心态，先把鸡肋的事情放一放，继续开展其它的工作，等把那些没有难度的事情做完了，再杀个回马枪，乘胜追击，捣碎当初感到鸡肋的事情。

缩小时间利用颗粒度

你对时间利用的颗粒度，是以天，周，月，年为单位，还是以秒，分钟，时刻，小时为单位? 对时间的利用颗粒度越大，对时间的浪费越严重。一件事情，你计划半天完成，实际上你可能只需要一个小时，最后的结果就是你真的花费了半天，人都是怎么惯怎么来，你看部队上规章条例很多，许多人都觉得那不是人过的生活，可是我们的人民子弟兵，也适应的很好。一般自己在自然状态下做一件事情的时间，都有压缩的空间，你对时间利用的颗粒度管理得越精细，对时间利用的就越充分，等同于延长了生命的长度。你可以把节省下来的时间，投入到自己喜欢的事情上，工作与健康，家庭与生活，亲情与社交等皆不误。

保持专注

现在的智能设备，电脑，iPad，手机等，尤其是手机，把人的注意力，撕得支离破碎。许多人，一打游戏或刷视频，根本停不下来。因为视频内容和游戏厂商，给你推送的视频或者设计的游戏，都参考了让人成瘾的一些心理学理论，不要说未成年人，就是成年人也把持不住。在注意力涣散的情况下，要想提高效率简直就是痴人说梦。我自己也深受其害，因为每天使用手机的时间太长，出现干眼症症状，每天刚睡醒的时候，眼睛看不清手机屏幕，这时才引起我的重视，现在我已经大幅减少了手机的使用时间。一般就是饭后刷15分钟，大多数事情都在电脑端处理，处理的一般都是工作问题，很难上瘾。感觉远离手机之后，逐渐从手机的奴隶变成了手机的主人，自主意识得到了显著增强，大脑感觉清爽了好多。专注的做一件事情，就好比用己方的精兵强将去攻打对方吊儿郎当的军队，作战效率肯定杠杠的。

熟能生快

熟不仅能生巧，也能生快。提高效率的发力点之一就是把不会的事情学会，把会做的事情做到极致，既快又好。 对于绝大多数芸芸众生来说，要快得先下慢功夫，除非你是和数学家高斯一样的天才，天赋异禀，才智超群。不然你就得向愚公学习。有一句话不是这样说的嘛，所有看起来的毫不费力，其实背后都是拼尽全力。干一行，爱一行，爱一行，精一行，在日常的工作和生活中，勤学苦练，不断精进，逐渐把自己打磨成细分行业细分领域细分生态圈的佼佼者，届时你每天收获的不仅是薪资，还有因效率提高带来的工作流畅感和优越感。

善用工具

生产工具是生产力发展水平的重要标志，也是衡量生产效率的标志。要想提高工作效率，而不借助工具，就犹如鸟缺少了一只翅膀,肯定飞不高，飞不快。你随便去哪个招聘网站去看看许多岗位的招聘要求，不难发现，除了要掌握相应岗位的专业知识外，也要熟练掌握这个专业经常使用的一些工具。学校教育一般只教导我们要学好专业知识，对专业内使用的工具重视度不足。笔者是做前端开发的，我觉得如下工具，是要熟练掌握的：

• 现代主流浏览器(Google Chrome、Opera及Safari,Mozilla Firefox、Microsoft Edge)的开发调试方法，常用快捷键，常用的浏览器插件，绝大多数菜单的功能

• 至少三种代码编辑器的近乎所有菜单功能及常用的扩展

• 至少三种网络抓包工具

• 至少两种取色工具

• 至少两种移动端页面调试工具

• 至少两种代码智能补全工具

• 至少两种持续集成，持续部署 CI/CD工具

• 至少两种测试工具的用法

• 至少两种JSON格式化与查看工具

• 至少两种图片压缩处理工具

• 至少两种代码质量检测工具

• 至少两种代码文档生成工具

• 至少两种接口API文档生成工具

• 至少两种接口数据mock工具

• 至少两种正则可视化工具

• 至少两种在线运行JS代码工具

• 至少两种UI设计工具

• 至少两种富文本编辑器工具

• 至少两种图表类工具

• 至少两种流程图类工具

• 至少两种字体图标工具

• 至少两种页面性能分析工具

• 等等

善用搜索

• 善于搜索引擎

我们如果一开始遇到一个完全不懂的问题，肯定会使用搜索引擎搜答案。可是在解决一个自己觉得自己懂的问题，卡在了半道的时候，你的第一反应肯定不是使用搜索引擎，都是尝试自己解决，然后磕磕绊绊，乱想瞎碰试了半天，碰了一鼻子灰，问题最终还未解决。才想起使用搜索引擎。你使用搜索引擎的反应时间，需要缩短一下，我觉得5分钟之内你自感熟悉的问题还解决不了，就要考虑使用搜索引擎了，一般都是事半功倍。当然搜索引擎要想用的好，也有一些讲究：

1. 搜索引擎的选择

某度的搜索结果广告多得让人心生厌烦，对题的文章排版也不太好。推荐用Google（如何出去方法很多,网上自行查找，一般都是付费的，为了提高搜索质量，这点费用是值得的，建议以月为单位付费，万一平台跑了你的损失比较小）或者必应，还有当下很火的搜索引擎新锐chatGPT(可以在京东和淘宝上买到账号)。

1. 需要你有一定的背景知识

一是如果你不知道专业的用语是什么，输入的搜索关键词不精确，搜索出来的答案肯定离题万里。二是，有时候正确的答案被你搜索到了，由于你欠缺专业知识，虽然每个汉字都认识，但就是不知道整句话表达的是什么含义，看不懂答案或者对答案似懂非懂。

• 善用代码编辑器的全局搜索功能

日常编码，查找代码片段是高频操作，如果凭靠自己的记忆去项目下的特定文件夹特定文件中找某一行，无疑是比较低效的（但我发现许多人却都是这样做的）。更高效的做法是使用代码编辑器的全局代码搜索功能，输入有区分度的代码关键字，很快很精准的就能进入到某个文件夹下某个文件的第多少行。查找修改效率都比较高。

碎片化时间的妙用

碎片化时间很难做需要深度思考或者任务量规模比较大的事情，可是尺有所短,寸有所长。下面的两件事情，适合用碎片化的时间去做。

• 工作或生活规划

凡事预则立,不预则废。只有对生活与工作进行统筹规划，才不会出现对时间利用出现极端的情形。闲来闲的无聊至极，百无聊赖，生无可恋；忙来忙得天昏地暗，透支健康，作息混乱。利用碎片化的时间对今天，明天，接下来一周，做一下简单规划，什么时间做什么事情，需要多少时间，需要提前准备什么。这么做了之后，一方面你会发现每天都有事做，生活或工作井井有条，生活和工作中重要的事情，一件也没落下。另一方面，会促使你充实和丰富生活。给生活和工作不断立项一些有益的事情，什么无聊，虚度光阴这样的负面情绪体验，在你的生活字典里,是没有的。

• 阅读

每天上下班的路途上，排队吃饭的时候， 中午饭后午休之前，可以忙里偷闲，阅读一些不太耗费脑力，消遣类的文章，放松一下。有张有弛，才能长久的精力充沛。

保持身心健康

什么，身心健康也与提高效率有关系。当然有关系了，你病殃殃的，身体不舒适，哪有心劲提高工作效率。或者身体无病无疾，但好钢就是不往刀刃上用，有许多事情需要你做，但因为你一时意志薄弱，过度娱乐不能自拔。那么如何保持身心健康呢?

• 睡眠要充足

睡不好醒来之后人脑子里如有一团雾。比较困倦，反应也比较迟钝，意志力薄弱也与睡眠不足，睡眠质量较差有关。要想睡好，睡觉之前是关键:

1. 首先睡前2小时，不要让大脑兴奋。不要剧烈运动，看恐怖片。睡前半小时，关掉手机等一切电子设备准备入睡，睡觉也需要时间酝酿，不是一下子就能睡着的。

2. 把空调调节到一个宜睡的温度，推荐温度稍低一点，比如说20度，有利于入睡。

3. 睡前1小时，不要再大量饮水，睡前喝水太多，夜间憋尿或者上厕所，都会影响睡眠。

4. 要用被子把脚包裹住，脚暴露在被子外面的话，大概率人会做噩梦。

5. 夏天要给床安装蚊帐，被蚊子叮咬了的话，肯定会让人睡不好。

• 保持心情平和

1. 心怀感恩惜福的心态, 过好每一天。不要有太多的贪念和妄念，人间正道是沧桑。平平淡淡不是真，而是福气。每天没有意料之外的坏事情发生，就应该庆幸这一天过得很平安。

2. 管理好自己的情绪。不要一点就炸，出现矛盾和冲突时，与人为善，说柔和说, 温柔而坚定的与之沟通。

最后

可能道理大家都懂，正如一句话所说，我懂得许多大道理，却依然过不好这一生。问题出在哪里？我觉得是执行力的问题。如果仅仅停留在道理我懂了的层面，那你获得不了任何实质性的收益。只有身体力行，践行经过生活实践反复检验依然正确的道理，你才能真真切切感受到这些有益的意见给你带来的益处。

作者：去伪存真
来源：https://juejin.cn/post/7199106370825109564

作为一个没有啥家底的小镇做题家，在去年选Offer阶段时，工作强度是我最不看重的一个点，当时觉得自己年轻、身体好、精神足，996算起来一天不过12个小时，去掉吃饭时间，一天也就9到10个小时，完全没有任何问题，对当时热衷于外企、国企、考公的同学非常的不理解，于是毫不犹豫的签了一个外界风评不太佳但是包裹给的相对多的Offer，然后便有了现在的心酸感悟。

入职前的忐忑

在一波三折终于拿到学位证后，怀着忐忑的心入职了。忐忑的原因主要是入职之前我并不知道我要入职什么部门，很怕我一个只会Java的后端被分配去写C++，毕竟Java是最好的语言，打死不学C++（手动狗头）。 也担心被分配到一个没有啥业务复杂度、数据复杂度的业务部门，每天CRUD迎接着产品的一个又一个需求，最后活成了CRUD Boy没有什么技术沉淀。又担心去和钱相关的部门，害怕自己代码出Bug，导致公司产生资损。

就这样忐忑着听完了入职当日上午的培训，中午便被我的mentor接走了，很不幸，我被我的mentor告知，我恰好被分在了和钱最直接相关的部门，我的心陡然沉重起来。

这里给出我最诚挚的建议，选Offer最好选一个实习过的部分，次之就是签了三方后去实习一段时间，如果发现部门的味儿不对或者和自己八字不合，此时还有机会跑路，以很小的代价换一家公司，不然毕业后入职就宛如开盲盒，万一遇到了很不适应的部门，交了社保、几个月的工作经验，到了市场上可谓是爹不疼娘不爱，比着校招时候的境遇差太多了。

熟悉项目的第一个月

得益于和钱相关，我部门的需求都不是很紧急，领导的态度是宁愿需求不上，也不能上出问题。所以每一个需求都没有说产品火急火燎的推动着要上线，都是稳扎稳打的在做，给予了开发比较充足的自测时间。但是呢，另外一方面，由于部门的业务领域比较底层，所以接手的项目往往都已经有了两三年的历史，相信写过代码的同学都知道，写代码的场景中最痛苦的那就是读懂别人的代码然后在别人的基础上进行开发，尤其是读懂几年前已经几经几手的项目代码。

第一个月刚进入公司，只是在熟悉项目代码，没有啥需求上的压力，相对来说还是比较轻松。遇到不熟悉的直接问靠谱的mentor，mentor也给热心的解答还是很幸运的。每天吃完公司订的盒饭。下楼转悠一圈就觉得美滋滋。

这个时候其实觉得，996不过如此嘛，好像也没有啥压力，真不搞不明白有啥可怕的。

进入开发状态的第二个月

在熟悉的差不多后，我就开始慢慢接手业务需求了，坦白的说，由于我接手的项目比较成熟，新接入业务需求往往不需要做什么开发工作，只需要做一些配置项，需求就完成了。 然而呢，作为一个几年的老项目，当然是处处埋的有彩蛋，你永远不知道哪里就会给你来一个惊喜。于是呢，我的工作开始变成，寻找代码中的彩蛋，搞明白各个配置项的含义，以及他们究竟是怎么组合的，然后和上下游联合对数据，发现数据对不上，就需要再埋进项目中一丝一缕的分析。

这个时候已经有些许的压力了，如果因为自己成为整个需求的卡点，那太过意不去了。于是开始每天勤勤恳恳，吃盒饭也没有那么香了，饭后散步的脚步也不再那么的愉悦，这时候开始感受到了肩上的压力。

本来我是坚决第一个离开工位下班，决心整治职场的人，但是往往在debug的路上，不经历的就把下班时间延长了一点又一点。而又由于在北京、上海这种大城市，住在公司旁边往往是一种奢望，导致我每天有较长的通勤时间。工作日一天下来，差不多就是晚上回去睡觉，早上醒来没有多久就出门赶地铁。

日复一日，就有一种流水线上螺丝钉的麻木感，周末往往一觉睡醒就结束了，感觉日子很重复，没有一些自己生活过的痕迹。

努力调整状态的第三个月

积极主动，是《高效能人士的七个习惯》中的第一个习惯，也是我印象最深的一个习惯。既然困难无法克服，那么咱们就要主动解决。

工作中，努力开拓自己的视野，搭理好手中的一亩三分地的同时，仰头看看上游，低头往往下游，对他们的业务也多一些学习，理清楚自己工作的业务价值，同时呢，在当好一名螺丝钉之外，也尝试着找出整个流水线的可优化点和风险点，尝试着给出自己的解决方案，同时积极梳理已有的项目代码的技术难点，是如何通过配置化来应对复杂的业务场景，是如何通过自动重试保证数据一致性。

生活中，周末即使比较累了，但是努力也不再宅在家中，一刷手机一整天，而是尝试着做一些比较有挑战或者更有回忆的事情。比如沿着黄浦江骑行。

比如自己下厨做几个菜

比如邀请三五好友玩个桌游

比如通过图书馆借一些杂书来消遣

对后来人想说的话

部门与部门之间的差异，很有可能比公司之间的都要大，选择Offer尽可能的选一个实习过的、或者比较熟悉的部门，能有效避免开盲盒踩雷的风险。没有绝对完美的公司，即使好评如潮的外企、券商类公司，我仍然有一些不幸运的同学，遇到了很卷的部门，平时要自愿加班或者在公司“学习”。

即使遇到了困境，也需要保持积极良好的心态，退一万步想，即使工作丢了，但是咱们的身心健康不能丢。为了这几斗米，伤了身体，是非常得不偿失的。

在选Offer的时候尽量一步到位，以终为始，如果目标瞄定了二线城市，其实我个人不太建议为了某些原因比如对大厂技术的热衷、对一线城市繁华的向往而选择当北漂沪漂，漂泊在外的日子都比较苦，而且吃这种苦往往是没有啥意义的。

我是日暮与星辰之间，一名努力学习成长的后端练习生，创作不易，求点赞、求关注、求收藏，如果你有什么想法或者求职路上、工作路上遇到了什么问题，欢迎在评论区里和我一起交流讨论。

作者：日暮与星辰之间
来源：juejin.cn/post/7159960105759277070