2021春季面经

237 阅读22分钟

CSS

怎么清除浮动?

  1. clear:both 给需要清除浮动的元素添加一个空子元素,并设置clear类,属性为clear:both;或者给目标元素添加伪类after,设置clear属性;
  2. 创建父级BFC
  3. 父盒子设置高度

Rem的适配原理?

rem布局的本质是等比缩放,一般是基于宽度;

如果子元素设置rem单位的属性,通过更改html元素的字体大小,就可以让子元素实际大小发生改变;

怎么解决移动端1px的问题?

参考链接: www.jianshu.com/p/3a262758a…

css布局盒模型?

  • (W3C)标准盒模型 box-sizeing: content-box
  • ie盒模型 box-sizeing: border-box

css的预处理?

参考链接: blog.csdn.net/ly298306812…

HTML

html5有哪些新特性和api?

参考链接: zhuanlan.zhihu.com/p/77131734 www.jianshu.com/p/37c0b1eb4…

一: js基础

this的指向问题?

拓展: 怎么改变this的指向?

1.使用ES6的箭头函数;

2.在函数内部使用_this = this;

3.使用apply,call,bind

4.new实例化一个对象

apply,call,bind有什么区别?

call / apply :立即执行函数并且修改里面的this,call是一个个传参,apply是按照数组传参;

bind:使用bind改变this,当前的方法并没有被执行,类似于预先改变this,需要再次调用或者触发事件才会执行;

拓展: bind原理是什么?

利用柯理化思想,预先把 “需要处理的函数/改变的this/传递的参数” 等信息存储在闭包中,后期达到条件(事件触发/定时器等),先执行返回的匿名函数,在执行匿名函数的过程中再去改变this等 => this和参数的预处理;

参考链接:juejin.cn/post/685457…

讲一讲js的事件循环?

参考链接: www.jianshu.com/p/9644f1356…

拓展: 微任务和宏任务的区别?

  • 宏任务:常见的定时器,用户交互事件,事件绑定,ajax等等.
  • 微任务:Promise相关任务,async await,MutationObserver等

image.png 参考链接: cloud.tencent.com/developer/a…

事件冒泡?

事件冒泡就是事件从最深的节点开始,然后逐步向上传播事件

举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div;

事件委托,比如页面上有一百个按钮怎么绑定?

事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事;

例如: 那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。

参考链接:www.cnblogs.com/mahuateng/p…

拓展: 如果我想让事件委托的效果跟直接给节点的事件效果一样怎么办,比如说只有点击li才会触发?

Event对象提供了一个属性叫target,可以返回事件的目标节点,我们称为事件源,也就是说,target就可以表示为当前的事件操作的dom,但是不是真正操作dom,当然,这个是有兼容性的,标准浏览器用ev.target,IE浏览器用event.srcElement,这样就获取了当前节点的位置;

事件绑定

  • (标签内)嵌入dom;
  • (js获取dom元素)直接绑定;
  • (js获取dom元素)事件监听-addEventListener 参考链接:blog.csdn.net/bluebluesky…

url中的参数怎么转成对象?

split('&')转成数组 => split('=') 设置对象属性和值

讲一讲继承

讲一讲闭包

image.png

new操作符究竟做了些什么?

  1. 创建一个空对象,并且将 this 变量引向该对象,同时继承该对象的原型
  2. 属性和方法被加入到 this 引用的对象中
  3. 新创建的对象由 this 引用,并且最后隐式的返回 this

讲一讲原型

每个js对象(null除外)在创建的时候都会关联另一个对象,这个对象就是我们说的原型,每一个对象都会从原型"继承"属性;

拓展: 怎么改变原型的指向?

参考链接: blog.csdn.net/weixin_4419…

讲一讲原型链?

