我是如何用技术开导妹子的

小咪咪 2022-09-09 06:12 129阅读 0赞

# 前言 #

你见过**凌晨4点**的洛杉矶吗？

那，你见过**凌晨2点**的外滩吗？

## 1. 第二次相遇 ##

那天加班到凌晨1点，顺道着去找了酒喝。不是酒鬼，只是爱喝，和女人都喜欢逛街一样，我只是喜欢喝酒而已。快喝跪的时候，掏出手机打车。

车经过外白渡桥那条路线，我分明看见有个妹纸站在桥上。虽然也就4、5米，肯定不会si，可妹纸在哭哇！

**故事开始了。** 因为那个妹纸我认识，前不久我招进来的小姑娘，24岁。可能是喝了酒的缘故，我叫停了出租车。好吧，我觉得我真的像酒鬼。

她像受惊的兔子一样，尖叫的声音差点就让我酒醒了。

“嗯。不错，有正常反应。咋地，不适应加班了？”

妹纸点点头，吓得没敢回话。我看懂了，那眼神分明是提防我的眼神。**也是，谁会相信我是偶然？**

“活不会干？”

“不是。”

“压力大？”

“有一点。”

“不是吧？就那点lowB需求，就压力大了？”

“不，不是……”

“失恋了？”

“嗯。”

**气氛戛然而止。** 我忽然反应过来，我好像在插手别人的生活。长到这把年纪，已经懂得**不要轻易进入别人世界**的道理。桥上风冷，我的酒意也消散了大半。

“是不是你写的那个活动页有点卡？”

我认真看着妹纸的眼睛，没回话，双眼却闪过一丝紧张还有一点点……

**厌恶。** 是的，任何人被当面点出不足之处，都会有厌恶的情绪。妹纸应该还知道，我已经看过她写的代码，`code review`不是说说而已。

“今天你尝试一下把计算红包位置的`margin`换成`transform`试试。”

“噢。`margin`换成`transform`有什么好处？它们不都是`css`属性吗？”

我又盯着妹纸看了两眼。年轻就是好啊！前几分钟还那么悲伤，现在就能正常交流沟通了。她大概是看不到我眼底刹那间闪过的一丝异样。

“**浏览器的主线程与合成线程调度**了解过吗？**一般来说，主线程主要负责运行 `JavaScript`，计算 `CSS` 样式，元素布局，然后交给合成线程。合成线程主要负责绘制，当使用`width`、`height`、`margin`、`padding` 等作为 `transition` 值时，会让主线程压力很大。此时我们可以使用 `transform` 来代替直接设置 `margin` 等操作**。”

其实我内心是不忍心的。一个新来的妹纸就要负责活动页面的编写任务，我这老油条像极了爱欺负新兵的老兵。

“可是活动页白屏时间也挺长的，总感觉要白屏1秒才出来。”

这不废话，活动页布局辣么负责，这妹纸又是**等接口数据返回**以后才开始渲染数据。

“你有没有试过给你的动画加入一个渐入的效果？”

“这点我想过。可是动画做再好也没办法**改变白屏时间**啊！”

**气氛再次戛然而止。** 请问，我是招进来一个多么菜的童鞋？接着酒劲，我张开了嘴最终还是没说出口。我心里在想，难道我当初是猪油蒙了心，看上人家了？我再仔细盯了盯妹纸的脸。不对啊！这明显没有心动的感觉啊！

“喂！喂！别用那种很嫌弃的眼神看着我。**毕竟我的薪水才那么一点，菜一点又怎么了？！**”

理直气壮。嗯，真的是**理直气壮**！

## 2. 第三次相遇 ##

那晚，我还是没忍住传授了很多前端知识给她。做`code review`的时候代码明显好了许多。其实把这故事讲给人听，人肯定不信。

谁会在一妹纸哭泣的时候，给人讲技术的？其实我对妹纸要求不怎么高，`code review`也只是保证她的代码能被别人轻易看懂，至少在代码层面的性能优化要做得好。

618那天晚上，忙疯了。妹纸的活动页在那天也经住了考验。我夸完了妹纸后就去找地儿喝酒去了。

