Web前端最全【建议收藏】2024大厂JavaScript面试题汇总,持续更新中~,vue3面试题

总结一下

面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。

为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大,符合岗位要求的人越来越少,所以学习前端的小伙伴要注意了,一定要把技能学到扎实,做有含金量的项目,这样在找工作的时候无论遇到什么情况,问题都不会大。

};

};

// 实际想绑定在 scroll 事件上的 handler

function realFunc(){

console.log(“Success”);

}

// 采用了防抖动

window.addEventListener(‘scroll’,debounce(realFunc,500));

// 没采用防抖动

window.addEventListener(‘scroll’,realFunc);

上面简单的防抖的例子可以拿到浏览器下试一下,大概功能就是如果 500ms 内没有连续触发两次 scroll 事件,那么才会触发我们真正想在 scroll 事件中触发的函数。

上面的示例可以更好的封装一下

// 防抖动函数

function debounce(func, wait, immediate) {

var timeout;

return function() {

var context = this, args = arguments;

var later = function() {

timeout = null;

if (!immediate) func.apply(context, args);

};

var callNow = immediate && !timeout;

clearTimeout(timeout);

timeout = setTimeout(later, wait);

if (callNow) func.apply(context, args);

};

};

var myEfficientFn = debounce(function() {

// 滚动中的真正的操作

}, 250);

// 绑定监听

window.addEventListener(‘resize’, myEfficientFn);

9.js节流


防抖函数确实不错,但是也存在问题,譬如图片的懒加载,我希望在下滑过程中图片不断的被加载出来,而不是只有当我停止下滑时候,图片才被加载出来。又或者下滑时候的数据的 ajax 请求加载也是同理。

这个时候,我们希望即使页面在不断被滚动,但是滚动 handler 也可以以一定的频率被触发(譬如 250ms 触发一次),这类场景,就要用到另一种技巧,称为节流函数(throttling)。

节流函数,只允许一个函数在 X 毫秒内执行一次。

与防抖相比,节流函数最主要的不同在于它保证在 X 毫秒内至少执行一次我们希望触发的事件 handler。

与防抖相比,节流函数多了一个 mustRun 属性,代表 mustRun 毫秒内,必然会触发一次 handler ,同样是利用定时器,看看简单的示例:

// 简单的节流函数

function throttle(func, wait, mustRun) {

var timeout,

startTime = new Date();

return function() {

var context = this,

args = arguments,

curTime = new Date();

clearTimeout(timeout);

// 如果达到了规定的触发时间间隔,触发 handler

if(curTime - startTime >= mustRun){

func.apply(context,args);

startTime = curTime;

// 没达到触发间隔,重新设定定时器

}else{

timeout = setTimeout(func, wait);

}

};

};

// 实际想绑定在 scroll 事件上的 handler

function realFunc(){

console.log(“Success”);

}

// 采用了节流函数

window.addEventListener(‘scroll’,throttle(realFunc,500,1000));

上面简单的节流函数的例子可以拿到浏览器下试一下,大概功能就是如果在一段时间内 scroll 触发的间隔一直短于 500ms ,那么能保证事件我们希望调用的 handler 至少在 1000ms 内会触发一次。

10.说一下Commonjs、AMD和CMD


一个模块是能实现特定功能的文件,有了模块就可以方便的使用别人的代码,想要什么功能就能加载什么模块。

Commonjs:开始于服务器端的模块化,同步定义的模块化,每个模块都是一个单独的作用域,模块输出,modules.exports,模块加载require()引入模块。

AMD:中文名异步模块定义的意思。

requireJS实现了AMD规范,主要用于解决下述两个问题。

1.多个文件有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器

2.加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应的时间越长。

语法:requireJS定义了一个函数define,它是全局变量,用来定义模块。

requireJS的例子:

//定义模块

define([‘dependency’], function(){

var name = ‘Byron’;

function printName(){

console.log(name);

}

return {

printName: printName

};

});

//加载模块

