浏览web文章的时候 收集的大厂的一些面试题 当然是查漏补缺,学习一波了
原文问题链接: https://www.nowcoder.com/discuss/100224?type=2&order=0&pos=262&page=1
——————– 腾讯SNG ——————–
一面
介绍项目
Diff算法?
react diff算法的3个策略:
tree diff: React对Virtual DOM树进行层级控制,只会对相同层级的DOM节点进行比较,即同一个父元素下的所有子节点,当发现节点已经不存在了,则会删除掉该节点下所有的子节点,不会再进行比较
component diff: 如果是同一个类型的组件,则按照原策略进行Virtual DOM比较。
如果不是同一类型的组件,则将其判断为dirty component,从而替换整个组价下的所有子节点。
如果是同一个类型的组件,有可能经过一轮Virtual DOM比较下来,并没有发生变化。如果我们能够提前确切知道这一点,那么就可以省下大量的diff运算时间。因此,React允许用户通过shouldComponentUpdate()来判断该组件是否需要进行diff算法分析
element diff: 当节点属于同一层级时,diff提供了3种节点操作,分别为INSERT_MARKUP(插入),MOVE_EXISTING(移动),REMOVE_NODE(删除)
setState过程?
setState在调用时做了两件事
第一,调用enqueueSetState。该方法将我们传入的 newState 添加到一个叫做_pendingStateQueue的队列中去存起来,然后执行一个enqueueUpdate方法
第二,如果存在 callback 就调用 enqueueCallback 将其存入一个 _pendingCallbacks 队列中存起来
第三: 判断是否处于 batch update
是 => 保存组件于 dirtyComponents 中
否 => 遍历所有的 dirtyComponents , 调用 updateComponent 更新 pending state or props
transaction(批量操作事物机制) 当所有操作均执行成功,即可以commit transaction;若有一个操作失败,则执行rollback
setState是同步执行的,但是state并不一定会同步更新
树的深搜与广搜?
深搜: 大体流程就是这样,从树的根部搜索到最末尾的分支,然后,一个节点搜索完毕后,回溯,再搜索,知道在回溯到树的根部,再由树的根部发出另一分支。搜索到目标则停止 深搜更加浪费时间
广搜: 是向外发散式的搜索 搜索完一层,再进入下一层,直至到达最后一层 广搜更显得盲目
用户量大了,会有什么问题,怎么解决(安全,内存泄漏,性能)?
输入一个url到看到页面经历了怎样的过程?
缓存机制,如何缓存图片?
浏览器缓存 代理服务器缓存 网关缓存
客户端渲染过程,重绘重排,如何优化?
localStorage使用场景?
localStorage可以用来统计页面访问次数 停留时间
sessionStorage可以用来统计当前页面元素的点击次数
cookie一般存储用户名密码相关信息,一般使用escape转义编码后存储
封装组件和接口?
一个函数对应一个功能 常用的 axios api 封装
封装socket?
用了socket.io.js的最新版本。使用过的都知道socket.io.js是基于 消息类型 来通信的,如果消息类型多了就很难维护。所以就需要对socket.io.js进行了应用层的封装
// 发布消息 接收消息 直接回调
ServiceWorker API(关于这个API的文章正在路上)?
本质上充当Web应用程序与浏览器之间的代理服务器 也可以在网络可用时作为浏览器和网络间的代理
它们旨在(除其他之外)使得能够创建有效的离线体验,拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API
腾讯SNG二面
Web性能优化方法
是否了解后端
浏览器链接限制如何解决
因为浏览并发连接数限制只是针对同一域名的,即是对同一个域名的资源加载有并发数的限制,如果将
资源文件分散到不同的域名下,即可实现并发数的扩展,例如一个域名是10个,两个域名就是20个并发了
网络安全
非递归遍历二叉树
网易一面:
React生命周期
CSS有哪些选择器,直接兄弟选择器是什么?
CSS有哪些可继承属性?
有哪些性能优化方法?
HTTP请求的请求头和请求体
状态码
用过哪些git命令,git rebase和git merge的区别
用typeof object = object为什么不靠谱?应该如何做?
要准确判断一个变量是否是一个对象,可以使用constructor以及instanceof判断
设计求和函数sum使sum(a,b)和sum(a)(b)都能执行
1+’2’+’2’; -1 +‘2’+ +2等这些输出什么?
立即执行函数的输出
settimeout输出
cookie和session
阿里三面(电话):
介绍项目,设计思路
遇到问题如何解决?
明显降低调试成本的方法?
如何与后端合作?
遵循规范?
学习前端的经历?
为什么对前端兴趣多一点?
开发的痛点?
业余喜欢干什么?
最有成就感的项目?
有没有遇到什么兼容性问题?
阿里二面(视频):
介绍项目,项目功能
面试官比较感兴趣代码高亮提示和快捷键系统,让我说说怎么做的
代码提示用到了promise解决异步问题,用socket优化速度,socket的稳定性(心跳检测),如何减少请求次数(前端一次取到所有结果集然后在结果集中筛选),结果集太大怎么办(没答上来)
键盘事件,编辑模式和命令模式的切换,给div加tabIndex,tabIndex的作用,各种取值的含义,focus()函数的参数及意义等
还有什么别的难点,怎么解决的?(说了state的设计等)
TCP连接的三次握手
HTTP1.1和HTTP2.0的区别
为什么要用redux, connect函数的原理
XSS和CRSF攻击是什么?如何防范?
阿里一面(电话):
以项目为重点自我介绍
介绍一下编辑器项目,有什么难点,如何解决的
上线之后又什么反馈
项目架构(结构)
一个图片垂直居中,水平居中的方法
CSS选择器优先级
CSS选择器性能优化
CSS3平移
CSS隐藏元素的方法
跨域:做项目时有遇到跨域吗(有,但是后端用ngix转发了),那知道什么跨域方法(JSONP),介绍一下,知道CORS么
Box-sizing作用
清除浮动的方法&BFC
absolute相对什么定位
有哪些脱离文档流的方法
HTTP与socket的区别,为什么用socket更快
浏览器渲染过程,如何优化提高加载速度
ES6用了哪些明显提升工作效率的特性
React为什么要加key
定义函数的两种方式,又什么区别,为什么
判断Array的方法
Js数组对应的栈方法和队列方法
编程题:实现深拷贝(不考虑函数和原型)
需要加强:
计算机网络常见面试题(尤其是项目里用到了socket和http)
项目的难点总结(可以虚拟一些编织点自己熟悉的知识点进去,翻翻周报和笔记)
性能优化方法
框架React以及打包工具webpack的经典面试题
Promise
缓存,前端各种缓存方式的区别cookie,session,localStorage, sessionStorage, IndexDB
排序算法, 数据结构里常见的操作
操作系统经典面试题
自学toC
腾讯SNG一面
介绍项目
Diff算法, setState过程
树的深搜与广搜
用户量大了,会有什么问题,怎么解决(安全,内存泄漏,性能)?
输入一个url到看到页面经历了怎样的过程?
缓存机制,如何缓存图片
客户端渲染过程,重绘重排,如何优化
localStorage使用场景
封装组件和接口
封装socket
ServiceWorker API(关于这个API的文章正在路上)
腾讯SNG二面
Web性能优化方法
是否了解后端
浏览器链接限制如何解决
网络安全
非递归遍历二叉树
网易一面:
React生命周期
CSS有哪些选择器,直接兄弟选择器是什么?
CSS有哪些可继承属性?
有哪些性能优化方法?
HTTP请求的请求头和请求体
状态码
用过哪些git命令,git rebase和git merge的区别
用typeof object = object为什么不靠谱?应该如何做?
设计求和函数sum使sum(a,b)和sum(a)(b)都能执行
1+’2’+’2’; -1 +‘2’+ +2等这些输出什么?
立即执行函数的输出
settimeout输出
cookie和session
阿里三面(电话):
介绍项目,设计思路
遇到问题如何解决?
明显降低调试成本的方法?
如何与后端合作?
遵循规范?
学习前端的经历?
为什么对前端兴趣多一点?
开发的痛点?
业余喜欢干什么?
最有成就感的项目?
有没有遇到什么兼容性问题?
阿里二面(视频):
介绍项目,项目功能
面试官比较感兴趣代码高亮提示和快捷键系统,让我说说怎么做的
代码提示用到了promise解决异步问题,用socket优化速度,socket的稳定性(心跳检测),如何减少请求次数(前端一次取到所有结果集然后在结果集中筛选),结果集太大怎么办(没答上来)
键盘事件,编辑模式和命令模式的切换,给div加tabIndex,tabIndex的作用,各种取值的含义,focus()函数的参数及意义等
还有什么别的难点,怎么解决的?(说了state的设计等)
TCP连接的三次握手
HTTP1.1和HTTP2.0的区别
在一个TCP连接上可以传送多个HTTP请求和响应,减少了建立和关闭连接的消耗和延迟,在HTTP1.1中默认开启Connection: keep-alive,一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点
HTTP2.0 二进制分针传输/信道复用/header压缩/服务端推送
为什么要用redux, connect函数的原理?
XSS和CRSF攻击是什么?如何防范?
阿里一面(电话):
以项目为重点自我介绍
介绍一下编辑器项目,有什么难点,如何解决的
上线之后又什么反馈
项目架构(结构)
一个图片垂直居中,水平居中的方法
CSS选择器优先级
CSS选择器性能优化
CSS3平移
CSS隐藏元素的方法
跨域:做项目时有遇到跨域吗(有,但是后端用ngix转发了),那知道什么跨域方法(JSONP),介绍一下,知道CORS么
Box-sizing作用
清除浮动的方法&BFC
absolute相对什么定位
有哪些脱离文档流的方法
HTTP与socket的区别,为什么用socket更快
浏览器渲染过程,如何优化提高加载速度
ES6用了哪些明显提升工作效率的特性
React为什么要加key
定义函数的两种方式,又什么区别,为什么
判断Array的方法
Js数组对应的栈方法和队列方法
编程题:实现深拷贝(不考虑函数和原型)
需要加强:
计算机网络常见面试题(尤其是项目里用到了socket和http)
项目的难点总结(可以虚拟一些编织点自己熟悉的知识点进去,翻翻周报和笔记)
性能优化方法
框架React以及打包工具webpack的经典面试题
Promise
缓存,前端各种缓存方式的区别cookie,session,localStorage, sessionStorage, IndexDB
排序算法, 数据结构里常见的操作
操作系统经典面试题
自学toC