前端技术自检清单

董俊豪
2022-02-25 / 0 评论 / 0 点赞 / 454 阅读 / 6,494 字
温馨提示:
本文最后更新于 2023-10-08,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

一、Javascript
变量和类型
1.javascript规定了几种语言类型
基本数据类型:Number、String、Boolean、Symbol、Undefined、Null BigInt
引用类型:Object、Array、Function、Date
2.检测数据类型
typeof ->'sring'
object instanceof String ->true/false
arr.constructor === String -> true/false
Object.prototype.toString.call(arr) ->[object String]
3.Instanceof 的实现原理,手写实现一个instanceof

function instanceof(L,R){
  const basicType = ['string','number','boolean','symbol','null','undefined'];
  if(basicType.includes(typeof(L)) === true) return false
  L = L.__proto__;
  R = R.prototype;
  while(true){
    if(L == null) return false;
    if(L == R) return true;
    L = L.__proto__;
  }
}

4.实现继承的几种方式以及他们的优缺点
原型链继承
构造函数继承
组合继承
寄生组合式继承 Object.create(Fu.prototype) 浅拷贝
5.说出一种开源项目中应用原型继承的案例
6.描述new一个对象的详细过程,手动实现一个new操作符
创建空对象,构造函数call(新对象),新对象的__proto__指向构造函数的prototype,最后返回对象或
7.说说es6中class构造以及继承的实现原理
作用域和闭包
1.词法作用域和动态作用域是什么
2.Javascript的作用域和作用域链是什么
3.Javascript的执行上下文栈,怎么应用堆栈信息定位问题
4.this的原理是什么、列举几种不同场景的取值
5.闭包的实现原理和作 用,列举几个闭包实际应用
6.理解堆栈溢出和内存泄漏的原理,如何防止
7.如何处理循环的异步操作
8.模块化是什么,列举几个模块化方案及其中原理

执行机制
1.为何try里面放return,finally还会执行,内部机制是什么
2.javascript如何实现异步编程,详细描述EvenLoop机制
3.宏任务和微任务分别有哪些
4.怎么分析一个复杂的异步嵌套逻辑
5.怎么用Promise实现串行
6.Node与浏览器EvenLoop的差异
7.如何在保证页面运行流程的情况处理海量数据
词法和Api
1.说说ECMAScript和Javascript的关系
2.说说ES6特性
3.说说Javascript的全局对象(Date、Math),全局函数(decoURI、 isNaN)、全局属性(Infinity、undefined)
4.说说map、reduce、filter等高阶函数
5.setInterval需要注意什么,使用settimeout实现setInterval
6.怎么使用正则表达式解决常见问题(邮箱校验、URL解析、去重)
7.说说Javascript异常处理方式
正则30分钟: https://juejin.cn/post/6844903439667822600

