阅读 9365

钱,是一个人最硬的底气

前言

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

那,你见过凌晨2点的外滩吗?

1. 第二次相遇

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

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

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

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

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

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

“活不会干?”

“不是。”

“压力大?”

“有一点。”

“不是吧?就那点lowB需求,就压力大了?”

“不,不是……”

“失恋了?”

“嗯。”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

“喂!喂!别用那种很嫌弃的眼神看着我。毕竟我的薪水才那么一点,菜一点又怎么了?!

理直气壮。嗯,真的是理直气壮

2. 第三次相遇

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

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

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

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

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

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

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

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

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

嘛🥚,嘴瓢了?一罐啤酒就醉了?你喝醉了就想webpack? 你丫骗鬼呢还!

“你知道webpackloaderplugin 的区别吗?”

“我想听你说。”

“听好,我就说一遍。“

  • loader是专注于文件转化,例如加载非commonJs 规范的文件,babel-loaderbabel-core模块是为了把ES6的代码转成ES5,url-loaderfile-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
    • 秒开率
    • 卡顿、完全加载时间、资源加载时间等…… 重要优先级不高。

首屏时间秒开率标准

类型首屏时间秒开率1.5秒开率2秒开率
SSR1000ms80%95%98%
端内1200ms65%85%90%
端外1500ms40%60%80%

“哇!秒开率最高才80%嘛?”

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

“噢。你说的,我大概都懂。视觉稳定性指标是什么?

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

“那确立了这些性能指标,然后呢?”

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

“那如何上报呀?”

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

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

“这么复杂的吗?”

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

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

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

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

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

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

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

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

无关感情。

无关技术。

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

文章分类
前端