百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

学员分享:回答字节跳动前端面试8道题,就像跟坐过山车样刺激

zhezhongyun 2025-02-07 19:52 24 浏览

前言

能有大厂面试的机会,绝对要去珍惜,因为他真的可以帮你找出你太多的不足,准确命中你的弱点!

还有,一定要善于总结经验,总结面试题,为后面的面试储蓄能量。

我的面试结果

哎!长叹一口气…

我跪在了一面!但是,这次的面试,绝对是我面试生涯中,最最觉得特别值得的一次,也是让我备受打击的一次!他成功的让我跪在大厂的面前,又让我重新的去认识自己,不是会写个页面就是前端开发工程师,不是会调用一次ajax,就是前端开发工程师,不是会写个css就是前端开发工程师!

自我介绍

关于自我介绍方面,可以说我真的没什么可以多介绍的。相信很多的前端开发的小伙伴都跟我有同样的感受吧!毕竟,在公司工作的大部分时间都交给了重复的需求上,别说你没有!除非你的工作真的不饱和!哈哈。。。但是呢,自我介绍真的不可以轻易的放过,因为他可能是你打开面试官兴趣的钥匙。如果你介绍的好,你可以一步步的引导面试官问一些你熟悉了解的知识,可以不被面试官牵着鼻子走!但是,我真的没有很优秀的可以说的出口的东西啊!这是真的硬伤,所以,还是奉劝各位小伙伴,在业余的生活中,还是要做一些自己感兴趣,算了!可能你也真的不感兴趣!一定要做一些你不了解的但是对前端又非常的重要的知识,尝试着去实现一下!例如,本人就不是很熟悉Node方面的知识,平时的开发中也不常用,如果你真的有特别出色的开源项目,一定要介绍出来,会引起面试官很大的兴趣!跑题了哈

字节面试题

第一道题:说一下你在项目中遇到的比较有挑战性的工作?

这是一道比较开放性的问题!完全靠面试者自己在平时的开发中自我总结!我觉得,面试官真正想要了解的,是你在开发中,遇到棘手问题,如何解决,还有就像是上面说到的,有没有做一些自己平时工作中可能没有使用,但是作为前端开发必须要掌握的知识。这个就因人而异了,多多总结,多多吸取教学,这都是以后进入大厂的铺路石。

第二道题:关于flex布局,如何实现垂直居中?

我相信,但凡有准备面试的小伙伴,都会在各个文章、博客中看到过,实现垂直居中的1001中办法,面试官想要考察的,绝不仅仅是你能说出flex的垂直居中,你需要掌握的是全部的flex布局的知识,因为,flex布局的出现,极大的减轻的开发页面的负担,简介、轻量化、语义化!你真的完全掌握了吗?还不去翻阮一峰的博客?

第三道题:关于浏览器,从URL输入,到页面的完全展现,都经历了什么?

这题,你也看过,但是你能完完整整的描述出来吗?我觉得,你应该再从脑子里面过一遍,不要留下任何的知识点,因为这里面能问到的知识,真的太多了!DNS解析,http请求,关于缓存,HTML树,页面渲染,回流、重绘。你都完全的掌握了吗?去翻博客吧!

第四道题:关于页面的加载,css的解析会影响js的执行吗?css加载会影响吗?

这题,如果你完整的读过Javascript高级程序设计,你一定知道关于async和deffer的区别!别说你这也不知道,如果你真的不知道,那就去翻吧!

第五道题:关于promise的执行顺序?

都知道,promise是异步执行,但是,你知道为什么promise能实现异步执行吗?then方法的参数的意义是什么?我一时的大脑一片空白,明明每天都在调用接口,使用promise。也每天都在使用then方法,那是,我就是说不出来!不要像我一样,因为我掌握的可能真的不彻底,所以很快就暴漏出来了,还没等问到你promise实现的原理呢!

第六道题:输入框输入,请求后台接口,第一个接口返回的信息可能比较慢,到第二次调用后信息已经返回了,前一条数据才出来,如何避免页面被第一个接口返回的信息覆盖?