二、HTML和CSS
HTML
1.说说你对HTML5的理解
2.说说元信息标签的使用和配置方法
3.HTML5离线缓存原理是什么
4.怎么使用CanvasAPI、SVG绘制动画
CSS
1.css有哪些盒模型,在不同浏览器有哪些差异
2.说说css选择器及其优先级、使用场景
3.css伪类和伪元素有哪些,它们的区别和实际应用
4.css有哪些定位规则
5.有哪些水平垂直居中方案
6.BFC实现原理、如何创建、可以解决什么问题
7.PostCss、Sass、Less异同,怎么使用和配置
8.css模块化方案有哪些、如何按需加载、如何防止阻塞渲染
9.说说css动画、渐变、移动、旋转、缩放等等
10.说说完整的响应式布局方案
手写
1.手写图片瀑布流效果
2.使用css绘制集合图形
3.使用纯css实现贝塞尔曲线
4.实现三栏、圣杯、双飞翼、吸顶布局
三、计算机基础
编译原理
1.代码是什么,怎么将代码转化成可以运行的目标程序
2.正则表达式的匹配原理和性能优化
3.如何将javascript代码解析成抽象语法树
4.Base64编码原理
5.怎么表示和转换javascript进制
网络协议
1.计算机协议是什么,说说TCP/IP网络协议的构成
2.三次握手和四次挥手原理,为什么要用这种机制
3.有哪些可靠协议,TCP怎么保证可靠交付
4.DNS的原理、作用、解析的详细过程
5.CDN的作用和原理
6.HTTP请求报文和响应报文的具体组成、请求头常见含义
7.HTTP有几种请求方式,区别是什么
8.HTTP所有状态码的具体含义
9.HTTP加密原理,如何开启HTTPS。如何劫持HTTPS请求
10.WebSocket协议的底层原理,与HTTP的区别
设计模式
1.说说你对设计模式的理解,使用场景
2.发布订阅模式和观察者模式的异同以及实际应用
3.说说设计模式在开发中的实际应用,框架源码中对设计模式有哪些应用
四、数据结构和算法
Javascript编码能力
1.多种方式实现数组去重、扁平化,说说它们的优缺点
2.多种方式实现深拷贝、浅拷贝,说说他们的优缺点
3.手写函数柯里化工具函数、说说它的应用场景和优势
4.手写防抖和节流工具函数、说说它的原理和应用场景
5.手写实现一个sleep函数
手动实现轮子
1.手写实现call、apply、bind
2.手写实现符合Promise/A+规范的Promise,手写实现async await
3.手写一个EventEmitter实现事件发布、订阅
4.手写两种实现双向绑定的方案
5.手写JSON.stringify、JSON.parse
6.手写一个模板引擎并解释其中原理
7.手写懒加载、下拉刷新、上拉加载、预加载等效果
数据结构
1.说说常见数据结构特点,它们在不同场景下使用的优缺点
2.说说数组、字符串的存储原理
3.说说二叉树、栈、队列、哈希表的基本结构和特点
4.说说图、堆的基本结构和使用场景
算法
1.怎么计算一个算法的时间复杂度和空间复杂度,怎么估计业务逻辑代码的耗时和内存消耗
2.写出五种排序算法的实现原理、应用场景和优缺点,并说出它们的时间、空间复杂度
3.说说递归和循环的优缺点、应用场景
4.说说回溯算法、贪心算法、分治算法、动态规划算法
5.说说处理海量数据的算法方案
30-seconds: https://github.com/ConardLi/30-seconds-of-code-Zh-CN
javascript数据结构和算法:
https://github.com/ConardLi/awesome-coding-js
五、运行环境
浏览器API
1.说说浏览器提供的DOM操作API、浏览器差异、兼容性
2.说说浏览器提供的BOM全局API、浏览器差异、兼容性
3.大量DOM操作、海量数据的性能优化(合并操作、Diff、requestAnimationFrame等)
4.浏览器海量数据存储、操作性能优化
5.说说DOM事件流的具体实现机制、不同浏览器的差异、事件代理
6.说说发起网络请求的几种方式及其底层实现、手写ajax、fetch
7.浏览器的同源策略是什么,如何避免同源策略,它们之间的异同以及如何选型
8.浏览器提供的几种存储机制、优缺点
9.浏览器跨标签通信
浏览器原理
1.说说各个浏览器使用的Javascript引擎以及它们的异同
2.详细描述浏览器从输入URL到页面展现的详细过程
3.说说浏览器解析HTML代码的原理,构建DOM树的流程
4.浏览器如何解析CSS规则,并将其应用到DOM树上
5.浏览器如何绘制带有样式的DOM树
6.浏览器的运行机制,如何配置资源异步同步加载
7.浏览器重排和重绘的底层原理、引发原因,如何避免
8.浏览器的垃圾回收机制,如何避免内存泄漏
9.浏览器采用的缓存方案,如何选择合适的缓存方案
Node
1.说说Node在应用程序中的作用
2.怎么使用Node搭建运行环境、操作文件、操作数据库
3.说说Node提供的Path、Http、Child Process,原理是什么
4.Node的底层运行原理和浏览器的异同
5.Node事件驱动、非阻塞机制的实现原理
六、框架和类库
TypeScript
1.说说TypeScript面向对象理念,泛型、接口等面向对象相关概念
2.TypeScript的优势,TypeScript基础语法
3.TypeScript的规则检测原理
4.怎么在React、Vue等框架中使用TypeScript进行开发
React
1.React和Vue选型和优缺点、核心架构的区别
2.React中setState的执行机制,如何有效管理状态
3.React的事件底层实现机制
4.React的虚拟Dom和Diff算法的内部实现
5.React的Fiber工作原理,解决了什么问题
6.React Router和Vue Router的底层实现原理、动态加载实现原理
7.说说React API、生命周期,怎么应用Hoc、render props、Hooks等解决问题
8.基于React的特性和原理,手动实现一个简单的React
Vue
1.说说Vue生命周期、钩子函数、常用的API
2.说说MVVM框架设计理念
3.Vue双向数据绑定原理、Diff算法的内部实现
4.Vue的事件机制
5.template转换成真实DOM的实现机制
6.Vue的数据依赖如何实现
7.computed和watch本质区别
8.Keep-alive实现原理
多端开发
1.说说单页面应用(SPA)的原理和优缺点,开发SPA的方案
2.说说Viewport、em、rem的原理和用法
3.说说分辨率、px、ppi、dpi、dp的区别和实际应用
4.移动端页面适配解决方案、不同机型适配方案
5.移动端开发技术,React Native运作原理,怎么搭建环境以及进行开发
6.客户端开发技术,Electron运作原理,怎么搭建环境以及进行开发
7.说说多端框架的内部实现原理,有哪些方案
移动端web知识库:https://github.com/AlloyTeam/Mars
数据流管理
1.说说React和Vue传统跨组件的通信方案,对比数据流管理框架的异同
2.说说Redux管理数据流的实现原理、中间件实现原理
3.说说Mobx管理数据流的实现原理、相比Redux有什么优势
4.说说Vuex管理数据流的实现原理
5.说说这三种数据流方案的异同和优缺点,怎么做技术选型
实用库
1.说说antd design组件框架的设计理念、底层怎么实现
2.说说Echart图表绘制框架的设计理念、底层怎么实现
3.说说地图开发框架,如GIS
4.说说可视化开发框架,如 Three.js、D3
5.Loadsh、moment、underscore具体实现、原理
开发和调试
1.怎么使用浏览器提供的调试工具
2.怎么使用代理工具实现请求代理、抓包
3.怎么使用Android、IOS模拟器进行调试,怎么进行真机调试
4.怎么使用React、Vue等框架调试工具
七、前端工程
项目构建
1.npm、yarn依赖包管理的原理,两者区别
2.Babel、ESLint、webpack分别在项目中承担的作用
3.ESLint规则检测原理
4.Babel的核心原理,手写一个Babel插件
5.Polyfill代码兼容方案配置
6.Webpack编译原理、构建流程、热更新原理,chunk、bundle和module的区别和应用
7.loaders和plugins的编写和配置
Babel: https://zhuanlan.zhihu.com/p/43249121
webpack指南: https://zhuanlan.zhihu.com/p/20367175
webpack原理: https://segmentfault.com/a/1190000015088834
git教程: https://www.liaoxuefeng.com/wiki/896043488029600
图解git: https://www.runoob.com/w3cnote/git-graphical.html

