简历调优

awesome

改进方向

团队 leader 意识

团队协作

协作工具

协同富文本编辑器
- https://github.com/WindRunnerMax/BlockKit/blob/master/NOTE.md

数据监控、运营管理

使用数据埋点
开发埋点监控平台、SDK、浏览器 DevTools 插件
性能优化监控全链路性能优化性能检测 Lighthouse 计算方式
- 前端监控SDK web-see
全链路日志，全局唯一请求
[ ]

内部工具、前端基建

研发提效

devtool直接打开文件原理
[ ]

测试优化

单元测试
- 原理
  - Istanbul 原理
自动化测试
UI 测试、设计走查自动化
[ ]

性能优化

// requestIdleCallback，支持在每帧绘制空闲期执行一个回调函数，但不能确保一定执行。

// 所以我们只能自己想办法判断了，思路其实也比较简单，浏览器的渲染进程有js引擎和UI引擎这两个线程，只要这两个线程是空闲的，我们就认为页面是空闲的，这应该是行得通的。

// 检测js线程空闲
const d1 = new Date();
setTimeout(()=＞{ 
    const offset = new Date() - d1;
    if (offset < 25 ) { 
      // JS线程空闲 
    }
}), 20);


// 启动一个延时函数，查看真正执行时候的延时是多少，如果延时很大，那说明当前js引擎繁忙。如果小于某个阈值，那说明js引擎空闲。

// 这个阈值该如何确定呢？统计真实用户的情况肯定是最准确的，所以我们用一个空闲页面统计了用户的延时均值，最终确定为5ms。

// 同样的思路，UI引擎的空闲也可以检测出来：

// 检测UI线程空闲
const d1 = new Date();
requestAnimationFrame(()=＞{
    const offset = new Date() - d1;
    if ( offset < 30 ) { 
      // UI线程空闲 
    }
})

// 阈值的确定也是统计的真实用户均值，最终确定为30ms。

// 有了这两项检测，我们就拿到了页面的“空闲时刻”。那如何“尽早的”拿到呢？做法相对简单，我们在页面加载完后用setInterval启动轮询，每隔1秒检测一次，一但检测到空闲，就进行资源预加载。

高性能专题
- web worker
- wasm
- gpu.js
- node-gyp
- headless-gl
- node-webgl
- node-bindings

技术负债治理

登录无限跳转轮询

日志方向

故障检测，错误上报
离线解析 sourcemap cli 参考：https://github.com/7ippo/sourcemapping
sourcemap 可视化
- https://github.com/evanw/source-map-visualization
- https://github.com/sokra/source-map-visualization/
chrome debug protocol | v8 debug protocol
- https://juejin.cn/post/7096811694277525511#heading-19

页面改进、用户体验

异常兜底

页面白屏监控
[ ]

多端开发、大前端、小程序系列

后端方向

客户端方向

加壳/加密
跨平台
程序通信
异构
[ ]

底层方向

Windows api
[ ]

数据库方向

表字段冗余
数据一致性
幂等性
日志
[ ]

基础工具方向

bun、deno
typescript 增强
- 类型体操之实现一个类C风格语言的解释器 - toc
tsrpc
ast 解析
- 从0开始手写 JS Parser (AST)
- 推荐 Tiny JavaScript parser and generator. ranlexer

计算机基础

操作系统
计算机网络
编译原理
数据结构

对接第三方平台

wxpay、alipay
QQ OAuth2.0
SSO
双 token
[ ]

企业级方向

cas、oauth、ladp、http ba
全局水印
内部 office
- 开发一个腾讯文档要多久？借助 Luckysheet，仅需 3 分钟！

真实项目经历

特殊功能方向

开源

产品、UI、UED、项目管理

有产品、交互、设计等方向能力与经验者
参与产品功能开发的需求评审
结合应用场景和客户需求，提出专业合理的可视化方案建议
项目管理项目排期工程管理

DevOps、运维部署优化

canvas

