《一线大厂前端面试全攻略》书籍 讲座 视频
作者 京程一灯 志佳 出版社 腾讯课堂
阅读日期 2020年09月02日 更新日期 2020年09月02日
相关链接 https://ke.qq.com/course/2961844 备注 三节直播课,值得反复看

月薪过30k的简历到底是什么样子

一线大厂30k属于中高上。

第一集的简单笔记如下:

  1. 北京毕业 本科 13K 15-18K
  2. 本科 严格 混。第一学历 大专 技术+研究生 1年

    难考 好毕业 国外 好申请 难毕业 【自考本科】

  3. 选择 城市 🏙 三线城市 广州 深圳 20k

  4. 25-30 5年 黄金时光 名企 圈子 学习氛围 + 技术氛围
  5. 某某 sdk + typescript + rollup + FCP/FMP

未来的出路:

  • 前端架构师 web前端 TS+REACT+NODE+工程化+单元测试 持续学习追新,传统、比较累
  • 前端图形学 智慧工厂、城市 H5手游 大数据可视化 ,ue4虚幻四
  • web AI 浏览器里执行的 懂车帝 手淘

技术能力:

  1. 团队中 技术用不上??创造条件 寻找那个能用上点
  2. 函数式编程 typescript 测试 掌握一门后端语言
  3. Node Docker k8s 了解 pm2 Linux libuv eventloop v8

new Vue({}) V8快属性 js -》 词法 语法 -》 ast -> 字节码 -》 ao vo go
-》 收集代码信息 -》 优化字节码 生成机器码

  1. 工程化 CI CD webpack原理 webpack5 工程化
  2. 性能指标 要求不高 不理睬 不卡。换同事 职业生涯 sdk
  3. CSS BEM 原子 矩阵 next houdouni
  4. 前端 react 这一套 + vue值钱一些 难复杂一些 确实难读一些,微前端
  5. 前端跨界 ar vr iot iOS android 小程序搬砖 小程序和周边框架的原理
  6. webpack5 system+通信+主服务 github解决问题 star 数据结构+算法
  7. leetcode 图形学 三一重工 政府单位 私企 ue4 three Bim canvas 数学课
  8. 前端安全 xss csrf …. webshell 劫持 beem 中国菜刀 web渗透 目录

5年方向 35岁程序员 坑爹 阿里巴巴外包 大企业去 26企业

看个人总结这里, ts eslint jest nodeserver ci/cd ,webpack 集群编译,

觉得实在太有用,先加密隐藏了。

思考


简历1

第一个30岁老哥的简历,一般是16薪,70w左右,到手30k。

着重说了 ts/eslint/jest一套,和NodeService提升前端地位,就做proxy就行,不做业务,集群、高并发等步入Java Go。CI/CD,jenkins/teamcity等,webpack集群编译。

使用k8s 等和node技术无关,前端就很弱势,vue-cli原理,关注前端性能指标。

web前端的监控平台,babel+react+koa+pm2,关注fcp fmp等性能指标

sendBeacon/img

项目成果。同构。

小框架 Moon

可以直接去github issues 找坑

手写特性,要去mdn看polyfill

第一份简历 1/3
image.png

2/3
image.png
image.png
3/3
image.png

简历2

一个 ssp的校招。 敢做敢用

image.png
专业技能了解。

简历3

image.png

简历4

新有一份简历。1/2
image.png
2/2
image.png
这个技能条可以参考

优秀前端养成记

TS的必要性,和学习方法,基础

  • 基础的变量类型
  • 数组的基础操作
  • 函数和类,有抽象方法 接口声明 虚拟类
  • 学一门后端语言 进一步掌握ts
  • 类型推断
  • 泛型 可以套 > 前面后面 interface type
  • infaceer class 写库declare
  • 装饰器 aop ioc
  • 非空操作符 es2020
  • 实战技巧,和库有关
  • 代码提示和相关sdk的开发 d.ts
  • this的关键小操作

整一个SDK yd-sdk 写一个插件,写npm包

  • 初始化一个npm包,设置相关的属性
  • rollup.config.js,搞成es umd cjs

范例是 redux 包

区分源码和打包之后的,.gitignore .npmignore
类库,main默认提供的包,umd放cdn
author bugs keywords
types

d.ts 最终自动生成,不需要手动写

quicktype app.quicktype.io 把json快速生成interface
可以在vscode中安装插件

tsconfig.json compilerOptions.declaration=true

配置 rollup
cjs+es+es fro browser + umd 上线 + umd 开发版本

  1. import ts from rollup-plugin-typescript2
  2. export defalut[
  3. {
  4. input:'src/a.ts',
  5. output:{format:'cjs'},
  6. plugins:[ts({
  7. useTsconfigDeclarationDir:true
  8. })]
  9. }
  10. ]

推荐 npm包 rollup-plugin-typescript2 来解决自动合并 d.ts

性能优化

  • 雅虎军规
  • 渲染加载
  • 页面加载
  • node加载
  • 慎用缓存

image.png
image.png

1.11.00

image.png

百尺竿头更进一步

  1. 用户渲染性能指标 资源 css loading
  2. 用户发生错误,点击错误,问题的回溯,录制成视频方便回看 fetch错误操作
  3. 用户自定义sdk数据进行传输

navigator.sendBeacon 不占用并发,也可以使用img src

也提到了 performace,可以获得大部分统计任务

  1. const entries = performance.getEntriesByType('resource')
  2. for(const entry of entries){
  3. console.log(entry)
  4. }

new PerformanceObserver

first-patin
first-contentful-p

web-vitas 直接用,统计常见的性能指标

window.onerror=function(msg,url,row,col.error)

拦截不到pending的错误,

window.addEventListener(‘error’)

promise windo.addEventList(‘unhandlerejection’) e.reason

xpath ,可以获得10步骤的栈,利用hreadless还原成图,栈变为图,利用node把gif编程mp4

把click 拦截掉,

请求拦截 fetchProxy,对 window.fetch 进行重写

微软的工具合并, api-extractor.js 合并成 index.d.ts