成都建设网站首页,中京建设集团有限公司网站,深圳装修公司哪家比较好,网站空间查询前言
最近忙着面试很久没有更新文章了#xff0c;分享一下我收集的前端面经#xff0c;当然题目仅供参考#xff08;乞求秋招offer#xff09; 面试题 响应式布局 ---根据用户的的窗口变化而变化的布局方式 react 的hooks ---官方提供的钩子和自定义的钩子#xf…前言
最近忙着面试很久没有更新文章了分享一下我收集的前端面经当然题目仅供参考乞求秋招offer 面试题 响应式布局 ---根据用户的的窗口变化而变化的布局方式 react 的hooks ---官方提供的钩子和自定义的钩子用来处理状态变化视图更新和逻辑复用 useMome 和useCallBack ---没有了解 性能优化懒加载缓存压缩 ---减少网络请求使用浏览器缓存减小打包的体积使用动态路由 webpack打包控制 ---设置打包的文件名和被打包的文件类型排除不需要打包的文件、文件夹转换js的规范 无感刷新 token 的意义 ---使用双token当主token失效后刷新token代替请求用户就不需要重新验证身份 url输入到浏览器发生了什么 ---会检查本地的dns表查找ip没有找到则向dns服务器发送请求获取ip访问到ip后拿到页面数据开始按htmllinkscript的顺序渲染页面这里包含了异步处理则会被塞到异步队列中等待同步任务处理完后执行异步操作 web Woker接受一个脚本文件后台使用线程处理不影响主线程通过消息事件message传递信息 Webpack为什么打包、进行压缩之后性能就会提高呢 ---降低了代码的体积去除了模块化页面请求的数据变少了获取脚本的速度变快了 为什么使用webpack ---webpack可以优化web的体积和性能打包时可以设置文件指纹保证页面的实时更新打包后的代码被混淆处理不便阅读反解保护代码的版权 对原始值的拆包和解包 ---没有了解 For of和For in的区别 ---for of是迭代对象遍历值的语法糖基于symbol.iterator属性实现的for in 是遍历引用类型的属性从而遍历整个对象的 判断数据类型的方法 ---基本数据类型使用 type of 引用数据类型使用 instanceof 要注意的点typeof null 是Objectinstanceof是判断原型链上的对象是否存在数组可以使用Array.isArray来判断它的原理是将值使用tostring方法和 [array object]对比 深拷贝、浅拷贝 子问题JSON.parse( JSON.stringify(arr))在深拷贝时有哪些需要注意 ---当对象有undefined和null属性值或者数组内有空数组时json序列化会排除掉这些空值 数组的常用静态方法和实例方法 ---Array.isArrayArray.frompushpopmapfiltersplice 子问题①哪些方法会修改原数组、哪些不会 ---pushpopsplice会改变map不会改变原数组但是内部的回调会改变 ②数组Pop方法的返回值 ---数组被删除的第一个元素 ③使用哪些数组方法可以实现浅拷贝 ---map ④slice()第二个参数为-1是什么意思 ---裁剪到数组的倒数1位 ⑤splice()有什么用 ---可以实现数组的插入删除 对Promise的理解Promise规范有了解吗Promise的缺点 ---promise时异步处理的解决方法它可以将异步的方法保存起来使用回调的方式处理异步结果 promise对于多次异步的处理会产生大量回调代码不易维护 子问题①有哪些静态方法和原型方法②catch方法之后还可以进行链式调用吗 ---实例方法thencatch 静态方法all可以catch方法相当于只处理reject状态的回调任然会返回一个promise 请求头content-type的类型有哪些 ---html 、image、json 子组件和父组件加载顺序 ---同步先于异步父组件先于子组件 事件修饰符.sync ---没有了解字面意思应该是一个异步事件推后执行 Vue2中Computed计算属性的特性以及实现原理 ---可以设置值拦截访问getter和setter处理 console.log(null undefined) // true console.log(true 2) // false console.log(null 0) // false console.log(1 1) // true function test(age) { console.log(age); var age 20; console.log(age); function age() { } console.log(age); } // 参数function 20 20 函数优先会被提到最前面var将age重新赋值和传入的age无关 flex 1和 flex auto的区别 ---flex 1是 1 1 0flex auto是 1 1 auto auto的伸缩会将剩下的空间全部取走 http2 和 http1.1的区别 ---不清楚没有深入了解 说一下浏览器缓存 ---浏览器会保存首次的网络请求资源对于后续的同名文件和请求会将保存的资源返回比如随机的api请求多次请求返回的是同一组数据 说一下跨域怎么处理的 jsonp说一下原理 ---使用本地服务器代理请求在返回给页面 继承方法有哪些 ---classprototype类和原型 解决跨域的方式有哪些 ---corsjsonp react router有哪些常用的路由模式 ---BrowserRouter 和 HashHistory ‘/’和‘#’ 讲一下扩展运算符的使用好处是什么set解构和map解构 ---简化属性的提取set和map使用数组的结构方式结构 set是否支持forEach循环 --- 支持set的原型上有foreach方法 说一下对ajax的了解基于什么去实现的有什么样的一个功能 ---基于xmlhttprequest可以获取后端传递的json数据异步不阻塞主进程并且不会触发页面的整体变化 ajax跟fetch应用上有什么区别什么时候用ajax什么时候会用fetch ---ajax基于xmlhttprequest只能在浏览器中使用fetch是支持浏览器和node 说一下了解的webpack输入输出和构建流程 ---在webpack.config.js文件中设置打包规则包括指定文件夹文件类型打包的es6语法转换, webpack构建好的产物都是什么你是如何部署的前端平台的部署是一个什么流程 ---一个主要的html和其他的js脚本css样式文件以及静态资源将打包好的dist文件夹中的文件部署到github的分支在将这个分支用github的静态page功能部署暂时没有用过平台部署 github给你分配了一个链接这个链接是如何代理到你打包好的前端资源上的 ---这个链接会和存放资源的服务器ip构成一个dns表而打包 好的资源就存放在服务器上 webpack热更新实现原理 react组件通讯的方式有哪些 ---props透传useContext深层传递的钩子 说一下react的diff算法 输入 url 到请求返回发生了什么 了解浏览器缓存吗浏览器缓存有哪些 强缓存和协商缓存 EventLoop是什么浏览器事件循环和Nodejs事件循环有什么区别 怎么做前端工程化规范 prettier、eslint、commitlint、webpack/vite、CI/CD Promise 有哪些静态方法(all、race、allSettled)说一说 Promise.allSettled 方法 async / await 原理generator语法糖 TypeSctipt 如何将一个联合类型缩小为具体类型 你的项目的js或css文件大概多大多大比较合适为什么? 异步事件都有哪些区别宏任务、微任务 前端常用优化性能方式 说一说块盒子和内联盒子的特点 a. 两者设置内边距和外边距有什么区别 内联元素设置边距左右正常上下无作用 讲一讲 BFC 和触发的条件 说一下 JS 变量类型怎么判断它们 和 它们的优缺点 cookiesession和token的区别 讲一下变量提升 说一下vue组件间的通信 之前做的项目有开发环境和生产环境的区分吗怎么区分 vue双向绑定中界面驱动数据的监听方式是什么 ts最大的特点是强类型你觉得怎么用好他有必要吗强调了是两个问题 react会有一个入口文件来运行运行时发生了什么 css实现三栏布局 http1和http2的区别 https的加密过程 1. 变量作用域和this指向问题,说输出 var bar window function say() { var bar 111 console.log(bar) console.log(this.bar) } const obj { bar: 222, say() { console.log(bar) console.log(this.bar) } } say() obj.say() obj.say say obj.say() .async函数输出顺序问题 async function f1() { console.log(1) } async function f2() { console.log(2) await console.log(3) // 取消注释后输出顺序又是怎样 // console.log(5) } function f3() { console.log(4) } f1() f2() f3() 手写题 手写深拷贝 ( 支持 原型继承 和 循环调用 ) 实现一个函数可以将数组转化为树状数据结构 1. 数组只有一个没有 parentId 的元素为根节点 2. 输出一个根节点打印出树状结构 // 入参格式参考 const arr [ { id: 1, name: i1 }, { id: 2, name: i2, parentId: 1 }, { id: 4, name: i4, parentId: 3 }, { id: 3, name: i3, parentId: 2 }, { id: 7, name: i7, parentId: 3 }, { id: 8, name: i8, parentId: 3 } ] 数组实现reduce、map 算法最大子数组和 算法最长不重复字符串 ① 数组扁平化函数传入两个参数第一个为数组第二个为扁平化层级 ② 实现斐波那契数列 扁平数组 转 树结构 找出出现最多次的字符 写一个函数实现输入的ajax请求串行输出可用递归、迭代、await都可以。 二叉树、完全二叉树、满二叉树区别 二叉树遍历时间复杂度最好最坏 二叉树遍历方式以哪个节点为主 手写监听数组 ---重写原型方法pushpopshiftunshift使用proxy监听对象的方式 链表反转 一只青蛙可以一次跳上2个台阶也可以调试1个台阶求跳上n级台阶共多少种跳法 算法括号匹配 写一个重复执行函数 写一个函数遍历统计页面上所有的dom元素并且以对象的形式返回 以下是本人实际面试的题目 一、 介绍项目中的难点 http请求中有什么内容http响应头http状态码http的传输方式网络模型httpstcp/ip tcp协议有什么特点 计算机网络的分层 http2.0新增了什么和http1有什么区别 react和vue有什么区别 手写题 判断变量输出 var a 0; var b 0; var c 0; function fn(a){ console.log(fn,a,c); function fn2(b){ console.log(fn2,a,b,c); } var c 4; fn fn2; } fn(1) fn(2) 事件循环输出 console.log(start); async function async1(){ console.log(async1 start) await async2(); console.log(async1 end) } async function async2(){ console.log(async2) } setTimeout((){ console.log(setTimeout) },0) async1() new Promise((res){ console.log(Promise1) res() }).then((){ console.log(Promise2) }) console.log(end); 反转链表 链表有什么特点 反问 哪里需要加强提升知识点应该学习的深入一些算法需要多练 二、 写一个vue项目你会怎么实现 vue3的生命周期 solt插槽是怎么使用的 sesstion和cookie 跨域问题怎么解决 是否了解web安全 for in和for of { a:1 , b: [1,2,3,4,5], c: (){}, d: { e: null, f: { } } } 三、 介绍项目歌词和进度条是怎么保持一致的项目中歌曲可以播放的格式有哪些 vue2转vue3怎么实现 js的事件循环是什么 反问公司的技术方向是什么前端开发人数有多少 自我介绍 问项目问题echart图表是怎么用的 h5和css3有没有了解有什么新特性 有没有用过ai编程colipot 学习的过程有没有遇到困难不理解的地方是怎么解决的 遇到不会的问题会怎么查 认为自己有什么优缺点 闲聊了几句家在哪里目前居住在哪里 四、 自我介绍 为什么选择学习前端说一下前端的学习路线 介绍项目的难点以及是怎么解决的 如果项目启动的时候有白屏怎么解决 vue2和vue3的区别proxy实现响应式为什么更好 webpack怎么优化性能 反问公司的前端的技术方向是什么vue 五、 自我介绍 项目中有懒加载的效果是怎么实现的 知道块级标签和行内标签是怎么排布的吗分别有哪些标签呢 input标签有哪些type类型 了解语义化标签吗有哪些标签是语义化标签呢 浏览器的标准模式和怪异模式怪异模式下会怎么渲染dom css有哪些选择器伪类选择器有哪些 css怎么实现一个水平垂直居中的布局 有哪些position定位属性分别是什么效果 js的事件传递机制是怎么样的ul里有一个li触发点击时怎么响应事件如果要让ul先触发怎么实现 反问公司的前端的技术方向是什么vuereact原生