JS engine

【深度】扒开V8引擎的源码，我找到了你们想要的前端算法 https://juejin.cn/post/6844903935375835150?from=search-suggest
promise.then 中 return Promise.resolve 后，发生了什么？ https://www.zhihu.com/question/453677175/answer/1841325386
V8 Promise源码全面解读 https://juejin.cn/post/7055202073511460895#heading-39
微任务终极考验，一文讲解async/await转换Promise https://zhuanlan.zhihu.com/p/450906325

V8 重点

tim sort

手搓 js 引擎

浏览器组成原理

网络 & 协议

手搓 socks5
- 实战：150行Go实现高性能socks5代理
- https://gist.github.com/felix021/7f9d05fa1fd9f8f62cbce9edbdb19253
手搓 Shadowsocks / ShadowsocksR
- https://github.com/shadowsocks/go-shadowsocks2

排版引擎

IFC

招聘要求

对某一领域有深入理解包括但不限于$/浏览器内核/性能优化/ reacti源码vue源码

手撕

十分钟，带你深入了解 axios 源码实现

前端开发中有什么经典的轮子值得自己去实现一遍？ - 晴小篆的回答 - 知乎 https://www.zhihu.com/question/29380608/answer/2972536238

推荐 redux 源码：代码量比较小，设计模式是非常优秀的。

其次 koa 源码：代码量也不大，洋葱模式不了解一下？

umi-request：所有 request 该有的功能都有，非常的强大，设计模式也是洋葱，还有中间件，拦截器等，非常适合新人入手学习！

dayjs ：Moment.js 的 2kB 轻量化方案，拥有同样强大的 API；能完美复刻那么强大的 Moment，而且整个工程项目 零依赖!

solidjs： 这个可以说是继前端三大框架之后，最有名的 web 框架了。性能极其强大、兼容 jsx 语法、压缩之后GZIP 57AE 只有 7k，它的源码包也是零依赖，难道不想看看它是怎么实现的？

map-obj：这个比价小众了，是做深度对象遍历的，怕大家找不到我直接贴链接，怎么说呢，源码就 70 行，掌握好其中精髓之后，妈妈再也不用担心面试官问我深度遍历与递归问题了。https://github.com/sindresorhus/map-obj

