关于前端大厂面试经验分享

前言

2年工作经验的页面仔,最近参加了几家杭州大厂的面试,顺利的拿到了自己心仪的offer,积累了一些高频重点面试题,记录给有需要的同学们。

我把面试题归纳整理分为两类,一种是基础试题: 主要考察前端技基础是否扎实,是否能够将前端知识体系串联。一种是开放式问题: 考察业务积累,是否有自己的思考,思考问题的方式。

基础题

题目的答案提供了一个思考的方向,答案不一定正确全面,有错误的地方欢迎大家请在评论中指出,共同进步。

Q: 怎么去设计一个组件封装

1. 组件封装的目的是为了重用,提高开发效率和代码质量

2. 低耦合,单一职责,可复用性,可维护性

3. [前端组件化设计思路](ijse blog ijser.cn/2017-06-25-…)

Q: js 异步加载的方式

1. 渲染引擎遇到 script 标签会停下来,等到执行完脚本,继续向下渲染

2. defer 是“渲染完再执行”,async 是“下载完就执行”,defer 如果有多个脚本,会按照在页面中出现的顺序加载,多个async 脚本不能保证加载顺序

3. 加载 es6模块的时候设置 type=module,异步加载不会造成阻塞浏览器,页面渲染完再执行,可以同时加上async属性,异步执行脚本(利用顶层的this等于undefined这个语法点,可以侦测当前代码是否在 ES6 模块之中)

Q: css 动画和 js 动画的差异

1. 代码复杂度,js 动画代码相对复杂一些

2. 动画运行时,对动画的控制程度上,js 能够让动画,暂停,取消,终止,css动画不能添加事件

3. 动画性能看,js 动画多了一个js 解析的过程,性能不如 css 动画好

Q: XSS 与 CSRF 两种跨站攻击

1. xss 跨站脚本攻击,主要是前端层面的,用户在输入层面插入攻击脚本,改变页面的显示,或则窃取网站 cookie,预防方法:不相信用户的所有操作,对用户输入进行一个转义,不允许 js 对 cookie 的读写

2. csrf 跨站请求伪造,以你的名义,发送恶意请求,通过 cookie 加参数等形式过滤

3. 我们没法彻底杜绝攻击,只能提高攻击门槛

Q: 事件委托,目的,功能,写法

1. 把一个或者一组元素的事件委托到它的父层或者更外层元素上

2. 优点,减少内存消耗,动态绑定事件

3. target 是触发事件的最具体的元素,currenttarget是绑定事件的元素(在函数中一般等于this)

4. JavaScript 事件委托详解

Q: 线程,进程

1. 线程是最小的执行单元,进程是最小的资源管理单元

2. 一个线程只能属于一个进程,而一个进程可以有多个线程,但至少有一个线程(一般情况)

3. 一个进程对应多个线程最为常见,Linux、Windows等是这么实现的。其实理论上这种关系并不是一定的,可以存在多个进程对应一个线程,例如一些分布式操作系统的研究使用过这种方式,让线程能从一个地址空间转移到另一个地址空间,甚至跨机器调用不同的进程入口(感谢AlienZHOU补充)

Q: 负载均衡

1. 当系统面临大量用户访问,负载过高的时候,通常会使用增加服务器数量来进行横向扩展,使用集群和负载均衡提高整个系统的处理能力

2. 服务器集群负载均衡原理?

Q: 什么是CDN缓存

1. CDN 是一种部署策略,根据不同的地区部署类似nginx 这种服务服务,会缓存静态资源。前端在项目优化的时候,习惯在静态资源上加上一个 hash 值,每次更新的时候去改变这个 hash,hash 值变化的时候,服务会去重新取资源

2. (CDN)是一个经策略性部署的整体系统,包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件

3. CDN_百度百科

Q: 闭包的写法,闭包的作用,闭包的缺点

1. 使用闭包的目的——隐藏变量,间接访问一个变量,在定义函数的词法作用域外,调用函数

2. 闭包的内存泄露,是IE的一个 bug,闭包使用完成之后,收回不了闭包的引用,导致内存泄露

3. 「每日一题」JS 中的闭包是什么?

4. 闭包造成内存泄露的实验

Q: 跨域问题,谁限制的跨域,怎么解决

1. 浏览器的同源策略导致了跨域

2. 用于隔离潜在恶意文件的重要安全机制

3. jsonp ,允许 script 加载第三方资源

4. nginx 反向代理(nginx 服务内部配置 Access-Control-Allow-Origin *)

