ssh
## 前言 TypeScript 中有很多地方涉及到子类型 `subtype`、父类型 `supertype`、逆变和协变`covariance and contravariance`的概念，如果搞不清这些概念，那么很可能被报错搞的无从下手，或者在写一些复杂类型的时候看到别人可以这么写，但是不知道为什么他可以生效。（就是我自己没错了） ## 子类型 比如考虑如下接口： ```ts interface Animal { age: number } interface Dog extends Animal { bark(): void } ``` 在这个例子中，`Animal` 是 `Dog`...
## 前言 前端路由一直是一个很经典的话题，不管是日常的使用还是面试中都会经常遇到。本文通过实现一个简单版的 `react-router` 来一起揭开路由的神秘面纱。 通过本文，你可以学习到： - 前端路由本质上是什么。 - 前端路由里的一些坑和注意点。 - hash 路由和 history 路由的区别。 - Router 组件和 Route 组件分别是做什么的。  ## 路由的本质 简单来说，浏览器端路由其实并不是真实的网页跳转（和服务器没有任何交互），而是纯粹在浏览器端发生的一系列行为，本质上来说前端路由就是： **对 url 进行改变和监听，来让某个 dom 节点显示对应的视图**。 仅此而已。新手不要被路由这个概念给吓到。...
## 前言 这几天 Vue 3.0 Beta 版本发布了，本以为是皆大欢喜的一件事情，但是论坛里还是看到了很多反对的声音。主流的反对论点大概有如下几点： 1. 意大利面代码结构吐槽： > “太失望了。杂七杂八一堆丢在 setup 里，我还不如直接用 react” > 我的天，3.0 这么搞的话，代码结构不清晰，语义不明确，无异于把 vue 自身优点都扔了 > 怎么感觉代码结构上没有 2.0 清晰了呢 😂 这要是代码量上去了是不是不好维护啊 2. 抄袭 React 吐槽： >...
前端高级进阶指南
## 前言 我曾经一度很迷茫，在学了 Vue、React 的实战开发和应用以后，好像遇到了一些瓶颈，不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题，这篇文章，笔者想结合自己的一些成长经历整理出一些路线，帮助各位初中级前端工程师少走一些弯路。 这篇文章会提到非常非常多的学习路线和链接，如果你还在初中级的阶段，不必太焦虑，可以把这篇文章作为一个进阶的`路线图`，在未来的时日里朝着这个方向努力就好。 我也并不是说这篇文章是进阶高级工程师的唯一一条路线，如果你在业务上做的精进，亦或是能在沟通上八面玲珑，配合各方面力量把项目做的漂漂亮亮，那你也一样可以拥有这个头衔。本文只是我自己的一个成长路线总结。 本篇文章面对的人群是开发经验`1到3年的初中级前端工程师`，希望能和你们交个心。 已经晋升高级前端的同学，欢迎你在评论区留下你的心得，补充我的一些缺失和不足。 笔者本人 17 年毕业于一所普通的本科学校，20 年 6 月在三年经验的时候顺利通过面试进入大厂，职级是高级前端开发。 [我的 github 地址](https://github.com/sl1673495)，欢迎 follow，我会持续更新一些值得你关注的项目。 [我的 blog 地址](https://github.com/sl1673495/blogs)，这里会持续更新，点个 star 不失联！✨ ## 基础能力 我整理了一篇中级前端的必备技术栈能力，[写给女朋友的中级前端面试秘籍](https://juejin.im/post/5e7af0685188255dcf4a497e) 。这篇文章里的技术栈当然都是需要扎实掌握的，（其实我自己也有一些漏缺，偷偷补一下）。 当然了，上进心十足的你不会一直满足于做中级前端，我们要继续向上，升职加薪，迎娶白富美！ ##...
最近看到阿里前端技术专家狼叔在 17 年的这篇[《迷茫时学习 Node.js 最好的方法》](https://zhuanlan.zhihu.com/p/29625882)提到： > 今天小弟过来找我，说迷茫，我告诉他一个密法：一天看 10 个 npm 模块，坚持一年就是 3000+，按正常工作需要，超过 200 个都很厉害了。 第一次看到的时候感觉**有点鸡汤**，但静下心来仔细想想却不无道理，以 Vite 来举例子，我在看它代码的时候，印象很深的一个点就是各种开源模块信手拈来，恰到好处的解决了需求，这种能力是一定需要大量的开源模块阅读量的。 ### Vite magic-string 比如 Vite 中大量运用 [magic-string](https://www.npmjs.com/package/magic-string) 这个库做一些字符串的魔术替换，这个库的目的就是在一些轻量级替换源代码的场景中替代 AST 这种过于庞大的解决方案。 ```js var MagicString...
## 背景 字节跳动发展至今，线上已经有数量级庞大的 Web 项目，服务着数以亿计的用户。 随着用户数量的不断增长，对于**站点体验衡量**的的需求也日益紧迫，用户会将产品和他们每天使用的体验最好的 Web 站点进行比较。想着手优化，则必须先有相关的监控数据，才能对症下药。 **性能是留住用户的关键。** 大量的研究报告已经表明了性能和商业成绩的关系，糟糕的性能会让您的站点损失用户数、转化率和口碑。**错误监控则能够让开发者第一时间发现并修复问题**，单靠用户遇到问题并反馈是不现实的，当用户遇到白屏或者接口错误时，更多的人可能会重试几次、失去耐心然后直接关掉您的网站。 字节跳动开发团队根据内部数十款产品的体验监控需求，逐渐打磨出了一版性能监控平台。经过不断的锤炼和沉淀，正式在火山引擎上对外发布**应用性能监控** **全链路版**。本文将会重点介绍它到底是一个怎样的监控平台，以及可以帮助企业解决哪些痛点。 ## 产品简述 应用性能监控全链路版是字节跳动旗下的企业级技术服务平台，为企业提供针对应用服务的品质、性能以及自定义埋点的 APM 服务。 基于海量数据的聚合分析，平台可帮助客户发现多类异常问题，并及时报警，做分配处理，同时平台提供了丰富的归因能力，包括且不限于异常分析、多维分析、自定义上报、单点日志查询等，结合灵活的报表能力可了解各类指标的趋势变化。更多功能介绍，详见各子监控服务的功能模块说明。  ## 产品亮点 该部分仅以整个产品的视角说明了应用性能监控全链路版的亮点，更多技术亮点与优势，我们会在各功能模块中为您详细说明。 **更低的接入成本：** **非侵入式** **SDK** 在接入 SDK 时，只需要初始化几行代码即可接入成功。 ```js npm...
先放个彩蛋，Nuxt3 官网有趣的小交互：  NuxtJS 让你构建你的下一个 Vue.js 应用程序变得更有信心。这是一个开源的框架，让 Web 开发变得简单而强大。Nuxt 3.0 来了，让我们一起来看看它有哪些让人激动的新特性！ ## 新特性！ Nuxt 3 的重构精简了内核，并且让速度更快，开发体验更好。 ### 更轻量 以现代浏览器为目标的情况下，服务器部署和客户端产物最多可达 **75** 倍的减小。 ### 更快 用动态服务端代码分割来优化冷启动，由 nitro 提供能力。 ###...
React 官网介绍了 Hook 的这样一个限制： > **不要在循环，条件或嵌套函数中调用 Hook**， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 `useState` 和 `useEffect` 调用之间保持 hook 状态的正确。(如果你对此感到好奇，我们在下面会有更深入的解释。) 这个限制在开发中也确实会时常影响到我们的开发体验，比如函数组件中出现 if 语句提前 return 了，后面又出现 Hook 调用的话，React 官方推的...
前端算法进阶指南
## 前言 最近国内大厂面试中，出现 `LeetCode` 真题考察的频率越来越高了。我也观察到有越来越多的前端同学开始关注算法这个话题。 但是算法是一个门槛很高的东西，在一个算法新手的眼里，它的智商门槛要求很高。事实上是这个样子的吗？如果你怀疑自己的**智商不够**去学习算法，那么你一定要先看完这篇文章：[《天生不聪明》](https://mp.weixin.qq.com/s/QvXIDpyrpiOmvEhcOUUmxQ)，也正是这篇文章激励了我开始了算法之路。 这篇文章，我会先总结几个**必学的题目分类**，给出**这个分类下必做例题**的详细题解，并且在文章的末尾给出**每个分类下必刷的题目**的获取方式。 一定要耐心看到底，会有重磅干货。 ## 心路 我从 5 月份准备离职的时候开始学习算法，在此之前对于算法我是**零基础**，在最开始我对于算法的感受也和大家一样，觉得自己智商可能不够，望而却步。但是看了一些大佬对于算法和智商之间的关系，我发现算法好像也是一个通过练习可以慢慢成长的学科，而不是只有智商达到了某个点才能有入场券，所以我开始了我的算法之路。通过**视频课程** + **分类刷题** + **总结题解** + **回头复习**的方式，我在两个月的时间里把力扣的解题数量刷到了**200**题。对于一个算法新人来说，这应该算是一个还可以的成绩，这篇文章，我把我总结的一些经典题解分享给大家。 ## 学习方式 1. **分类刷题**：很多第一次接触力扣的同学对于刷题的方法不太了解，有的人跟着题号刷，有的人跟着每日一题刷，但是这种漫无目的的刷题方式一般都会在中途某一天放弃，或者刷了很久但是却发现没什么沉淀。这里不啰嗦，直接点明一个所有大佬都推荐的刷题方法：把自己的学习阶段分散成几个时间段去刷不同分类的题型，比如第一周专门解**链表**相关题型，第二周专门解**二叉树**相关题型。这样你的知识会形成一个体系，通过一段时间的刻意练习把这个题型相关的知识点强化到你的脑海中，不容易遗忘。 2. **适当放弃**：很多同学遇到一个难题，非得埋头钻研，干他 2 个小时。最后挫败感十足，久而久之可能就放弃了算法之路。要知道算法是个沉淀了几十年的领域，题解里的某个算法可能是某些教授研究很多年的心血，你想靠自己一个新手去想出来同等优秀的解法，岂不是想太多了。所以要学会适当放弃，一般来说，比较有目的性（面试）刷题的同学，他面对一道新的题目毫无头绪的话，会在 10 分钟之内直接放弃去看题解，然后记录下来，**反复复习**，直到这个解法成为自己的知识为止。这是效率最高的学习办法。 3....
>大家好，我是来自字节跳动 Web Infra 团队的 **ssh**。 > >之前三四月的时候我为了我们 APM 性能监控团队的招聘，建立了字节面试的群。时间过去了几个月，求职的同学们也基本都找到了自己满意的新工作。 > >那时候为了想进字节的老铁们准备了一份 QA，这里的问题都是当时招聘群的群友们提出来的，我想也能代表一部分对字节有好感的**新生代前端民工们**所关心的问题吧，所以今天我把这篇 QA 整理优化以后发布出来，希望对你有所帮助。 > >以下是 QA 的内容： # 卡学历吗？大专学历可以进不？ 社招学历是个非常热门的话题，相比大部分互联网大厂，字节是属于比较开放包容的一类了，原则上是**本科及以上**，但如果你有以下这几种特质之一： 1. 开源项目加成，直接来个什么 React Contributor 还怕谁？ 2. 社区大佬，自带流量自带光环，且实力也到位。 3. 在公司主导完成了很复杂的项目，让人眼前一亮。...