“哎呦，不错哟。都凌晨1点了，赶紧回去休息吧。加油，**升职加薪有盼头了**！”

喝完酒，老规矩拿出手机打车，一样路过外白渡桥。what fxxking that I hate ……

那妹纸怎么又在桥上？我让师傅停了下车，摇下窗户，仔细看了看。嗯，这回没哭。保不准是人自己想透透气，对吧？

唉。**算了，这回要教育一下。大晚上的，一个女孩子出门在外要保护好自己。**

下车，爬上桥。妹纸就一手拿着啤酒罐，一手在抹眼泪。

“你来了。老B让我配一个`webpack`，还要`多入口`。我怎么配他都不满意，我觉得**我好没用**。哇呜呜……”

嘛????，嘴瓢了？一罐啤酒就醉了？你喝醉了就想`webpack`？你丫骗鬼呢还！

**“你知道`webpack`的 `loader` 和 `plugin` 的区别吗？”**

“我想听你说。”

> “听好，我就说一遍。“
> 
>  *  `loader`是专注于文件转化，例如加载非commonJs 规范的文件，`babel-loader`和`babel-core`模块是为了把ES6的代码转成ES5，`url-loader`和`file-loader`是对图片进行打包等。”
>  *  `plugin`完成的是`loader`不能完成的功能。`plugin`也是为了扩展`webpack`的功能，但是 `plugin` 是作用于`webpack`本身上的。而且`plugin`不仅只局限在打包，资源的加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。
>  *  webpack提供了很多开箱即用的插件：`CommonChunkPlugin`主要用于提取第三方库和公共模块，避免首屏加载的`bundle`文件，或者按需加载的`bundle`文件体积过大，导致加载时间过长，是一把优化的利器。而在多页面应用中，更是能够为每个页面间的应用程序共享代码创建`bundle`。

妹纸吸了吸鼻子，看来是真的哭过。渣男啊渣男，求求你不要在这个时候给人讲技术了，会挨雷批的。

“就完啦？”

“哟，那你还想知道啥？”

“**你的那什么性能监控是咋做的？好神奇噢！你是怎么做到了解页面白屏时间的？**”

“哟呵，胃口不小。你恐怕得在这里站上一个礼拜了。”

“好呀！没有问题呀。那你今天就先开个头好吧？我领悟能力很强的！”

"好吧，我输了。"

>  *  确立性能指标
>  *   *  白屏时间
>      *  数据接口响应时间
>      *  图片加载资源等
>      *  以直接从后端服务中获取，不需要前端再重复计算. 获取后上报性能平台即可。
>      *  计算图片
>      *  它指的是从输入内容回车（包括刷新、跳转等方式）后，到页面开始出现第一个字符的时间。这个过程包括 DNS 查询，建立 TCP 连接，发送首个HTTP请求（如果使用HTTPS还要介入 TLS 的验证时间），返回HTML文档，HTML文档 Head 解析完毕。它的标准时间是 300ms。
>      *  白屏时间
>      *  首屏时间
>      *  视觉稳定性指标 （`CLS, Cumulative Layout Shift`）
>      *  秒开率
>      *  卡顿、完全加载时间、资源加载时间等…… 重要优先级不高。

**`首屏时间秒开率标准`**

“哇！秒开率最高才80%嘛？”

“我…… 业界能做到这个标准的屈指可数。”

“噢。你说的，我大概都懂。**可`视觉稳定性指标`是什么？**”

“交互性和视觉稳定性关键指标，业界还在探索，没有统一的衡量标准，且必须手动采集。”

“那确立了这些性能指标，然后呢？”

“然后上报性能监控平台啊。笨！”

“那如何上报呀？”

“唉，咋说呢。先设计一个性能上报的SDK吧。”