**ahooks：**高质量高可靠性的 [react hooks](https://www.zhihu.com/search?q=react hooks) 封装。之所以推荐他，因为它的源码里面有 demo、有 test，各种各样的 hooks 封装可以说是涵盖各种各样的业务开发场景。可以说是保姆级教程封装的封装。也是妈妈不用担心面试官问我 react hooks 相关问题。

fast-diff: 这个也比较小众，当然也是零依赖，它的作用是对大对象进行深度对比，它有用极快的 diff 算法。推荐这个的原因是，这个库算法优秀，代码量也比价少，而且作者代码注释写的非常好非常多，生怕你不懂，可以说是代码的一半都是注释。 https://github.com/jhchen/fast-diff

flatiron/prompt: 非常漂亮的交互式命令行工具，是不是感觉很屌，不好意思，源码只有 800 行，而且超过半数都是注释，也是保姆级学习项目。如果你想学习 Nodejs 工具链，千万不要错过。 https://github.com/flatiron/prompt

simoneb/axios-hooks: axios 大名鼎鼎没人不知道吧。axios-hooks 估计就没有认知到了，实际上就是 axios 的 hooks 封装，源码只有 300 行，测试好，封装好，还有很多 demo 示例，直接跑测试就很容易入手。妈妈不用担心我不会优雅的 react hooks 封装。 https://github.com/simoneb/axios-hooks

sindresorhus/array-move： 如何优雅移动数组？ 16 行源码码带你了解答案。 GitHub - sindresorhus/array-move: Move an array item to a different position

adamwdraper/Numeral-js： 强烈推荐！！！这个是是做数字串格式化与数字操作的。功能非常的强大，放两个图自己感受一下就懂了。而且它竟然是零依赖家族， 最简单的代码实现最强大的功能。源码看不懂都没关系，有着三倍于源码的单测量，看不懂源码直接一步一步 debug 来看。保姆级！

wechatsync/Wechatsync： 一键同步文章到多个内容平台，支持今日头条、WordPress、知乎、简书、掘金、CSDN、typecho各大平台，一次发布，多平台同步发布。

这个真的是学习 chrome 插件开发的神级项目！！！学习这个可以深入理解 chrome 登录状态获取、markdown 文档转换、爬虫抓取等一些列的技术和能力；

feross/clipboard-copy： 轻量级API ,直接复制内容到粘贴板。源码非常少，只有60行源码，功能很强，做到了复制内容到粘贴板，支持了降级处理等。主要可以看看，如果在 navigator.clipboard.writeText api 无法使用的情况下，该如何处理复制内容到粘贴板的问题； https://github.com/feross/clipboard-copy

scroll-into-view: 这个就很牛逼了，在你页面非常长的时候，可以通过这个 api 直接给定元素，可以让给定的元素直接滚动到可视区；大名鼎鼎的 antd 就用到了这个库，在表单场景自动跳转到错误的元素就是用的他。它有两个核心库，加起来代码不超过 600 行（其中一半都是注释），也是保姆级教程；项目链接安排： https://github.com/scroll-into-view/scroll-into-view-if-needed https://github.com/scroll-into-view/compute-scroll-into-view

rstacruz/nprogress：这个项目虽然有一定年代了，但是内容一点儿也不过时。它是给页面顶部添加加载进队条的。功能强大、源码不多、零依赖、实现简单、兼容性极强；如果再配合获取页面静态资源加载进度，岂不是爽歪歪，最牛逼的页面加载进度条：如何实现网页资源加载进度条？

puleos/object-hash: 基本上囊括了所有前端主流加密相关内容；源码也不多，零依赖；还怕面试官问你加密问题？不存在的。

sindresorhus/p-defer： 非常经典的 defer 函数；使用场景非常多。举一个例子，比如A 页面执行了某一个操作，同时 B 页面也执行了某一个操作。但是我需要在 A 页面执行完成之后，再执行 B 页面的后续操作任务，甚至 B 页面的后续操作任务还需要拿到 A 页面的值；这个场景下 defer 函数作用就凸显出来了。源码只有 6 行；项目链接：GitHub - sindresorhus/p-defer: Create a deferred promise

cnwhy/nzh： 阿拉伯数字转中文，支持简体繁体。来看看使用示范:

var nzhcn = Nzh.cn;                 // 使用简体中文,  另外有 Nzh.hk -- 繁体中文

nzhcn.encodeS(100111);              // 转中文小写 >> 十万零一百一十一
nzhcn.encodeB(100111);              // 转中文大写 >> 壹拾万零壹佰壹拾壹
nzhcn.encodeS("1.23456789e+21");    // 科学记数法字符串 >> 十二万三千四百五十六万万七千八百九十万亿
nzhcn.toMoney("100111.11");         // 转中文金额 >> 人民币壹拾万零壹佰壹拾壹元壹角壹分

kevva/download： 下载和提取链接文件。是一个 nodejs 库，非常短小精悍，只有 100 行不到的源码。项目链接：https://github.com/kevva/downlo

参考文章

前端结构

画图功夫

如何画好技术图？

简历注意事项

排版

有哪些模块

尽量多参考各个写简历网站的参考模块，结合自身情况考虑

实习僧	BOSS 直聘	...

代码随想录程序员的简历应该这么写！！

Name		Name	Last commit message	Last commit date
Latest commit History 105 Commits
README.md		README.md
【前端八股文】.md		【前端八股文】.md
前辈思考.md		前辈思考.md
学一些有意思的东西.adoc		学一些有意思的东西.adoc

eric-gitta-moore/resume-tweak

Folders and files

Latest commit

History

Repository files navigation