5. cors 前后端协作设置请求头部,Access-Control-Allow-Origin  等头部信息

6. iframe 嵌套通讯,postmessage

Q: javascript 中常见的内存泄露陷阱

1. 内存泄露会导致一系列问题,比如:运行缓慢,崩溃,高延迟

2. 内存泄露是指你用不到(访问不到)的变量,依然占居着内存空间,不能被再次利用起来

3. 意外的全局变量,这些都是不会被回收的变量(除非设置 null 或者被重新赋值),特别是那些用来临时存储大量信息的变量

4. 周期函数一直在运行,处理函数并不会被回收,jq 在移除节点前都会,将事件监听移除

5. js 代码中有对 DOM 节点的引用,dom 节点被移除的时候,引用还维持

6. JavaScript 中 4 种常见的内存泄露陷阱

Q: babel把ES6转成ES5或者ES3之类的原理是什么

1. 它就是个编译器,输入语言是ES6+,编译目标语言是ES5

2. babel 官方工作原理

3. 解析:将代码字符串解析成抽象语法树

4. 变换:对抽象语法树进行变换操作

5. 再建:根据变换后的抽象语法树再生成代码字符串

Q: Promise 模拟终止

1. 当新对象保持“pending”状态时,原Promise链将会中止执行。

2. return new Promise(()=>{});  // 返回“pending”状态的Promise对象

Q: promise 放在try catch里面有什么结果

1. Promise 对象的错误具有冒泡性质,会一直向后传递,直到被捕获为止,也即是说,错误总会被下一个catch语句捕获

2. 当Promise链中抛出一个错误时,错误信息沿着链路向后传递,直至被捕获

Q: 网站性能优化

1. http 请求方面,减少请求数量,请求体积,对应的做法是,对项目资源进行压缩,控制项目资源的 dns 解析在2到4个域名,提取公告的样式,公共的组件,雪碧图,缓存资源,

2. 压缩资源,提取公共资源压缩,提取 css ,js 公共方法

3. 不要缩放图片,使用雪碧图,使用字体图表(阿里矢量图库)

4. 使用 CDN,抛开无用的 cookie

5. 减少重绘重排,CSS属性读写分离,最好不要用js 修改样式,dom 离线更新,渲染前指定图片的大小

6. js 代码层面的优化,减少对字符串的计算,合理使用闭包,首屏的js 资源加载放在最底部

Q: js 自定义事件实现

1. 原生提供了3个方法实现自定义事件

2. createEvent,设置事件类型,是 html 事件还是 鼠标事件

3. initEvent  初始化事件,事件名称,是否允许冒泡,是否阻止自定义事件

4. dispatchEvent  触发事件

Q: angular 双向数据绑定与vue数据的双向数据绑定

1. 二者都是 MVVM 模式开发的典型代表

2. angular 是通过脏检测实现,angular 会将 UI 事件,请求事件,settimeout 这类延迟,的对象放入到事件监测的脏队列,当数据变化的时候,触发 $diget 方法进行数据的更新,视图的渲染

3. vue 通过数据属性的数据劫持和发布订阅的模式实现,大致可以理解成由3个模块组成,observer 完成对数据的劫持,compile 完成对模板片段的渲染,watcher 作为桥梁连接二者,订阅数据变化及更新视图

Q: get与post 通讯的区别

1. Get 请求能缓存,Post 不能

2. Post 相对 Get 安全一点点,因为Get 请求都包含在 URL 里,且会被浏览器保存历史纪录,Post 不会,但是在抓包的情况下都是一样的。

3. Post 可以通过 request body来传输比 Get 更多的数据,Get 没有这个技术

4. URL有长度限制,会影响 Get 请求,但是这个长度限制是浏览器规定的,不是 RFC 规定的

5. Post 支持更多的编码类型且不对数据类型限制

Q: 有没有去研究webpack的一些原理和机制,怎么实现的

1. 解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配置结果。

2. 注册所有配置的插件,好让插件监听webpack构建生命周期的事件节点,以做出对应的反应。

3. 从配置的entry入口文件开始解析文件构建AST语法树,找出每个文件所依赖的文件,递归下去。

4. 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。

5. 递归完后得到每个文件的最终结果,根据entry配置生成代码块chunk。

6. 输出所有chunk到文件系统。

Q: ES6模块与CommonJS模块的差异

1. CommonJs 模块输出的是一个值的拷贝,ES6模块输出的是一个值的引用