原型链是由原型对象组成,每个对象都有 proto 属性,指向了创建该对象的构造函数的原型,proto 将对象连接起来组成了原型链。是一个用来实现继承和共享属性的有限的对象链。

  • 属性查找机制: 当查找对象的属性时,如果实例对象自身不存在该属性,则沿着原型链往上一级查找,找到时则输出,不存在时,则继续沿着原型链往上一级查找,直至最顶级的原型对象Object.prototype,如还是没找到,则输出 undefined;
  • 属性修改机制: 只会修改实例对象本身的属性,如果不存在,则进行添加该属性,如果需要修改原型的属性时,则可以用: b.prototype.x = 2;但是这样会造成所有继承于该对象的实例的属性发生改变。

讲一讲重绘和回流

  • 重绘: 指一个元素外观的改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观;
  • 触发条件: 改变元素外观属性 color,background-color
  • 重排(重构/回流/reflow): 当渲染树中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建,这就称为重排,每个页面在第一次加载时就会重排一次;
  • 触发条件: 添加删除DOM元素, 元素位置改变,改变元素尺寸,浏览器窗口大小改变
  • 重绘和重排的关系: 在重排时,浏览器会重新构造受到影响的部分渲染树,完成重排后,浏览器会再重新绘制这部分.所以重排会引起重绘,但重绘不一定会引发重排;重绘和重排会影响页面性能; 优化:
  1. 浏览器自己的优化: 会维护一个队列,进行批处理,让多次的重绘重排变成一次;
  2. 减少对渲染树的操作,或者合并多次的DOM和样式的修改;
  3. 直接修改元素的className;
  4. 先设置元素为display:none,然后进行操作,完成后再将元素设置为display:block等等

js设计模式?

参考链接: segmentfault.com/a/119000001…

二: 浏览器相关

项目中怎么解决跨域的?

  • Jsonp: 利用浏览器对于script,iframe等标签的src等属性,没有同源策略限制这一点,在url中写入回调函数的名称,返回是是一个回调函数的字符串??
  • iframe
  • 跨域资源共享(CORS):
  • nginx代理跨域

拓展: 什么是同源策略?

同源策略指的是请求必须是同一个端口,同一个协议,同一个域名,不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源;

拓展: 同源策略限制了什么?

  • 跨域问题
  • 页面通信问题: 比如我们希望在多个页面之间进行通信,但由于同源策略导致的dom限制操作,我们是不能直接通过iframe操作其他非同源页面的dom的;
  • 通用存储问题

参考链接: zhuanlan.zhihu.com/p/262270724

什么情况发option请求?

当一个请求跨域且不是简单请求时就会发送 OPTIONS 请求; 这里要注意两个问题:

  1. 请求跨域 一般常见形式是 CORS 跨域; nginx 代理转发对浏览器而言没有跨域;

  2. 简单请求:满足下列条件的请求可以视为简单请求 使用下列方法之一:

  • GET
  • HEAD
  • POST

Content-Type 的值仅限于下列三者之一:

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

上面的条件,只要有一点不满足就不是简单请求,例如常见的 application/json 当请求跨域且不是简单请求时,浏览器首先使用 OPTIONS 方法发起一个预检请求到服务器,以获知服务器是否允许该实际请求。"预检请求“的使用,可以避免跨域请求对服务器的用户数据产生未预期的影响。

参考链接:blog.csdn.net/weixin_4348…

