XX软件前端开发面试

面试时间： 2020年12月18日晚上7.45点-8.15点
面试形式：语音面试（二面）

自我介绍
参考模板：
你好，我是XX，毕业于XX大学。现就职于XX公司，有X年开发经验，公司主要使用技术栈为React+AntDesign+Redux进行开发
闭包是什么？
函数A返回了一个函数B，并且函数B中使用了函数A的变量，函数B就被称为闭包
为什么会有闭包？
因为JS的垃圾回收机制，JS本身为了避免过量消耗内存，造成系统崩溃，自带有一套垃圾回收机制。垃圾回收机制能够检测出一个对象是不是无用的。检测到之后，就会把他的内存释放掉。但是实际工作中，需要一些变量不那么及时的被清理，所以出现了闭包，达成效果。
DNS服务器一般分几种？
根DNS服务器，顶级DNS服务器，权威DNS服务器
DNS 查询的过程
5.1 浏览器输入www . qq .com 域名，操作系统首先检查本地hosts文件是否有这个网站映射关系，如果有，则先调用这个ip地址映射，完成域名解析
5.2 如果hosts里没有这个域名的映射，则查找本地DNS解析器缓存，是否有这个网址映射关系，如果有，直接返回，完成域名解析
5.3 如果hosts和本地DNS解析器缓存都没有相应的网址映射关系，首先会找TCP/IP参数中设置的首选DNS服务器（本地DNS服务器），此服务器收到查询时，如果要查询的域名，包含在本地配置区域资源中，则返回解析结果给客户机，完成域名解析，此解析具有权威性。
5.4 如果要查找的域名，不由本地DNS服务器区域解析，但该服务器已缓存了此网址映射关系，则调用这个IP地址映射，完成域名解析，此解析不具有权威性。
5.5 如果本地DNS服务器本地区域文件与缓存解析都失效，则根据本地DNS服务器的设置（是否设置转发器）进行查询，
如果未用转发模式，本地DNS就把请求发至13台根DNS，
根DNS服务器收到请求后会判断这个域名(.com)是谁授权管理，并会返回一个负责该顶级域名服务器的一个IP。
本地DNS服务器收到IP信息后，将会联系负责com域的这台服务器。
这台负责com域的服务器收到请求后，如果自己无法解析，他就会找一个管理com域的下一级DNS服务器地址qq.com给本地DNS服务器。
当本地DNS服务器收到这个地址后，就会找qq.com域的服务器，
重复上面的动作，进行查询，直至找到www.qq.com主机
5.6 如果用的是转发模式，此DNS服务器就会把请求转发至上一层DNS服务器，由上一级服务器进行解析，上一级服务器如果不能解析，或找根DNS或把请求转至上上级，以此循环。
不管本地DNS服务器用的是转发，还是根提示，最后都是把结果返回给DNS服务器，由此DNS服务器在返回给客户机。
从客户端到本地DNS服务器是属于递归查询，而DNS服务器之间就是迭代查询。
webpack的loader作用
loader本质就是一种函数，在该函数中对接受到的内容进行转换，返回转换后的结果，因为webpack只认识js，所以loader就是翻译官，对其他类型资源进行转译的预处理工作。
webpack的alias对性能优化
缩小打包作用域
项目权限如何配置？刷新后怎么配置的？
sessionStorage 存储到当前页面关闭位置
（localstorage永久存储本地，除非主动删除）
js模块

项目	commonJS	ES6	AMD	CMD
典型环境	nodejs	babel	requirejs	seajs
导入的模块路径	表达式	字符串
输出的值	值的拷贝	值得引用
this指向	当前模块	undefined

react hooks为什么出现？
react函数组件负效应的解决方案，丰富函数组件功能，是函数组件在一定程度上具有替换类组件的功能
react fiber 为什么出现
react fiber 是核心算法的一次重新实现。
在之前的版本中，如果你拥有一个很复杂的复合组件，然后改动了最上层组件的state，那么调用栈可能会很长。调用栈过长，再加上中间进行了复杂的操作，就可能导致长时间阻塞主进程，带来不好的用户体验。fiber就是为了解决该问题而生。
fiber本质上是一个虚拟的堆栈帧，新的调度器会按照优先级自由调度这些帧，从而将之前的同步渲染改成了异步渲染，在不影响体验的前提下分段计算更新。
对于如何区别优先级，react有自己的一套逻辑。对于动画这种实时性很高的东西，也就是16ms必须渲染一次保证不卡顿的情况下，react会每16ms内暂停一下更新，返回来继续渲染动画。
对于异步渲染，现在渲染有两个阶段：reconciliation和commit。前者过程是可以打断的，后者不能暂停，会一直更新界面直到完成。
因reconciliation是可以被打断的，所以reconciliation阶段会执行的生命周期函数就可能出现调用多次的情况，从而引起bug。所以对于reconciliation阶段调用的几个函数，除了shouldcomponentupdate外，其他都应该避免去使用。
自己实现一个react，怎么实现
react核心为虚拟DOM，围绕虚拟DMD包含虚拟DOM模型建立，生命周期的管理，对比差异的diff，将虚拟DOM转换为原生DOM并展示，setstate异步机制和react合成事件
12.1虚拟DOM
虚拟DOM包含：type当前节点属性，key 元素标识，优化更新，props节点属性
将元素转换为虚拟DOM，react使用jsx，即react.ceateElement语法糖。过程：根据我们传入参数，生成不同虚拟dom
12.2reactComponent实现
虚拟DOM分三类：文本类型，原生DOM类型，自定义类型。
不同的类型肯定有不同的渲染和更新逻辑，我们把这些逻辑和虚拟DOM一起分装成对应的reactcomponent类，通过reactcomponent类来控制虚拟DOM，命名为ReactTextComponent， ReactDOMComponent，ReactCompositionComponent分别对应三种类型
首先是基类reactComponent，接着让不同类型的component继承这个基类，每种component类型都有mount和update两个方法，用来执行渲染和更新
12.3入口实现
实现reactComponent后需要入口得到reactComponent并且调用mount，react使用reactDom.render(组件，容器)，实现通过虚拟dom生成component
自己实现一个redux，怎么实现
暴露的方法：createStore，combineReducer，applyMiddleware
createSore 提供了getState，subscribe。修改state值：dispatch指定一个修改state计划，告诉store，reducer 修改state的时候，按照计划进行。
reducer 一个纯函数，接受一个state，返回一个新的state。
combineReducer 封装combineReducer来颗粒化renducer函数
项目中中间件用过哪些
redux-thunk
redex store仅支持同步数据流。使用thunk实现redux的异步性。可以将thunk看成store的dispatch方法的封装器，使用 thunk anction creator派遣函数或promise，而不是返回action对象。
核心代码只有两行：判断每个经过他的action，如果是function类型，就调用这个function（传入dispatch，getState和extraAugument参数），而不是任由他到达reducer，因为reducer是一个纯函数，redux规定到达reducer的action必须是plain object类型。
项目中权限管理