我当时的回答是,给后端发送字段,然后判断返回的字段的先后顺序,比如A接口参数传1,再次调用时传2…

面试官不太满意,因为如果页面大量的get请求,很不方便,还要传参!如何解决呢?我当时没有好的方法,你有吗?

(面试官:可以在axiox response拦截,比对我我们发送的参数,进行比较,然后筛选出后输入值返回的数据)

第七道题:多维输入,如何判断数组的最深层有多少层?例如:[1,3,3[4,6,7,[5,6,7,43,[23,4]]]],返回4!

第一种:递归,但是,是不是杀鸡用牛刀?

第二种:数组转化为字符串,然后查处多少个‘[’活着‘]’是不是更方便呢?

第八道题:http和https的区别是什么?

都知道https更安全,他是如何实现的比http更安全的呢?在哪里用到了对称加密?哪里用到了非对称加密?

面试总结

面试挂掉如何调整心态

面试挂掉有这么几种可能:

1、对方发现你不适合他们:比如对方想招一个带团队的,而你是做技术。遇到这种情况不要沮丧,这不是你的问题。我因为这个拒面的占50%(包括对方拒绝我,和我拒面对方)

2、Head Count 有限,他们选择了其他的人:遇到这种情况也不要沮丧,毕竟人外有人,而他们 Head Count 可能只有一个。如果你面试前能够和HR或工程师直接接触,也可以问问他们有多少 Head Count

3、真的是凭实力挂掉了:这个确实可以稍晚沮丧下,然后痛定思痛,反思反思自己是不是哪里需要查漏补缺,或是表达方法哪里有什么问题。

面试题归类

我结束面试后,把面试题分几大类总结出来整理成一份PDF文档,方便查找和学习,每道题下面都有详细的解析,需要前端字节跳动真题解析的小伙伴们直接点击这里领取

HTML

HTML5 有哪些新特性?

Doctype作?? 严格模式与混杂模式如何区分?它们有何意义?

如何实现浏览器内多个标签页之间的通信?

?内元素有哪些?块级元素有哪些? 空(void)元素有那些??内元 素和块级元素有什么区别?

简述?下src与href的区别?

CSS

  1. 请你讲一讲 CSS 的权重和优先级
  2. 介绍 Flex 布局,flex 是什么属性的缩写:
  3. CSS 怎么画一个大小为父元素宽度一半的正方形?
  4. CSS实现自适应正方形、等宽高比矩形
  5. 实现两栏布局的方式
  6. 实现三列布局的方式
  7. CSS 动画有哪些?

JavaScript 基础

问:0.1 + 0.2 === 0.3 嘛?为什么?

JS 数据类型

JS 整数是怎么表示的?

Number() 的存储空间是多大?如果后台发送了一个超过最大自己的数字怎么办

写代码:实现函数能够深度克隆基本类型

事件流

事件是如何实现的?

new 一个函数发生了什么

Vue框架

active-class是哪个组件的属性?嵌套路由怎么定义?

怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

vue-router有哪几种导航钩子?

scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?

mint-ui是什么?怎么使用?说出至少三个组件使用方法?

v-model是什么?怎么使用? vue中标签怎么绑定事件?

axios是什么?怎么使用?描述使用它实现登录功能的流程?

axios+tp5进阶中,调用axios.post(‘api/user’)是进行的什么操作?axios.put(‘api/user/8′)呢?

什么是RESTful API?怎么使用?

计算机网络基础

  1. HTTP 缓存
  2. HTTP 常用的状态码及使用场景?
  3. 你知道 302 状态码是什么嘛?你平时浏览网页的过程中遇到过哪些 302 的场景?
  4. HTTP 常用的请求方式,区别和用途?
  5. 你对计算机网络的认识怎么样
  6. 三次握手和四次挥手

算法

一、链表

二、字符串

三、数组问题

四、二叉树

五、排序算法

六、二分查找

七、动态规划

相关推荐

关于CSS伪类&伪元素的一些知识——CSS学习之路

