—新的一年结束了,开始了求职之路。以下是多家面试机构的提问集合。
1.css 相关的问题。
@1:盒子模型的理解
盒子是由自身的长宽高,加上padding和border加上margin。怪异盒模型加大padding和margin都不会改变自身的大小。正常盒模型加大padding和margin会改变自身的大小。
@2:浏览器的兼容问题
例如flex的兼容。
.box{
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
}
.flex1 {
-webkit-flex: 1; /* Chrome */
-ms-flex: 1 /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
}
@3:未知宽高的盒子垂直水平居中的几种方案。
1.方法1使用弹性盒
.box{
display:flex;
justify-content:center;
align-items:center;
}
2.方法2使用定位
.box{
position:relative;
}
.son{
position:absolute;
lef:50%;
top:50%;
transform: translate(-50%,-50%);
}
@4:1px的解决方法
1,使用伪类处理1px像素问题。
.box{
position: relative;
border: none;
}
.box:after{ // 单边框
content: '';
position: absolute;
bottom: 0;
background: #DCDCDC;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.box:after{ // 四条边框
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
@5: 上下margin值叠加解决方案
1.给子元素一个float属性,就不会造成叠加。
2.给外层元素一个,overflow:hidden
3.子元素不用margin,给外层元素设置padding,来展示一样的效果。
4.分别在两个子元素之间加一个有高度的空标签。
@6:H5C3新特性总结
@7:移动端浏览器兼容
@8:浅谈video标签在移动端的运用
@9:rem的理解和计算公式
@10:css 过度和动画
@11:css样式污染怎么解决
@12:BFC的理解
@13:图片和文字的底部对齐
@14:css实现9宫格
@15:flex布局,flex为1怎么理解,gap使用过吗?
@16:竖屏实现一个正方形,和视窗口等宽。
@17:css实现三角形
2.js相关的问题。
@1:闭包的理解
作用:闭包是为了解决变量私有化。可以读取其他函数内的变量。缺点:长期驻留内存,内存消耗大。不能释放。
@2:构造函数和实例和原型对象的理解
实例有一个内部指针,指向原型对象。原型对象通过constructor属性指向相关的构造函数。构造函数通过prototype属性指向原型对象。
@3:es6的认知
》1.箭头函数 》2.变量的声明let const 》3.解构赋值 》4.模板字符串 》5.promise 》6.扩展运算符》 7.set和map。
_拓展:1.解构赋值在什么情况下才会使用到默认值?
关注点在于解构出来的是null还是undefined?,为null的时候,解构还是null,为undefined的时候,就会用到默认值。
(原理的是,解构赋值会严格的按照===undefined的判断,然后就是null和undefined自身的区别了。)
@4: foreach和map的区别
foreach的返回值为undefined,map返回值为新数组。原数组不发生改变。
@5:聊聊call和apply和bind的区别和使用场景
区别:call
跟apply
的用法几乎一样,唯一的不同就是传递的参数不同,call
只能一个参数一个参数的传入。apply
则只支持传入一个数组,哪怕是一个参数也要是数组形式。最终调用函数时候这个数组会拆成一个个参数分别传入。
至于bind
方法,他是直接改变这个函数的this
指向并且返回一个新的函数,之后再次调用这个函数的时候this
都是指向bind
绑定的第一个参数。bind
传餐方式跟call
方法一致。
使用场景:
- 当我们使用一个函数需要改变
this
指向的时候才会用到call
`apply`bind
- 如果你要传递的参数不多,则可以使用
fn.call(thisObj, arg1, arg2 ...)
- 如果你要传递的参数很多,则可以用数组将参数整理好调用
fn.apply(thisObj, [arg1, arg2 ...])
- 如果你想生成一个新的函数长期绑定某个函数给某个对象使用,则可以使用
const newFn = fn.bind(thisObj); newFn(arg1, arg2...)
@6:ES6新的数组去重方法
es6里新添加了两个很好用的东西,set和Array.from。
set是一种新的数据结构,它可以接收一个数组或者是类数组对象,自动去重其中的重复项目。
set返回的是一个对象,可以通过Array.from来转化为数组。
@7: 深拷贝浅拷贝的认知和实现的方法,递归深拷贝和Json.parse()深拷贝的区别?
认知:
深拷贝是复制引用类型对象,当前对象不会随着改变而发生变化。
浅拷贝是拷贝引用类型的地址。当前对象会随着改变而发生变化。
方法:
浅拷贝:Object-assign()
深拷贝:先使用json.stringify()在使用json.parse
@8: 函数阻塞问题
@9:防抖函数
@10:ansy awite 和promise的区别
@11:怎么处理多个同时触发的异步请求
@12:JS的节流、函数防抖 原理及使用场景
@13:遍历对象的多种方法列举
@14:怎么在跨域发cookie
@15:es6 set和map的理解?
@16:几种创建对象的方法?
@17:ajax 的过程和为啥要选择axios?
@18:对象的隐式装换?
3.react相关的问题。
@1:生命周期
1.使用伪表达式来阐述。
constructor(){
1.定义一些初始的变量。
2.定义初始绑定的函数。
}
componentWillMount(){
1.加载页面开始渲染要看到的效果。
}
componentDidMount(){
1. 在这里可以编写异步请求。
2. 可以拿到dom节点。
}
shouldComponentUpdate(){
1.控制因为某些不重要的state改变,而不去渲染页面。return false;可以提高性能。
}
render() {
1.功能必不可少,吐出dom节点。
}
componentWillUnmount(){
1.可以在这里销毁某些函数,和插件。
}
componentWillReceiveProps(){
//props发生改变,子组件会在此周期行数接收到变化。
1.考察问题:父组件的props的改变,子组件一定会在此函数接收到吗?
@1:如果父组件的props是基本类型的,子组件一定会在次周期函数接收到变化的值。
@2:如果父组件的Props是引用类型的。并且只有一层例如{key:value},比如是一个对象的key:value任何变化也会接收到。但是如果改变的是多层数据的key:value值就不会接收变化的。例如[[{key:vale}]]
}
@2:react的单向数据流和双向数据绑定
单向数据流中的‘单向’-- 数据从父组件到子组件这个流向叫单向。
一个基础的不能再基础的数据双向绑定 因为react不同于vue 没有v-model指令 所以怎么实现呢?
import React from "react"
import ReactDOM from "react-dom"
export default class DataBind extends Comonent{
constructor(){
super()
this.state = {
value: "wzy"
}
}
handleChange(e){
this.setState({
value : e.target.value
)
}
render(){
return(
<div>
<input value={this.state.value} onChange={this.handleChange.bind(this)}><input/>
<p>{this.state.value}<p/>
<div/>
)
}
}
@3:redux的流程图
@4:setState()是同步还是异步,什么是同步?什么时候是异步?
保证内部数据统一,setState异布更新状态使得并发更新组件成为可能。
@5:vue和react的区别
@6:diff算法的认知
@7:react16.8版本的了解(hook/生命周期)
@8: connect高阶组件工作的原理和认知
@9:react的性能优化
shouldComponentUpdate生命周期的手动控制/包裹节点使用react.Fragments/遍历渲染节点加入唯一的k值/在constructor里面定义初始的函数/使用高阶组件来封装某个功能块/如果是纯粹的展示组件可以,采用函数式组件。
@10:react router懒加载实现
@11: react包和react-dom包分别是干啥的。
1.react
软件包仅包含定义React组件所需的功能。它通常与React渲染器一起使用,例如react-dom
用于Web或react-native
本机环境
2.react-dom包充当React的DOM和服务器渲染器的入口点。它打算与react
npm 附带的通用React软件包配对。
@12: react虚拟dom是什么。
<div id="abc"><span>hello world !</span></div>(真实dom节点)
['DIV',{ id : 'abc'},['span',{},'bye bye']](虚拟dom来描述真实dom)
虚拟DOM本质上就是一个JS对象,用它来描述真实DOM,之所以能够提高性能,本质上是因为js去比较js对象不太消耗性能,而去比较真实的DOM会很消耗性能。
@13:用hooks写出类似componentDidMount生命周期
@14:react 生命周期的三个过程对应的生命周期是啥?
@15:redux的理解和redux中间件的具体怎么使用的?
@16:react里面的key是怎么工作的
@17:受控组件和非受控组件,那些是受控组件?高阶组件
1.受控组件:
概念:处理表单数据的时候,表单数据是由React组件来控制的。
特点:》设有value值,由state控制 》value 一般在onChange中由setState进行修改。
2.非受控组件:处理表单数据的时候,表单数据交由DOM节点来处理。
特点:》不设置value值 》通过ref来获取DOM节点再取值。
3.使用场景:
受控组件的状态全程响应外部数据的变化,而非受控组件只是在初始化的时候接受外部数据,然后就自己在内部维护状态了。
非受控组件更方便快捷,代码量小,但是控制能力比较弱。受控组件的控制能力强,但是代码量会比较多。
@18:兄弟组件之间的传值(考察context用法)
@19:类组件和函数式组件的对比认知?
@20:hooks为啥不能再循环体内,原理是啥?useEffect可以嵌套吗?
@21:antd FormItem获取节点数据是怎么实现的?
@22:为啥dva的dispath()可以点then,redux就不行?
@23:react路由匹配的原理?
@24:filber 理解?
@25:setSate()数据是怎么更新的?
@26:react-router的原理?
@27:Link组件和a标签的区别是?
@28:redux怎么解决同步和异步操作的?
@29:如何在函数组件中不用useSate也可以更新新元素?
@30:useRef怎么解决闭包的问题?
4. webpack
@1:说几个webpack的loader使用配置
@2:webapck怎么配置项目错误定位的?
@3:webpack插件解析:HtmlWebpackPlugin是干什么的以及如何使用它?
@4:有没有自己写过webpack插件?
@5:怎么分包?
5. Http 网络请求
@1:302和304状态码?
@2:http和https是对称还是非对称?
@3:说下常见的请求头的有哪些内容?
@4: 怎么解决http队头阻塞。
1. 并发TCP连接(浏览器一个域名采用6-8个TCP连接,并发HTTP请求)
2. 域名分片(多个域名,可以建立更多的TCP连接,从而提高HTTP请求的并发)
2. HTTP2方式
http2使用一个域名单一TCP连接发送请求,请求包被二进制分帧,不同请求可以互相穿插,避免了http层面的请求队头阻塞。
但是不能避免TCP层面的队头阻塞。
6. nodejs
@1:nodejs的module.export 和React中使用的export 的区别?
@2:nodejs 事件循环机制?
7. 前端的拓展
@1: 浏览器缓存机制
@2:前端判断用户登录状态方法。
方法一:
登录成功后,后端返回一个 cookie,根据这个 cookie 的有无来判断;退出登录时,后端会删除这个 cookie;
方法二:
登录成功后,前端设置 cookie,比如'isLogin = true
',根据isLogin的值去判断;退出登录时删除 cookieisLogin
或设置 'isLogin = false
'。
方法三:
- 前台发送登录请求
- 后台返回 token,前台得到后台返回的 token,将其写入到 localStorage 中,后续请求中都携带 token
- 后台判断 token 是否过期,如果过期就对前台的请求响应过期标识或者状态码
- 前台得到过期标识后,清除 localStorage 中的 token,然后重定向到 login 路由
@3:mvvm的设计模式的理解(react/vue/angular)。
1.首先要了解到mvc设计模式。
mvc即model-view-controller(模型-视图-控制器)
model:应用程序中处理数据逻辑的一部分,通常用来模型对象对数据库的存存取等操作
view:视图部分,通常指jsp、html等用来对用户展示的一部分
controller:控制层通常用来处理业务逻辑,负责从试图读取数据,并向模型发送数据
2.mvvm的出现是基于mvc设计的改造不是创新,弱化了controller层。
mvvm即Model-View-ViewModel
ViewMode看作是Model和View的连接桥,View可以通过事件绑定Model,Model可以通过数据绑定View,通过ViewMode可以实现数据和视图的完全分离
@4:px-2rem 插件具体做了什么?
@5:vue的data为什么是函数?
@6:git merge和git rebase的区别?
@7:依赖包版本号的三种安装的区别 16.10.2 ^16.10.2 ~16.10.2 ?
@8:cookie的运行机制?
@9:cookie怎么在不同域里面共享?
@10:项目部署的方式?
@11:项目中主体色的切换?
@12:设定3秒后,请求超时了的实现,在异步请求的外层在封装一层?
@13:服务端渲染和客户端渲染的区别?
@14:怎么让图片打开就自行下载?
8.个人遇到的坑和解决方案。
@1:使用antd的时候,展开table设置任意展开点出现了问题
解决方法是expandedRowKeys和rowKey的属性可以随意设置展开点。
9.个人学习的途径和遇到问题的处理方式。
1.平时会查阅掘金和csdn博客来看一些前端最新的动态。
2.遇到新的知识点可以在github上下载一些demo。运行成功后写一些类似的功能。
3.平时遇到的一些错误会到StackOverflow查阅。
4.工作中发现的特殊问题会记载到csdn博客中。
10.结尾
坚持看到这里的同学,估计还是忐忑不安,担心自己会达不到面试的要求。(ps:不担心也不会里看到这,哈哈😃),为此本人粗略的谈下自己的心得。
1.认真对待每一次面试的机会。(面试前大概把知识点梳理一下。有个宏观的认知就行)
2.每次面试官的提问都是,对你知识体系的撞击。很感谢面试官们。让我们认识到了自己的不足。
3.成功就有失败,成功表示自己在平时工作中的努力和对自己的肯定,但是也不能忘记继续提高自己。只有自己更厉害了,让面试官无题可问。(ps:加油💪🏻),对于失败呢,我个人觉得是好事,越多的失败,让你知道自己的不足暴露无遗(ps:一定要总结,对应去学习提升)。千万不要否定自己的能力。还要感谢面试们。越是刁钻的面试,越是你的幸运。
4.加油面试人,祝愿每一位面试人都能拿到自己理想的offer (ps:共勉)