Home Article Practice 前端

前端

2024-09-30 18:11  views:144  source:小键人vvvvvvvv    

【34】NextTick是什么?Vue实现响应式并不是数据发生变化之后DOM立即变化,而是在同步任务执行完成之
后才执行渲染任务,简单说Vue的渲染是异步的。定义:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之
后立即使用这个方法,获取更新后的 DOM。数据修改之后使用这个方法,可以获取更新后的 DOM。因为Vue 在更
新 DOM 时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后
,再统一进行更新(nextTick 的回调函数是在 DOM 更新之后触发的)【35】宏任务、微任务、dom渲染
宏任务(script代码) => 微任务 => DOM渲染 => 异步宏任务js里面的Dom操作代码,是同步执
行,但浏览器进行的Dom渲染,是异步操作。浏览器渲染Dom和执行js,同时只能二选一,渲染一次Dom的时机是,
当前宏任务和小尾巴微任务执行完,下一个宏任务开始前【36】Vue中的key?key是给每一个vnode的唯一i
d,也是diff的一种优化策略。例如再一个数组中插入值,不加key值进行比较的时候,当发现数据不同,会进行do
m操作;在使用key的情况,只是进行一次插入操作,提高了diff效率;【37】修饰符?表单:lazy,numb
er,trim; 事件:stop,once,captrue,prevent; v-bind.sync(能对pr
ops进行一个双向绑定)【38】捕获和冒泡?捕获:(父元素->子元素)到点击的子元素停止;事件捕获只发生在被点
击的元素或目标上,该事件不会传播到子元素。冒泡:(子元素->父元素)到documen-window截至,例如可
以给按钮加事件修饰符stop,阻止向上冒泡,【39】自定义指令?全局注册主要是通过Vue.directive方
法进行注册。局部注册通过在组件options选项中设置directive属性。然后你可以在模板中任何元素上使用
新的 v-focus property,【40】Diff算法?在diff比较的过程中,循环从两边向中间比较;比
较只会在同层级进行, 不会跨层级比较【41】Axios二次封装?设置超时时间、设置请求头、根据项目环境判断使用
哪个请求地址、错误处理等等操作,请求头,状态码,请求超时时间【42】VUE3的不同?组合式api,组件支持有多
个根节点,响应式系统(ref,reactive,Proxy API替代 defineProperty API)
,生命周期【43】强缓存和协商缓存f5刷新网页时,跳过强缓存,但是会检查协商缓存ctrl+f5 强制刷新网页时
,直接从服务器加载,跳过强缓存和协商缓存;强缓存命中时,浏览器并不会向服务器发送请求,而是直接从缓存中读取资源
。强缓存和协商缓存共同之处在于,如果命中缓存,服务器都不会返回资源;区别是,强缓存不对发送请求到服务器,但协商
缓存会。当协商缓存没命中时,服务器会将完整的资源发送回客户端。【44】默认加载、Async和defer默认的加
载方式是同步加载,会按顺序加载和执行,且会阻塞页面的渲染直到脚本执行完毕;async 异步下载,并一定会在 o
nload 之前执行,不按声明的顺序,只要加载完可能就立刻执行,会影响渲染。defer异步下载,会在 onlo
ad 之后执行,DOMContentLoaded 之前执行。多个 defer 会按顺序执行。给 script
标签添加了 defer 属性后,脚本不会阻塞 DOM 树的构建,会先下载资源,然后等待到在 DOMConten
tLoaded 事件前执行。如果多个 script 设置了 defer 属性,这几个 script 的执行顺序
和声明顺序相同,即最前面的脚本先执行,并不是谁先下载谁先执行。若有多个script含defer属性,推迟执行的
脚本不一定总会按顺序执行或者在DOMContentLoaded事件之前执行。(DOMContentLoaded
事件的触发时机为初始 HTML 被构建完成时,此时 CSS、图片等资源不需要加载完,但我们的脚本要执行完。)
Async和defer共同点:(1)不会阻塞文档元素的加载。【45】简述每个周期具体适合哪些场景?before
create: 可以在这加个 loading 事件,出现加载框效果在加载实例时触发;created:初始化完成
时的事件写在这里,如在这结束loading 事件,异步请求也适宜在这里调用;mounted : 挂载元素,获取
到 DOM 节点nextTick: 更新数据后立即操作 dom【46】形成BFC的条件浮动元素,float除n
one以外的值绝对定位元素,position是absolute或fixedoverflow除了visible以
外的值(hidden,auto,scroll)display取值为其中之一(inline-block,tabl
e-cell,table-caption,flex)body根元素【47】Vue单向数据流单向数据流:父级 p
rops 的更新会向下流动到子组件中,每次父级组件发生更新时,子组件中所有的 props 都将会刷新为最新的值
,防止从子组件意外改变父级组件的状态。注意在JavaScript 中对象和数组是通过引用传入的,所以对于一个数
组或对象类型的 props 来说,在子组件中改变变更这个对象或数组本身将会影响到父组件的状态【48】路由守卫?
全局:beforeEach(前置守卫),beforeResolve(解析守卫),afterEach(后置守卫)
单个路由守卫:beforeEnter 局部路由守卫:beforeRouteEnter(前置守卫),befor
eRouteLeave(后置守卫),beforeRouteUpdate(路由改变守卫)【49】原生小程序用什么
技术?微信小程序的原生开发采用的是WXML、WXSS和JavaScript等技术。【50】前后端交互详细步骤+
http协议详解?https://blog.csdn.net/weixin_45948938/article/
details/1045303301.浏览器输入地址比如http……,根据域名和端口号通过DNS解析成IP地址
2.根据IP地址以及端口号找到对应的服务器(http协议中的tcp协议 )协议三次握手和四次挥手3.服务器接收
到来自前端的请求,分配到对应路由‘/’4.在路由里取到对应的文件。例如 index.html5.浏览器拿到in
dex.html了,就开始渲染【51】对于浏览器的渲染优化你做过哪些【52】浏览器页面的阻塞【53】浏览器缓存
【54】token验证的话 从前端 浏览器到后端的情况1、客户端使用用户名跟密码请求登录,服务端收到请求,去验
证用户名与密码2、验证成功后,服务端会签发一个token并把这个token发送给客户端,客户端收到token以
后,会把它存储起来,比如放在cookie 里或者localStorage里3、客户端每次向服务端请求资源的时候
需要带着服务端签发的token4、服务端收到请求,然后去验证客户端请求里面带着的token,如果验证成功,就向
客户端返回请求的数据【55】你认为比较合理的token存位置是什么?如果每次登陆都会请求获取token鉴权接口
的话,存放在sessionStorage就可以了,如果需要token数据持久化,实现自动登陆等功能,则存在lo
calStorage【56】如何让页面加载快一点?1. 减少HTTP请求次数2. 压缩和缓存文件3. 减少DO
M操作4. 使用异步加载- 使用defer或async属性来异步加载JavaScript文件5. 减少重绘和回
流【57】Vue router操作浏览器的什么进行页面切换1.history模式:History API(pu
shState,replaceState 和 popstate 事件)来改变浏览器的 URL,从而实现页面切换
效果。2.hash模式:hash(哈希)模式来操作浏览器进行页面切换。在 hash 模式下,URL 中会出现
# 符号,例如:http://example.com/#/page1。当路由改变时,Vue Router 会通
过修改 URL 中的 hash 值来实现页面切换。这种方式相对于 History API 来说,兼容性更好,因
为 hash 模式不依赖于浏览器的 History API。【58】Js函数的this指向全局作用域:当函数在
全局作用域中被调用时,this指向全局对象(在浏览器中是window对象)。对象方法:当函数作为对象的方法被调
用时,this指向调用该方法的对象。构造函数:当函数用作构造函数创建新对象时,this指向新创建的对象。显式绑
定:通过call、apply、bind等方法,可以显式地指定函数的this指向。箭头函数:箭头函数没有自己的t
his绑定,它会捕获上层作用域的this值。【59】Es6的modoules和commJS的require区别
1、CommonJS模块是运行时加载,而ES6模块是编译时输出接口;2、CommonJS模块的require(
)是同步加载模块,而ES6模块的import命令是异步加载;3、CommonJS是对模块的浅拷贝,ES6是对模
块的引入。【60】Js的事件循环机制(eventloop)同步和异步任务分别进入不同的执行"场所",同步的进入
主线程,异步的进入Event Table并注册函数。当指定的事情完成时,Event Table会将这个函数移入
Event Queue。主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行。
上述过程会不断重复,也就是常说的Event Loop(事件循环)【61】Js与后端的交互工具XMLHttpRe
quest (XHR)、Fetch API、Axios(它封装了 XHR 和 Fetch API)、WebSo
cket【62】前后端交互方式?项目里利用Ajax,通过创建一个XMLHttpRequest对象,来进行前后端
交互。项目里前后端交互是通过 HTTP 协议,使用 axios 库发送 AJAX 请求,并通过 JSON 格式
的数据进行通信,用token进行身份验证,用proxy代理进行跨域。1. 利用cookie2. 利用Ajax3
. jsonp4. 服务端渲染5. webSocket 和 Socket.io【63】前后端的交互方式有以下几
种:1HTTP 请求:前端通过发送 HTTP 请求(如 GET、POST、PUT、DELETE 等)给后端,后
端接收请求并返回相应的数据或状态码。这是最常见的前后端交互方式,可以使用工具如 XMLHttpRequest、
Fetch API、Axios 等发送请求。2表单提交:前端通过 HTML 表单将用户输入的数据提交给后端,后
端接收表单数据并进行处理。这种方式适用于简单的数据提交,可以使用 form 标签和相关的表单元素。3WebSo
cket:WebSocket 是一种双向通信协议,通过建立持久的连接,实现客户端和服务器之间的实时通信。前端和
后端都可以发送消息给对方,可以用于实时聊天、推送通知等场景。【64】Git的操作有哪些【65】Vite相比we
bpack提升的哪些【66】Promise,两个promise同时存在怎么处理【67】Generator【68
】iterator(迭代器怎么用的)了解吗?【69】浏览器缓存有哪些【70】WebSocket你懂吗? 长连接
和短连接知道不?“【71】线程进程?状态码【72】Js是单线程,为什么能进行异步调用?Js选择了成为单线程的语
言,所以它本身不可能是异步的,但js的宿主环境(比如浏览器,Node)是多线程的,宿主环境通过某种方式(事件驱
动,下文会讲)使得js具备了异步的属性js一直在做一个工作,就是从任务队列里提取任务,放到主线程里执行。【73
】项目亮点当用户在搜索框中输入关键词时,可以使用防抖技术延迟发送请求,以避免在用户输入过程中频繁发送请求,减轻
服务器压力。三级联动懒加载的好处:此时如果我们一次性加载所有数据的话,长时间的等待页体验是非常差的。况且可能用
户也不需要看到网页上所有的东西,此时就造成了资源浪费。Wangedit里增加了图片预览功能模块之间公用逻辑的复
用上传图片的时候对图片类型以及大小做限制Proxy实现跨域(vue项目)在vue.config.js里面设置好
proxy,里面写'/api'{}作为拦截,里面写好target:后端的接口网址自己搭后端的环境【74】实习项
目中你觉得比较困难的用自己公司内部封装的组件,没有什么elment的文档,只能自己看代码按需使用不算困难,就是
之前没用过git,不会操作【75】页面加载的时候发现页面空白在头部加载JS,导致页面渲染被阻塞了;无效请求,错
误路径。vue路由配置错误,比如没有配置路由,路由指向页面是空白页;网络问题【76】Vue中使用history
路由模式出现404的问题vue中默认的路由模式是hash,会出现烦人的符号#,如http://127.0.0.
1/#/。改为history模式可以解决这个问题,但是有一个坑是:强刷新、回退等操作会出现404。【77】We
b技术!!!需要了解【78】前后台分离项目交互流程1)启动前后台项目2)前台配置页面路由,渲染前台页面 | 后
台配置数据路由,响应数据(处理好跨域问题)3)前台通过ajax请求后台接口 i)将前台数据提交给后台
ii)得到后台的响应结果 iii)根据响应结果的数据,最后完成页面的局部刷新、整体刷新、页面跳转4)
异步请求细节 1)vue框架用axios完成ajax异步请求 语法:this.$axios()
.then().catch(); 解读:$axios()是请求逻辑 | then()是正常响应逻
辑 | catch()是错误响应逻辑



Disclaimer: The above articles are added by users themselves and are only for typing and communication purposes. They do not represent the views of this website, and this website does not assume any legal responsibility. This statement is hereby made! If there is any infringement of your rights, please contact us promptly to delete it.

字符:    改为:
去打字就可以设置个性皮肤啦!(O ^ ~ ^ O)