最近两天接触到了CSS伪类和伪元素之间的关系,伪类和伪元素在css代码中使用:做标识符,同来识别元素。我倒是理解,可是为什么时常见到一会用一个冒号,一会用两个,然后就感觉很迷糊了,于是就有了这一篇文章...

CSS中before 和after的用法

CSS有两个说不上常用的伪类:before和:after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。一基本语法在了解进阶的应用之前,先来了解一下语法规则。平常仅仅需要将这...

CSS 样式总翻车?5 个实战技巧让布局效率暴增 200%!

前端工程师们,是不是经常遇到这种崩溃瞬间?精心设计的CSS样式,一到不同浏览器就“变形走样”,或是响应式布局怎么调都达不到预期效果,改来改去不仅浪费时间,还容易产生一堆冗余代码。别慌!今天带来...

微信小程序入门教程之二:页面样式

这个系列的上一篇教程,教大家写了一个最简单的Helloworld微信小程序。但是,那只是一个裸页面,并不好看。今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的页...

网格不迷路:用 CSS 网格生成器打造完美布局

前言你是否曾因写错grid-template-areas而捶键盘?是否在面对千层嵌套的复杂布局时,瞬间怀疑人生,甚至思考要不要转行去卖奶茶?别慌,CSS网格生成器闪亮登场,像拼乐高一样,帮你轻松...

MFC转QT:Qt高级特性 - 样式表

Qt样式表概述Qt样式表(QtStyleSheets)是基于CSS的样式系统,允许开发者以类似于Web前端的方式定制Qt应用程序的外观。这一特性极大地简化了Qt应用的界面定制,提供了比MFC更强大...

什么是CSS?

CSS是一种用来描述网页样式的语言,它可以控制HTML元素的颜色、大小、位置、布局等外观效果。CSS的全称是层叠样式表(CascadingStyleSheets),它的基本语法由选择器和...

从零开始学习网站CSS布局

CSS是前端开发中的重要技术之一,而CSS布局则是CSS技术中最基础的一部分。学习CSS布局是Web开发者的必修课,也是掌握CSS技能的基石。CSS布局指的是如何使用CSS定位和排版HTML元素。CS...

CSS3 渐变类型及其语法

线性渐变:CSS3可以让背景产生渐变效果,渐变属性有两种,即linear-gradient(线性渐变)和radial-gradient(圆形渐变),语法如下background:linear-gra...

五大顶级CSS性能优化工具,值得程序员一试!

为什么Web页面的加载速度如此重要?在这个信息化的时代,如果一个网站的加载时间过长,大部分用户会极其不耐烦地选择“关掉”!这让辛辛苦苦熬夜敲代码的程序员们情何以堪,不管网站功能如何强大,用户根本都没来...

get css中的clamp()函数,好用到起飞

CSS中有大量令人惊叹的属性和特性,但似乎没有人谈论的是clamp函数。这个函数让我们可以对任何CSS属性执行min-width,max-width,和之类的操作。CSSclamp语法cl...

Google Chrome终于支持CSS Variables了

这篇文章要报道的并不是“新闻”,因为W3C早已开始着手CSS变量(又称‘自定义属性’)方面的工作。而作为CSS4非正式标准的一部分,Mozilla早在Firefox版本号还是29的时候就已经支持它了。...

CSS3 过渡与动画

在现代网页设计中,平滑的过渡和生动的动画效果已成为提升用户体验不可或缺的元素。CSS3为我们提供了强大的transition和animation属性,让开发者能够轻松实现各种视觉效果。本文将...

css基础篇11--表格样式

目标表格边框合并表格边框的间距设置表格标题位置的设置表格可以说是网页必备的元素之一,但是原生的表格样式都是很丑,列如表格加入边框的默认情况下,单元格与单元格之间有一定的空隙;设置单元格边框间距等等,都...

WebDriver-工具辅助生成XPath语法和CSS语法

1.FireBug插件1.1生成XPath语法打开Firefox浏览器FireBug插件,单击插件左上角的鼠标箭头,再单击页面上需要定位的元素,在元素行上右击弹出快捷菜单,选择“复制XPath”,将会...