require([‘myModule’], function (my){

my.printName();

}

requirejs定义了一个函数define,它是全局变量,用来定义模块:

define(id?dependencies?,factory)

在页面上使用模块加载函数:

require([dependencies],factory);

总结AMD规范:require()函数在加载依赖函数的时候是异步加载的,这样浏览器不会失去响应,它指定的回调函数,只有前面的模块加载成功,才会去执行。

因为网页在加载js的时候会停止渲染,因此我们可以通过异步的方式去加载js,而如果需要依赖某些,也是异步去依赖,依赖后再执行某些方法。

由于篇幅有限,只能分享部分面试题,更多面试题及答案可以【点击我】阅读下载哦~无偿分享给大家,算是一个感恩回馈吧

11.请解释什么是事件委托/事件代理


事件代理( Event Delegation ),又称之为事件委托。是 JavaScript 中常用的绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能

可以大量节省内存占用,减少事件注册,比如在 table 上代理所有 td 的 click 事件就非常棒

可以实现当新增子对象时无需再次对其绑定

12.事件模型


W3C 中定义事件的发生经历三个阶段:捕获阶段( capturing )、目标阶段

( targetin )、冒泡阶段( bubbling )

冒泡型事件:当你使用事件冒泡时,子级元素先触发,父级元素后触发

捕获型事件:当你使用事件捕获时,父级元素先触发,子级元素后触发

DOM 事件流:同时支持两种事件模型:捕获型事件和冒泡型事件

阻止冒泡:在 W3c 中,使用 stopPropagation() 方法;在IE下设置 cancelBubble =true

阻止捕获:阻止事件的默认行为,例如 click - a 后的跳转。在 W3c 中,使用preventDefault() 方法,在 IE 下设置 window.event.returnValue = false

13.new操作符具体干了什么呢?


创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型

属性和方法被加入到 this 引用的对象中

新创建的对象由 this 所引用,并且最后隐式的返回 this

14.Ajax原理


Ajax 的原理简单来说是在用户和服务器之间加了—个中间层( AJAX 引擎),通过XmlHttpRequest 对象来向服务器发异步请求,从服务器获得数据,然后用 javascript来操作 DOM 而更新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据

Ajax 的过程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是ajax的核心机制

15.对象深度克隆的简单实现


function deepClone(obj){

var newObj= obj instanceof Array ? []:{};

for(var item in obj){

var temple= typeof obj[item] == ‘object’ ? deepClone(obj[item]):obj[item];

newObj[item] = temple;

}

return newObj;

}

ES5的常用的对象克隆的一种方式。注意数组是对象,但是跟对象又有一定区别,所以我们一开始判断了一些类型,决定newObj是对象还是数组~

16.将原生的ajax封装成promise


var myNewAjax=function(url){

return new Promise(function(resolve,reject){

var xhr = new XMLHttpRequest();

xhr.open(‘get’,url);

xhr.send(data);

xhr.onreadystatechange=function(){

if(xhr.status200&&readyState4){

var json=JSON.parse(xhr.responseText);

resolve(json)

}else if(xhr.readyState==4&&xhr.status!=200){

reject(‘error’);

}

}

})

}

17.实现一个once函数,传入函数参数只执行一次


function ones(func){

var tag=true;

return function(){

if(tag==true){

func.apply(null,arguments);

tag=false;

}

return undefined

}

}

18.js监听对象属性的改变


我们假设这里有一个user对象,

(1)在ES5中可以通过Object.defineProperty来实现已有属性的监听

Object.defineProperty(user,‘name’,{

set:function(key,value){

}

})

缺点:如果id不在user对象中,则不能监听id的变化

(2)在ES6中可以通过Proxy来实现

var user = new Proxy({},{

set:function(target,key,value,receiver){

}

})

这样即使有属性在user中不存在,通过user.id来定义也同样可以这样监听这个属性的变化哦~

19.如何实现sleep的效果(es5或者es6)


(1)while循环的方式

function sleep(ms){

var start=Date.now(),expire=start+ms;

while(Date.now()<expire);

console.log(‘1111’);

return;

}

执行sleep(1000)之后,休眠了1000ms之后输出了1111。上述循环的方式缺点很明显,容易造成死循环。

(2)通过promise来实现

function sleep(ms){

var temple=new Promise(

(resolve)=>{

console.log(111);setTimeout(resolve,ms)

});

return temple

}

sleep(500).then(function(){

//console.log(222)

})

//先输出了111,延迟500ms后输出222

(3)通过async封装

function sleep(ms){

return new Promise((resolve)=>setTimeout(resolve,ms));

}

async function test(){

var temple=await sleep(1000);

console.log(1111)

return temple

}

test();

//延迟1000ms输出了1111

(4).通过generate来实现

function* sleep(ms){

yield new Promise(function(resolve,reject){

console.log(111);

setTimeout(resolve,ms);

})

}

sleep(500).next().value.then(function(){console.log(2222)})

20.Function.proto(getPrototypeOf)是什么?


获取一个对象的原型,在chrome中可以通过_proto_的形式,或者在ES6中可以通过Object.getPrototypeOf的形式。

那么Function.proto是什么么?也就是说Function由什么对象继承而来,我们来做如下判别。

Function.proto==Object.prototype //false

Function.proto==Function.prototype//true

我们发现Function的原型也是Function。

由于篇幅有限,只能分享部分面试题,更多面试题及答案可以【点击我】阅读下载哦~无偿分享给大家,算是一个感恩回馈吧

21.如何解决跨域问题?


首先了解下浏览器的同源策略 同源策略 /SOP(Same origin policy) 是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到 XSS 、 CSFR 等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源

  • 通过jsonp跨域

var script = document.createElement(‘script’);

script.type = ‘text/javascript’;

// 传参并指定回调执行函数为onBack

script.src = ‘http://www…:8080/login?user=admin&callback=onBack’;

document.head.appendChild(script);

// 回调执行函数

function onBack(res) {

alert(JSON.stringify(res));

}

  • document.domain + iframe跨域

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用?
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用?
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么?
14.说一下 Vue 和 React 的认识,做一个简单的对比
15.Vue 的 nextTick 的原理是什么?
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解?
19.vue-cli 替我们做了哪些工作?

如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

ead.appendChild(script);

// 回调执行函数

function onBack(res) {

alert(JSON.stringify(res));

}

  • document.domain + iframe跨域

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用?
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用?
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么?
14.说一下 Vue 和 React 的认识,做一个简单的对比
15.Vue 的 nextTick 的原理是什么?
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解?
19.vue-cli 替我们做了哪些工作?
[外链图片转存中…(img-z4rVurmM-1715877229316)]

如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 24
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2024年的Web前端面试面试官可能会关注一系列的技能和概念,包括但不限于HTML、CSS、JavaScript前端框架(如React、Vue、Angular)、性能优化、响应式设计、浏览器兼容性、模块化和打包工具(Webpack、Rollup)、API交互、前端测试(如Jest、Mocha)、SEO、以及最近流行的技术趋势如WebAssembly、PWA(Progressive Web App)和GraphQL等。 具体的问题可能涵盖: 1. HTML5新特性的理解和使用,比如语义化的标签和表单控制。 2. CSS3样式和布局技巧,如Flexbox和Grid的使用。 3. JavaScript ES6+的新特性,比如箭头函数、模板字面量、Promise和Async/Await等。 4. 面向前端开发的JavaScript库和框架的最佳实践,如组件化开发和状态管理。 5. 了解并评价不同前端框架的核心思想和适用场景。 6. 浏览器渲染原理和性能优化策略,如懒加载、预渲染、缓存优化等。 7. 对跨域、同源策略和HTTPS的理解,以及处理JSONP或CORS的方法。 8. Webpack或Rollup的工作原理,以及如何配置它们来处理模块和打包。 9. 如何设计和实现可复用、可测试的前端代码结构。 10. 对现代前端测试的认识,包括单元测试、集成测试和端到端测试。 11. Web性能优化案例分享,如减少HTTP请求、压缩资源、CDN使用等。 12. 了解基本的SEO优化原则,如元标签、索引优化等。 13. 对现代前端架构,如服务端渲染、单页应用(SPA)和微前端的理解。 14. 最新的前端技术动态,例如WebAssembly如何提升性能,PWA如何提供离线体验,以及GraphQL如何改进API设计。 如果你想深入了解前端面试题建议关注权威技术博客、参加在线课程和模拟面试练习,不断更新自己的知识库。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值