艺术喵 2 年前端面试心路历程(字节跳动、YY、虎牙、BIGO)| 掘金技术征文


本文将先从个人布景讲起,然后谈谈在字节跳动、虎牙、YY 以及 BIGO 的面试通过,最终讲一下关于核算机根底、算法与数据结构、JavaScript 等方面的学习经历,以及z 0 z聊聊个人学I $ 6习经历。

文章收拾不易,欢迎小伙伴们点赞、评论吐槽~

现状

个人布景

2016 年到 2017 年在网易互动文娱从Q ? % M c + N L v事游戏品牌宣扬后期美术、CC 语音(现 CC 电竞)的栏目包装和现场导播帮手,因为一些原因抛弃美术这个行业。

所以在 2017 年结业后预备了 6 个月考研核算机,那时分真的痛苦a h g | v H + 2,从零开端学数据结构、核算机网络、组成原理和操作体系,还要} X = L x $数学。

不负众望,没考上就出来找作业。

从以上布景来说,我的经历能够是超级减法,被人按在地上抵触。

面试状况

  • 字节跳动 offer
  • 虎牙 offero q z B l
  • YY offer
  • BIGQ ) ( j g j Y |O offer call

如同根本给我去面试就都过了,剩余内推L F投了i _ * v , ! 3 !简历根本连面试机会都没有……

因为家在广州,仍是想在广州开展所以深圳的岗位就没去面了。

而且这几家面试感觉都有点反套路* V H N f F ~ 7 K,常常黑人问号。

大厂面经

字节{ % p @跳动

1R Z , w I u ]

  • 对 tree-shaking 的了解

    • 尽管出产形式下默许敞开,可是因为通过 babel 编译全部模块被封装成 IIFE
    • IIFE 存在副作用无法被 tree-shaking 掉
    • 需求装备 { module: false }sideEffects: false
    • rollup 和 webpack 的 shak7 | h z Eing 程度不同,以一个 Class 为比如
  • Common.js 和 es6 module 差异

    • commonJs 是被加载的时分运转,esModule 是编译的时分运转
    • com– 1 Y bmonJs 输出的是值的浅拷贝,esModule 输出值的引用
    • webpack 中的 webpack_require 对他们处理J k e L j E q L办法不同
    • webpah H % zck 的按需加载完成
  • 你写的脚手架其中有一个模板是针对销售快速迭代的情节,能介绍一下吗

    • 介绍项目布景:页面多,迭代快,管理混乱,而且D Q l . { b ` g webpack 装备不相同
    • 运用只需求在 page 里边新? R ! , 1建文件,然后放入 main 和一些q { 0 t d @ s c装备文件,输入命令:npm run page=[文件夹名称] env=[环境] method=[dev|build]
    • 介绍一下 node= U y 怎样完成,和 webpack 装备合并战略
  • 图片编辑器做的功能优化

    • 图片变化通过矩阵变化,移除 html2# [ M O ,Canva
    • 抽离 Matrix.js 里边的三元一次方程求解公式来取代传统的克拉默法则
    • 自定义栈,通过可逆矩阵,亮度,饱和度,色差的逆公式,做出回来作用,而不是每次结果用 base64 保存,消除内存消耗
    • webwork 的测验和数据测验,证明在核算量不大状况下反而更慢
    • window.performance.mark 埋点,和 1px 的 gif 上传关键过程时刻优化
  • 能介绍一下缓存战略吗

    • 强缓存 cache-controC 5 m y w 8 ;l、express
    • V P c 0 6 2 g K Q谈缓存 304、ETagw 7 ? ; 0 E & 5、modify
  • 301、302、307、308的差异

OK,搞完上面问题,开端做题:

  • 1. 两数之和 :5 分钟内就做完
技能征文图
技能征文图
  • 洗牌算法:5分钟内写完

这里找不到如出一辙的标题,感| C 4兴趣的小伙伴能够 百度/Google 找找

做完_ @ x 5 G上面Z n ` _ , S 9 m 2 道题后:

面试官:emm….面试时刻还没完毕再做一道标题吧!

  • 215. 数组中的第K个最大元素
技能征文图
技能征文图
  • 花了| W 1 W G N = h p点个大顶堆,然后很快就求出来
  • 面试官:emm。。。。还有点时刻,你还有想到其他办法吗
  • 又写了个快排解法,写完之后边试官说趁便写个归并排序,我就改了一下写出来

好了,面试完毕,可是这才是噩梦的开端。因为算法题做的太快,不知面试官写了我啥点评,后边的面试根本变成做各种题。

2 面

  • 图片编辑器做的功能优化(以上)
  • rew & 2 ` : 5dux-sagaH N : – Y 和 mobx 的比较

    • saga 仍是遵循 mvc 模型,mobx 是挨近 mvu ` 7 o S 4 c zvm 模型
    • 介绍项目为何要运用 mobx 更适宜
    • 因为是直播相关的 electron 项目,存在音视频流,和一– e 0 6些底层 OS 操作,那么咱们是否能够以麦克? R i { * 6 k l j风视图开关关于音频流的处理为比如,把 OS 的一些操作与数据做一个映射层,就像数据和视图存K f A ] u S在映射联系相同,那么数据的流动便是 view –# d V> 触发action -> 数据改动 -&q F /gt; 改动视图 -&2 0 b B & pgt; 进行 os 操作
    • 然后说了一下 mobx 大约完成的原理,如数据劫持,发布订阅。
  • https 有了解吗

    • 简略讲了一下非对称加密的握手进程
    • 证书签名进程和怎样避免被串改
  • 跨域有了解过吗

    • webpack-dev-server 原理和怎样处理跨域
    • nginx 转发
    • CROS 中的简略请求和非简略请求
    • 非简略请求下主张的 optionv L ^ L Q N f E Zs
  • localstor( @ Xage、sessionStorage 和 cookie 的差异
  • cookie 跨域时分要怎样处理

然后就开端做题:

  • 70. 爬楼梯
技能征文图
技能征文图

(又是 5 分钟写完)

  • 面试官:那咱们改编一下标题,改成 746. 运用O 6 A V J w 1 e最小花费爬楼梯。
技能征文图
技能征文图
  • 我:修改一下之前的答案,很快做出来。e H Z l g k d %
  • 面试官:还有点时刻,咱们再做一题略微难一点的 72. 编辑间隔
技能征文图
技能征文图

我:这题竟然说略微难点???还好之前做过,那办法真的不是一般人想得出来。然后又做出来了。

面试完毕了,感觉都是在做题。

3 面

  • 毛遂自荐
  • 介绍e v }项目
  • eleF n – p d Q ~ctron 的主进程,烘托进程之间差异和他们通信手段

    • ipcMain、ipcRenderer
    • localStorage
  • webView 和 Iframd I A / & V q pe 差异

    • webView 运用和嵌入内容之间的交互全部都是异步的
    • } _ 用和嵌入内容之间的交互全部都是异步的
  • 你这个 PC 运用做了哪些优化

    • 录屏优化
    • 大型文件上传优化
    • S u z % e : l d k mobx 重写之前的 redux-sagU h n { c K ; d xa,引进 os 层概念
    • electro@ 7 & o [n-update 失效紧急处理办法
  • 大型文件上传

    • 文件切片
    • 用 web-work 独自线程核算文件的 hash 值
    • 上传因为和其他接口同一域名,所以要做并发数处理
    • 进度条
    • 关于现已传过的文件进行跳过秒传,关于失利做失利重传处理
    • 然后有说了一下感觉还能改善的当地
    • 要发挥 electA i c M Wron 能运用 node 的优势,文件切片,ha5 y Y 3 r I Msh 核算和上传都能够用 node 完成,而且开不同的进程处理。因为上传e N } i } K Q是用 node 模块,不会有浏览器同一域名下 6 个衔接的约束。为何没做,因为在写其他更加紧急的东西。。。。
  • 录屏优化

    • 需求j I D X t 5 v对整个屏幕进行录制
    • 对比了 FFmpeg 和 medi# * H i u p L paSource 的功能差异,如 CPU 和内存消耗
    • 又对比一下 mediaSource 的各种编码功能差异 vp8、daala、h264、opus 和 mpeg
    • 一开端是把视频7 ; 8 T c I l b Q流写在一个变量里边,这样会构成很大的功能问题
    • 处理办法是每个 10s 把流用 node 的 file 写在硬盘里边,A % T } 然后l 1 q @ N u h完毕录制时分,把每个 10s 的小视频片段用 FFmpeg 组成一个大的文件