<table> 
 <thead> 
  <tr> 
   <th>步骤</th> 
   <th>action1</th> 
   <th>action2</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>性能SDK设计</td> 
   <td>sdk接入设计</td> 
   <td>1. 把之前首屏、白屏和卡顿采集的脚本封装在一起，并让脚本自动初始化和运行。</td> 
  </tr> 
  <tr> 
   <td><br></td> 
   <td><br></td> 
   <td>2. 提供帮助文档，提高sdk的易用性。毕竟现在随便一个库都有帮助文档</td> 
  </tr> 
  <tr> 
   <td><br></td> 
   <td><br></td> 
   <td>3. 还可以设置性能分析小助手，快速定位一些基础问题。</td> 
  </tr> 
  <tr> 
   <td><br></td> 
   <td><br></td> 
   <td><br></td> 
  </tr> 
  <tr> 
   <td><br></td> 
   <td>sdk运行设计</td> 
   <td>1. 兼容性策略。用&nbsp;<code>javascript</code>&nbsp;去写性能指标的采集方法，从而能够跨技术栈。</td> 
  </tr> 
  <tr> 
   <td><br></td> 
   <td><br></td> 
   <td>2.自身容错机制，<code>try catch</code>捕获异常，再上报。</td> 
  </tr> 
  <tr> 
   <td><br></td> 
   <td><br></td> 
   <td>3.根据用户实际的浏览器和机型分布比例，确定&nbsp;<code>top10%</code>&nbsp;用户的机型和浏览器类型。然后在每次开发完成并进行代码&nbsp;<code>code review</code>&nbsp;后，使用这些机型和浏览器类型进行自测</td> 
  </tr> 
  <tr> 
   <td>上报策略设计</td> 
   <td>日志数据过滤</td> 
   <td>1. 在采集性能指标之后，最好先对异常数据进行过滤</td> 
  </tr> 
  <tr> 
   <td><br></td> 
   <td><br></td> 
   <td>2. 异常数据错误，包括合法的异常数据，最大阀值、最小阀值。</td> 
  </tr> 
  <tr> 
   <td><br></td> 
   <td>数据抽样策略</td> 
   <td>1. 性能&nbsp;<code>SDK</code>&nbsp;上报数据是全量还是抽样，得根据本身 App 或者网站的日活来确定。毕竟日活<code>10W</code>和<code>1000W</code>是有很大区别的。</td> 
  </tr> 
  <tr> 
   <td><br></td> 
   <td><br></td> 
   <td>2. 日活大就适当减少抽样样本。例如天猫双十一，日货巨大，就必须要减少抽样样本。</td> 
  </tr> 
  <tr> 
   <td><br></td> 
   <td>上报机制选择</td> 
   <td>1. 根据网络能力，选择合适的上报机制。在强网环境（<code>如 4G/WIFI</code>），直接进行上报。在弱网（<code>2G/3G</code>）下，将日志存储到本地，延时到强网下再进行上报。</td> 
  </tr> 
  <tr> 
   <td><br></td> 
   <td><br></td> 
   <td>2. 根据APP忙碌的时间来选择上报时间。例如 App 处于空闲状态，直接上报，忙碌状态就等到闲时（<code>比如凌晨 2-3 点，用户活跃度相对不高</code>）再进行上报。</td> 
  </tr> 
 </tbody> 
</table>

“这么复杂的吗？”

“呵呵。**还有性能平台要搭建呢。毕竟上报的数据有了，那得分析数据吧？**”

“老板，你别说了。我得消化一下。”

“那赶紧下桥，去前面路口打车。”

唉。这算不算我安慰人的独有方式？**不靠哄、不靠嘴炮，靠讲技术** ????。妹纸看了看手机，时间定格在凌晨3:43分。

“你帮我拿下手机，我鞋带散开了。”

我接过妹纸的手机，不知道是不是忘记锁屏了，她的iphone推送了一条微信消息。

**爸：上海有哪家医院看胃病厉害啊！这一去又要花好几万……**

我就当没有看见，实际上我也只是花了0.2秒喵了一眼。妹纸系好鞋带，站起身接过手机，说是准备滴滴。可我分明看见她的眉眼又紧簇了一次。**成年人最舒服的相处方式大概就是我懂你却不会刻意打扰，避免触及自尊。可这大概也是成年人最残酷的相处方式。**

无关感情。

无关技术。

本文依旧定性为技术文，但我仍然想说：**钱，是一个人最硬的底气。**