详细说一下http缓存(强缓存,协商缓存)

  • 强制缓存整体流程比较简单,就是在第一次访问服务器取到数据之后,在过期时间之内不会再去重复请求。实现这个流程的核心就是如何知道当前时间是否超过了过期时间。强制缓存的过期时间通过第一次访问服务器时返回的响应头获取。在 http 1.0 和 http 1.1 版本中通过不同的响应头字段实现。
  • 总结: 强制缓存只有首次请求才会跟服务器通信,读取缓存资源时不会发出任何请求,资源的 Status 状态码为 200,资源的 Size 为 from memory 或者 from disk ,http 1.1 版本的实现优先级会高于 http 1.0 版本的实现。
  • 协商缓存与强制缓存的不同之处在于,协商缓存每次读取数据时都需要跟服务器通信,并且会增加缓存标识。在第一次请求服务器时,服务器会返回资源,并且返回一个资源的缓存标识,一起存到浏览器的缓存数据库。当第二次请求资源时,浏览器会首先将缓存标识发送给服务器,服务器拿到标识后判断标识是否匹配,如果不匹配,表示资源有更新,服务器会将新数据和新的缓存标识一起返回到浏览器;如果缓存标识匹配,表示资源没有更新,并且返回 304 状态码,浏览器就读取本地缓存服务器中的数据。
  • 总结:协商缓存每次请求都会与服务器交互,第一次是拿数据和标识的过程,第二次开始,就是浏览器询问服务器资源是否有更新的过程。每次请求都会传输数据,如果命中缓存,则资源的 Status 状态码为 304 而不是 200 。同样的,一般来讲为了兼容,两个版本的协商缓存都会被实现,http 1.1 版本的实现优先级会高于 http 1.0 版本的实现。 blog.csdn.net/m0_37631322…

讲一讲cookie和session?

拓展: Cookie解决什么问题?

http无状态的问题

拓展: http无状态是什么?

参考链接: blog.csdn.net/qq_42914528…

讲一下浏览器的预检

一个页面从输入url到页面加载显示完成?

拓展: 拿到资源,页面如何渲染?(js的外链怎么处理)

参考链接:blog.csdn.net/csdnnews/ar… blog.csdn.net/weixin_4588… www.sohu.com/a/244945986… 解析过程中无论遇到的JavaScript是内联还是外链,只要浏览器遇到 script 标记,唤醒 JavaScript解析器,就会进行暂停 (blocked )浏览器解析HTML,并等到 CSSOM 构建完毕,才去执行js脚本。因为脚本中可能会操作DOM元素,而如果在加载执行脚本的时候DOM元素并没有被解析,脚本就会因为DOM元素没有生成取不到响应元素,所以实际工程中,我们常常将资源放到文档底部。

拓展: 为什么js放body最后面?

  • CSS 被视为渲染 阻塞资源 (包括JS) ,这意味着浏览器将不会渲染任何已处理的内容,直至 CSSOM 构建完毕,才会进行下一阶段。
  • 存在阻塞的 CSS 资源时,浏览器会延迟 JavaScript 的执行和 DOM 构建,直至 CSSOM 就绪。
  • JavaScript 被认为是解释器阻塞资源,HTML解析会被JS阻塞,它不仅可以读取和修改 DOM 属性,还可以读取和修改 CSSOM 属性。
  • 当浏览器遇到一个 script 标记时,DOM 构建将暂停,直至脚本完成执行。
  • 所以,script 标签的位置很重要。实际使用时,可以遵循下面两个原则:
  1. CSS 优先:引入顺序上,CSS 资源先于 JavaScript 资源。
  2. JavaScript 应尽量少影响 DOM 的构建。

讲一讲CDN?

CDN 缓存(内容分发网络,选择一个离用户最近的 CDN 边缘节点来响应用户的请求)

讲一讲DNS?

DNS (Domain Name System), 也叫网域名称系统,是互联网的一项服务。它实质上是一个 域名 和 IP 相互映射的分布式数据库,有了它,我们就可以通过域名更方便的访问互联网。 // DNS 缓存(成功访问后网站的域名、IP 地址信息缓存到本地

input中提交scrip标签,怎么处理?

www.jianshu.com/p/1d183cd70…

三: ES6

promise的原理

参考链接:zhuanlan.zhihu.com/p/112574291

promise.all和promise.race的区别?

All可以将多个promise实例包装成一个新的promise实例

拓展: promise的错误抓取方式?

set和map的区别?

应用场景Set用于数据重组,Map用于数据储存 Set:  (1)成员不能重复 (2)只有键值没有键名,类似数组 (3)可以遍历,方法有add, delete,has Map: (1)本质上是健值对的集合,类似集合 (2)可以遍历,可以跟各种数据格式转换