2. CommonJS 模块是运行时加载,ES6模块是编译时输出接口

3. ES6输入的模块变量,只是一个符号链接,所以这个变量是只读的,对它进行重新赋值就会报错

Q: 模块加载AMD,CMD,CommonJS Modules/2.0 规范

1. 这些规范的目的都是为了 JavaScript 的模块化开发,特别是在浏览器端的

2. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行

3. CMD 推崇依赖就近,AMD 推崇依赖前置

Q: Node 事件循环,js 事件循环差异

1. Node.js 的事件循环分为6个阶段

2. 浏览器和Node 环境下,microtask 任务队列的执行时机不同

3. Node.js中,microtask 在事件循环的各个阶段之间执行

4. 浏览器端,microtask 在事件循环的 macrotask 执行完之后执行

5. 递归的调用process.nextTick()会导致I/O starving,官方推荐使用setImmediate()

Q: 浅拷贝和深拷贝的问题

1. 深拷贝和浅拷贝是只针对Object和Array这样的复杂类型的

2. 也就是说a和b指向了同一块内存,所以修改其中任意的值,另一个值都会随之变化,这就是浅拷贝

3. 浅拷贝, ”Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象

4. 深拷贝,JSON.parse()和JSON.stringify()给了我们一个基本的解决办法。但是函数不能被正确处理

开放性问题

开放性问题主要是考察候选人业务积累,是否有自己的思考,思考问题的方式,没有标准答案。不过有些问题挺刁钻的,哈哈哈哈,比如:"  你见过的最好的代码是什么? ",懵逼脸,总之提前准备下没错。

1. 先自我介绍一下,说一下项目的技术栈,以及项目中遇到的一些问题

2. 从整体中,看你对项目的认识,框架的认识和自己思考

3. 项目中有没有遇到什么难点,怎么解决

4. 如果你在创业公司你怎么从0开始做(选择什么框架,选择什么构建工具)

5. 说一下你项目中用到的技术栈,以及觉得得意和出色的点,以及让你头疼的点,怎么解决的

6. 一个业务场景,面对产品不断迭代,以及需求的变动该怎么应对,具体技术方案实现

7. 你的学习来源是什么

8. 你觉得哪个框架比较好,好在哪里

9. 你觉得最难得技术难点是什么

10. 你见过的最好的代码是什么

原文地址:https://www.cnblogs.com/Cuimh/p/11473986.html

时间: 2024-10-10 07:27:25

关于前端大厂面试经验分享的相关文章

我的Android移动端面试经验分享,大厂面试题总结:阿里腾讯美团

前言 不得不说,前两年的移动开发确实很火,可以说随便能鼓捣出来点东西都很容易找到工作.而现在明显降温了,对人才的要求也越来越苛刻,所以跟前两年比需求确实少了很多.但是安卓不仅仅局限于手机,智能家居车载系统电视机顶盒智能机器人的触摸板设置大部分都是搭载的安卓系统,所以市场的需求还是很大的. 本文希望达到的目的是为职场新人和毕业生提供一个面试经验的分享,使读者在找工作时有一个参考少走弯路,通过本文的阅读将收获到: 面试前的准备,简历编写规范和重点: 面试经历,大厂和小厂的区别和考察点: 安卓面试常问

中高级前端大厂面试秘籍,为你保驾护航金三银四,直通大厂(上)

引言 当下,正面临着近几年来的最严重的互联网寒冬,听得最多的一句话便是:相见于江湖~??.缩减HC.裁员不绝于耳,大家都是人心惶惶,年前如此,年后想必肯定又是一场更为惨烈的江湖厮杀.但博主始终相信,寒冬之中,人才更是尤为珍贵.只要有过硬的操作和装备,在逆风局下,同样也能来一波收割翻盘. 博主也是年前经历了一番厮杀,最终拿到多家大厂的 offer.在闭关修炼的过程中,自己整理出了一套面试秘籍供自己反复研究,后来给了多位有需要的兄台,均表示相当靠谱,理应在这寒冬之中回报于社会.于是决定花点精力整理成

前端技术学习经验分享(第一天---布置学习环境)

我相信有很多朋友因为学习而烦恼,有一定计算机语言基础的同学还好,通过各种渠道,比如视频,书籍,笔记的方法可以自学,提升自己的能力,但如果是零基础的同学想要入行,自学就变的难如登天了,大学毕业以后因为各种私事,公事,杂七杂八的事总能扰的我们心神不宁,没办法平心静气的学习一门与自己毫不相关的一门新知识.最后不得已而参加了培训机构... 下面我会总结培训的优势与劣势,并于大家分享我自学的经历. 先说上培训的几点好处吧: 第一.培训可以认识10--50个同学,相熟的成为朋友的可以有3--5个,这是我们很