开端做题,做了一题比较偏冷的标题,看概念我都要了解几分钟的。

技能征文图
技能征文图

尽管做出来,可是不是用数组完成,而是用链表,面试官H % / H t m问我怎样再优化,我便是说改成跳表,空间换, E A ( ~ 1 [时刻,可是其实正确答案是二分查找……

4 面

四面就比较轻松,问了一下项目就开端做题。

先从简略开端 1z b . } 6 B % U R12. 途径总和

技能征文图
技能征文图

做完后在I S ; L . _此根底` k D x上,改动成

  • 途径不需求从根节点开端,也不需求在叶子节点完毕

尽管标题不难,我也做了减枝的处理,可是面试官说还能优化,怎样削减重复核算。这就难倒我了,我知道需求用一个 map 来保存中间的8 E E F结果,可是这个 map 的 key 怎样规划一时想不出来。想了好久说没思路面试就完毕了。

虎牙

1 面

  • http 的 get 和 post 差异
  • 缓存战略
  • https 的握手进程
  • http2 的特点

    • 二进制传输
    • Header 紧缩,趁便吹了一下哈夫曼编: [ q
    • 多路复用
    • 服务器推送
  • weak-Set、weak-Map 和 Set、Map{ 9 u 差异
  • mvvm 模型和 mA g f 8 v y | O |vc 模型差异
  • 怎样完成一个 mvvm 模型

    • 数据劫持 + 发布订阅
  • 为何你用 mobx 重构了 saga,说说两者之间的差异

    • 简略说了一下 mobx 的完成原理
  • 说说 vnode 的了解

    • vnode 是作为W B g x A S ^ .数据和视图的$ m V C一种映射联系
    • vue 和 react 的 diff 算法有相同和有不同,相同是都是用同层比较,不同是 vue运用双指针比较,react 是用 key 集合级比较
  • 讲讲 webpack 的功能优化

    • 体积:讲了一下 tree-shaking 了解
    • 打包速度:cache-loader、dll、多线程
  • 有写过 plugin

    • 没有,可是了解他{ d e D P z的原理,讲了一下大约有哪些 compiler 钩子
  • 了解 webpack-dev-server 的 HMR 完成原理吗
  • 手写一下防抖和节省

2 面

  • 你做过直播,能介绍一下 webRTC 或者现在运用直播方p 5 R t / o 6 & a案吗

    • 尽管我是运用声网的 SDK,可是大约了解过一般直播的直播方案
    • 讲了一下 NAT、STUN、RTP、SDP 的根本概论
    • 然后两个信令服务器,一个是声网用来操控进房间媒体流的 socket,一个是业务逻辑的 socket
  • 编码方面有了解过吗,能解说一下码率吗
  • 关于 P 帧、I 帧、B2 C O m 帧有, u / [了解过

    • I 帧:关键帧。能够独自解码成一幅* n ( j r完好的图像。
    • P 帧:参阅帧。解码时依靠于前面已解码的数据
    • B 帧:前后参阅帧 B 帧后边的 P 帧要优先于它进行解码,然后才能将 B 帧解码
  • RGB 和 YUV 差异
  • 有了解过, W I . S e W B哪些直播协议

    • httpflv 传输办法:http 流,格局:flv,连续流
    • rtmp 传输办法:tc+ 2 + Zp 流,格局:flv,连续流
    • hls 传输办法:http,格局:TS 文件,移动端兼容但 PC 不兼容
    • dash 这个不太常见只知道传送办法是 http
  • flv 和 mp4 差异有了解过吗

    • 他们都是归于容器,差异在于文件头信息
    • flv 是归于流式文件是能够边传边解的,不需求U t P Q 4 s C通过索引分包,可是 mp4 是需求依靠索引表
  • MediaSource 标准有了解过

    • 没怎样了解,可是仍是扯了一下不同码率视频切换是怎样做的

然后还问% q z ) &了一下其他东西,可是我不是很8 A ) 7 C懂就不知清楚b ( Y { C K a了,感觉这一轮面试好古怪。前端根本没面,反而音视频处理问了许多。

3 面

  • webSocket 和 ajax 的差异
  • xss、csrf 有了解过吗,怎样防范
  • 有了解过 React 的 fiber

    • fiber 诞生的布景,为何 react 有时刻切片而 vE ] 3 Cue 不需求
  • 能简略介绍一下 reac( + qt 履行进程吗

    1. jsx 通过 babel 转变成 render 函数
    2. create update
    3. enquC V O s * {eueUpdate
    4. scheduleWork 更新 expiration time
    5. requestWork
    6. workp V ELoop大循环

      • performUnitOfWork
      • beginWork
      • completeUnitOfWork
    7. Effeg h 1 K x %c5 0 f Z Bt List
    8. commit
  • 能介Y j N 0 c p K K绍一下 hook 吗

    • 比起 hoc,hook 的复用性高
    • useState、useEffect、useRef 用法
    • 优化 usecallbackO . y (、useMemo
  • 情形题,做一个直播弹幕

    • 字幕的速度,巨细G 8 V S |
    • r[ ] B – t 4 r SequestAnimationFarme 和 setTimeout 差 k O 7 ^ ( d
    • 弹幕节省问题
    • socket 和轮询优缺点,弹幕池的规划
    • 怎样避免弹幕磕碰(这个我答得不好,后来查找一下有一个飞机场算法)

4 面

这一面便是聊人生,扯1 U | }得比较远。讲了一下产品一般盈余套路,怎样拉新、留存、激活、转化和收益。曾经在网易 CC 电竞做的工作。对中国电竞远景的看法。

Bigo

1 面

因为是年前面的,所以在会议室面

  • 毛遂自荐
  • 介绍项目
  • 你项目用到线形代数,我来考考你记不记得可逆矩阵的逆矩阵求法。

    • 当场白板可逆矩| 2 T ; #阵的逆矩阵求法
  • 求一下三个三元一次方程

    • 当场白板用克拉默法则求出方程 x,y,z 的解
    • 然后写一下 matrix.jS n ! j X js 里边的优化方程(尽管我也不知道他是什么原理)
  • 怎样运用尽或许少的空间做矩阵的转置

    • 实质上便是867. 转置矩阵
技能征文图
技能征文图

然后有白板写了一下

  • 能讲讲欧拉角和旋转矩阵吗,还` j f有他们的相互转化

    • 我:???不过之前做项目有 AR 集成,调用接口时分用到,所以牵强讲了一点,可是转化公式我就不会写了

做到上面,我就非常懵逼,我是不是面错岗位了。

技能征文图
技能征文图

然后是情形题,当场规划体系。

情形以下:

  • 这是一个多人在线协同网页
  • 首要做的是视频标识体系,用来操练 AR 用的模型
  • 而且同一时刻,用一视频帧能够有多个人标识

emm。。。。那我大约知道为何之前问我这么多数学问题

这个项目的难点有以下

  • 视频的时刻帧的确认

    • 因为视频中会存在 I 帧、P 帧、B 帧作为干扰,所以一个视频 25 帧的话,可是实践 h y u [ w t e h上不是每一秒都是 25 帧的,每秒帧的数目是动态的
    • 可是视频信息又对应当地 DTS 即解码时刻o ` D , [ b p i戳,这个时刻戳的含义在于告诉播! e c q :放器该在什么时分解码这一帧的数据,和 PTS 即显现时刻戳,这个时刻X [ 7 [戳用来告诉播放器该在什么时分v 0 n N 1 * P _显现这一帧的数据。? ( & n 4 & u咱们只需求拿到 PTS 就能够了
  • 绘画进程中 canvas 的优化

    • canvas 应该分: g |两层,一层是没有选择的图形,一层是选中的图形,当图形选中时分会提高到编辑区域2 7 k x e的 canvas
    • 关于不规则图形,选择判别办法运! ^ 8 9 O J % O用射线法思路,带入公式就能够知道图形是否被选择
  • 多人协同问题,他们之间v 3 W怎样互相告诉

    • 运用信令服务器,用 websocke: { |t 衔接
  • 如果两个人以上同时对一个标签做处理,这种抵触; / T Z % ` | g 怎样处{ ; . J ~ @ % J Q

    • 其实这个在我做在线白板时分会遇到的问题,这种问题能够类比成游戏中的状态同步和帧同步这两种处理办q ; ( 8 [ } $ & =法,就和面试官扯了一下。

面完情形题,就做算法题,标题也是很古怪的。

  • 第一题:洗牌算法,这个能够

  • 第二题:假设有偶数位的整数,将整数分隔两头,然后对每边的每个数组的每一位求总和,当两头的总和相对就以为这组数符合要求,求2n位数的符合要求数占总数的k N :多少。。。。。有点晕

  • 比如:287962 能U ( | g % 0 O够分红 2g m V87 962,其中 2 + 8 + 7 = 9 + 6 + 2,那么他便是符合要求的。

我想了好E : e 9 .久仍是想不出来。

2 面

或许一u h v 8 Q }面比较难,二k 3 I 8面就比较随意:

  • 浏览器缓存战略
  • 跨域处理
  • https 握手
  • http2 特性
  • tcp 三次握手
  • 从 url 到页面显现
  • redux 和 mobx 的差异
  • tree-shaking
  • 项目的功能优化
  • css 的 B( ^ QEM 标准
  • 当场规划一个 toast
  • LRU 完: 5 & Z U ? M A I
  • DNS 的途径选择用了啥算法Q A B w c Z o

3 面

S 2 S $ v & q h %得比较广,没啥要点

YY

1 面

  • mvvm 和 mvc 模型差异
  • mvvm 的完成
  • 了解 fiber 吗i } . F R

    • 答案之前有
  • 了解 hook 吗

    • 答案之前有
  • 为何 react 点击工作放在[ E ! x 4 settimeout 会拿不到 event 目标X ~ B 7 g W N

    • react 的工作组成
  • setState 是异步仍是同步

    • 实质上都是同步,只不过改动 state 的机遇不同
    • 由一个是是否批量更新变量来决议
    • O L v / x k在 setTimeout 就能实时改动
  • 有用过 node 吗,讲讲流
  • koa2 和 express 差异

    • express 是大而全有路由等,koa2 小而精通过中间件
    • koa2 能运用 async await,express 不能
    • koa2 有洋葱模型和 ctx 上下文,express 没有
  • 讲讲洋葱模型
  • 完成一个函数 compose([fn1,fn2,fn3..]) 转成$ 8 9 w fn3(fn2(fn1()))

    • 这个实质上便是中间件完成W 0 4 x R逻辑,之前看了 Koa2 一点源码,还好记得
  • koa2 和 egg 的差异

    • egg 是在s D F V s ) y koa2 上的封装
    • egg 有 controller,service,router
    • 约定了文件目录结构
  • 鉴权有了解过了

    • Seesion/cookie
    • Token
    • OAuth
    • SSOy ( j f J 9 . #
    • 还好项目都触及过,尽管不是我用node写的,是后端写的,可是那时分猎奇问了一下,而且查了一些材料,牵强答出来

2 面

  • 浏览器缓存战略
  • 跨域处理
  • https 握手
  • xss 和 csrf 进犯
  • Typscript 有了解吗,能讲讲吗

    • 接口
    • 枚举
    • 泛型
  • webpack 优化
  • tree-shaking
  • HMR 完成原理
  • nginx 有了解吗

    • 扯了一下跨域怎样装备/转发
    • 缓存战略装备
    • 地址重定向装备
  • 场景题,做一个页面O H L a 1 m下雪

    • 写一个粒子 Class,里边有粒子、巨细、图片,每秒移动的间隔
    • 一个粒子操控器 Class,包含粒子数量、分布状况,粒子的下落速度
    • 用 requestanimationframe 绘画动画
    • 用 csB X 7 (s3 敞开硬件 GPU 加速

3 面

三面也是聊得很广,根本木有前端。

学习进程

其实也没有太过特意去预备面试,其实都是靠平常堆集的,在 2019 年开端我就拟定了自己的学习方案了,而且每天都坚持学习。可参阅 l) 1 – | 0 ) r wien的每日学习

以下会分为:

  1. 核算机根底
  2. 前端专业常识
  3. 学习心得

次序有优先度之分,之所以把a S V核算机根底放在第一位,是因为通过这些面试发现核算机根底调查还有比前端还要多,甚至有些公司面试都不怎样问我前端了。

核算机根底

tip:里边触及许多都是极K # 9 E客时刻的课程,可是我并没有打广告。引荐是因为我看完后真心觉得讲的好,当然好是指容易让初学者了解和上手,深度仍是去看专门的威望书做普通吧。

数据结构和算法

学习办法不是一开端就刷题,要先学点入门。

  1. 入门办法有许多种看书看视频,边看边敲。
  2. 然后就能够上网看他人面经和一些 leetcode 大神总结的经典标题,依照分类开端刷了。U h 9 c { –
  3. 每道题至少做 3 次,第一次时分遇到不会就不要想好久,8 分钟没有思路就看答案。因为大家一开端都是没啥思路,只y D ;要做多多总结才会慢慢有思路。做完后一周后再做第二次。预备跳槽时分再做第三次。
  4. 算题次序为算法面试通关 40 讲、剑指 offeu h * mr、字节跳动专栏、自己总结的高频题。

我刷的标题也不多,就 100 来道,和他人比起就差远了。

技能征文图
技能征文图

可是我做的标题规模比较广,而且} 9 z @ n g都是自己总结高频再去做,射中的几率比较大。

根本数据结构

  • 数组
  • 队列和栈
  • 链表
  • 二叉树
  • hash

常见的算法

  • DFS
  • BFS
  • 滑动窗口(双指针)
  • 回溯
  • 动态规划
  • 贪心(其实动态规划能够处理)
  • 排序
  • 二分查l C H H H

参阅^ N * A L + j材料:

  • JavaScript版 数据结构与算? 2 ~ M法,这个 3 ? % a _ z /合适新人学习,入门根本。
  • 极客时刻- 数据结构与算法之美 在有根底上看这个会更好,里边github有js完成办法,自己着手敲一遍
  • 极客时刻- 算法面试通关 40 讲 这门课真的是好,里边都是高频经典的标题。
  • lR 6 x Meetcode 字节跳动专栏
  • leetcode 剑指 offer

blog:

  • a] E R m swesome-coding-js 用 JavaScript 完成的算法和N n ` 6数据结构
  • labuladong 这个动态标准讲得真的好
  • YaxeZhang/Just-Code 针对面试操练算法题, 现在包含字节跳动面试题、 LeetCode 和剑指 offT } /er

网络

网络是前端重要中的重要,也是面试高频的规模。许多人都是一开端就去看核算机网络、TCP/IP 协议、这些书入门,也不是说不好,可是关于新手入门门槛或许太高,还没看几页就抛弃了。能够一开端看点视频跟着作者一起来抓包,慢慢了解。

观看次序:

  • 极客时刻-透视 HTTP 协议 HTTP作为前端最常常接触而且相对独立,能够先学习这个,再学P 8 k ] k l $ c x期其他层。
  • 极客时刻-趣谈网络协议作者生动用比如解说网络各层的作用和他们之间c v @ [ ` R e 7的联系,在此构成一个整体的架空u [ Q,方便后边细节的学习
  • 极客时刻 – Web 协议详解与抓包( & I V V 0 y Q实战。这门课{ J & g $ ]从高层到底层s d r b L J j J ;,解说每一层的细节,因为里边解说很具体也有许多理论常识,如 RSA 算法、基于椭圆曲线的 ECDH 算法等等能够考虑跳过

最终弥补的书籍

  • 图解 http 协议
  • 图解 tcp 协议
  • TCP/IP 详解(第一卷)

tips:

关于前端来说,http,http2,https 的握手是高频题,要首要温习。

其他

本来想聊聊核算机组成原理、操作体系和编译原理,可是: ` M一个我学+ 7 C c ! ~ l得不精,第二面试也没有怎样问,操作体系就问 linux 的一些简略指令和写一下 Jenkins 的脚本罢了。或者后端对这方面会问得比较多。

前端r ^ c r专业常识

前端根底-JS

以下必需要非常了解:

  • 类型,触及以下:

    • 类型种类
    • 判别
    • 转化
    • 深度拷贝
  • 闭包,触及以下:

    • 作用域
    • v8 垃圾收回
    • 变量提高
  • 异步,触及以下:

    • Promsie 的前史,用法,简略手写 Promsie 完成
    • async awh ~ W c )ait 原理,generator
    • 宏使命与微使命差异
  • 原型链,触及以下

    • prototype__proto__
    • 承继
    • oop 编程思想
  • 模块化

    • CommonJS 和 ES6 module
    • AMD 与 CMD 差异(比较旧能够疏忽)
  • ES6 特性

    • let const
    • 箭头函数
    • Set、Map、WeakSet 和 WeakMK V I tap
    • 之前提及的 Promsie,async,Class,Es6 module

参阅材料:

先做一份自我检测,一名【合格】n D {前端工程师的自检清单。然后根据自己薄缺点去看相关材料。

书籍:

入门

  • 《JavaScript高档程序(第三版)》k T ? O ^ y
  • 《你不知道的& Q n $ $JavaScript(上)》
  • 《JavaScript 忍者秘籍》(一定要买第二版)
  • 《阮一峰 ES6入门》

BLOG:

  • 前端进阶之道
  • 前端面试与进0 B X阶攻略
  • ConardLi 的 blog
  • 木易杨前端进阶
  • FE-Interview
  • 冴羽的博客

6HU网好文章:

  • (1.6w字)浏览器与前端功能魂灵之问,请问你能接得住几个?(上)
  • (主张保藏)原生JS魂灵之问, 请问你能接7 ( ) P 3得住几个?(上)
  • (主N @ [ / q S g : KH V c 7精读)原生JS魂灵之问(中),检验自己是否真的了解JavaScript?
  • (2.4w字,主张保藏)原生JS魂灵之问(下), 冲刺进阶最终一公里(附个人成长经历分享)
  • 中高档前端大厂面试秘籍,为你保驾护航金三银四,直通大厂(上)
  • (中篇)中高档前端大厂面试秘籍,隆冬中为您保驾护航,直通大厂
  • (下篇)中高档前端大厂面试秘籍,隆冬中为您保驾护航,直X 8 + h通大厂

付费好东西:

对常识付费其实是好工作,站在伟人的肩膀上看东西才会远。

  • 前端面试之道 |比较根底的前端常识,合适新人
  • 前端开发中心常识进阶| 从根底出发,由浅入深,还有关于许多工程方面的文章,非常引荐。

前端根底-浏览器

有以下比较经典的问题:

  • 缓存战略:洽谈缓存和强缓存
  • 页面的烘托进程
  • 页面功能优化

) d F s t K u阅材料:

  • 浏览器作业原理与实践。这个也是个人非常引荐,因为自己看过《webkit技能揭秘》,发现书上许多东西都是讲浏览* % j $ s ;器一些完成办法,一堆 C++ 非常难过,可是这个专栏却用非常简略生动的办法来叙述浏览器实质,个人收成许多。
  • 《webkit技能揭秘》

前端根底-css

  • css 选择器优先度
  • rem、em、vh、vw 和 px 的联系,以及移动端适配办u X K ! ! ^
  • 铲除浮动
  • 盒子模型
  • flex
  • 层级上下文
  • 各种布局

前端结构-vue

  1. 第一个层次:运用

    • vue 的生命周期
    • vue 全家桶运用,vuex,vue-router
    • data,computer,watche3 + L 7 * h 0 Gr运用
    • 组件通信

      • provide / inject
      • prosL [ m @ 7 D emit
      • listen
      • event bus
      • 自行完成 dispatch 和= Q m : Q broadcast 办法
  2. 第二层:原理

    • 怎样简略完成一个mvvm模型
    • new vue 时分发作什么,每个生命周期对应的源码做了什么
    • data,watci B B p *her,computer的源码完成
    • nextTick 的原理
    • 指令的实质
    • vue 的功能优化
    • Diff 实质
  3. 第三层:组件的完成

参阅材料:

  1. 根底运P U O用:

    • jspang的vh v F q Y 4 Vue教程
    • Vue2.0开发企业级移动端音乐Web App
    • 前端成长必经之路 组件化思想与技巧
  2. 源码:

    • 要先看分析 Vue.js 内部运转机制
      把手教你怎样写一个最小mvvm形式,mvvm是最中心的思想。当你能懂下面的图时分,那么能够进入H ) * Z下一步了
    技能征文图
    技能征文图
    • 《深化浅– % q p o q Y出Vue.js》, 这本书真的好,作者每单介绍一个部分的时分,都会由m Q I J T O b M最简略笼统的一个dem~ K [ 9 ? 6 5 y bo,一步一步变成结构实践的样子,最终拿你写的demoR ^ S K = | T qT K 9结构实践的对比,分析双方优缺点H 1 n x { ,
    技能征文图
    技能征文图
    • Vue.js源码全方位深化解析做弥补。电子书: 《Vue.js 源码揭秘》关于router,vuex,slot,keep-alive有具体解说。
    • 尤雨溪教你写vue 高档vue教程 源码分析% R ` Y P ^!!!!这个我特意去fronted master冲了几百元,没想到竟然有转移。
    • 最终看完就做一下标题,看看自己能达到那种水平吧。12道vue高频原理面试题,你能答出几道?
  3. 组件

    • 先看一下他人的写组件的经历 Vue.js 组件精讲。看完之后就开端着手自己仿照他人的组件了。
    • 引荐仿照目标:

      • vant
      • View

前端结构-react

运用:
– Class 的生命周期
– Hooc 高阶组件
– Hook 的运用
– react-route| Q e O 3 { ar 的运用
– Context
– redux(包含mobx或saga)

参阅材料:

  • jspang的react教程U . ~
  • Hooks 重构旅游电商网站火车票
  • React.js 小书先来简略完成一个mvc模型的react吧7 V # 1 E

然后 react 最难便是 fiber,fiber 的代码完成非常复h ` & L x杂,这时分无需太过关注代码,只需求知道,fiber 是处理什么问题而诞生,以及相关的概念就好。

引荐按以下次序阅读文章

  1. 这或许是最浅显的 Re/ 3 j # , 3 T } {act Fiber(时刻分片E f h f L K a) 打开办法 这文章如标题,真是最浅显易懂。
  2. Deep In React之浅谈 Reac= V I ` Mt Fibe3 Z 8r 架构
  3. Fiber 内部: 深化了解 React 的新 reconciliW { Kation 算法
  4. 怎样以及为G T ? ` ( ~ s什么 React Fiber 运用链表遍历组件树

有能力者,能够直接科学上网看原文吧

  1. Lin Clark – A CartoW ~ 7on Intro to FibeT c y O H F y 3r – React Conf 2017
  2. Inside Fiber: in-depth overview of the new reconci$ Q k i C { 4 Gliation algorithm in React
  3. In-depth explanation of state and props update in React
  4. The how and( G [ z & m : c b why on React’s usage of linked list in Fiber to walk the component’s tree
  5. Practical applicax y & ^tion of reve` v f U c Rrse-engineering guidelines and princp X B 5iples

以下按自己喜欢挑选吧:

  • react 的工作机制
  1. 【React深化】R9 0 u l eeact工作机制
  2. 谈谈React工作机制和未来(react-eventss ~ ) + B Q)
  • react 调度机制
  1. 【React深化】setState的履行机制
  2. 再谈react setState-setState怎样处理更新?
  • Hook
  1. reaJ 3 ict hooks的诞生
  2. react hooks进阶与原理+ { .
  • yck 系列
  1. 分析 React 源码:J k V V 4 ] 0先热个身
  2. 分析 React 源码:render 流程(一)
  3. 分析A _ m React 源码:render 流程(二)
  4. 分析 React 源码:调度原理
  5. 分析 React 源码:组件更新流程(一)

热身做完,直} C y [ 0 j接上战场吧:

视频:React源码深度解析 高档前端工程师j 2 & e m必备技能

电子书: React 源码解析

惭愧,我到现在还没看完。

看得差不多就做点标题吧:

  • 中高档前H Q z | _ q i – N端大厂面试秘籍,隆冬中为您保驾护航,直通E 9 6 B 0 * S H r大厂
  • 你要的 React 面试常识点,都在这了

组件规划:

预备看 ant.design 的源码

前端工程化-webpack

  1. X [ ( U用和根本概念

    • 了解 lo6 a – p mader、plugin,而且把 J | ] $ s .握一些根本常用的
    • 了解 babel

参阅材料:玩转webpack

  1. 学会优化

    • 体积优化:tree shaking、按需引进,代码切开
    • m B l w F _ 4 . k包速度优化:缓存、多线程打包、优化打包E B C途径

参阅材料:

  • 那些花儿,从零构建Vue工程
  • Webpack 4 装备最佳实践
  • webpack4 的30个过程打造优化到极致的 react 开发环境
  1. 原理
  • webpack构建过程
  • 细说 webpack 之流程篇
  • Webpac4 Z ! t D {k HMR 原了解析
  • & & 4 l零完成webpack热更新HMR
  • 干货!撸一个webpc W h ] q ! dack插件(内含tapable详解+webpack流程)
  • 手把手教你撸一个 Webpack Loader
  1. 项目参阅

其实 webpack 装备都是靠抄。。。。

  • le-cli
  • fe-workflowJ a x这是我参阅最多的项目,触及了初始化项目、打包、测验、联调、质量把控、上线、回滚、线上监控(功能监控、异常监控)等等

学习心得

其实学习心得并; 0 5 t t C – ^没改动,只不过坚持做两年罢了

刻意操练

这个之前 2018 年时分写过,就不重Z 8 Y ) H A (复了~

链接:刻意操练

时刻管理

对时刻灵敏

我桌面上有3个表

  1. 倒计时 40 分m / ^ p % J /钟。每次抵达 40 分钟? % e U $后,我必需要去歇息,能够结合z ^ y , L曾经说的番茄作业法。
  2. 秒表。用来检测做题的速度,这便是为何我之前面试算法题根本都是能 5 分钟写出来的原因。还有是统计业务功能需求写多久,方便之后评定排期的时刻。
技能征文图
技能征文图
  1. 手机 Ihour 记时。用来记载学习了多少个小时,从量变到突变的进程。
技能征文图
技能征文图
  1. 方案与履行

按曾经相同我会有年度方案、月度方案、周方案和日需求履行的使命,而且打卡记载当天所学

技能征文图
技能征文图
  1. 注重饮食

为了保证大脑的清醒8 D $ )和减肥,我采纳的是轻食。尽量不吃高 GI 食物,如过度加工过的食物,米饭等等,尽量吃低 GI 食物。GI 其实是血糖指数(glycemic index, GI)的英文缩写,也译作血糖生成指数。首要原理是当人血糖过高或者过低时分,会容易犯困,大脑运转速度变慢。所以要坚持血糖的一定安稳,就能削减疲惫感,使效率更高。趁便能够达到o [ P减肥作用。

技能征文图
技能征文图
  1. 多锻炼。每周起码有2次的跑步||游泳||撸铁

看过我文章的人觉得学习心得怎样和曾经的征文这么像,甚至连图都不换一张是不是来水文章。

其实我做的工作没有变,一向坚持做,改动的只要结果罢了。

发表评论

提供最优质的资源集合

立即查看 了解详情