《一线大厂前端面试全攻略》书籍 讲座 视频 | |||
---|---|---|---|
作者 | 京程一灯 志佳 | 出版社 | 腾讯课堂 |
阅读日期 | 2020年09月02日 | 更新日期 | 2020年09月02日 |
相关链接 | https://ke.qq.com/course/2961844 | 备注 | 三节直播课,值得反复看 |
月薪过30k的简历到底是什么样子
一线大厂30k属于中高上。
第一集的简单笔记如下:
- 北京毕业 本科 13K 15-18K
本科 严格 混。第一学历 大专 技术+研究生 1年
难考 好毕业 国外 好申请 难毕业 【自考本科】
选择 城市 🏙 三线城市 广州 深圳 20k
- 25-30 5年 黄金时光 名企 圈子 学习氛围 + 技术氛围
- 某某 sdk + typescript + rollup + FCP/FMP
未来的出路:
- 前端架构师 web前端 TS+REACT+NODE+工程化+单元测试 持续学习追新,传统、比较累
- 前端图形学 智慧工厂、城市 H5手游 大数据可视化 ,ue4虚幻四
- web AI 浏览器里执行的 懂车帝 手淘
技术能力:
- 团队中 技术用不上??创造条件 寻找那个能用上点
- 函数式编程 typescript 测试 掌握一门后端语言
- Node Docker k8s 了解 pm2 Linux libuv eventloop v8
new Vue({}) V8快属性 js -》 词法 语法 -》 ast -> 字节码 -》 ao vo go
-》 收集代码信息 -》 优化字节码 生成机器码
- 工程化 CI CD webpack原理 webpack5 工程化
- 性能指标 要求不高 不理睬 不卡。换同事 职业生涯 sdk
- CSS BEM 原子 矩阵 next houdouni
- 前端 react 这一套 + vue值钱一些 难复杂一些 确实难读一些,微前端
- 前端跨界 ar vr iot iOS android 小程序搬砖 小程序和周边框架的原理
- webpack5 system+通信+主服务 github解决问题 star 数据结构+算法
- leetcode 图形学 三一重工 政府单位 私企 ue4 three Bim canvas 数学课
- 前端安全 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
简历2
一个 ssp的校招。 敢做敢用
简历3
简历4
优秀前端养成记
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 开发版本
import ts from rollup-plugin-typescript2
export defalut[
{
input:'src/a.ts',
output:{format:'cjs'},
plugins:[ts({
useTsconfigDeclarationDir:true
})]
}
]
推荐 npm包 rollup-plugin-typescript2
来解决自动合并 d.ts
性能优化
- 雅虎军规
- 渲染加载
- 页面加载
- node加载
- 慎用缓存
1.11.00
百尺竿头更进一步
- 用户渲染性能指标 资源 css loading
- 用户发生错误,点击错误,问题的回溯,录制成视频方便回看 fetch错误操作
- 用户自定义sdk数据进行传输
navigator.sendBeacon 不占用并发,也可以使用img src
也提到了 performace,可以获得大部分统计任务
const entries = performance.getEntriesByType('resource')
for(const entry of entries){
console.log(entry)
}
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