Nginx
1.正向代理和反向代理的特点和实例
2.怎么搭建nginx服务器,有哪些内置变量和匹配规则
3.怎么用nginx实现请求过滤、负载均衡、配置gzip,它的原理是什么
Nginx知识:https://juejin.cn/post/6844903793918738440

开发提速
1.怎么使用yapi进行mock接口管理
2.日志埋点有哪些方案,怎么使用日志查询线上问题
3.说说TDD和BDD模式,怎么做单元测试
版本控制
1.Git核心原理、工作流程
2.Git常规命令、git rebase、git stash进阶命令
3.怎么用Git解决线上分支回滚、线上分支错误合并等问题
持续集成
1.说说CI/CD技术意义,怎么使用Jenkins
2.怎么独立完成架构设计、技术选型、环境搭建、全流程开发、上线部署等完整开发流程(web应用、移动客户端应用、PC客户端应用、小程序、H5等)
Jenkins持续集成:
Liaoxuefeng.com/article/001463233913442cdb2d1bd1b1b42e3b0b29eb1ba736c5e000
八、业务和项目
后端技能
1.说说后端开发模式
2.说说数据最终在数据库中是如何存储,表结构设计、表之间怎么关联
性能优化
1.说说性能衡量指标、性能监控要点、性能监控方案
2.Web、App常见性能优化方案有哪些
3.SEO排名规则、SEO优化方案、前后端分离的SEO
4.SSR实现方案、优缺点及其性能优化
5.webpack的性能优化方案
6.Canvas性能优化方案
7.React、Vue等框架性能优化方案
前端安全
1.XSS攻击的原理、具体案例、如何防御
2.CSRF攻击的原理、具体案例、如何防御
3.HTTP劫持、页面劫持的原理、防御措施
业务相关
1.说说开发项目的整体业务形态、业务目标、业务架构,怎么快速定位线上业务问题
2.说说开发项目的整体技术架构、怎么根据新需求进行开发规划、根据业务报警、定位线上日志
3.怎么将自己的想法或新技术在业务中落地实践
优秀前端团队炼成:https://juejin.cn/book/6844733800379842574
九、学习提升
1.定期将知识进行总结,不断完善自己的知识体系
2.尽量将知识转换成真实的产出,注重实际应用
3.坚持输出自己的代码,不要盲目扎进公司业务、方法库
工作内外技术成长: https://juejin.cn/post/6844903828333002760
十、技术之外
1.互联网人员术语:CEO、CTO、COO、CFO、PM、QA、UI、FE、DEV、DBA、OPS
2.互联网行业术语:B2B、B2C、C2C、O2O
3.互联网行业沟通、问答、学习
4.理财意识,储蓄、货币基金、保险、指数基金、股票基本理财知识
5.建立正确的养生体系,繁重的工作中保持健康的方法

互联网术语大全:https://www.jianshu.com/p/996a089c1a41
互联网沟通、问答及学习:http://zhuanlan.zhihu.com/p/41431775
1.尽量把问题描述具体,让解答的人一看即懂
2.不能因为自己需要帮助,就要求别人来帮助你
3.问问题前自己先思考
4.思考自己给对方带来什么价值
5.分享观点、工作经验、表达自己,这样别人才能看到你能提供的价值
6.学会总结规律、懂得应用迁移知识
怎么保持身体健康:http://zhihu.com/question/21790919

敏捷看板 starlink

0

评论区