-
2021-12-30 14:49:53
腾讯云招聘一共四面，第一面是你以后的同事面试，主要考察基础知识，第二面是以后的直属领导，会考察基础原理，以及和职位的匹配度，三面是主管，考察项目等整体，四面为hr面试。
一面：
一面都比较基础，涉及js，vue和网络安全。
1、自我介绍（单纯的自我介绍，没有根据自我介绍的内容再去问问题）
2、算法题：
括号对称，具体题目和leecode上的一道提比较类似，但不太一样，（题目忘记了这是leecode上的题目）
题目描述：给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串，判断字符串是否有效。
3、算法题：
leecode原题-》根据每日气温列表，请重新生成一个列表，对应位置的输出是需要再等待多久温度才会升高超过该日的天数。如果之后都不会升高，请在该位置用 0 来代替。
4、promise，promise.all与promise.race的作用和区别
5、es6新特性
6、网络攻击的几种方式XSS，CRFS等，如何预防
7、做过哪些性能优化：
8、如何判断数据类型：typeof，instanceof，toString
9、深拷贝
10、http缓存
11、跨域的几种方式及原理
总体来说，一面都是比较基础的八股文，我看很多面经也有涉及到tcp三次握手，四次挥手等等，八股文准备好吧同志们。
二面：
1、自我介绍
2、vue数据绑定原理
3、vue组件如何实现v-model
4、vue生命周期
5、路由钩子函数
6、偶发页面显示不正常，如何处理
7、页面样式不正确，如何处理
8、有没有做过性能监控
9、了解docer嘛？
10、快速排序和堆排序的时间复杂度
11、怎么去检测现场用户的页面打开时间
更多相关内容 -
前端面经-实习版.docx
2020-05-01 12:44:43已拿大厂offer，结合自己面试经历，整理耗时一个月的超详细前端面经，希望大家能少走弯路，都能拿到心仪的offer。 -
前端面经-校招版本.docx
2021-01-28 11:53:50已拿大厂offer，结合自己面试经历，整理耗时一个月的超详细前端面经，希望大家能少走弯路，都能拿到心仪的offer。这是对之前的更新。更贴合校招 -
2022前端面经整理
2022-03-21 10:27:06本篇文章前端面经整理出自牛客网。 JavaScript 当我们使用 push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。 let arr = new Array(10);//注意，这里代表数组长度为 10 arr.push(1); arr.slice...展开全文面经整理
前言
本篇文章是前端面经题目合集，大部分出自牛客网，答案由我自己理解总结所得。如有错误，请各位大佬指正，避免误导更多的人！！！
还待更新！！！
CSS
CSS优先级
从高到低依次是：
!important>行内样式>ID选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认样式JavaScript
new Array(10)
当我们通过单个数字参数的构造器创建数组时，数组的长度为传入的参数，里面的元素为undefined。所以使用push在数组末尾插入元素时，数组的长度会从10变成11。
let arr = new Array(10);//注意，这里代表数组长度为 10 arr.push(1); arr.slice(0,5);//slice 方法返回一个新数组，不会改变原数组 console.log(arr.length);//11节流实现
定义：节流指的是n秒内只运行一次，若n秒内重复触发，则只有一次生效。功能：- 为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
- 节约资源
// 定时器 function ttrothle(func,delay){ let timer=null; return function(){ if(!timer){ timer=setTimeout(()=>{ timer=null; func.apply(this,arguments) },delay) } } } // 时间差 function ttrothle(func,delay){ let prev=0; return function(){ let now= Date.now(); if(now-prev>=delay){ func.apply(this,arguments); prev=now; } } }演示例子：
<body> <div> 我是节流处理后的：<input type="text"> </div> <script> function ajax(value){ console.log('value:'+value+',time:'+Date.now()); } // function ttrothle(func,delay){ // let timer=null; // return function(){ // if(!timer){ // timer=setTimeout(()=>{ // timer=null; // func.apply(this,arguments) // },delay) // } // } // } function ttrothle(func,delay){ let prev=0; return function(){ let now= Date.now(); if(now-prev>=delay){ func.apply(this,arguments); prev=now; } } } var input = document.querySelector('input') let ttrothleHandle=ttrothle(ajax,3000) input.addEventListener('keyup',function(e){ ttrothleHandle(e.target.value) }) </script> </body>es6新增数据类型
BigInt是一种内置对象，它提供了一种方法来表示大于2^53 - 1的整数。可以用在一个整数字面量后面加 n 的方式定义一个 BigInt ，如：10n，或者调用函数 BigInt()（但不包含 new 运算符）并传递一个整数值或字符串值。
//const alsoHuge = BigInt(9007199254740991); // ↪ 9007199254740991n var bg = 10n console.log(typeof bg); //bigint var s=Symbol('joney') console.log(typeof s); //symboltransition 如何检测动画结束
transitionend事件会在 CSS transition 结束后触发. 当transition完成前移除transition时，比如移除css的transition-property 属性，事件将不会被触发.如在transition完成前设置 display 为"none"，事件同样不会被触发。function showMessage() { console.log('Transition 已完成'); } var element = document.getElementById("slidingMenu"); element.addEventListener("transitionend", showMessage, false);讲一下 box-sizing 的值和对应的作用
content-box是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。border-box告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
水平垂直居中
（1）水平居中：
text-align:center;。垂直居中：line-height:XXpx;line-height设置为父盒子的高度。（2）使用flex实现
display: flex;设置 display 属性的值为 flex 将其定义为弹性容器align-items: center;定义项目在交叉轴（纵轴）上如何对齐，垂直对齐居中justify-content: center;定义了项目在主轴上的对齐方式，水平对齐居中
图片懒加载
提高页面加载渲染速度，进而提高用户体验，减轻服务器的压力。
<script> var num = document.getElementsByTagName('img').length; var img = document.getElementsByTagName("img"); var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历 lazyload(); //页面载入完毕加载可是区域内的图片 window.onscroll = lazyload; function lazyload() { //监听页面滚动事件 var seeHeight = document.documentElement.clientHeight; //可见区域高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度 for (var i = n; i < num; i++) { if (img[i].offsetTop < seeHeight + scrollTop) { if (img[i].getAttribute("src") == "default.jpg") { img[i].src = img[i].getAttribute("data-src"); } n = i + 1; } } } </script>图片加载抖动
块级元素（如div,p）的padding设置为百分比的时候，是按照容器的宽度来定的
.wrapper{ width:100%; height:0; padding-top:24.25%; <--!在这里我们也可以使用padding-bottom属性进行设置--> }promise.then()链式写法
then方法返回的是一个新的Promise实例（不是原来哪个Promise实例！！是一个新的）。 可以使用return传递参数，默认是undefined。
new Promise((resolve, reject) => { resolve(123); }).then(data => { console.log(data); // 123 }).then(data => { console.log(data); // undefined })作用域
let a=10; var b=20; function fn(){ console.log('a ',a); // 10 console.log('this.a ',this.a); // undefined console.log('this.b ',this.b); // 20 console.log('b ',b); // 20 } fn();let m = 10;时输出NaN NaN 6。var m = 10;时输出11 11 6
let m = 10; function fn() { return this.m + 1; } var obj = { m: 5, test1: function() { return fn(); } }; obj.test2 = fn; console.log(obj.test1(), fn(), obj.test2())var obj = { m: 5, test1: function() { console.log(this.m); // 5 return function (){ console.log(this.m); //undefined } } }; obj.test1()();url 参数提取
decodeURIComponent()方法用于解码由encodeURIComponent方法或者其它类似方法编码的部分统一资源标识符（URI）。decodeURIComponent("JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"); // "JavaScript_шеллы"decodeURI()函数能解码由encodeURI创建或其它流程得到的统一资源标识符（URI）。const uri = 'https://mozilla.org/?x=шеллы'; const encoded = encodeURI(uri); console.log(encoded); // expected output: "https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B" try { console.log(decodeURI(encoded)); // expected output: "https://mozilla.org/?x=шеллы" } catch (e) { // catches a malformed URI console.error(e); }
-
web前端面经总结（含答案）.pdf
2021-03-22 14:54:55整理了一个半月，包含网络，HTML,CSS,JS，少量vue等上百个高频面试题目及答案，涵盖一面面试题95%以上！ -
web前端面经
2017-11-07 21:20:03大型的互联网公司的面试题，并且对其进行了总结，附录的还有答案，很实用。 -
字节跳动前端面经
2021-08-14 22:45:29我入职字节大概一个多月（目前准大四 实习生），现在写面经不仅仅是牛客网（YYSD，真tm灵）的还愿，还是就是想给大家推荐推荐我们部门------技术中台。可能大家对技术中台不太了解，但是大家肯定听说过掘金吧，我们...展开全文面试经历
我入职字节大概一个多月（目前准大四 实习生），现在写面经不仅仅是牛客网（YYSD，真tm灵）的还愿，还是就是想给大家推荐推荐我们部门------技术中台。可能大家对技术中台不太了解，但是大家肯定听说过掘金吧，我们组主要负责ByteTech（字节内部的技术社区）和掘金。欢迎大家投我们部门，可以直接投给我的邮箱huyong.cuger@bytedance.com，我都会看的，一天以内能给你回消息的，当然不局限与前端，其他端也可以投递，文章最后会给出我的微信以及部门的介绍，也欢迎大家加我的微信。
面试流程
- 6.10号左右，hr打电话给我，问我愿不愿意面试，我当时还觉得奇怪，因为我今年春招还没有面试过，估计可能是去年投过字节，但是三面挂了。大家不要害怕投大厂，我去年也是先投的简历，后去学的前端，虽然最后三面挂了，但也是一个失败教育，要敢于去投啊！还要补充一点我面试的时候只会Vue，后来公司学的React。
- 6.18号 14：00 第一次面试，第一面是一个同事面，后来我也见到了那个憨憨的老大哥，主要负责掘金，很厉害的老哥，但是问的问题很简单。我大约回忆一下比较重要的点吧，像八股文我就不说了，因为真的记得不太清楚。首先是自我介绍，自我介绍基本按照自己简历上面的来，要对自己简历吃透（简历的项目描述尽量按照star原则，可以加我微信我发一下我的项目描述），建议自我介绍写一个稿子，反正我自己介绍的时候比较自信，所以面试官对我影响不错。我面试的时候有一个算法题，题目：给一个数组，数组的数的范围大约1-100，将其排序，要求时间负责度O(n)。我算法不太行，没有做出来，但是面试官给了我第二次机会，实现lodash库的get方法。没用过这个库，但是老哥给了一些提醒，写了一个简化版，然后面试就结束了。面试官让我等等说，等下有二面面试官，结果面试官刚进来就退出了，hr打电话我约第二天下午。
- 6.19号 14:00 第二次面试，第二次面试的面试官我在公司也没见过，感觉年纪有点大，头有点秃。上来还是自我介绍，然后说我看了你前面的面试都是问的基础（去年的面试记录也能看到），这次问你一些业务题。我还是说说我觉得重要的，首先是算法题，实现浮点数的精确运算，这个我在提示的情况下做了出来，难受的是需要在牛客网跑出结果，调试了很久。还有一个业务题，实现一个mobile的跑步灯，我大概讲清楚了思路，大家可以去看看coderwhy的vue项目，那个最后项目的跑马灯就和我这个的要求差不多。面试完过了不久，就收到三面的通知。
- 6.22号 14:00 第三次面试，第三次面试是一个leader，面试前hr提前10分钟给我打电话，说有一个会，让我等30分钟。这么说吧，感觉有点hr面的感觉，更加注重的是综合能力，包括沟通和学习的能力，对着我简历上面问了很多，所以说一定要吃透。最后就是算法题，讲一个url解析成一个js的对象，要求key有（协议，版本，域名，参数）很简单，不讲了，就是需要跑出来，牛客网不太适应。大约面完30分钟，收到了hr面的通知，我选择晚上8:30hr面。
- 6.22号 20:30 下载了飞书，打开了视频面试，一个非常年轻的漂亮的hr，简单的谈了半小时，这里就不列举了，可以加我微信问我，因为有些有点私密。大约面了半小时。大学九点的时候，给我发消息说我过了，欢迎我加入字节跳动，然后就是走流程了。
- 6.22-6.28 心急的等待，中间还催了一下hr，hr直接告诉我肯定是我的，让我别担心，哈哈哈，然后我就没有问过了。
笔记（字节总结的，凑合着看吧）
链接给下：
链接: https://pan.baidu.com/s/1mtFneH_Fcyh8gSCuSUyurw 提取码: 9d4v
–来自百度网盘超级会员v3的分享大家也可以多加加我微信（QQ也行），我非常愿意分享我的日常，以及讨论前端。还有工作中的事情，微信的二维码在部门介绍图片最后哦，我也希望能够内推大家，双赢的事情我还是非常乐意去做的。
我的内推码
https://job.toutiao.com/s/d1k1yFs
任何岗位都可以用哦，欢迎大家找我内推，投前端的，我还能让同事看看简历哦！部门介绍
-
前端面经 - 看这篇就够了（已拿offer）
2021-05-22 00:52:36前端工程师已经成为研发体系中的重要岗位之一。可是与此相对的是，极少大学的计算机专业愿意开设前端课程，大部分前端工程师的知识，也都是在实践和工作中不断学习的。纵然框架再多，版本更新再快，然而...展开全文前端工程师已经成为研发体系中的重要岗位之一。可是与此相对的是，极少大学的计算机专业愿意开设前端课程，大部分前端工程师的知识，也都是在实践和工作中不断学习的。
纵然框架再多，版本更新再快，然而很多基础的东西并没有变。作为学习者，越是想急着适应这些纷繁变幻的“新游戏规则”，就越需要一个扎实的基础和熟练的底子。所以扎实地掌握好比如像基础三件套、数据结构、网络协议、设计模式等等一些基础，才能让我们对于新知识游刃有余。
目前，Web 前端人才在就业市场中依旧供不应求，全国总缺口每年大约为近百万人。前端薪资的水涨船高，也让越来越多人想要进入这个行业。
那么，Web 前端的正确学习路线应该怎么走？系统完整的知识框架又该怎么建立？
为了帮助大家更好的了解前端，特别整理了阿里前端大佬整理的《前端工程师面试手册Ⅱ》电子稿文件
（含答案）
注：篇幅有限，资料已经整理到网盘了 , 可直接添加助理微信，免费获取。
所有资料扫码免费领取
（网盘资源容易被和谐，建议需要的尽快领取）JavaScript
性能
Nginx
前端资料汇总
所有资料扫码免费领取
（网盘资源容易被和谐，建议需要的尽快领取）
-
最全前端面经（持续更新）
2021-05-25 17:00:55OSI的7层模型： ... ... 简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。...传输的类型由Content-Type加以标记。... 无连接：限制每次连接只处理一个请求。... -
字节跳动 前端 面经 实习-基础架构
2021-07-22 17:04:47面试时间：2021.7.21 一面 node的模块加载流程 commonjs和es6模块加载的区别 vue的nexttick函数的作用 底层如何实现的 问了一下项目的爬虫实现 说一下微信小程序的rpx，那计算出来0.5px就渲染0.5px吗 ... -
快手前端面经总结
2021-09-11 22:01:56js 出现次数 题目 答案 2 JS的基本数据类型 面试官：说说JavaScript中的数据类型？...大前端进阶-Vue-router原理 参考网站 快手前端一面面经 快手前端实习生一面（二面结束，期待hr面~许愿offer） 快手实习一面面经 -
shopee 前端面经（已入职）
2021-08-16 00:32:36点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群本人本科毕业 5 年，1 年后端 + 4 年前端。面试了一波 shopee，最后成功入职。我是在 5 月中旬的专场招聘面试的，不得... -
虾皮春招前端面经
2021-04-11 22:08:36虾皮春招前端面经 20210411 一面 视频 38分钟 进程、线程、进程间的通信方式 说说死锁 mysql的索引什么时候需要什么时候不需要 事务的特点 说说二叉搜索树，以及其应用场景 伪类和伪元素的区别 target 和 ... -
一份热乎乎的滴滴前端面经
2020-12-13 20:49:24关注若川视野，回复"pdf" 领取资料，回复"加群"，可加群长期交流学习滴滴前端实习面经滴滴是我投简历之后第二家面试的公司， 国庆节前两三天投的简历， 国... -
前端面经:新手前端的面经总结（已拿网易offer）
2019-10-09 07:00:00以下经验主要偏向技术岗，且更多地侧重于前端。 简历 分享两个简历模板： 超级简历 程序猿简历通用模板（请自学Markdown语法） 关于怎么写简历，知乎上有许多宝贵经验，我就强调以下几点： 实事求是，不怎么了解的... -
互联网大厂超全前端面经汇总
2021-10-13 17:01:56呕心沥血，经历了一年的校招，含泪总结出来的前端面经，涵盖一线二线互联网大厂 -
一年半经验的前端面经总结
2021-06-13 00:03:37代表面试频率出现过多次） JavaScript 基础 Css 以及优化 vue 或 react 框架相关 前端打包等工程化 浏览器及常见安全问题相关 跨平台技术 网络相关 少量算法 其中并没有 Html 相关的东西，一方面确实是相关的题目少... -
前端面经.zip
2022-03-17 16:02:44前端面经.zip -
leetcode算法题主函数如何写-frontend:前端面经
2021-06-30 05:12:06前端面经 JS JS 数据类型有哪些？ 基本数据类型：String、Number、Boolean、Null、Undefined、Symbol（ES6 新增，表示独一无二的值）； 引用类型：Object。 基本数据类型在内存中是栈存储，引用类型是堆存储，引用... -
2年经验，社招前端面经（已拿字节，PDD，蚂蚁 Offer）
2021-06-03 00:21:20应广大读者要求，今天开更一些大厂的面经和相关的面试干货，下面这份新鲜的字节跳动春招面经带给大家。普本/ 软件工程 / 2年经验2021春招 / base北京 / 字节前端开发工程师... -
亿联网络校招前端面经（2020.10.17）
2020-10-17 13:04:19亿联网络校招前端面经（2020.10.17） 面试平台 亿联会议 时长 大约20分钟 过程 这半年在家都做些什么 TypeScript与JavaScript的区别，有哪些好用的地方 VUE与React的区别，React好用 -
21届秋招思谋科技前端面经
2020-10-06 20:59:4421届秋招思谋科技前端面经 思谋科技是我最早投的一家公司，室友推荐的一家初创的做人工智能的公司。因为是最早面试的，当时没什么经验，特别的紧张，还好当时的hr给了我很多的反馈，在平时的交流中也给我了很多的... -
牛客网上的前端面经
2019-03-22 09:43:40前端算法部分还是很简单的，至今我也没问过什么比较难的算法问题。如果你算法不好就可以直接告诉面试官。不需要过多作假，面试官其实也很聪明的，如果你作弊很快就能发现的。 1、基本排序的方式 冒泡、快排、桶排、... -
阿里社招两年前端面经
2021-11-04 01:17:021.3.7 互联网公司和金融科技公司在开发流程上的区别 互联网公司：产品经理+交互设计+UI设计 -> 前端开发+后端开发 ->测试 金融科技公司：业务 -> 开发 -> 测试 1.4 工作方式：当需求方在开发周期内临时改动需求时... -
2018海康威视前端面经
2018-09-26 11:42:432018海康威视前端面经 面试地点主要在酒店，一般要等很久，所以不必太赶。技术面主要问题都很基础，面试官人很和善，和平时交谈没有什么区别。 面试问题： 1.主要问项目，谈谈负责的项目内容，遇到的问题和解决方案... -
网易有道秋招前端面经
2020-09-10 10:47:37（babel） 看你知道一些设计模式，写一个单例模式吧 讲一下JS的模块化规范（这里提到了es6的模块化、CMD、AMD、CommonJS） 前端优化知道哪些，大概讲一下 如果现在有一个很大的模块需要被项目中的多个页面引用，但都... -
前端面经300条：背完这些秋招不愁
2020-10-21 16:49:37经验之谈：秋招 = 项目要好 + 基础要牢（牢固 + 牢记，直接背诵就好了） + 深度（一些框架的原理，弄明白）+ 做题（算法题要会写吧，刷题） -
焦点科技社招前端面经（2022.02.24）
2022-02-25 10:25:28焦点科技社招前端面经