两年Java程序员面试经验分享,从简历制作到面试总结!

前言 工作两年左右,实习一年左右,正式工作一年左右,其实挺尴尬的,高不成低不就.因此在面试许多公司,找到了目前最适合自己的公司之后.于是做一个关于面试的总结.希望能够给那些依旧在找工作的同学提供帮助. 面试 其实关于面试总结这块,我也看过不少文章,但是大部分都是关于面试题以及面试中的问题所谈.但是对于一个不擅长找工作的同学来说,其实在简历制作这一块很重要.因为简历没写好的话,连面试邀请都没,何谈面试呢.所以我准备谈谈我对简历制作这块的一些见解.如有不妥,欢迎指出! 简历制作 在写简历这方面,需要

金九银十收获阿里腾讯实习offer,学习、面试经验分享

今天分享一位大学生实习的面经,再结合我自己的经验总结一些看法和学习方法,希望能对大家有帮助. 先说一下自己的情况,本人今年大四,双非一本学校,计算机相关专业,从大一开始加入学院创业团队的 Android 开发组.? 去年过年后不久开始投简历,前后投了腾讯.阿里.美团.CVTE 这几家公司,拿到了腾讯.阿里和 CVTE 的实习offer,最终选择了腾讯,也算是给自己的第一次找工作之旅画上了圆满的句号.? 今年3月从实习转为正式员工. 这篇文章是去年金九银十之后的总结,主要是分享我自己针对这次面试旺

第11章 面试经验分享

如何自保 竞争压力增加,如何提升个人竞争力? 居安思危,持续学习,多读经典? 重视基础,淡化语言 面试之前如何充分准备? 复习基础(算法数据结构+数据库+网络) 查漏补缺 网上搜索意向公司面经,了解对方公司喜欢问什么? 重基础,没事多刷题,越来越重视算法数据结构 简历投递 广泛晒网,重点捕鱼 多投递和面试一些公司,争取多拿offer 从易到难,可以先从小公司开始面试 了解对方所用到的技术和业务,了解面试重点 面试环节 坦然面对,友好交流 一般技术可能有三面(基础+项目) 很多公司基本都要手写代码

面试经验分享(面试要主动)

假如有100个知识点, 你会90个,你不主动说,面试官问了 你不会的10个里的7个,其他的3个是你会的90个里的 那么你的得分是30分. 假如你会30个,你主动说了你会的7个,面试官问了你3个,其中有2个是你不会的那70个里的,那么你的得分是80分. 所以面试的时候要主动说出你擅长的领域,你会的东西. 总结: 面试要主动 假如你是一个菜鸟,把面试官也拉到菜鸟的高度,用你丰富的经历去征服他...你面试就过了. 原文地址:https://www.cnblogs.com/kongsq/p/975182

浅谈Java后端开发工程师腾讯面试经历分享总结

最近一段时间考虑到换工作,打算整理一下网络上曾经面试者分享的的面试经历并结合自己以往的面试经历和经验,帮助大家获取到互联网大厂的入职通知书,也就是入职offer. 本文整理网络面试者和本人的面试经历和面试经验分享给大家,主要出于个人层面上做个自我总结.沉淀一下面试经历以及让一些有能力的面试者了解一些互联网大厂企业面试过程,如果有人向往这些大厂企业,告知面试者需要做哪些准备从而能够如愿以偿的获取到互联网大厂企业的入职通知书. 面试做好提前准备 一谈到面试这个问题,很多人都会心里一紧,尤其是一些生性

关于如何自学web前端以及一些面试的经验分享

自学怎么学好前端开发? 一千个人来回答这个问题有一千种答案,每个人的自学能力各不相同,适合我的方法不一定适合你.但是大家可以相互借鉴,苹果交换过后还是一个苹果,思想交换过后就是两种思想了.我这里把我的方法分享出来,多少也有一些借鉴的经验或者让你少走一些弯路. 有的人喜欢安静的一个人看书专研,有的人喜欢看网络视频教程,而我更偏向于后者,当然你时间充足的话看书加看视频效果更好.学习的主线视频是我花10块钱在某宝上淘的,这套视频是传智播客2015.12-2016.3期间实体班的全程录像,很新,最主要的