参考链接:blog.csdn.net/qq_39581763…

Map转成json?

image.png

let和const的区别?

Var定义的变量没有块级作用域; let和const有; image.png

拓展: const定义一个对象,对象的属性可以修改删除吗?(定义一个空数组,可以push数据进去吗?)

Object.assign的用法和注意点

  • 语法:Object.assign(target, ...sources)
  • Object.assign会将source里面的可枚举属性复制到target。如果和target的已有属性重名,则会覆盖。同时后续的source会覆盖前面的source的同名属性。
  • ⚠️Object.assign复制的是属性值,如果属性值是一个引用类型,那么复制的其实是引用地址,就会存在引用共享的问题。 参考链接: zhuanlan.zhihu.com/p/142994389

四: http与https

讲一下了解的http状态码

  1. 200成功
  2. 301 永久重定向,搜索引擎在抓取新的内容的同时也将旧的网址替换为重定向之后的网址;(新资源,新网址)
  3. 302 临时重定向,搜索引擎会抓取新的内容而保留旧的网址;(新资源,旧网址)
  4. 304 不需要再次传输请求的内容,可以使用缓存的内容(协商缓存)
  5. 403 请求的资源不允许访问,也就是没有权限
  6. 404请求的内容不存在
  7. 500服务器错误
  8. 501 请求的功能不存在(服务器不支持当前请求所需要的某个功能)

拓展: 永久重定向和临时重定向有什么区别?

参考链接: dditblog.com/blog_109.ht…

http协议,原理???

参考链接: blog.51cto.com/12805107/20…

前端有哪些缓存方法?

参考链接: www.jianshu.com/p/227cee9c8…

http和https的区别

参考链接: zhuanlan.zhihu.com/p/72616216

五: vue

vue的生命周期

Vue的生命周期总共分为8个阶段:

  1. 创建前: beforeCreated (vue实例的挂载元素$el和数据对象data都为undefined,还未初始化);
  2. 创建后: created(完成了data数据初始化,el还未初始化);
  3. 载入前: beforeMount(vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换).
  4. 载入后: mounted(html已经成功渲染,vue实例挂载完成,data.message成功渲染)
  5. 更新前: beforeUpdate(view层的数据变化前,不是data中的数据改变前)
  6. 更新后: update是更新状态后;
  7. 销毁前: beforeDestroy;
  8. 销毁后: destroyed(在执行destroy方法后,对data的改变不会再触发周期函数,说明此事vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在)

还有三个比较特殊的生命周期:

  1. this.nextTick(回调函数) 在下一次DOM更新结束后执行其指定的回调,也就是数据改变后要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。

另外两个是路由组件所独有的钩子,用于捕获路由组件的激活状态:

  1. activated 路由组件被激活时触发
  2. deactivated 路由组件失活时触发 参考链接: blog.csdn.net/qq340124701…

拓展:父子组件生命周期的先后顺序(执行顺序与销毁顺序)?

组件的调用顺序是先父后子,渲染完成的顺序是先子后父。组件的销毁操作是先父后子,销毁完成的顺序是先子后父;

创建/挂载阶段

父组件先创建,做挂载准备;子组件再做创建和挂载,然后父组件再挂载

父beforeCreate→ 父created→ 父beforeMounte→ 子beforCreate→ 子created→ 子beforeMount→ 子Mounted→ 父mounted

子组件更新阶段

父beforeUpdate→ 子beforeUpdate→ 子updated→ 父updated

父组件更新阶段

影响到子组件:父beforeUpdate→ 子beforeUpdate→ 子updated→ 父updated

不影响子组件:父beforeUpdate→ 父update

销毁阶段 父组件先做销毁准备,然后子组件完成销毁后,父组件再销毁

父beforeDestroy→ 子beforeDestroy→ 子destroyed→ 父destroyed

