dw网站开发与设计实训总结,链家网站开发,做相册的网站有哪些,商务网站教程在掘金上当了几年的伸手党#xff0c;最近也准备输出一些自己的东西。关于我首先介绍一下我自己#xff0c;17 年毕业于一所 211 学校#xff0c;但是由于大学四年驰骋在召唤师峡谷#xff0c;毕业时也没有找到一份大厂的工作#xff0c;随便找了一家创业公司签了三方就去… 在掘金上当了几年的伸手党最近也准备输出一些自己的东西。关于我首先介绍一下我自己17 年毕业于一所 211 学校但是由于大学四年驰骋在召唤师峡谷毕业时也没有找到一份大厂的工作随便找了一家创业公司签了三方就去了。好在这家公司也挺给力我这一呆就是三年996 当着「全干工程师」从前端到服务端从 JavaScript 到 Java这几年下来都积累了一些经验不说精通也算是比较熟悉了。今年 7 月份的时候瞅着已经毕业三年是时候该考虑一下职业生涯的下一站了开始准备面试的事情。这里建议大家每一份工作度需要慎重考虑不要频繁跳槽。文章后面也会给出我的理由和建议。在职准备了 2 个月的面试开始试着投了一些简历幸运的是都收到了面试邀请有的公司也拿到了 offer。也尝试投了几家大厂阿里、字节、快手目前还在流程中。也已经向 TL 提了离职最近在工作交接事情比较少写个文章记录一下最近的经历。第一次在掘金写文章希望能有人看。工作三年一晃时间就过去了三年从毕业时候对前端一窍不通到如今在公司独当一面也算是成长了挺多。嗯毕业三年的我有4年经验手动狗头。记个流水账吧大家能够比较直观地感受到我毕业三年以来每个阶段做了什么事2017年1月左右。比较早搞定了毕业设计开始早开始筹备找工作的事。由于是计算机专业毕业第一想法当然还是找编程相关的工作就开始了解目前的前端工程师、后端工程师都在做什么找了几个大厂的 JD 就开始研究并且听同学说现在牛客上招聘和面经比较多就去翻了翻牛客。看了牛客之后TM 被打击了。。。这面经也太难了吧真的是「面试造火箭」2017年1月底过年。过年期间回老家同学聚会刚好也有朋友是计算机专业建议我可以自学一下前端找一份前端开发的工作。大二大三的时候帮学长做项目也写过一些前端的代码想想也挺有趣的也不纠结了就找前端吧2017年4月左右。体系化地学习了一下前端相关的知识发现不对劲没有实习过的我对于整体的工程经验太欠缺了而且光是写 Demo 根本无法深入学习但是由于时间比较少需要看的内容比较多又只能浅尝则止2017年5月。投了几份简历面了几家公司offer 有但也都是小公司对就是那种只有 20 个人左右的小公司想想还是放弃了2017年6月。机缘巧合在 V2ex 上了解到一个创业公司人不多但是待遇还不错就去试了试。面试官很 Nice聊得挺不错虽然我没有实习经验也没关系他觉得应届生基础好学习能力强就没问题???? 我信了。。2017年6月。签了三方毕业旅行去了。美滋滋。2017年7月。从学校毕业进入这家创业公司开始了我的前端生涯2017年7月 - 12月。因为这家创业公司已经有一定规模了除我之外还有 3 个前端所以我刚来之后活还比较轻主要就是写一些无关经验的后台页面和 toC 的移动端页面主要技术栈是 Vue。Vue 也是我来了公司之后才开始学的看了一遍文档之后就直接开干啥不会的就 CV 大法还不会的就厚脸皮请教公司的前辈就这样过了差不多半年吧2018年1月-6月。TL 看我已经逐渐掌握了前端技术栈的开发也开始给我安排一些比较有挑战性的活负责一些日活比较高的项目日常维护和迭代。在这半年时间里更多时间还是在跟业务没有太多技术上的思考。当然我的手还是非常快的5天工作量的页面我3天就能搞定而且提测基本 0 bug。当然这里的手快不是敲键盘快更多的是对于项目的理解和功能模块的拆分以及页面组件、模块的设计保证复用度。这里我的建议是拿到一个业务需求先理解透彻再动手编码。理解包括对业务的理解和对需求的理解将产品给到的 PRD 进行拆解分析派出优先级和每项的排期这样对于整体项目都能有一个把控2018年7月-12月。业务已经稳定团队也有了差不多差不多 8 个人开始接手一些团队基础设施建设的事情比如统一脚手架、统一 UI 组件库以及统一技术栈的前期工作2019年1月-6月。和 TL 一起推动统一了 React 作为前端统一技术栈刚好拿到一个比较重要的业务借这个项目沉淀了项目脚手架包括中后台和 mobile以及UI 组件库基于 antd 进行定制、封装在 3 月份的时候我也顺利完成晋升其实就是调了薪资。从 18 年 7 月到 19 年 6 月这一年时间真的痛并快乐着每天肝到最后一个下班之前没接触过前端工程化体系就没日没夜地学习。而且推动技术栈统一其实是一个很艰难的事情这得拿出足够的理由和证据让团队成员信服并且得要有足够的技术支撑脚手架、组件库、工程化能力、知识体系支撑幸好 TL 也一直很支持这个事情总算在肝了一年后顺利建设了目前团队的技术底座当然还是比较 low 的后面也一直在迭代2019年7月-12月。基本做的就是脚手架、组件库、工程化的完善的以及 CI/CD 的一些事情2020年1月-2020年6月。团队的开发模式基本已经成型只需要投入 2人日/周基本就可以。我们也开始沉淀团队统一的埋点、监控方案打造了统一的前端埋点管理系统、前端埋点工具、前端监控平台2020年7月。虽然可能你觉得我三年来干了很多事情但是如果深入细节看很多事情都是小打小闹不成体系业务量大了之后未必可以 cover。所以决定再次寻找自己新的定位进入一个大厂体系化地了解整个前端研发生命周期中大厂是如何思考和沉淀的工作三年学到很多。很多人可能会说还是因为这家创业公司给力而且 TL 比较给力所以可以待到三年。是的这话没毛病我也很感谢我的 TL感谢公司给了这样一个平台让我成长。但是我想说的是除了外界客观因素之外自身的主观因素也很重要。在上面的个人经历中我写出来的可能都是让你感觉很爽的事情很多不爽的事情我没写出来而已。。经常肝到半夜被 TL 批评过也经常怀疑过自我暗地里说过业务方这人也太xx了还天天摸鱼、骂过公司公司也太xx了迟早完蛋无数次想要离职的经历懂的人都懂随时都想砸了电脑走人...太多了如果要写我可以写出 100 条「我为什么曾经无数次想要离职」。人生就是这么有意思无数次想要离职都没走这次确是主动想要换个环境并且需要放弃一些东西。复习准备掘金上关于面试的文章很多这也是社区一个现状所以就挑了几篇个人觉得比较好的着重看了一下2020年前端面试复习必读文章这个大佬的思维导图整理的非常好整个复习流程都是跟着这个导图来的而且也不用自己到处搜索文章了相当方便在阿里我是如何当面试官的 这篇文章主要是了解一下阿里的面试是怎么样的面试官关心什么面试分享两年工作经验成功面试阿里P6总结 实战篇真实的阿里大佬面试经验字节跳动今日头条前端面经4轮技术面hr面实战篇真实的字节大佬面试经验以上文章个人觉得就够了能花时间把这些知识啃下来一般面试就没什么问题了。简历准备简历真的非常重要校招的时候就有这样的感觉那时候有实习经历和没实习经历简直就是一个天一个地。这次也准备认真准备一下自己的简历。对于简历个人认为大厂面试官和 HR 最看重的是两点项目经历做了什么工作经历稳定性这里就不展开说了社区里也很多优秀的文章。在这个过程中我主要参考了以下几篇文章推荐一下《大厂面试》面试官看了直呼想要的简历面试官到底想看什么样的简历教你如何写初/高级前端简历【赠简历导图】面试题整理这里整理一下我这段时间面试遇到的面试题按类型分一下这里只整理了我记录的问题来不及写答案。。JavaScript1. 说说 JavaScript 的数据类型算是面试官拿一个简单的题给面试者热热身找找感觉吧。基本数据类型String、Boolean、Number、Symbol、null、undefined引用数据类型Object如果要细分的话有 Object、Array、Date、RegExp 和 Function2. 基本数据类型和引用数据类型有什么区别很自然地就引出这个题基本数据类型在被创建时在栈上给其划分一块内存将数值直接存储在栈上引用数据类型在被创建时首先在栈上创建一个引用而对象的具体内容都存储在堆内存上然后由栈上面的引用指向堆中对象的地址。3. 那基本数据类型和引用数据类型拷贝的时候有什么区别由于存储的位置不一样直接拷贝的时候就会有两种情况拷贝了值和拷贝了引用也就是我们常说的深浅拷贝。对于基本数据类型而言没有深浅拷贝的概念都是在栈上新开辟了一块内存给新的值。而对于引用数据类型而言区别简单来说就是会不会共享堆内存里的值。具体不说了文章很多随便看两篇基本都没啥问题。深拷贝的终极探索90%的人都不知道JavaScript 专题之深浅拷贝目前 JavaScript 的 API 中哪些是浅拷贝哪些是深拷贝可以看看这篇文章虽然文章里有一些小问题不影响整体阅读JavaScript 基础心法——深浅拷贝4. 如何实现一个深拷贝无非就是 JSON.stringify 和 递归 两种方法大概说说思路就 OK5. 通过 JSON.stringify 的方式实现深拷贝会有什么问题如果值是 undefined、function 等在转换的时候会丢失所以还是要比较谨慎使用 JSON.stringify 来做深拷贝6. 通过递归的方式实现深拷贝会有什么问题循环引用和重复引用数据类型和深浅拷贝的问题问到这里基本差不多了。这里说个小技巧如果面试官问了第一题面试官应该心里已经有打算问你深浅拷贝的问题如果你比较熟悉也可以尝试主动点往这方面引。7. 数组去重的方式有哪些手写花里胡哨的也就那几种主要考察对JavaScript API 是否熟悉我写了两种Set 和 Hash面试官也没有多问。Hash:function unique(arr []) {if (arr.length 0 || arr.length 1) {return arr;}const newArray [];const hash {};for (let i 0; i arr.length; i) {if (!hash[arr[i]]) {hash[arr[i]] 1;newArray.push(arr[i]);}}return newArray;
}
Set:function unique(arr []) {if (arr.length 0 || arr.length 1) {return arr;}return [...new Set(arr)];
}
8. 找出数组中最大的数手写我就只写了一种function getArrayMax(arr []) {if (!arr.length) return;if (arr.length 1) {return arr[0];}return Math.max(...arr);
}
9. 说一下事件循环的理解宏任务微任务那些随便搜都是只推荐一篇经典文章Tasks, microtasks, queues and schedules10. 快排是如何实现的讲一下思路和复杂度放两张图感受一下更多的动画可以看 https://visualgo.net/zh/sortingimg11. 如何实现一个观察者模式手写12. 如何实现一个单例模式手写13. 如何解析一个 URL获取 query 和 hash 的参数手写14. TypeScript 和 JavaScript 最大的区别在哪CSS1. flex 如何实现九宫格设 width变 flex-wrap2. 除了 flex 之外还能如何实现九宫格比较老的 float比较新的 grid然后展开说下 grid3. flex: 1 是什么意思我就说了一下 flex: 1 的作用然后说了一下 flex 其实有三个值分别简单说了一下各自的作用就过了4. 移动端适配怎么做的rem 原理是什么vw 有没有了解细说移动端 经典的REM布局 与 新秀VW布局5. 移动端 1px 如何解决移动端1px解决方案Retina屏的移动设备如何实现真正1px的线React/Vue1. 看你的简历Vue 和 React 都写的比较多可以说说 Vue 和 React 的区别吗通过自己的理解从编译、生命周期、数据流、核心思想等方向都介绍了一下吧这个问题还是需要认真准备一下我说的时候感觉有点乱回头我看看写一篇文章专门回答一下这个问题吧2. 新项目的技术选型你会从哪些方面来考虑选用 Vue 还是 React这个问题我听到就感觉比较谨慎因为本身就是在创业公司面临过很多次的技术选型。从 jQuery 到 Vue 和 React我们也经历了技术栈的更新换代。我们当时在考虑技术选型的时候我们考虑的不是一个新项目而是一个未来 2 - 3 年甚至更久的一个长远技术选型主要看了一下 React 和 Vue 的一个整体生态和完整度当然这也包括社区的活跃度。因为我们并没有太多人力做一些框架底层的工作以及一些生态周边配套解决方案更多的时候是拿一些现有的解决方案来解决我们的业务问题。我在回答这个问题的时候更多的时候是通过本身的业务出发回答的没有过多地回答 React 和 Vue 框架上的区别对技术选型带来的影响。3. 说说对虚拟 DOM 的理解虚拟 DOM 本质上是一个真实 DOM 的抽象 JavaScript 对象。然后展开说了一下虚拟 DOM 的好处操作 DOM 简单、轻量、跨平台我特别提了一下跨平台Vue 2.x 之后引入的虚拟 DOM也有一部分是为了解决未来跨平台的问题后来也结合 WEEX 了。4. 讲讲 React 的生命周期这个没啥好说的根据自己的理解说一下那几个生命周期了。也说了一下即将废弃的生命周期以及为什么废弃就过了。5. React 函数式组件和类组件有什么区别6. React 的 diff 和 Vue 的有什么区别单向双向的区别7. 列表中的 key 有什么作用给 VirtualDOM diff用8. 说说 React Hooks 的理解它有什么优点一篇看懂 React Hooks9. React Hooks 不能出现在条件判断语句中可以确保每次渲染组件时都以相同的顺序调用 Hook10. 什么是高阶组件高阶组件(HOC)应该是无副作用的纯函数且不应该修改原组件高阶组件(HOC)不关心你传递的数据(props)是什么并且被包装组件不关心数据来源高阶组件(HOC)接收到的 props 应该透传给被包装组件11. React 的高阶组件和 Vue 的 mixins 是一个类型的东西吗Vue 中是否可以实现类似 React 的高阶组件高阶组件本质就是高阶函数React 的组件是一个纯粹的函数所以高阶函数对React来说非常简单。而 Vue 更像是高度封装的函数在更高的层面 Vue能够让你轻松的完成一些事情但与高度的封装相对的就是损失一定的灵活你需要按照一定规则才能使系统更好的运行。12. Vue 的双向绑定是如何实现的数据劫持和发布订阅13. Vue 如何收集依赖14. Vue 的父子组件挂载顺序是怎么样的父created - 子created - 子mounted - 父mounted15. Vue 的 computed 和 watch 是怎么实现的16. Vue 的 template 是如何编译的vue-loader 里有然后专门处理 template 的 loader最终本质上还是 createElement17. Vue 3.0 和 2.x 有什么区别defineProperty、proxy更开放的 APIts 等等...18. defineProperty 有什么缺点为什么 Vue 3.0 之后改用 proxy数组、对象的监听19. 我不是前端你如何向我介绍 Vue让我能够尽可能多的了解它工程化1. webpack 和 rollup 的区别webpack 适用于大型复杂的前端站点构建rollup 适用于基础库的打包2. 说说 webpack 的 loader 和 pluginloader 解析模块plugin 扩展功能3. esbuild 有没有了解下一代构建工具是使用 go编写的未来的趋势会更多使用非 JavaScript 语言来编写前端工具优点是快。4. CommonJS 和 ESM 有什么区别这个就不展开说了找两篇关于 JavaScript 模块的文章看看就 OK5. vite 和 snowpack 有了解吗unbundle 有什么好处个人理解会是未来构建工具的一种趋势在构建速度/热更新速度上都比目前 webpack 的方案快非常多大幅度提高前端开发效率。6. webpack 的热更新原理大概介绍一下本地起服务通过文件内容 hash 来判断是否更新客户端收到更新消息后会取拉取最新代码进行更新7. vue-loader 做了哪些事情webpack 用于处理 .vue 文件的 loader解析代码分别处理其中的 template/style/script...8. tree sharking 是什么ESM代码体积优化CommonJS 不支持9. webpack4 相对于之前做了哪些优化10. 项目中你使用 webpack 做了哪些优化使用 happypack 加速构建通过 analyze 插件分析构建产物大小优化体积chunkdll...11. 如何发布一个 npm 包如何发布一个 beta 包如何修改一个正式包为 beta 包npm publishnpm publish --tag betanpm dist-tag add my-package0.0.1-beta.0 beta12. npm 包的版本号是如何规范的参考 https://semver.org/lang/zh-CN/这里提了一下 break change 以及不规范的 npm版本号会带来什么影响13. DefinePlugin 的作用是什么定义全局变量可以用于不同环境的代码删除14. 你们团队的项目脚手架是如何实现的使用 Yeoman 开发的脚手架介绍了一下 Yeoman 的能力以及为什么要用它而不是直接用现成的 cra 和 vue-cli15. Babel 的原理是什么编译器。分为三个阶段parse词法分析 语法分析transform转换astgenerate生成代码后端1. Koa 和 Express 有什么区别异步callback 和 promise中间件线性模型和洋葱模型2. 说说 Koa 的中间件原理洋葱模型示意图3. 常用的 Node API 有哪些4. SSR 是如何实现的img5. serverless 有了解吗6. 说说 node 的执行机制单线程7. 为什么说 node 是高性能的8. node 为什么支持高并发执行速度快运行在 Chrome V8 引擎上异步libuv 事件循环适用 I/O 密集的网络应用开发解决网络应用开发 I/O 的性能瓶颈9. 说说 MVC 的思想Model–view–controller10. 说说 ORM 的优点本质上是对 SQL 语句的一种抽象方便语句清晰安全一定程度防注入11. MySQL 和 MongoDB 有什么区别关系型数据库和非关系数据库12. 依赖注入是什么网络1. 从输入 URL 到页面渲染其中发生了什么这个问题真的很大可以说很多东西因为在问这个问题之前面试官在聊网络所以这个问题我也就回答了网络方面相关的至于浏览器渲染相关的我就随便带了一下就过了2. HTTP 和 HTTPS 有什么区别从安全的角度说呗3. 说说 HTTP 的状态码随便说了几个常见的状态码一般面试官问这个其实是准备找几个常见的状态码问你具体什么意思所以你就说自己比较了解的几个就好了如果完全没了解过的就别给自己挖坑了4. 304 状态码是什么意思缓存5. 浏览器的三级缓存策略了解吗先在内存中查找如果有就加载如果内存中不存在则在硬盘中查找如果有就加载如果硬盘中也没有那么就进行网络请求请求获取的资源缓存到硬盘和内存6. 说说浏览器的缓存强缓存是什么7. websocket 是怎么建立链接的8. HTTPS 是如何保证网络安全的9. HTTP 如何实现长连接keep-alive算法手写1. 回形打印矩阵2. 找出最长子字符串3. 数组中的第 K 个最大元素4. 用 JavaScript 实现一个链表5. 从上到下打印二叉树其它1. 介绍一个你觉得比较有亮点的项目说了一个从 0 到 1 的项目并且在这个项目中我沉淀了一套目前公司统一使用的脚手架工具以及一个 UI 组件库。由于是 0 到 1 的项目项目周期中遇到了一些协作的问题我也主动承担了一些 PM 的角色去推动项目正常运行保证了项目正常上线获得业务上下游团队的好评。2. 在创业公司一个前端项目的生命周期是怎么样的在网上也看到了一些大厂的工作流程相比来说我们这边的流程相对来说大的骨干都有但是小的地方就显得不够规范。比如 Code Review、发布管控、灰度回滚能力等目前在我们的研发生命周期中这些能力都只是 “能用” 的阶段目前我们也在加强规范建设。3. 在团队中你是如何制定编码规范的如何推动规范落地的根据目前业界常用的编码规范制定了编码规范以及一套 ESLint/StyleLint/CommitLintd 静态检查工具当然还有 Prettier 然后就是推广大家用用的过程中再迭代这套编码规范。4. 你还有什么问题想问我的不要频繁跳槽文章开始的时候有提到「不要频繁跳槽」这里谈谈个人的看法。对于面试官和 HR 来说「频繁跳槽」意味着两点你的稳定性不足得承担给你发了 offer 之后你来到公司过了一段时间又跑路的风险所以会是减分项你没有足够的沉淀技术和业务的沉淀是要时间的对业务有深入的理解才能思考如何通过技术手段来解决业务上的问题对于个人来说「频繁跳槽」意味着一直在准备面试一直在刷题没有一个专项学习的时间段技术栈一直在变一直在适应没法更深入的理解对业务不理解对团队不熟悉恶性循环又想跳槽推荐阅读我在阿里招前端我该怎么帮你现在还可以加模拟面试群如何拿下阿里巴巴 P6 的前端 Offer如何准备阿里P6/P7前端面试--项目经历准备篇大厂面试官常问的亮点该如何做出如何从初级到专家(P4-P7)打破成长瓶颈和有效突破若川知乎问答2年前端经验做的项目没什么技术含量怎么办若川知乎高赞有哪些必看的 JS库末尾你好我是若川江湖人称菜如若川历时一年只写了一个学习源码整体架构系列~(点击蓝字了解我)关注若川视野回复pdf 领取优质前端书籍pdf回复加群可加群长期交流学习我的博客地址https://lxchuan12.gitee.io 欢迎收藏觉得文章不错可以点个在看呀^_^另外欢迎留言交流精选前端好文伴你不断成长我是若川欢迎关注!可点击小提醒若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮欢迎点击阅读也可以星标我的公众号便于查找
