面试

本文深入讲解了前端开发中的关键技术,如节流与防抖的区别,闭包的作用,深浅拷贝的应用,以及Cookie、sessionStorage和localStorage的比较。同时探讨了前端工程化和组件化的重要性,box-sizing的理解,以及Ajax请求的步骤。还对比了Vue和React的异同,解析了Vue生命周期和数据绑定原理,以及Vuex在状态管理中的角色。

节流和防抖?
节流:多次触发一个函数,一段时间内只会触发一次
防抖:触发一个函数他不会立即执行,而是有一个延迟时间,在延迟时间内再次触发会重新计算延迟时间

闭包?
闭包的作用是解决变量的私有化,和防止变量名冲突。缺点是由于闭包内的变量会长驻内存,使用后一定要及时清除,不然可能会引起内存泄漏。

深拷贝和浅拷贝?
深拷贝:复制一个新的对象,这个对象有自己的指针,改变原对象不会影响当前对象
浅拷贝:只复制一个对象的指针,当改变原对象时新对象也会改变

cookie、sessionStorage和localStorage的区别?
cookie:只适合保存比较小的数据,比如会话标识,最大存储空间只有4K,可设定过期时间
sessionStorage:H5中新增本地存储方式,最大可存储5M,其数据在页面关闭时清除,不能跨窗口共享数据。
localStorage:H5中新增本地存储方式,最大可存储5M,其数据会永久存储,能跨窗口共享数据。

前端工程化?
前端工程化主要表现几个方面:组件化、模块化、规范化、自动化

box-sizing?
content-box:谷歌的标准模式,在标准模式下给元素添加padding和border会在元素的外部进行渲染
corder-box:ie的怪异模式,在怪异模式下给元素添加padding和border会在元素的内部进行渲染

ajax请求步骤?
1.创建一个httpRequist异步请求对象
2.通过open方法配置url地址,请求方式是否异步与服务器建立连接
3.通过send发送ajax请求
4.服务器返回数据,根据状态码处理对应的逻辑操作
5.连接结束

渐进增强和优雅降级?
渐进增强:针对低版本浏览器开发,在保证基本功能的情况下针对高版本浏览器进行界面效果的优化。
优雅降级:一开始构建比较完善的版本,再针对低版本浏览器进行兼容处理。

var let const区别?
1.var可以声明多个相同变量,let const不行
2.var会变量提升,let,const不会
3.let const 存在块级作用域,var不存在
4.cosnt 声明了必须赋值,const 值不能修改
5.var的变量默认挂载在window对象上,let const不会

普通DOM渲染和虚拟DOM渲染的区别?
普通DOM:大量内存操作,占用内存高,性能低,更新缓慢,可以直接HTML更新,
如果元素更新则创建新的DOM。
虚拟DOM:DOM操作较少,占用内存低,性能高,可拓展性强,适合复杂交互场景,
更新速度快,不能直接HTML更新,不会创建新的DOM

vue和react的相同点?
1,都使用了虚拟DOM渲染
2,都是以组件为核心
3,都支持服务端渲染
4,都有props的概念
5,都有自己的构建工具,使用更方便

vue和react的不同点?
1,数据流,vue双向数据绑定,react单向数据流
2,写法的不同,vue写法更接近于原始写法,推荐html、css、js都写在同一个组件里。react有独特的jsx语法,更推荐所有都写在js里
3,组件引入方式,vue引入组件分为全局引入和局部引入,react是通过import模板中引入
4,改变状态的方式,vue通过this.xxx改变,react必须通过setDate()
5,设计模式的不同,vue 是MVVM的设计模式,reac是MVC设计模式

react一切都是组件怎么理解?
react本身是由多个组件堆砌而成,组件将UI部分划分为多个独立的、能复用的代码块,代码块之间相互不影响。

什么是原型?
每个函数都有一个prototype属性,这是一个指针,指向一个对象,该构造函数创建的所有实例的属性和方法都包含在这个对象内,这个对象就是原型。

什么是原型链?
获取一个对象的属性,若在对象本身找到目标,则停止查找。若对象本身查找不到,会向他的原型对象上查找,直到Object,这种层层的查找关系就是原型链。

instanceof ?
1.判断前者对象是否是后者的实例
2.判断一个构造函数是否在另一个对象的原型链上。

如何判断一个函数是个函数?
1,typeof instanceof
2,person instanceof Function
3,Object.prototype.toString.call(person)

如何理解前端工程化?
1,模块化 根据不同的业务逻辑划分为不同的模块,方便维护
2,组件化 根据不同的功能分为不同的组件,以便代码复用
3,规范化 遵守统一的开发规则,避免多人开发造成代码冲突
4,自动化 配置自动化上传部署,提高开发效率

vue生命周期?
beforeCreate 组件初始化之前,此时还没有data数据
created 组件初始化完成,此时已经可以获取数据
beforeMount DOM挂载之前
mounted DOM挂载完成,此时可以操作DOM
beforeupdated 组件更新之前
updated 组件更新完成
beforeDestroy 组件销毁之前
destroyed 组件销毁完成

为什么vue组件中的data必须为函数?
如果是一个对象,当复用组件时,所有组件的data都指向同一个对象,若其中一个data发生修改,其他组件也会发生变化。如果是一个函数,每次都返回一个新对象,便不会造成数据干扰。

computed和watch有什么区别?
计算属性computed:
1,可以使用缓存,只有依赖数据发生变化时才会重新计算,节约性能
2,计算属性不支持异步操作
监听属性watch:
1,不支持缓存,只要数据发生变化就会执行监听函数
2,支持异步操作
3,侦听属性的值可以是一个对象,接收 handler 回调,deep,immediate 三个属性;

nextTick是什么?vue实现响应式并不是在数据发生改变后立即更新DOM,而是在整个数据更新队列都循环完成,DOM才会开始渲染,nextTick是什么? vue实现响应式并不是在数据发生改变后立即更新DOM,而是在整个数据更新队列都循环完成,DOM才会开始渲染,nextTickvueDOMDOMnextTick就是渲染后的延迟回调,用来获取更新后的DOM。

vue双向数据绑定原理?
双向数据绑定是采用数据劫持结合发布者-订阅者模式实现的,通过Object.defineProperty()里的setter、getter来数据监听监听,在数据变动时发送通知给“订阅者”,从而执行相应的回调。
1,创建一个监听器Observer,对所有数据进行监听,若有变动拿到最新值通知订阅者。
2,创建一个指令解析器Compile,扫描元素所有的指令,根据指令对模板数据填充和其他指令操作。
3,创建一个watcher,他是Observer与Compile的桥梁,能够接收到所有属性变动的通知,执行指令绑定的回调函数,从而更新视图。
4,mvvm的入口函数,整合以上三者。

vuex是什么?
Vuex是专门为vue设计的状态管理工具,解决了不同页面之前的数据共享。
state :基本数据
getters: 从state派生的数据,类似于computed
mutation:用来存放方法,用来更新state数据的唯一途径,接受一个state对象
action: 提交mutation来更新state,可包含异步操作
module: 用于将store分割成不同的模块

vue性能优化?
1,v-if和v-for不能连用
2,如果要给多个子元素添加时间要用事件代理
3,页面采用keep-alive缓存组件
4,使用v-if替换v-show
5,第三方模块按需引入
6,长列表滚动到可视区加载
7,图片懒加载
8,代码压缩

闭包?
表现形式:从函数外部使用函数内部的变量
优点:可以定义私有变量,避免变量名冲突
缺点:由于函数中的变量会常驻内存,不会被浏览器垃圾回收机制回收,使用不当易造成内存泄漏

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值