网站语言版本,403网站打开免费,wordpress配置京东云,怀化最新消息今天写在前面
最近收到很多同行的抱怨#xff0c;前端开发高级还行#xff0c;对初中级最难过的不是面试过不去#xff0c;而是“已读不回”#xff0c;来自某聘的梗#xff0c;确实是#xff0c;初中级因为坑位较少#xff0c;很多HR在专心招聘的时候都未必能让所有投简历…
写在前面
最近收到很多同行的抱怨前端开发高级还行对初中级最难过的不是面试过不去而是“已读不回”来自某聘的梗确实是初中级因为坑位较少很多HR在专心招聘的时候都未必能让所有投简历都去面试更别说还有刷业绩现象还是那几个点
1.学历要注意在外的个人名片企业对比哈工和清华这即使不看面试也对清华有好感了吧 2.项目经历强调很多遍了简介的形容你在项目中的作用负责以及运行突出重点 3.简历的简洁要学会用最短的语句体现最大的价值没用的写上写上也用处不大 4.工作经历跳的多自己掂量跳的少空窗期少包装这些要注意 5.面试经过八股面试题刷就完了尽量做到说话不急也不慢吐字清晰磕磕绊绊毫无条理再来个不确定你是在被面试不是提问面试官的 6.衣着不要紧张如果紧张可以多约几个把重要的排在最后 大多情况下简历方面的问题居多对标大厂的话项目经历工作经验、还有学历要求居多对简历和面试题可以【点击此处】解决还是很简单的
目录 第 1 题写 React / Vue 项目时为什么要在列表组件中写 key 其作用是什么 key 是给每一个 vnode 的唯一 id,可以依靠 key,更准确,更快的拿到 oldVnode 中对 应的 vnode 节点 第 2 题[1, 2, 3].map(parseInt) what why ? 第一眼看到这个题目的时候脑海跳出的答案是 [1, 2, 3]但是真正的答案是[1, NaN, NaN]。 首先让我们回顾一下map 函数的第一个参数 callback。这个 callback 一共可以接收三个参数其中第一个参数代表当前被处理的元素而第二个参数代表该元素的索引。 arr.map(callback: (value: T, index: number, array: T[]) U, thisArg?: any); 而 parseInt 则是用来解析字符串的使字符串成为指定基数的整数。接收两个参数第一个表示被处理的值字符串第二个表示为解析时的基数。 parseInt(string, radix) 了解这两个函数后我们可以模拟一下运行情况 parseInt(1, 0) //radix 为 0 时且 string 参数不以“0x”和“0”开头时 按照 10 为基数处理。这个时候返回 1parseInt(2, 1) //基数为 11 进制表示的数中最大值小于 2所以无法解析返回 NaNparseInt(3, 2) //基数为 22 进制表示的数中最大值小于 3所以无法解析返回 NaN 第 3 题什么是防抖和节流有什么区别如何实现 防抖——触发高频事件后 n 秒后函数只会执行一次如果 n 秒内高频事件再 次被触发则重新计算时间 function debounce(fn) { let timeout null // 创建一个标记用来存放定时器的返回值 return function() { clearTimeout(timeout) // 每当用户输入的时候把前一个 setTimeout clear 掉 timeout setTimeout(() { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话就不会执行 fn 函数 fn.apply(this, arguments) }, 500) }}function sayHi() { console.log(防抖成功)}var inp document.getElementById(inp)inp.addEventListener(input, debounce(sayHi)) // 防抖 节流——高频事件触发但在 n 秒内只会执行一次所以节流会稀释函数的执行频率。 function throttle(fn) { let canRun true // 通过闭包保存一个标记 return function() { if (!canRun) return // 在函数开头判断标记是否为 true不为 true 则 return canRun false // 立即设置为 false setTimeout(() { // 将外部传入的函数的执行放在 setTimeout 中 fn.apply(this, arguments) // 最后在 setTimeout 执行完毕后再把标记设置为 true(关键) 表示可以执行下一次循环了。当定时器没有执行的时候标记永远是 false在开头被 return 掉 canRun true }, 500) }}function sayHi(e) { console.log(e.target.innerWidth, e.target.innerHeight)}window.addEventListener(resize, throttle(sayHi)) 第 4 题介绍下 Set、Map、WeakSet 和 WeakMap 的区别 Set——对象允许你存储任何类型的唯一值无论是原始值或者是对象引用 WeakSet——成员都是对象成员都是弱引用可以被垃圾回收机制回收可以用来保存 DOM 节点不容易造成内存泄漏 Map——本质上是键值对的集合类似集合可以遍历方法很多可以跟各种数据格式转换。 WeakMap——只接受对象最为键名null 除外不接受其他类型的值作为键名键名是弱引用键值可以是任意的键名所指向的对象可以被垃圾回收此时键名是无效的不能遍历方法有 get、set、has、delete。 第 7 题ES5/ES6 的继承除了写法以外还有什么区别 let -1)}let isTypeOf map[type] } 1. ES5 的继承实质上是先创建子类的实例对象然后再将父类的方法添加到 this 上Parent.apply(this). 2. ES6 的继承机制完全不同实质上是先创建父类的实例对象 this所以必须先调用父类的 super()方法然后再用子类的构造函数修改 this。 3. ES5 的继承时通过原型或构造函数机制来实现。 4. ES6 通过 class 关键字定义类里面有构造方法类之间通过 extends 关键字实现继承。 5. 子类必须在 constructor 方法中调用 super 方法否则新建实例报错。因为子类没有自己的 this 对象而是继承了父类的 this 对象然后对其进行加工。 如果不调用 super 方法子类得不到 this 对象。 6. 注意 super 关键字指代父类的实例即父类的 this 对象。 7. 注意在子类构造函数中调用 super 后才可使用 this 关键字否则报错。 第 11 题算法手写题 已知如下数组编写一个程序将数组扁平化去并除其中重复部分数据最终得到一个升序且不重复的数组 var arr [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]; 答使用 Set 方法去重flat(Infinity)扁平化 Array.from(new Set(arr.flat(Infinity))).sort((a,b){ return a-b})//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14] 第 12 题JS 异步解决方案的发展历程以及优缺点。 1、回调函数callback 优点解决了同步的问题只要有一个任务耗时很长后面的任务都必须排队等着会拖延整个程序的执行。 缺点回调地狱不能用 try catch 捕获错误不能 return 2、Promise 优点解决了回调地狱的问题 缺点无法取消 Promise 错误需要通过回调函数来捕获 3、Generator 特点可以控制函数的执行可以配合 co 函数库使用 4、Async/await 优点代码清晰不用像 Promise 写一大堆 then 链处理了回调地狱的问题 缺点await 将异步代码改造成同步代码如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。 第 13 题Promise 构造函数是同步执行还是异步执行那么 then 方法呢 const promise new Promise((resolve, reject) { console.log(1) resolve() console.log(2)})promise.then(() { console.log(3)})console.log(4) 执行结果是1243promise 构造函数是同步执行的then 方法是异步执行的 第 15 题简单讲解一下 http2 的多路复用 HTTP2 采用二进制格式传输取代了 HTTP1.x 的文本格式二进制格式解析更高效。 多路复用代替了 HTTP1.x 的序列和阻塞机制所有的相同域名请求都通过同一个 TCP 连接并发完成。 在 HTTP1.x 中并发多个请求需要多个 TCP 连接浏览器为了控制资源会有 6-8个 TCP 连接都限制。HTTP2 中 同域名下所有通信都在单个连接上完成消除了因多个 TCP 连接而带来的延时和内存消耗。 单个连接上可以并行交错的请求和响应之间互不干扰 第 17 题A、B 机器正常连接后B 机器突然重启问 A 此时处于 TCP 什么状态 如果 A 与 B 建立了正常连接后从未相互发过数据这个时候 B 突然机器重启问 A 此时处于 TCP 什么状态如何消除服务器程序中的这个状态超纲题了解即可 因为 B 会在重启之后进入 tcp 状态机的 listen 状态只要当 a 重新发送一个数据包无论是 syn 包或者是应用数据b 端应该会主动发送一个带 rst 位的重置包来进行连接重置所以 a 应该在 syn_sent 状态 第 18 题React 中 setState 什么时候是同步的什么时候是异步的 1、由 React 控制的事件处理程序以及生命周期函数调用 setState 不会同步更新 state 。 2、React 控制之外的事件中调用 setState 是同步更新的。比如原生 js 绑定的事件setTimeout/setInterval 等。 第 48 题call 和 apply 的区别是什么哪个性能更好一些 1. Function.prototype.apply 和 Function.prototype.call 的作用是一样的区 别在于传入参数的不同 2. 第一个参数都是指定函数体内 this 的指向 3. 第二个参数开始不同apply 是传入带下标的集合数组或者类数组 apply 把它传给函数作为参数call 从第二个开始传入的参数是不固定的都会传给函数作为参数。 4. call 比 apply 的性能要好平常可以多用 call, call 传入参数的格式正是内部所需要的格式 第 49 题为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片 1. 没有跨域问题一般这种上报数据代码要写通用的排除 ajax 2. 不会阻塞页面加载影响用户的体验只要 new Image 对象就好了排 除 JS/CSS 文件资源方式上报 3. 在所有图片中体积最小比较 PNG/JPG 第 51 题Vue 的响应式原理中 Object.defineProperty 有什么缺陷 为什么在 Vue3.0 采用了 Proxy抛弃了 Object.defineProperty Object.defineProperty 无法监控到数组下标的变化导致通过数组下标添加元素不能实时响应 Object.defineProperty 只能劫持对象的属性从而需要对每个对象每个属性进行遍历如果属性值是对象还需要深度遍历。Proxy 可以劫持整个对象并返回一个新的对象。 Proxy 不仅可以代理对象还可以代理数组。还可以代理动态增加的属性。 第 53 题输出以下代码的执行结果并解释为什么 var a {n: 1}; var b a;a.x a {n: 2}; console.log(a.x) console.log(b.x) 结果:undefined{n:2} 首先a 和 b 同时引用了{n:2}对象接着执行到 a.x a {n2}语句尽管赋值 是从右到左的没错但是.的优先级比要高所以这里首先执行 a.x相当于为 a或者 b所指向的{n:1}对象新增了一个属性 x即此时对象将变为 {n:1;x:undefined}。之后按正常情况从右到左进行赋值此时执行 a {n:2}的时 候a 的引用改变指向了新对象{n2},而 b 依然指向的是旧对象。之后执行 a.x {n2}的时候并不会重新解析一遍 a而是沿用最初解析 a.x 时候的 a 也即旧对象故此时旧对象的 x 的值为{n2}旧对象为 {n:1;x:{n2}}它被 b引用着。后面输出 a.x 的时候又要解析 a 了此时的 a 是指向新对象的 a而这个新对象是没有 x 属性的故访问时输出 undefined而访问 b.x 的时候将输出旧对象的 x 的值即{n:2}。 第 73 题 介绍下 BFC、IFC、GFC 和 FFC BFCBlock formatting contexts 块级格式上下文页面上的一个隔离的渲染区域那么他是如何产生的呢可以 触发 BFC 的元素有 float、position、overflow、displaytable-cell/ inline-block/table-caption BFC 有什么作用呢比如说实现多栏布局’ IFCInline formatting contexts 内联格式上下文 IFC 的 line box线框高度由其包含行内元素中最高的实际高度计算而来不受到竖直方向的 padding/margin 影响)IFC 中的 line box 一般左右都贴紧整个 IFC但是会因为 float 元素而扰乱。 float 元素会位于 IFC 与与 line box之间使得 line box 宽度缩短。 同个 ifc 下的多个 line box 高度会不同 IFC 中时不可能有块级元素的当插入块级元素时如 p 中插入 div会产生两个匿名块 与 div 分隔开即产生两个 IFC每个 IFC 对外表现为块级元素与 div 垂直排列。那么 IFC 一般有什么用呢水平居中当一个块要在环境中水平居中时 设置其为 inline-block 则会在外层产生 IFC通过 text-align 则可以使其水平居中。 垂直居中创建一个 IFC用其中一个元素撑开父元素的高度然后设置其 vertical-align:middle其他行内元素则可以在此父元素下垂直居中。 GFCGrideLayout formatting contexts 网格布局格式化上下文当为一个元素设置 display 值为 grid 的时候此元素将会 获得一个独立的渲染区域我们可以通过在网格容器grid container上定义 网格定义行grid definition rows和网格定义列grid definition columns属性 各在网格项目grid item上定义网格行grid row和网格列grid columns 为每一个网格项目grid item定义位置和空间。那么 GFC 有什么用呢和 table 又有什么区别呢首先同样是一个二维的表格但 GridLayout 会有更加丰富的 属性来控制行列控制对齐以及更为精细的渲染语义和控制。 FFCFlex formatting contexts: 自适应格式上下文 display 值为 flex 或者 inline-flex 的元素将会生成自适应容器 flex container可惜这个牛逼的属性只有谷歌和火狐支持不过在移动端 也足够了至少 safari 和 chrome 还是 OK 的毕竟这俩在移动端才是王道。Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素 而设置为 inline-flex 的容器则渲染为一个行内元素。伸缩容器中的每一个子元 素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说Flexbox 定义了伸缩容器内伸缩项目该如 何布局。 第 83 题var、let 和 const 区别的实现原理是什么 三者的区别 var 和 let 用以声明变量const 用于声明只读的常量 var 和 let 用以声明变量const 用于声明只读的常量 var 声明的变量不存在块级作用域在全局范围内都有效let 和 const 声明的只在它所在的代码块内有效 let 和 const 不存在像 var 那样的 “变量提升” 现象所以 var 定义变量可以先使用后声明而 let 和 const 只可先声明后使用 let 声明的变量存在暂时性死区即只要块级作用域中存在 let那么它所声明的变量就绑定了这个区域不再受外部的影响。 let 不允许在相同作用域内重复声明同一个变量 const 在声明时必须初始化赋值一旦声明其声明的值就不允许改变 更不允许重复声明如 const 声明了一个复合类型的常量其存储的是一个引用地址不允许改变的是这个地址而对象本身是可变的。 变量与内存之间的关系主要由三个部分组成 变量名 内存地址 内存空间JS 引擎在读取变量时先找到变量绑定的内存地址然后找到地址所指向的内 存空间最后读取其中的内容。当变量改变时JS 引擎不会用新值覆盖之前旧 值的内存空间虽然从写代码的角度来看确实像是被覆盖掉了而是重新分配一个新的内存空间来存储新值并将新的内存地址与变量进行绑定JS 引擎会在合适的时机进行 GC回收旧的内存空间。 const 定义变量常量后变量名与内存地址之间建立了一种不可变的绑定关系阻隔变量地址被改变当 const 定义的变量进行重新赋值时根据前面的论述JS 引擎会尝试重新分配新的内存空间所以会被拒绝便会抛出异常。 第 96 题介绍下前端加密的常见场景和方法 首先加密的目的简而言之就是将明文转换为密文、甚至转换为其他的东西 用来隐藏明文内容本身防止其他人直接获取到敏感明文信息、或者提高其他人获取到明文信息的难度。通常我们提到加密会想到密码加密、HTTPS 等关键词这里从场景和方法分别提一些我的个人见解。 场景-密码传输 前端密码传输过程中如果不加密在日志中就可以拿到用户的明文密码对用户安全不太负责。这种加密其实相对比较简单可以使用 PlanA-前端加密、后端解密后计算密码字符串的 MD5/MD6 存入数据库也可以 PlanB-直接前端使用一种稳定算法加密成唯一值、后端直接将加密结果进行 MD5/MD6全程密码明文不出现在程序中。 PlanA 使用 Base64 / Unicode1 等方式加密成非明文后端解开之后再存它的MD5/MD6 。 PlanB 直接使用 MD5/MD6 之类的方式取 Hash 让后端存 Hash 的 Hash 。 场景-数据包加密 应该大家有遇到过打开一个正经网站网站底下蹦出个不正经广告——比如X 通的流量浮层X 信的插入式广告……我没有针对谁但是这几年我们会发现这种广告逐渐变少了其原因就是大家都开始采用 HTTPS 了。被人插入这种广告的方法其实很好理解你的网页数据包被抓取-在数据包到达你手机之前被篡改-你得到了带网页广告的数据包-渲染到你手机屏幕。而 HTTPS 进行了包加密就解决了这个问题。严格来说我认为从手段上来看它不算是一种前端加密场景但是从解决问题的角度来看这确实是前端需要知道的事情。 Plan 全面采用 HTTPS 场景-展示成果加密 经常有人开发网页爬虫爬取大家辛辛苦苦一点一点发布的数据成果有些会影响你的竞争力有些会降低你的知名度甚至有些出于恶意爬取你的公开数据后进行全量公开……比如有些食谱网站被爬掉所有食谱站点被克隆有些求职网站被爬掉所有职位被拿去卖信息甚至有些小说漫画网站赖以生存的内容也很容易被爬取。 Plan 将文本内容进行展示层加密利用字体的引用特点把拿给爬虫的数据变成“乱码”。举个栗子正常来讲当我们拥有一串数字“12345”并将其放在网站页面上的时候其实网站页面上显示的并不是简单的数字而是数字对应的字体的“12345”。这时我们打乱一下字体中图形和字码的对应关系比如我们搞成这样 图形1 2 3 4 5 字码2 3 1 5 4 这时如果你想让用户看到“12345”你在页面中渲染的数字就应该是“23154”。 这种手段也可以算作一种加密。 结束
前端面试合集~
八股文and大厂面经~
技术知识点源码笔记解析~
总是投简历找不到工作或者已读不回居多要考虑简历的问题也可以【点击此处】优化及修改
很多时候来说前端开发确实对新人不友好想要更进一步薪资涨幅比较难大多时候都没有机会简历的修改与更新项目的参与和制作大环境就是这样想要进步只能被迫向前内卷每个行业都有不是说只有前端卷的严重所以安稳求富贵多给自己的技术升升级才能在行业不断更迭下维持现状寻找突破~
