Blog
Blog copied to clipboard
berwin
记录成长的过程
# 二维空间下的向量旋转 向量运算是计算机图形学的数学基础，而向量的旋转是向量的一种常见操作，本文将详细讲解向量在二维空间下的旋转原理。 > 在前端项目中，旋转一个元素我们会使用CSS的 `rotate` 函数，本文会让你对 `rotate` 有一个全新的认识。 ## 1. 向量 二维中间中的向量其实就是一个包含了两个数值的数组，一个是 x 坐标值，一个是 y 坐标值。 向量既可以表示一个 **“点”**（x, y），也可以表示一个从原点（0,0）到坐标点（x, y）的 **“线”** 称为 “向量”。 ## 2. 向量的旋转 向量的旋转指的是将一个已知向量旋转给定的弧度后得到一个旋转后的新向量，也就是说我们使用 “向量” 和...
2021年终总结
# 2021年终总结 总体来讲，今年是比较平淡的一年，一转眼已经在杭州快两年了，整体感觉还是挺满意的，今年也把自己户口落在杭州了。 ## 2021年度大事回顾 * 2021.5 去了趟敦煌玩 * 2021.6 去了趟三亚玩 * 2021.7 认定杭州E类人才 * 2021.8 落户杭州 * 2021.8 人生首次买房摇号（没摇中） ## 工作 今年最主要的贡献是创造了一套全新的面向C端搭建场景，支持灵活扩展、极致性能和高稳定性的终端渲染解决方案（终端渲染架构），名叫Tubes。 > 终端渲染架构：当用户在浏览器地址栏输入域名到看到页面，背后发生的一切。 > 终端渲染解决方案：产品化的终端渲染架构（包含终端的JS框架、服务端的一些能力等）。 从写下第一行代码到现在刚好一年的时间： * 2020.12.14月：提交了第一个Commit...
本文详细介绍了响应性数据系统在 Tubes 中的运用，以及响应性数据系统的三种不同设计与原理。 > Tubes是一套面向C端搭建场景，支持灵活扩展、逻辑编排、极致性能和高稳定性的终端渲染解决方案（包括终端渲染引擎 & 终端渲染架构），目前广泛运用在淘系，包括：双11、618会场、手淘新人版首页等业务场景。 ## 1. 介绍 响应性数据系统指的是程序在使用系统提供的数据的同时会自动订阅自己所使用的数据，被订阅的数据发生变化时使用了（订阅了）这个数据的程序会对数据的变化做出响应。 > 响应性是 Vue.js 最具特色的特性（之前叫响应式，Vue3给翻译成响应性，我认为响应性这个词整挺好），不过 Tubes 的响应性原理和 Vue.js 略有不同。 ## 2. 响应性数据系统在Tubes中发挥的作用 Tubes 为什么需要响应性数据系统，这来源于一个重要的业务问题：“如何解决会场分屏渲染问题”，站在技术视角要解决的问题是：“Tube多次执行的设计问题”。 > 正在读文章的你可能不了解Tubes体系，不清楚什么是Tube，没关系，你可以把问题想象成：如何解决 Express.js 的中间件多次执行、如何解决 Webpack 的Loader多次执行。...
我的英语老师
# 我的英语老师 促使我写一篇文章描述他的原因是最近一段时间我的英语老师对我的认知产生了很大的冲击。 老师的经历和我很像，老师83年出生，由于种种原因，没有上大学，在部队当了几年兵，退伍后开始学习英语，然后去新东方当英语老师，现在已经十多年师龄了，英语教的非常好。 近大半年的时间，每个周日我都会去新东方学习一天的英语，上个周末是最后一堂结业课，老师在课上说他不能继续教我们下一册英语了，因为他拿到了澳大利亚纽卡斯尔大学的硕士Offer，准备去上学了。 其实我也曾想过将工作辞去，然后去国外读两年书，学学知识、见见世面。但最终也只是停留在幻想阶段。但当身边出现一个人真的这么去做，对我触动非常大。 老师用实际行动，教会了我什么叫 I have a dream。 老师用实际行动，教会了我什么叫 I believe i can。 老师这个年纪，还能追逐梦想，为了梦想如此疯狂，我为什么不能。 有一句话叫做：“种一棵树，最好的时间是十年前，其次是现在”。对于老师来讲，他的十年前可能就是现在的我，那么我是不是应该在现在种一棵树给未来的自己。 老师用实际行动让我明白，什么叫不要给自己设限，人生有无限种可能。那一刻我内心像是风云后被射入的第一缕阳光，我感觉人生充满了希望。 ## 人生要充满希望 人生要充满希望，要有自己的梦想，并为了自己的梦想努力，一步步靠近。只有这样，才会觉得自己充满了力量，没有那么迷茫。 我见过很多人，没有梦想，没有希望，每天行尸走肉一样，按部就班重复着自己每天都在做的事情。如果一个人，认为自己再怎么努力，也无法改变命运，无法改变现状。那么他就真的无法改变自己的命运，而且无论他什么年纪，他都老了。 我认为，如果一个人没有梦想，没有希望，那么他将不知道自己为什么活着，找不到人生的意义。更可怕的是，一旦觉得人生失去了意义，那么将不再充满活力，失去激情，做什么事都没有很强的动力，自然就失去了自驱力。 要相信相信的力量，无论年纪有多大，只要拥有自己的梦想，并相信自己，努力去一点点接近它，那么人生就充满了希望。像我的老师一样，快40岁了依然愿意为了自己的梦想做出行动。 一定要拥有梦想，让自己的人生，充满希望。 ## 总结 不要给自己设限，人生有无限种可能。要勇敢，要相信自己，要拥有自己的梦想，要充满希望。
让你的网页更丝滑（全）
# 让你的网页更丝滑（全） > 这篇文章是2019年5月11号，我在上海FDConf2019上的分享整理。 > > * 演讲主题：【让你的网页更丝滑】 > * 时间：2019年5月11日（下午） > * 地点：上海 - FDCon2019 - B会场（全栈&全端专场） > * 演讲嘉宾：刘博文 > > PPT地址：[https://ppt.baomitu.com/d/b267a4a3](https://ppt.baomitu.com/d/b267a4a3)  ## 简介 大家好，我叫刘博文，今天给大家分享的主题叫《让你的网页更丝滑》，其实就是更流畅的意思。 简单介绍一下自己，2012年我从中专毕业，当时是17岁，2015年我加入了360最大的前端团队奇舞团，那一年我是20岁；2017年由于组织架构的变动，我们组被拆分到360导航，所以我就变成360导航的一名前端工程师；2018年就是去年，因为公司是W3C的会员，所以我就加入了W3C的性能工作组。 ...
捕获FMP的原理
# 捕获FMP的原理 FMP（全称“First Meaningful Paint”，翻译为“首次有效绘制”）表示页面的“主要内容”开始出现在屏幕上的时间点。它是我们测量用户加载体验的主要指标。 通常我们使用测评工具（例如：Lighthouse）就可以得到FMP值。但是这里有一个问题是：不同产品的“主要内容”是不一样的；对于博客，主要内容是文章标题+首屏文本（可见的文本）、对于搜索引擎主要内容就是搜索结果。 只有我们自己最清楚我们产品的**主要内容**是什么，那么测评工具是如何捕获出FMP值的？它捕获出的这个FMP准么？ 本文我们将针对这两个问题进行详细的讨论。 ## 基于布局的方法捕获FMP 本小节我们将介绍一种基于布局的方法来捕获FMP，它的准确率可以达到77%。 随着网页的加载与解析，浏览器会将布局对象（Layout Object）逐步添加到布局树（Layout Tree）上进行布局。 以Google搜索结果页为例，下图给出了该页面在加载时布局对象被添加到布局树中的数量和时间（横坐标为时间，纵坐标为数量）。  图1 - 布局对象 FCP（First Contentful Paint）的时间在1.577秒，此时已经有60个布局对象被添加到了布局树中，这时候页面只渲染了一个Header；在1.86秒的时候，有261个布局对象被添加到布局树中，这些对象是搜索结果，随后在1.9秒进行了一个绘制（Paint），这个绘制是FMP；随后一些剩余的页面底部等部分的布局对象被添加到布局树中并进行绘制，最终页面在2.425秒完成。 从这个例子中我们会发现，布局对象的数量与页面加载的完整性密切相关。 经过大量试验与测试，最终发现大量的新布局对象被添加到布局树中的时间，和FMP非常接近。并且在FMP这个场景下，新布局对象的数量比重新布局的布局对象数量更重要。 所以我们得出一个关于FMP的公式： ``` FMP = 最大布局变动之后的那个绘制（Paint） ```...
关于本书的任何意见和建议都可以在这里讨论~ 可以在这里免费阅读本书第九章：[http://www.ituring.com.cn/book/tupubarticle/25715](http://www.ituring.com.cn/book/tupubarticle/25715) 书中的代码：https://github.com/berwin/easy-to-understand-Vue.js-examples 也可以加入本书的微信讨论群（群已满100人，添加微信 `Berwin1995` 我拉进群，加我好友时建议说明自己是Vue.js读者）。
About Me
刘博文（Berwin），花名“玖五”，畅销书[《深入浅出Vue.js》](https://item.jd.com/12573168.html)作者、Speaker、阿里巴巴集团前端技术专家、天猫双11大促会场消防员、现负责包含天猫双11在内的超大型营销活动会场的终端渲染架构与专项PM。 简单经历： * 2012年，17岁，中专毕业 * 2015年，20岁，加入奇舞团（360体量最大、国内TOP级的前端团队） * 2018年，23岁，加入W3C Web性能工作组 * 2019年，24岁，出版首部技术畅销书籍[《深入浅出Vue.js》](https://item.jd.com/12573168.html) * 2020年，25岁，加入淘系技术部（阿里巴巴体量最大的前端团队，也是世界东半球最大的前端团队），完成25岁P7小目标，负责11.11、618等超大型营销活动的终端渲染架构与会场PM，帮助亿级消费者剁手。 * 2020年，25岁，获得天猫618战役淘系技术部奖励优秀PM的《码上燃 - 此时此刻非我莫属》荣誉 * 2022年，27岁，获得FY2022年度大淘宝终端技术部《团队贡献奖》 * 2022年，27岁，Coding Master夺冠（大淘宝技术部范围内，由架构组牵头组建三个评委组覆盖三大技术栈：前端、服务端、客户端，对代码进行评分。评委组由P8为主少量P9和资深P7组成，经历两轮评审合议选出优秀代码获胜者，三大技术栈各一名），荣获Golden Coding Master称号 > I have a dream and...
# 谈，前端框架的『御剑之道』 > 你在使剑，是的，但是你的目的是杀人，直追你的目标，忘记手中长剑，才能使出最高的剑法... 而这世上又有多少剑客， 拘泥于手中快剑而落入俗套，终究无法到达登峰造极的境界... ----阿莱克西斯 剑，是剑客的武器，而现代前端工程师的剑可以理解为前端框架(当然不止是前端框架，但今天我们**只谈前端框架**)。 所谓御剑之道，指的是如何驾驭所有前端框架。对，你没有看错，是所有，而不是某一个。 如果是介绍如何驾驭某一个框架，那么本文的标题可能就要改成“御剑之术”，但本文介绍的是“御剑之道”。 现代前端程序员刚一入行就要选择一款前端框架来作为自己的技术栈，比如Vue，React，Angular等。包括各种公司的招聘信息上也会写上自己希望应聘者掌握至少一种前端框架。所以很多人就会有一种困惑：我应该选择哪款框架作为我的技术栈？  图片来自[@jwcarrol](https://twitter.com/jwcarroll) 如果你存在下面这些困惑，那么本篇文章会帮助到你： 1. 你是初学者，不知道应该学习哪款框架来入门。 2. 你是有经验的程序员，对于不断出现的新东西感到困惑，不知道应该“投资”哪种技术。 3. 刚学会一个新东西，然后就发现过时了。累觉不爱，求别更新老子学不动了。 4. 你的团队为使用哪个框架而争论不休，甚至发生宗教斗争。 我本人对Vue是最熟的，熟悉到什么程度呢？几个月前我就已经写完了一本介绍Vue原理的书（《深入浅出Vue.js》）还没上市，但我并不觉得自己是Vue阵营的人。我觉得自己是无阵营的，或者换一种角度来讲，“框架并不是我的剑”。 > 这本书是与人民邮电出版社签约的，预计过不了多久就会和大家见面了。 > > 对于这本书的内容质量大家尽管放心。人民邮电出版社出版的书，质量都不会差。就算大家不相信我，也要相信出版社。 对于初学者来说，开局能够掌握一把绝世好剑，固然会在前期得到很大的帮助，一招练成，出手就能伤人。但也正是这把剑，如果不能在合适的阶段把它丢掉，那么它会限制自己无法到达登峰造极的境界。 独孤求败被称为『剑魔』，而他最终的境界是无剑。...
# 我在阿里半年收获的成长 > 本文作者：刘博文（Berwin），花名“玖五”，畅销书《深入浅出Vue.js》作者、知名技术博主、讲师、阿里巴巴淘系技术部前端技术专家，现负责淘系618、双11等超大型营销活动主会场的终端渲染架构。 > Twitter：https://twitter.com/jiuwu_lbw > 博客：https://github.com/berwin/Blog/issues > 知乎：https://www.zhihu.com/people/berwin-95/ 回想起年初刚来杭州那会，是疫情正严重的时候，那时候刚来杭州要住半个月的酒店，然后才能进入阿里巴巴溪西园区（后续简称”园区”），时间过得飞快，一晃已经来杭州半年了，这半年经历了很多，也学到了很多，写一篇文章总结下这半年来自己的成长。 ## 1. 勇于挑战权威 > 要勇于挑战权威，发现现有技术体系的问题，并解决它。 记得当时刚来杭州时，心情是非常忐忑的，对未来非常憧憬，能和那么多很厉害的工程师一起工作是一件特别爽的事，再加上我们团队是做双十一大促会场的，咱们技术人都知道双十一对工程师来说意味着什么。入职后，一大堆技术名词和各种技术体系铺面而来也确实让我感受到了技术的强大，所以就一直以学习的心态在了解和接触现有的技术体系。 进入园区后第二个月就开启了618战役，感谢主管墨冥的信任，当时我承担了一个非常重要的专项PM（Project Manager），它在整个618战役里都算是风险和挑战都非常高的专项，也是因为这件事干的还不错，上线后非常稳定，因此我获得了618战役奖励优秀PM的一个“厉害了Work哥 - 此时此刻非我莫属”奖，奖状在淘宝楼里挂了三四个月，**“入职不到3个月就获奖”** 应该算是比较值得自豪的事了。  说这个当然不只是为了显摆，就在我以为自己表现非常好的时候到了转正面试的时间，虽然通过了试用期，但得到的反馈是对我的表现没有超出预期，我的执行力虽然很强，但我 **“没有对现有技术体系带来变化”**。 换句话说，招我来的目的不是来当资源的，618战役虽然打的不错，但说实话换个人上去又能差到哪里去？大家对我的期望是对现有比较成熟的体系带来变革。 那怎么对现有体系带来变革？经过大家的引导和我自己的思考，答案是：”发现现有体系的问题“。我刚来觉得这里技术体系特别牛，加上沉淀了这么多年的双十一，已经是比较成熟的技术，觉得这是一个权威，不可能有问题，所以一直抱着膜拜的想法在了解和学习现有体系，所以这就是问题所在。 这时候我学会的最深刻的一个成长是：**“要勇于挑战权威，发现现有技术体系的问题，并解决它。”** ## 2....