周骅的博客 - 所有文章
胡言乱语
周骅，前端研发，目前就职于字节跳动。
我的 2023 年度书单
消失的 13 级台阶 这是本年度我最喜欢的一本书，在我看来，这并不是一本小说，更与悬疑推理没什么关系，而是一篇社会学论文，探讨死刑的合理性、死刑刑法制度的合理性，以及日本的悔过和赎罪谅解制度的合理性等等话题。 我一直没有想过死刑是否应该废…
记录遇到的关于 regexp.test() 的一个小坑
起因是我的一段代码运行后得到了出乎意料的结果，类似于： 某些情况下， 可能越界，因而 可能是 。可不知为何，在这种情况下， 的结果竟然是 true。 做几个简单的试验： 再进一步实验，我发现只有 d、e、f、i、n、u 几个字母会通过…
Octalysis 游戏化框架理论
什么是游戏化 游戏化是指提取游戏中的那些引人入胜、令人着迷的元素，并应用到现实世界或产品设计的一种方法。 📖传统产品设计 以功能为中心 关注用户场景，注重效率 💥游戏化产品设计 以人的行为为中心 关注动机，并进行设计 你想体验哪种矿…
语雀的定价决策
今天一早，就有同事转发了语雀的新的付费计划：语雀个人版新定价的细则。虽然我不是语雀的用户，但我看到这份收费计划时，直观地感觉这个设计十分糟糕。有很多方面有都问题，比如分享功能收费，协作功能不收费、暗黑模式收费等等。而我今天着重要谈的一点错…
依赖注入与插件系统
很难得写点偏技术层面的东西。 在传统软件工程，特别是面向对象软件工程实践中，经常会提到“控制反转（IoC）”和“依赖注入（DI）”这样的名词。啥意思呢？解释起来其实不太容易。 我举一个不太恰当，但稍微能描述一下的类比，比如一台笔记本电脑，…
谈谈脱口秀大会第五季
这几天补了一下《脱口秀大会 5》，谈几点感受。最大的疑问是笑果这家公司怎么了。 首先抛开节目本身好看不好看，赛制合理不合理这些问题不论，《脱口秀大会》几乎是中国脱口秀演员线上表演的唯一方式，所以这个节目其实是很重要的。除了笑果，我在上海还…
郑庄公的性格分析（下）
郑庄公如何对待弟弟和母亲，多少还算家事范畴，而他如何对待周天子，则代表了他对待君臣纲常的态度。关于他不尊礼法，挑战天子的故事就更多了，第一件事就是周郑交质。 话说郑庄公与他父亲郑武公在位时都是周平王朝堂上的股肱大臣，称为卿士，相当于主政大…
郑庄公的性格分析（上）
郑庄公是春秋早期活跃在历史舞台的人物，对于他的评价，却经常是两极分化的，有人认为他是雄心勃勃的政治家，也有人认为他是阴险歹毒的阴谋家。我将从有关郑庄公的两件代表性事件出发，分析身处历史转折点的郑庄公，他的所思所想。 说郑庄公活跃在春秋早期…
“协作”是新一代办公软件的基石
近期比较引人注目的一件事就是 adobe 收购了 figma，虽然 figma 的高溢价导致 adobe 的股价应声下跌，但我认为对于 adobe 来说，却是转型的第一步，付出再大的代价都不可惜。 在我刚开始做前端时，设计师们是用 ai、…
西塘的两个世界
虽然久居上海，但从未到过西塘。西塘之于我的印象是江南水乡，古镇情调，人群熙攘。向往吗？也许吧，但也不期望有惊喜。 驱车不过一个半小时，就在午饭前赶到了西塘景区。路上车流不多，停车场也空空荡荡。大概近 40 度的高温让很多游客望而却步吧，也…
“从列表页到详情页”的传统交互逻辑正在消亡
今天有了一个不成熟的观察——“从列表页到详情页”的传统交互逻辑正在消亡。我还没有太深入地想清楚这个问题，今天初步聊一下吧。 从前，不管是 C 端还是后台，列表页 + 详情页的组合都是非常常见的。早年的 QQ 主界面就是好友列表，点了一个好…
生物学带给我的思想冲击
高中时因为竞赛，我额外花了很多时间学习生物。当然并没有学多深，就是基本学完了《普通生物学》。这段经历其实对我影响很大，高考后填报志愿时，曾在选择计算机相关还是生物相关专业纠结了很久，只不过最后计算机相关专业赢了。说回学习生物的事，那段时间…
为什么看病难？
今天第一次做 CT。不如借这个机会，谈谈医疗资源的问题。 如果一个市民需要去医院看病，那么优先去三甲医院还是社区医院，优先挂专家号，还是普通门诊？如果条件允许，我想相当一部分人会优先选择三甲医院，挂专家号。我们常常认为的医疗资源紧张，其实…
聊聊混动汽车
今天再来聊聊汽车，其实也不算，准确说借汽车聊聊思考问题的方式。 最近随着华为 aito 汽车的发布，增程式混动技术又被推到了风口浪尖。余承东、李想们鼓吹增程式技术的多么多么的好，而更多的声音则站在另一边，认为增程式技术与其他混动技术相比，…
就事论事的智慧
跟大家分享一下最近读到的一些有趣的思想，希望也 带给你启发。当然如果你有更好的见解，或者不同的观点，也欢迎一起讨论。 今天想跟大家谈的是看透本质的逻辑思维，和高效平和的沟通方式，所以我给本文取名为《就事论事的智慧》。 说到就事论事，很多人…
从“我打碎了夕阳……”谈诗歌鉴赏
今年 5 月抖音上出现了以『我打碎了夕阳』为开头的诗歌创作风潮，很有意思，涌现了不少好的作品。 聊具体作品前，我们先来破题。『我打碎了夕阳』作为诗歌的首句非常好，『打碎夕阳』这个意象极为宏大、磅礴，如果使用得当，就可能渲染出情绪的爆发。然…
因果谜思
遇到问题我们会问『为什么』，一条条因果链条构成了基本逻辑。探索大千世界背后的逻辑，是人类孜孜以求的目标。然而事实上我们掌握规律比掌握底层逻辑要容易得多，看得到的现象距离看不到的机制可能相隔无比遥远。《三体》里讲过两个很有意思的『寓言』，一…
游戏中的排行榜与勋章
我们在做一款叫《水果大作战》的游戏，近期看到了两个相关需求，一个是勋章，一个是排行榜。不如今天就以此为话题聊聊。 排行榜与勋章都是为了赋予玩家成就感，而产生一定的内在动力去更好地完成游戏内容。不过这两者都不应该是那么地理所当然，应当去避免…
我的产品观 - 2022
今天跟大家聊聊我的产品观，有许多观点来自其他人的输入，比如《俞军产品方法论》、louis 的产品效用论、黎婷的十倍体验差理论、张前川的一些分享等等。我们通过几个问题来开展我们的话题： 不懂用户，能做产品经理吗？ 我们交付给用户的是什么？ …
工具软件的 block 化趋势
最早接触以 block 为基本单元组织内容的软件是文档类应用 notion，后来涌现了很多类 notion 的应用，一个很大的特点是放弃传统的富文本编辑形态，转而通过一系列基本的内容 block 提升文档的表现力、工具性和多人协作的便利性…
古德哈特定律
古德哈特定律 今天我看这个博客从 5 月 5 日到现在，不到两周的时间，已经写了 10000 字，更新的频率也超出了我原本的预期。等等，为什么我要关注字数和更新频率？这两个指标很重要吗？这能代表什么吗？回到出发点，我为什么要写博客？我只是…
汉隆剃刀
记录一下今天看到一个有意思的思想：汉隆剃刀。 能解释为愚蠢的，就不要解释为恶意。 当生活中发生了不好的事情时，有人故意使坏其实是小概率事件，而更有可能是因为别人的愚蠢而导致的。这里的愚蠢更偏中性，可能是某人忘了、漏了、粗心错了、误会了、累…
成本与幸存者偏差
今天想聊的话题可能会比较无聊，记录一下路上开车的时候想到的一些东西。 上海封城期间，出门非常不方便，从居委开好出门证，一路上还会遇到好多警察设卡，检查核酸证明和出门证。我突然想，这些警察在查什么？肯定不是我这样的良好市民😉，也不是执行公务…
为什么技术改进那么难推
在研发团队里，我们常常碰到技术改进推不动的情况，比如组件规范、代码规范，比如单元测试，比如新的工具链等等。这些东西明明有用啊，为什么有的人就那么被动呢？ 有可能问题其实是出在这些技术改进上，从宏观上说，我们必须不断地改进方法，紧跟时代，不…
想对年轻工程师说的话
今天跟团队里几个刚毕业不久的研发同学聊天，有一些感想，整理成对年轻工程师的几点建议： 业务是大家的，成长是自己的 绝大多数研发都是投入在业务需求的开发中，很多人在其中花费了超过 100% 的工作时间，却体现不出参与感。为什么？或许是一种流…
核心用户与用户反馈
开始今天的话题前，我们先思考一个问题，我们的产品应该什么时候面向用户？初代学习灯是在2020 年 11 月发布的，但实际上软件功能与发布前 6 个月，基于 9 个月、12 个月前并无本质差异，那么中间这段时间是否是损失？我们有更多的产品/…
谈谈迭代与数据驱动
以我在字节这几年的感受，字节的产品性格是小步快走、数据驱动。今天我想聊聊产品迭代和数据驱动。 首先产品迭代是什么？我们把当前产品的状态（功能集合、数据指标等）记为 ，迭代过程记为函数 ，那么我们就得到了这样一个迭代函数 。我们的目标是在不…
从小红书想到的
已经被疫情封闭在家很长时间了，生活很大的一个变化是做饭成了日常生活的一部分。很久以前，我觉得做饭特别难，我不懂盐少许是多少，也不知道油温七成热是多热。但现在突然觉得做饭简单了很多，为什么呢？不是我做得多学会了，而是我有了不粘锅和抖音/小红…
GDG 分享 - RTC 技术在大力家教业务的应用
本文是 2022-01-15 GDG 主题分享内容的文字整理 前言 很多人可能不知道字节跳动的教育业务，其实我们在去年正式发布了“大力教育”这个品牌，产品线覆盖了几乎所有的教育相关细分领域。 『大力智能』呢是其中的教育硬件品牌。去年，与…
征服 number 类型的 input 框
在移动端 H5 页面开发中，有时候会有一些数值输入方面的需求。如果需要让用户比较方便地输入小数、负数，最简单的方式是使用 number 类型的 input 框，输入时软键盘会切换为数字键盘方便输入（ios 是带数字的全键盘，并允许 1e5…
从拥挤的兔子到伪随机数算法
阅读 《复杂》 一书时的笔记及延伸。 本文涉及到的生态学、数学、计算机科学部分都比较肤浅，如有错漏，欢迎斧正。 又是兔子 我们多少接触过这样一个 问题： 第一个月初有一对刚诞生的兔子 第二个月之后（第三个月初）它们可以生育 每月每对可生育…
快速排序算法的优化思路总结
前两天在 知乎 上看到了一个关于快速排序算法性能的问题，我简单总结了一个优化思路，现在在自己的博客里也贴一下吧，版权都是我的。 其实里面的大部分内容在我的另一篇博客里有讲过：深入了解 javascript 的 sort 方法 原回答：ht…
深入了解 javascript 的 sort 方法
在 javascript 中，数组对象有一个有趣的方法 ，它接收一个类型为函数的参数作为排序的依据。这意味着开发者只需要关注如何比较两个值的大小，而不用管“排序”这件事内部是如何实现的。不过了解一下 的内部实现也不是一件坏事，何不深入了…
让你的网站成为自定义搜索引擎
起 有一天，我在打理博客的时候，无意看到了这样的提示： “按 tab 可通过 zhouhua.info 进行搜索”？这是什么？于是我按了 tab： 看起来很高级嘛！输入“正则表达式”看看： 竟然真的有效果！到底发生了什么…… 打开 …
小心别落入正则回溯陷阱
不知才哪儿看来的： 如果你有一个问题，你想到可以用正则来解决，那么你有两个问题了。 我觉得正则表达式实在是一种人难以理解的语言，比 xml 还要逆天。不过它真的很好用。正则表达式的坑在于，看到一个正则，我们很难直观地知道它要做什么；写了一…
“===” 也有不靠谱的时候
自古js多奇葩，语言层面上有许多坑，入坑多了也就习惯了。那就再多一个坑吧。 javascript在判断两个值是否相等时，有两种方式 和 。这两者的区别我就不多说了，随便一本 js 书上都有，总之一般情形下我们有这样的结论： 省事，但结果…
谈谈正则表达式中的 “.”
好久没更新内容了，今天分享一个小的知识点，一个正则表达式方面的很容易被人忽视的坑。 我们知道，正则表达式中，可以用 表示任意单个字符，但在 underscore 和 jquery 的源代码中，我们可以看到，这些著名类库的代码中，经常并不…
干货！一步步实现自己的表单验证器
表单验证的需求简直太常见了。“所有用户的输入都是不可信的”这个思想指导我们在设计表单的时候，一定要进行用户输入的验证。对于用户体验而言，越早的反馈则越佳，所以表单验证的工作应该尽可能地在前端就进行（当然，前端对于后端而言也是输入端，所以后…
巧妙判断一个单词是否有重复字母
今天上午刷到一道题，大体是写一个方法判断一个单词中是否有重复的字母（或者说一个字符串中是否有重复的字符）。我的思路是一个字符一个字符地遍历，如果发现有重复的停止： 这种简单的场景下谈性能没什么意义，两次循环速度并不慢（ 也认为是一次循环，…
聊聊 rel=noreferrer 的事
背景 在一个页面 A 中，点击一个链接，浏览器会跳转到页面 B。那么如何描述 A 和 B 的关系呢？我们把 A 定义为 B 的 refer/referrer/referer（由于历史的原因，你看到上面这几个词都可以认为是同一个意思，下面统…
判断回文字符串的新方法
当年去携程面试时，刘大师问了一个判断回文字符串（类似于 123454321）的方法，我是有备而来，刷刷就写了： So easy。不过刘大师不喜欢这种 geek 范的东西，只好老老实实又写了一份循环版的……C++语言的……伪代码。还好当年不…
更优雅地绘制阴影
Box-shadow 虽然是一个 css3 的属性，但由于浏览器支持不错，且用它来营造一种立体感、层次感着实方便，这让它成为了互联网上随处可见的 css3 特效。不过我感觉想写好阴影不是一件容易的事情。至少我常常摸索半天，写出来的阴影却总…
带 Alpha 通道的色彩叠加问题
css3 的 rgba 色彩模式、png/gif 图片的 alpha 通道、canvas 的 rgba 色彩模式、css3 的阴影、css3 的 opacity 属性等等，这些应用在网页中，有意无意间，我们的页面多了许多半透明的效果。我们…
在 Node.js 中使用多线程编程
在以前的博文 别说不可能，Node.js 中实现 sleep 中，我向大家介绍了 Node.js addon 的用法。今天的主题还是 addon，继续挖掘 c/c++ 的能力，弥补 Node.js 的弱点。 我曾多次提到过 Node.js…
学写 jquery 缓动函数
问题引入：实现如下效果 两个方块的追逐效果，使用 css3，实现起来没什么难度： 用到了 css3 的 animate 属性，不是很复杂。不过出于兼容性的考虑，我们决定使用 jquery 的 animate 方法来重新实现。 简单粗暴地多…
别说不可能，Node.js 中实现 sleep
Node.js 最让人不爽的就是其单线程特性，很多事情没法做，对 CPU 密集型的场景，性能也不够强劲。很长一段时间，我想在 javascript 语言框架下寻求一些解决方案，解决无法操作线程、性能差的问题。曾经最让我印象深刻的方案是 f…
必会 CSS3 技能：background-clip/background-origin
CSS3 中新增了许多 background 类的属性。今天就来聊聊 background-clip 和 background-origin。为什么把它们俩放一起说呢？因为它们俩很“默契”地拥有相同的属性值。 background-cli…
phantomjs 配合 kindlegen，kindle 看天涯不费力
长姿势
javascript 有一个鲜为人知的运算符，叫“趋向于”， 写作 。可以声明一个变量 然后让它趋向于另一个数。 就会打印 9,8,7,6,5,4,3,2,1,0 了 2333333 认真就输了。
padding、margin 纵向取值问题
今天要说一个很基础，但被我自己忽略至今的一个简单问题：padding、margin 在纵向取值为百分数时，它们相对的是父元素的高度吗？ 这个问题之所以被忽略，是因为使用场景有限。因为在布局的时候，我们通常只关注宽度，流式布局、响应式布局中…
canvas 元素的宽高
设置一个元素的尺寸，推荐的做法是通过css设置其 和 。不过今天我们说说一个特例：。本文内容比较简单，我不做示例。 常见的设置 元素尺寸有两种方法。 给 元素设置属性，例如： 给 对象设置属性，例如： 不过如果你采用css来控制：…
javascript 实现各种字符串搜索算法
我觉得在前端开发中过多地考虑算法没有太多实际的意义。但这仅仅是我觉得，我并没有证据证明这一点。那为何不来尝试一下，面对一个特定的任务，我将使用不同的算法来实现，看看究竟效率相差多少。今天我想通过字符串搜索这一场景来进行测试。 测试场景 主…
另辟蹊径复制样式
技能get 先说一个需求，我想给一个元素应用另外一个指定元素的样式，应该怎么做？对于一个特定的项目，我想通常做法是规范代码风格，直接把 class 复制过来就可以了。但现实情况可能并不会如此简单。比如我们假定这个指定元素是不可预测的，它的…
phantomjs 使用说明
phantomjs 实现了一个无界面的 webkit 浏览器。虽然没有界面，但 dom 渲染、js 运行、网络访问、canvas/svg 绘制等功能都很完备，在页面抓取、页面输出、自动化测试等方面有广泛的应用。 安装 下载phantomj…
在 Node.js 中实现阻塞
Node.js 中与生俱来的单线程编程、回调函数异步式风格让我们有时喜有时忧。先说单线程，很多人会费解于 Node.js 的单线程如何能做到高并发？这个问题不是本文重点，点到为止。澄清一点，Node.js 的单线程仅仅指 javascri…
Application Cache
Application Cache 是 HTML5 为 web 应用离线使用而增加的 api，虽然都是有关存储，但与 LocalStorage、 Cookie、SessionStorage 有相当大的不同。Application Cach…
fibers in Node.js
fiber/纤程 在操作系统中，除了进程和线程外，还有一种较少应用的纤程（fiber，也叫协程）。纤程常常拿来跟线程做对比，对于操作系统而言，它们都是较轻量级的运行态。通常认为纤程比线程更为轻量，开销更小。不同之处在于，纤程是由线程或纤程…
如何在 Node.js 环境下操作 DOM
Javascript 之所以为 Javascript，很重要的原因是浏览器为其实现了 DOM 和 BOM 接口（参考）。但在 Node.js 环境下，并没有 DOM 和 BOM，所以 html 文档与其他类型的文档并无不同，很难进行处理。…
CSS 性能优化系列之加载原理
无论是一位前端开发人员，还是一位产品设计人员，永远需要把用户体验放在第一位。只有良好的用户体验才会带来用户的持续关注和产品使用。那么，对于网站的设计来说，良好的用户体验又是如何建立的呢？因素很多，例如快速响应、良好交互、配色和谐、高易用性…
从 +new Date 说起，Javascript 的一元操作符
在偶然打开 d3 的源代码的时候，我看到了这样一段代码。 大体上可以看出这是在 对象中加入一个 方法以获得当前时间。但是 似乎是一种很不合常规的写法，这个 是干什么用的呢？其实这里并没有用到很高级的 javascript 技巧，相…