项目	以往处理方式	页面权限	模块权限	元件权限	统一管理权限registerAuthRules
概念			页面区块（组件）是否显示	组件内元素是否显示
方法	前端发送异步请求取到权限数据	将所有的前端路由配置在后端，对于不同角色的用户，后端把路由列表吐给前端注册	将系统中用户散落的权限统一配置，通过HOC包装一下react组件，提供劫持渲染和权限透传的能力	将系统中用户散落的权限统一配置，通过HOC包装一下react组件，提供劫持渲染和权限透传的能力	应用的所有权限配置会被统一配置在一个闭包中，权限的值支持后端同步吐出，也支持每次异步请求（利用promise实现）
缺点	随着代码量增加，难以维护

项目中用户登录管理
登录时用setCookie，渲染页面时用getCookie
cookie是指某些网站为了辨别用户身份而存储在用户本地终端上的数据（通常加密）。所以通过cookie可以实现对用户登录状态的判断，防止用户不经过登录直接进入一些页面，或者进入一些没有权限的页面。
对cookie写操作：在cookie中，除了name和value，每条记录还有更多属性，如是否失效，是否使用安全协议传输等。
对cookie读操作：需要对cookie是否存在进行判断。注意命名的时候，尽量不要使用之前曾用名，因为indexof查到第一个就会返回
将cookie用来保存登录状态
在用户登录成功的时候，设置cookie值，用来保存用户username和identify
再除了登录界面以外的所有界面，都会判断该cookie是否存在，如果不存在就返回到登录页面，如果存在，判断该身份是否有访问该页面的权限，如果具有权限才继续访问，否则跳转到其他具有权限的页面。
这种情况下，如果cookie被人窃取，则会有信息泄露的危险
通过设置httponly属性，这种cookie中只能在http中传输，而不会被脚本窃取
new操作中发生了什么
创建一个空对象，将他的引用赋给this,继承函数的原型
通过this将属性和方法添加至这个对象
最后返回this指向的新对象，也就是实例

XX软件前端开发面试相关推荐

深圳某某网前端开发面试2020年12月
深圳某某网前端开发面试面试时间: 2020年12月8日上午10点-12点面试形式: 笔试+技术面+项目面笔试题 position的值有哪些? A. static B.relative C. ab ...
最全BAT前端开发面试80题：算法+html+js+css！含答案大赠送！
最全前端开发面试题目:包含算法+网络+css面试+js+h5面试题目,尾部有最全BAT前端面试经典77题和答案,想要的就快来领走吧~(领取方式见文末) 一.前端算法面试 1.基本排序的方式冒泡.快排 ...
2018前端开发面试备忘录（1年以上经验初中级别前端开发）-面试篇
2018前端开发面试备忘录-面试篇 -面试篇 -简历篇 -跳槽选择篇 18年过年之前离职了,在家闲着也没事就去面试了下,试试水. 2018前端开发面试备忘录,主要是查漏补缺,我自己的面试作答,后面会在 ...
web前端开发面试都喜欢问什么
web前端工程师通过面试不是件容易的事,作为候选人,通常需要在规定的时间内展示自己能做些什么.作为一名面试官,同样难以在这么短的时间内评估候选人是否适合.对于面试来说,并不存在一刀切的方法,面试官问的 ...
前端开发面试问题及答案收录
转: 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. ...
前端开发面试知识点大纲
前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应.Java ...
史上最全前端开发面试问题及答案整理 http://segmentfault.com/blog/trigkit4/1190000002562454
https://github.com/hawx1993/Front-end-Interview-questions 本文旨在加深对前端知识点的理解,资料来源于网络,由本人(博客:http://segm ...
高频前端开发面试问题
高频前端开发面试问题参考网址: https://mp.weixin.qq.com/s?__biz=MzIzMTc4NzIyNw==&mid=2247488920&idx=1& ...
前端开发面试知识点大纲：
本文转自:http://segmentfault.com/a/1190000002562454,尊重作者,尊重原创前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解.浏览器内核 ...

XX软件前端开发面试

XX软件前端开发面试相关推荐

最新文章

热门文章