拓展: 每个阶段可以做的事情

  • beforeCreated:可以在这里加一个loading事件,在加载实例时触发.
  • created: 初始化完成时的事件写这里,如果这里结束了loading事件,异步请求也在这里调用.
  • mounted:挂载元素,获取到DOM节点
  • updated:对数据进行处理的函数写这里
  • beforeDestroy:可以写一个确认停止事件的确认框

组件之间的传值,父传子,子传父,兄弟组件之间的传值?

  • 父传子: 主要通过v-on绑定一个变量名称,在子组件里面用props接收就可以了
  • 子传父: 主要是在子组件里面绑定一个方法,将这个参数传入后用emit()传递出去,emit()传递出去,emit(函数名,变量名)里面的参数是父组件中定义的一个方法名称以及参数
  • 兄弟组件: 兄弟组件之间传值可以用Bus

参考链接: segmentfault.com/a/119000001…

keep-alive是怎么使用的?

Keep-alive是vue内置的一个组件,而这个组件的作用就是能够缓存不活动的组件,我们能够知道,一般情况下,组件进行切换的时候,默认会进行销毁,如果有需求,某个组件切换后不进行销毁,而是保存之前的状态,那么就可以利用keep-alive来实现 在vue2.1.0版本后,keep-alive新加入两个属性,include(包含的组件缓存)与exclude(排除的组件不缓存,优先级大于include) 参考链接: blog.csdn.net/weixin_4181…

vue的双向绑定原理?

  • 采用数据劫持object.DefinePropoty(),结合发布者-订阅者模式,通过defineProperty来劫持各个属性的setter,getter,在数据变动时,发布消息给订阅者,触发相应的监听回调;
  • 比如将一个普通的js对象传入vue实例作为data选项时,vue会通过defineProperty中的descriptor,对data中的属性做遍历加递归,为每个属性设置getter, setter; 用户看不到getter和setter,但是在内部vue会追踪和依赖;
  • Vue的数据双向绑定是将mvvm作为数据绑定的入口,整合observer,compile和watcher三者,通过observer来监听model数据对象的属性变化,通过compile来解析元素节点的指令,根据模板替换数据编译,最终用watcher搭起observer和compile之间的通信桥梁;
  • 以达到数据变化=> 视图更新, 视图交互变化=> 数据model变更的双向绑定效果

Vue2.0怎么实时更新(监听)一个对象/数组

参考链接: www.csdn.net/tags/NtDakg… blog.csdn.net/weixin_4464…

为什么要用vuex?

  • 当多个状态(数据)分散在不同组件的各个角落,有大量状态(数据)需要相互间传递,如果都放在后台,统一去后台获取,则网络开销比较大,多层嵌套组件间就需要vuex这样的解决方案,公共数据托管在state里,不同组件都可以使用,vuex有一个轻量型替代方案,bus.js。
  • 常用场景:SPA中音乐播放,购物车数据,登录状态,配合localstorage使用

computer和watcher的区别和使用场景?

参考链接: blog.csdn.net/qq_42203909…

routeroute和router的区别

  1. route是一个跳转的路由对象,每一个路由都会有一个route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等
  2. $router是VueRouter的一个对象,通过Vue.use(VueRouter)和Vu构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由,包含了许多关键的对象和属性。 参考链接: www.cnblogs.com/dhui/p/1290…

讲一讲vue路由钩子

全局钩子: 单个钩子: 组件内钩子:

参考链接: zhuanlan.zhihu.com/p/70536937

vue实现自定义指令?

全局注册 语法:Vue.directive( id, [definition] ) 第一个参数为自定义指令名称(指令名称不需要加 v- 前缀,默认是自动加上前缀的,使用指令的时候一定要加上前缀),第二个参数可以是对象数据,也可以是一个指令函数。

image.png

局部注册: 通过在Vue实例中添加 directives 对象数据注册局部自定义指令。

image.png 参考链接: zhuanlan.zhihu.com/p/64362889 blog.csdn.net/winpanys/ar…

拓展: 自定义指令的使用场景?

