搭建运行时自动路由工程
运行时加载资源除了用amd的require.js
webpack构建前全量生成路由方案
打包一个资源后umd挂载
还能抛出变量
monorepo写一个自己的简易脚手架，用来做学习操练场
- 使用cdn的
- vue2
- vue3
前端监控
后端nest.js
vant-ui源码
内置依赖的项目管理方式
用web components 搭建前端组件库
移动端 pc端-难度大：table和树状组件可以锻炼
nodejs搭建后端微服务
自动生成组件库文档支持web components
学习开源的web components组件库源码
http缓存策略+CDN缓存+serviceWorker缓存 笔记及视频
https证书加密概念 笔记及视频
各种打包工具的模块化 笔记及视频
- 研究新型打包工具或编译器
indexDB的使用场景 vuex的持久化缓存？
UMD在工程里面，用loadJS会命中AMD的define？用webpack的import回命中window？ 浏览器中的模块化，第三方资源一般暴露的是UMD，即工程支持requirejs则命中AMD的defind，否则挂在全局变量中 UMD的结果其实都是实现浏览器异步加载资源文件，只是加载完成的实例挂在哪里由具体支持决定 所以为了避免全局变量污染才需要用到requirejs？不在乎全局变量的话，少引入一个requirejs是好事？
学习vue3，同时学习vue2源码
学习ts
学习打包工具vite
面试准备
- 理清项目中用到的技术
- 遇到的难点有哪些 又是怎么解决的
- 对项目做过哪些性能优化
- 做过的亮点有哪些
👆 回答的不够深度，技术上会给面试官一种技术深度还有一点欠缺的感觉
面试流程
- 先面试一些小公司，基本都拿到 offer 了
- 再去面试一些不想去的大公司，觉得稳了
- 再面试最想去的公司
Vue 响应式原理，基本每个技术面试官都会问，以至于后面被问的时候，已经熟练到不敢说得太快了，怕被面试官看出来。
最终总结了几个面试官常问的非技术类的问题，可以提前准备一下，以免当场卡住，语无伦次导致给面试官留下不好的印象。
- 做个简单的自我介绍
- 为什么从上一家公司离职
- 主要两个原因，一个是想学习更多东西，另一个是老生常谈的薪资调薪困难问题。
- 你觉得上家公司做的怎么样
- 我觉得上家公司各种方面做的都不错，无论是公司环境，管理制度，团队氛围都很好，但是技术栈更新比较缓慢，调薪制度不理想。
- 你觉得你的优势/不足有什么
- 优势在于主动学习，乐于分享。不足是不感兴趣的内容学习不下去，比如数据库。
- 举一个例子，证明自己是乐于学习的
- 掘金社区优秀作者、公司的年度进步奖
- 你对自己的职业规划
- 一专多精。
- 你还有什么想要问我的么
- 我答得不好的地方，可以学习的地方
- 公司未来的技术更新等
录音多试着讲几遍
你与他人相比，有什么能形成明显区分度的优势条件？ 记录下你在这个过程中都遇到了哪些问题，分别是怎么解决的，写简历的时候翻一番
有亮点的技术介绍
- 做过一些深度的性能优化，并且有比较大的性能收益，能量化提升空间的
- 做过一些业务逻辑特别复杂、业务影响力特别大的项目
- 推进过一些制度、工具，深刻影响团队乃至整个公司的工作流程、工作方式，且整体有提效作用
- 用一些不太常见的技术，解决过对前端来说比较偏门的问题，例如视频直播
- 做过有一定名气，能真正解决技术问题的开源项目，demo、awesome-xxx 类的不在此列
- 深入学习一些工具的用法，以此解决了一些工程化、开发效率、性能方面的问题
- 给知名开源项目，提交过真正复杂有意义的MR，typo 类修复不在此列
- 钻研过一些框架的原理，并能持续输出足够多的有技术深度的文章，或者明确解决过项目中出现的复杂问题
项目经历
这段经历是否足够复杂？是否足够表现出你的最高水平？对于这里面用到的技术，你真的掌握的很好，能应对面试吗？
这里也列举几种反模式：
- 单点技术突破不算亮点，例如解决了某个 UI 框架的单个样式bug，体量太小
- 做了很多项目，不能称之为亮点，只能证明你可能已经工作了很久
- 技术框架、工具一直停留在用的阶段，对内部实现原理完全不清楚
- 仅仅解决一些很寻常，很普遍，网上有大量现成方案的问题不能算亮点
组织好语言，项目经历在时间轴上从远到近，围绕你所设定的主题逐步细化、深化，例如最开始的项目经历里面你只是用了这项技术，后续逐渐开始更好地应用生态；更理解实现原理并能够解决复杂的性能、工程化问题；甚至更进一步开发了一些有价值的开源工具，或者输出了一些高质量的文档反哺社区。要让面试官能够通过项目经历感受到你从小白逐步成长的过程
围绕上面树立下来的深度，向外扩展补充与前端基础强相关的工作经历，比如说 http、TLS、http2、TCP 等网络栈相关的性能优化、版本升级经历；或者，内存泄露的排查修复经验、FPS、FCP、FMP 之类指标过低的优化经验等等；又或者一些更复杂的开发场景，例如编辑器、编译器、可视化、复杂动画、多媒体等等
总结下来，尽量做到一专多能，既有深度又有广度
- 深度能够帮助面试官迅速判断你的技术栈，降低心智负担，看起来不累
- 广度能够帮助面试官识别你的学习能力、潜力、对复杂开发场景的承受度等
数据化
数字是个大杀器！正确使用各种量化指标能让你的简历更有重心，更有可信度，更容易获得认可。很多东西可以量化，比如说：
- 性能提升：性能优化通常是一种很综合很复杂的场景，需要足够的知识深度，需要灵活运用各种调试工具，所以面试官通常看到这种经历都会多加关注，如果能推断出优化前后的指标变化就更好了
- 业务提效：这方面通常是引入或者创造了某类工具，改变或优化原有工作流程达到局部或全局更优解，从而提升整体效率，优化方向不局限于开发团队内部。这类优化与业务紧密结合，换个业务方向的面试官可能很难从你做的事情 get 到点，如果能提供一些具体的优化数值是有助于读者做判断的，可以是流程提效了 xx %、工单完成率提升了 xx，达到xx、响应及时度提升了 xx 之类的
- 业务推进：假如有幸参与到一个发展比较猛的项目，而且你在这个项目中是比较核心的成员，那么可以考虑总结一下从开始到你准备离开的时候，项目的业务指标有多大的增长
- 影响力：影响力这个概念就比较主观难以量化了，但是也可以用别的指标从旁佐证，比如工作期间做了 xx 次部门内分享、xx 次公司范围分享、xx 次行业大型分享；或者是，输出了 xx 份博客之类的
项目经历编写示例
集成监控SDK, 包含页面测速, 错误异常, API质量, 白屏异常, URL异常, 收集项目中的各类错误信息并上报, 通过 performance API进行测速分析, 封装基础库ajax上报API错误信息; 在资源监控系统通过对各个端上报的指标进行清洗, 聚合以及数据分析, 错误模块聚合sourcemap还原源代码, 便于修复线上问题; 重构项目代码与调用链, 加载时间缩短20%;
这里面有一些明显问题：
- 语言组织太过平铺直书，感知不到重点
- 监控SDK是啥？集成方式又是怎么样的？这里面有多少工作量？有那些难点？ 形式与描述不好，阅读成本高
- 清洗、聚合、数据分析分别又是啥？前端在这里面做了什么？
- 错误模块聚合sourcemap？只有错误模块吗？聚合又是什么鬼？聚合还原完为什么就能“便于修复”线上问题？sourcemap 的原理又是什么？
- “重构项目代码” 与前面说的“集成监控SDK” 是什么关系？为什么要写在一起？
- 加载时间具体是指哪个指标？具体做了什么缩短的？
总结下来，我个人觉得问题主要是描述不清晰，很难理解这到底是一件什么事情，怎么做的，最后收益又怎么样。比较好的方式应该是：
引入(基于) xxx 搭建性能与异常监控体系，覆盖 FCP/FP/FMP/TTI/LCP 等性能指标；覆盖白屏、页面奔溃、JS 异常、http异常等错误场景。 在上述监控体系基础上，逐步推演出核心性能指标模型，以此为决策依据逐步执行图像合并、代码分包、缓存策略优化、首屏渲染优化、SSR 等措施，前端性能平均指标提升 xx%，QPS 提升 xx% 在上述监控体系基础上，优化项目 CI 工序，接入基于 webpack 的 sourcemap 映射能力，线上问题能够直接映射回源码堆栈，线上问题平均修复时间降低 xx%
这不是最好的表述，但是这已经充分说明了：用什么方式方法、具体解决了什么问题、最终收益是什么，相比于前面的写法，叙述上更严谨也更容易理解一些。
简历草稿
项目经验中要突出自己的贡献，不要描述一遍项目就完事了，要突出自己的贡献，是添加了哪些功能，还是优化了那些性能指数，最后再说说受益怎么样，例如这个功能被多少人使用，例如性能提升了多少倍。
XXX 项目出现 XXX 问题，我作为 XXX，负责其中的 XXX 部分，我通过 XXX 方式（或技术方案）成功解决了该问题，使 XXX 提高了 XXX，XXX 增长了 XXX。
遇到了什么问题：页面性能问题 在这过程中你是如何排查问题的：如何排查页面性能问题的 是如何定位问题的：通过火焰图发现某段长列表加载性能有问题 最终是如何解决这个问题的：通过虚拟列表来解决长列表问题
思考：发现团队使用的开发模板比较混乱，代码书写也不规范 设计：设计一个统一的脚手架工具，并且设计代码规范 解决：开发 CLI 工具，并且通过 ESLint/Prettier 解决代码规范问题 推动：通过宣讲等方式推动工具成为团队基础产品
现有项目模板webpack升级及优化 - 性能提升 lowcode配置化图片渐进式优化 构建时压缩生成缩略图base64模糊效果 babel定制化优化构建 ast原理 多页面应用，升级vue3，微前端方案 首屏速度，数据化分析过程 自动化多方配合换肤方案 - 业务提效 调起方案 插件式组件封装并开放使用 vuex用indexdb做持久化
工作内容的体系化，深度广度优缺优化 数据化
集成监控SDK, 包含页面测速, 错误异常, API质量, 白屏异常, URL异常, 收集项目中的各类错误信息并上报, 通过 performance API进行测速分析, 封装基础库ajax上报API错误信息; 在资源监控系统通过对各个端上报的指标进行清洗, 聚合以及数据分析, 错误模块聚合sourcemap还原源代码, 便于修复线上问题; 重构项目代码与调用链, 加载时间缩短20%;
XXX 项目出现 XXX 问题，我作为 XXX，负责其中的 XXX 部分，我通过 XXX 方式（或技术方案）成功解决了该问题，使 XXX 提高了 XXX，XXX 增长了 XXX。
组织将现有项目模板由webpack2升级到webpack5,包括各种依赖库babel6升级到babel7等等，重新规划分包策略实现按需构建，提高部署效率。重新定制化babel配置，按需转译。在此基础上，性能分析，前端构建同时打包出gzip，优化http缓存策略并引入serviveworker，添加构建生成缩略图loader实现渐进式图片加载，修改加载第三方库为异步加载。最终大幅提升构建速度，首屏速度。
实现自动化换肤方案
技能清单
（我一般主张将技能清单写入到工作经历里边去。不过很难完整，所以有这么一段也不错）
以下均为我熟练使用的技能
- Web开发：PHP/Hack/Node
- Web框架：ThinkPHP/Yaf/Yii/Lavarel/LazyPHP
- 前端框架：Bootstrap/AngularJS/EmberJS/HTML5/Cocos2dJS/ionic
- 前端工具：Bower/Gulp/SaSS/LeSS/PhoneGap
- 数据库相关：MySQL/PgSQL/PDO/SQLite
- 版本管理、文档和自动化部署工具：Svn/Git/PHPDoc/Phing/Composer
- 单元测试：PHPUnit/SimpleTest/Qunit
- 云和开放平台：SAE/BAE/AWS/微博开放平台/微信应用开发
工作经历
我在此项目负责了哪些工作，分别在哪些地方做得出色/和别人不一样/成长快，这个项目中，我最困难的问题是什么，我采取了什么措施，最后结果如何。这个项目中，我最自豪的技术细节是什么，为什么，实施前和实施后的数据对比如何，同事和领导对此的反应如何。
👆 单页多页的区别，为什么app用多页、H5用单页
一码两端 动态路由 一码两端 通用底层互相通知机制 内容发布 换肤 内容发布 多页发布订阅设计模式通知多个页签 迁移monorepo架构
封装全局变量存储常量，减少多余重复请求
- 直接按接口名和参数做 Map 的key
- 好处：不侵入业务代码
- 坏处：1. 不好管理所有的全局变量，借口或者参数如果要更新需要一个一个修改 2. 拓展性不好，比如调接口涉及修改全局变量中的值，要手动调接口更新缓存
- 封装成一个大类，按模块维护各自的一系列接口返回的常量，调接口用该类来调
- 好处：1. 方便按模块管理全局变量，修改一处代码，所有地方生效 2. 模块完全自定义方便+额外操作，比如更新全局变量中的某个值不需要调接口更新缓存
- 坏处：侵入业务代码，需要改为用全局变量的类来调接口
考虑到拓展性，封装成了一个全局变量类 并且考虑到全局变量可能导致的内存溢出(有些大量数据的常量，如城市、机构等) 参考了keep-alive的清除缓存机制 清除最久没有激活
问题1: 怎么计算内存占用，或者怎么定什么时候触发清楚 TODO: 问题2: 怎么判断多久没激活 获取缓存时存到队列最后
在线简历生成 👆 要登录微信，有账号历史简历信息，但是可能会挂