jquery框架面试题2周刷完100道前端优质⾯试真题【完整】分享学习
前端⾯试技能总结
Download:
vue中MVVM的实现原理 答：由于我读过vue的源码，所以可以⽐较清楚的说明这其中的原理。主要是数据劫持、模板解析、依赖收集这⼏个过程。这道题也是被问到最多的⼀道题。可以参考：剖析Vue实现原理 - 如何实现双向绑定mvvm
Object.defineProperty⽅法有什么作⽤？有哪些参数？可以通过描述对象来设置哪些特性？ 答：这道题是上⼀道题的拓展。
Object.defineProperty⽅法可以给⼀个对象设置相关的属性，这个⽅法⼀共有三个参数，第⼀个参数是⽬标对象，第⼆个参数是属性名，第三个参数可以是⼀个描述对象。描述对象⼀个有如下特性：value — 设置属性值、configurable — 表⽰是否可删除属性，能否修改属性的特性、writable — 是否是只读属性、enumerable — 是否是可枚举属性、get — 读取属性时调⽤的函数、set — 设置属性时调⽤的函数。
for in可以遍历原型链上的属性吗？可以遍历不可枚举属性吗？Object.keys可以遍历到不可枚举属性吗？
怎么遍历到对象的不可枚举属性？ 答：这道题也是上⼀道题中提及的枚举特性的拓展。for in 可以遍历到原型链上的属性，但是遍历不到不可枚举属性。Object.keys不能遍历到原型链上的属性也不能遍历到不可枚举属性。可以通过OwnPropertyNames()⽅法访问到不可枚举属性（最后⼀⼩问没有回答出来）。
react中的事件跟js原⽣的事件有什么区别？ 答：react中的事件是合成事件，通过事件冒泡的原理绑定在根元素上。普通的事件时绑定在⽬标元素上。
事件捕获和事件冒泡机制。 答：在⼀个有层次的多个元素之间，事件会先经过捕获阶段，捕获阶段是从最顶层元素⼀直到⽬标元素。当捕获阶段结束之后事件会从⽬标元素向底层元素进⾏传递也就是冒泡阶段。具体细节可以参考《javascript ⾼级程序设计》的第⼗三章事件流。
说⼀下对Promise的理解。Promise有哪些常⽤的静态⽅法？Promise.all()⽅法的作⽤是什么？可以传⼊哪些类型的参数？ 答：Promise 是⼀个构造函数，实例化的过程中可以传⼊⼀个函数，这个函数有两个参数。在函数内部可以通过resolve、reject来修改Promise的状态，状态发⽣变化后会在当前事件队列的末尾去执⾏then或者catch⾥⾯的⽅法。常⽤的静态⽅法有Promise.all、Promise.race、solve、ject等。Promise.all⽅法可以传⼊⼀个数组，数组中的每⼀项都是⼀个Promise实例，只有数组中所有的Promise的状态都是成功时才会去改变Promise.all⽅法对应的Promis
e状态。Promise.all⽅法除了可以传⼊数组还可以传⼊所有具有iterator的对象。具体可以参考阮⽼师的es6⼊门Promise。
正则表达式有哪些常⽤的符号？略
列举常⽤的数组⽅法，哪些⽅法会改变原数组？略
for of可以遍历哪些数据类型？ 答：可以遍历具有iterator接⼝的对象。可以参考阮⽼师的es6⼊门Iterator 和 for…of 循环
CSS中overflow有哪些属性值？分别是什么作⽤？默认值是什么？略
webpack中有哪些常⽤的loader？css-loader与style-loader的作⽤分别是什么？ 答：常⽤的有css-loader、babel-loader、vue-loader、style-loader、url-loader等。css-loader是⽤来解析css⽂件的，因为webpack会将所有的东西都当成是模块，但是没有办法去解析css⽂件以及分析css⽂件中的依赖项所以需要css-loader去进⾏分析。style-loader会将通过css-loader编译好的模块提取出来通过style标签的形式插⼊到html⽂件中。
webpack中有哪些常⽤的plugin？怎么做代码分割？ 答：由于我⽤的webpack3.x的版本，所以回答的也是该版本中⼀些常⽤的plugin。常⽤的有htmlWebpackPlugin、extractTextPlugin、commonChunkP
lugin等。
简要描述js的事件循环。 答：可以参考事件循环
简要描述浏览器的渲染原理。 答：我就简单说了说浏览器的渲染过程和⼀些概念：DOM树、CSSOM树、render、paint。可以参考你真的了解回流和重绘吗?
浏览器发起请求的整个过程。 答：这是⼀道⽼⽣常谈的题了，从DNS解析到三次握⼿到发送请求报⽂到服务端响应，具体答案可以⾃⾏百度。
常⽤的http请求头和响应头。与缓存相关的有哪些？http1.0与http1.1中关于缓存有些什么区别？ 答：可以参考彻底弄懂HTTP缓存机制及原理
常⽤的http响应状态码。分别表⽰什么意思？ 答：2xx、3xx、4xx、5xx
谈谈对websocket的理解。有哪些替代⽅案？ 答：我对webscoket的理解⽐较有限，只知道是⽤来做全双⼯通讯的，是⼀个持久连接。建⽴连接的过程其实是通过http协议进⾏的，连接完成之后通过upgrade字段进⾏了协议升级，修改为websocket协议，该协议的请求头数据量⽐较少。当时回答的替代⽅案是ajax轮询和服务端推送，具体的推送⽅案不清楚。后来查了⼀些资料做了⼀点了解。可以参考《图解HTTP》这本书和《JavaScript⾼级程序设计》的第⼆⼗⼀章，⾥⾯提到了comet、SSE两种
⽅案。
TCP与UDP的区别。 答：理解的不多，只知道TCP是可靠传输UDP是不可靠传输。
常⽤的web性能优化有哪些⼿段？ 答：这道题我主要从http请求和页⾯渲染两个⽅⾯做得解答，http请求上主要是将代码分割，进⾏代码压缩，gZip编码，路由懒加载等⼀些⼿段来完成优化。页⾯渲染上主要涉及到DOM操作，减少重排、读写分离、动画上帧率跟浏览器的刷新频率保持⼀致。可以参考⼀下阮⽼师的博客⽹页性能管理详解
说⼀下作⽤域链。原型链。 答：说的主要是《JavaScript⾼级程序设计》这本书上的内容，说到原型链我⼀般会画⼀张原型链关系图。可以参考我写的⼀篇博客js总结系列（三）原型链
为什么0.1 + 0.2 === 0.3是false？ 答：这道题我主要是说了⼀下⼩数在内存中的存储⽅案，取的是⼀个近似值导致的精度丢失。
如何实现js的继承？你说的这些继承⽅式各⾃有什么缺点？如何实现完美继承？ 答：构造函数继承、原型链继承、组合继承、完美继承。这些都是⾼程中的内容，可以照搬。
常⽤的设计模式有哪些？分别有哪些应⽤场景？ 答：对设计模式总结的⽐较少，回答的时候说到了单例模式：⽤来做全屏遮罩或⼀些模态框；观察者模式：举了vue中实现数据绑定的例⼦；装饰者模式：
⽤来扩展对象；⼯⼚模式：举了jQuery中⽣成jQuery对象的例⼦。⼤家可以专门做个总结。
如何实现⼀个可以设置过期时间的localstorage存储？ 答：这题写了两三版，第⼀版考虑到的问题很少。在⾯试官的提⽰之下才有较⾼的完成度。主要是提供两个⽅法set和get，set的时候不仅要存储内容还需要存储过期时间，然后在get⽅法中判断是否已经过期。当然还有⼀些优化⼿段。
为什么会有跨域问题？常⽤的解决⽅案有哪些？ 答：直接上阮⽼师博客浏览器同源政策及其规避⽅法、跨域资源共享 CORS 详解
常见的⼀些web安全问题 答：XSS、CSRF
let和var有哪些区别？略
new关键字有什么作⽤？如何实现⼀个new关键字的⽅法？略
外层div中有两个⼦元素，如何通过flex布局实现两个⼦元素垂直居中，左右分别顶到两边的布局？略
如何通过定位的⽅式实现⼀个不确定宽⾼元素的垂直⽔平居中？略
使⽤过node吗？主要做什么？ 答：服务端node使⽤较少，主要是⽤来做⼀些打包时候的⾃定义功能脚本。平时做⼀些代理服务器啥的。后端的话主要是demo⽔平。
express和koa有什么区别？ 答：了解的不多，主要是从回调的处理和中间件的使⽤不同两个⽅⾯
知道三次握⼿和四次挥⼿吗？ 答：略
谈谈你对闭包的理解。 答：⼤家还是⾃⾏百度⽐较好。
虚拟DOM是什么？了解diff算法吗？ 答：虚拟DOM使⽤js对象来模拟DOM树的结构。js对象中有标签名、属性、⼦元素。具体细节⼤家⾃⾏百度吧，⽐我说的专业。
vue和react中循环⽣成元素时的key有什么作⽤？ 答：也是从diff算法的⾓度来说的，循环的时候key是虚拟DOM的唯⼀标志符，可以节约性能。
DNS解析过程 答：浏览器缓存、操作系统配置⽂件、DNS服务器
移动端1px问题产⽣的原因是什么？有什么解决⽅案？ 答：直接上⽂章移动端 1px 像素问题及解决办法
rem的原理？还有哪些移动端布局⽅案？ 答：说了⼀下根据屏幕宽度进⾏动态计算然后给html元素这是fontSize。其他的⽅案主要说了⼀下响应式、vw、vh、百分⽐布局等。
移动端为什么click事件会延迟300ms？如何禁⽌屏幕的缩放？ 答：主要是iPhone为了判断⽤户是否发⽣了双击。禁⽌缩放通过设置视⼝的缩放⽐例。
PC、移动端、⼩程序开发你会分别选⽤什么框架？说明你的理由。 答：我给出的答案是PC业务场景复杂的情况下选⽤react，因为函数编程更加灵活；移动端选⽤vue，⼀般来说移动端场景不会很复杂，vue⽐较轻量化；⼩程序选⽤vue，有较为完善的框架。
了解SSR吗？有什么好处？ 答：没⽤过，⼤概结合了node的服务端渲染说了⼀下⾃⼰的理解，好处是⾸屏性能和SEO
怎么判断⼀个数据的类型？ 答：String.call(obj)
说⼀下vue的⽣命周期钩⼦？vue-router有哪些钩⼦？优先级是怎么样的？略
对于秒杀类的业务怎么确保倒计时的准确性？ 答：随便想了想，我说可以在活动开始前的某个时间点发送⼀个请求获取服务端时间。现在想想好像也不太理想，感觉需要在初始化页⾯的时候服务端就返回⼀个相对的时间⽽不是绝对时间。
接⼝返回了⼀个⾮常庞⼤的数据怎么渲染到页⾯上？ 答：⾯试官提到了数据层级很深，我提到了数据缓存、分页渲染、数据扁平化等⼀些⼿段。
常⽤的异步处理⽅案及它们的⼀些优缺点。 答：主要说了回调函数、Promise、generator、async/await
原⽣js给⼀个元素绑定事件有哪些形式？有什么区别？ 答：onclick 和 addEventListener。前者只能绑定⼀次，多次绑定会发⽣覆盖，后者可以绑定多个事件处理函数，不会发⽣覆盖。
前端优质⾯试真题
1、什么是防抖和节流？有什么区别？如何实现？ 参考答案 防抖
触发⾼频事件后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 = ElementById('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)); 2、 get请求传参长度的误区、get和post请求在缓存⽅⾯的区别 误区：我们经常说get请求参数的⼤⼩存在限制，⽽post请求的参数⼤⼩是⽆限制的。
参考答案 实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下⾯⼏点:
HTTP 协议 未规定 GET 和POST的长度限制 GET的最⼤长度显⽰是因为 浏览器和 web服务器限制了 URI的长度 不同的浏览器和WEB服务器，限制的最⼤长度不⼀样 要⽀持IE，则最⼤长度为2083byte，若只⽀持Chrome，则最⼤长度 8182byte 补充补充⼀个get和post在缓存⽅⾯的区别：
get请求类似于查的过程，⽤户获取数据，可以不⽤每次都与数据库连接，所以可以使⽤缓存。 post不同，post做的⼀般是修改和删除的⼯作，所以必须与数据库交互，所以不能使⽤缓存。因此get请求适合于请求缓存。 3、模块化发展历程 可从IIFE、AMD、CMD、CommonJS、UMD、sure)、ES Module、

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。