拓展: 哪些参数? 哪些必传?

vue中data为什么必须是函数?

当data是一个函数的时候,每一个实例的data属性都是独立的,不会相互影响了。这都是因为js本身的特性带来的,跟vue本身设计无关;

v-show和v-if指令的不同?

vue如何实现路由嵌套?

参考链接: blog.csdn.net/github_2667…

vue路由原理????

vue框架的特点?

blog.csdn.net/qq_40015826…

如何控制css只在当前页面起作用?

Style标签里加scoped; scoped会把样式局限在当前页面;

(后台管理项目)权限管理的思路/逻辑?

方法一: 动态挂载路由,先定义好不同的routes数组,登录后根据用户的不同角色挂载不同的routes数组到router。缺点是访问权限不够的页面会返回404(页面未找到)而不是401(权限不够)。失去了语义。 全局路由守卫就是, router.forEach这样,每个路由都有个meta数据,包含了可以访问这个页面的role,然后根据用户的role信息判断是否可以进入, 不可进入就返回401页面。

方法二: 如果不同用户的权限分类有限,即用户角色有限,可以使用路由来控制,每个角色打开不同路由。 如果一个功能界面不同角色差不多,比如管理员有删除功能,就多一个删除按钮,可以使用组件配置功能,在路由那里给组件传递一个参数即可。比如管理员路由就传递isadmin为true。

参考链接: blog.csdn.net/qq_32340877…

vue/react项目中怎么压缩js文件的体积大小?

  1. 把不常改变的库放到index.html中,通过cdn引入
  2. vue路由的懒加载
  3. 不常用的css和js不要在main.js里面引入,防止vendor.js和app.css文件过大

参考链接: www.jianshu.com/p/96c987d81…

封装axios的组件要做哪些处理?

参考链接: www.jianshu.com/p/eb325d709…

juejin.cn/post/684490…

vue的插槽?

zhuanlan.zhihu.com/p/114502325…

六: React

react的生命周期

谈谈你对react中setState的理解

在同一个方法中多次setState是会被合并的,并且对相同属性的设置只保留最后一次的设置; 定时器中的setState,每次都会引起新的render,即使是同一个定时器中的多次setState; 在回调函数中,setState是不会触发批量更新机制的,无论是promise,ajax,setTimeout回调等等,同时设置多次setState,每个setState都会单独执行并render,因为上下文发生了变化。

参考链接: segmentfault.com/a/119000001…

拓展: setState修改数据后,什么时候渲染到界面上?

React中组件通信的几种方式?

参考链接: www.jianshu.com/p/fb915d9c9…

react中函数组件和类组件的区别?

  • 函数组件: 一个函数就是一个组件,一个函数组件必须有return,return的是一个React元素;
  • 类组件:
  1. 一个Class就是一个类组件
  2. 所有类组件都是继承于React.Component
  3. React.component类有自带的属性和方法,比如render,componentDidMount等其他生命周期
  • 对比: 类组件 有this,有生命周期,有状态state; 函数组件(无状态组件)这三个都没有.

拓展: 项目中怎么选择用函数组件还是类组件?

函数组件看似只是一个返回值是DOM结构的函数,其实它的背后是无状态组件(Stateless Components)的思想。函数组件中,你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件(Presentational Components),接收Props,渲染DOM,而不关注其他逻辑。

react中key?

key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串,React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。

react中的性能优化有哪些?

juejin.cn/post/684490…

react的原理?????

参考链接: zhuanlan.zhihu.com/p/80606074

Webpack使用的包和插件?

拓展: Webpack热更新的原理?

基于WDS (Webpack-dev-server)的模块热替换,只需要局部刷新页面上发生变化的模块,同时可以保留当前的页面状态,比如复选框的选中状态、输入框的输入等。 HMR作为一个Webpack内置的功能,可以通过HotModuleReplacementPlugin或--hot开启。

参考链接: blog.csdn.net/chern1992/a…

介绍一下项目中比较重要亮眼的部分?