字节提前批《高频汇总之前端水真的不深》

宝剑锋从磨砺出，梅花香自苦寒来,大家好，我是小码哥

今天来整理了一篇文章《字节跳动面试总汇》分为三篇这是第一篇《前端篇》，测试篇后天推送

关注小码哥获取更多内推或者精彩内容希望大家面试多多希望看完对大家面试有所收获！

字节的前端一直是大热之选，不少人对字节跳动技术岗的职级体系和技术要求还不太了解，想去面试心里没底，下面带大家简单了解一下。

此外，还有由字节面试官整理的最新前端面试题（答案正在整理到时候通过一篇文章向大家推送还望大家多多订阅小码哥），新鲜出炉！希望大家了解并掌握这些知识点，争取通过每一轮面试！

字节跳动的职级研发序列一共10级

不同序列间月薪base差异较大，技术base整体偏高。比如2-1月薪会在20k+，2-2的package

会在60w-100w左右（算上期权，大概会占30%左右）。T2-2 级别的薪资约40k，500股票/每年，字节跳动的现金薪酬要比BAT 们高出25%-40%。

字节前端工程师职位要求

1、熟练掌握各种前端技术，熟练掌握JavaScript，CSS，HTML，DOM、绘图、动画、协议、安全、网络、性能优化等前端技术；

2、深入了解 JavaScript 语言，对主流前端框架（ React Vue Angular等）至少一种有深入应用并深入理解其设计原理；

3、较好的产品意识，对用户需求、体验、交互、操作流程等有一定追求，愿意将产品效果做为工作最重要的驱动因素；

4、积极乐观，责任心强，工作认真细致，具备良好的服务意识，具有良好的团队沟通与协作能力。

绩效考核与晋升

字节跳动内部的绩效考核一共有八级，从低到高为F、I、M-、M、M+、E、E+、O，并会进行强制分布，对应年终奖和月薪百分比的涨薪。M就有涨薪机会。晋升面试也是主要还是看绩效考核。

每年两次考核，一般在三月和九月。考核方式借鉴了google的OKR+360模式：头条是双月OKR，可以在lark 上看到所有人的OKR，知道大家在做什么，你对齐的大目标是什么，支持对齐你的人在做什么。360评估：每个人都可以评估别人同样也会被别人评估，无论是领导还是普通员工。

福利

三餐免费还有下午茶。

如果住在公司附近还有房补, 北京1500杭州800。

前端篇需要掌握的知识

面试官总结：字节前端面试题集

HTML

HTML5新特性，语义化
浏览器的标准模式和怪异模式
xhtml和html的区别
使用data-的好处
meta标签
canvas
HTML废弃的标签
IE6 bug，和一些定位写法
css js放置位置和原因
什么是渐进式渲染
html模板语言
meta viewport原理

CSS

盒模型，box-sizing
CSS3新特性，伪类，伪元素，锚伪类
CSS实现隐藏页面的方式
如何实现水平居中和垂直居中。
说说position，display
请解释*{box-sizing:border-box;}的作用，并说明使用它的好处
浮动元素引起的问题和解决办法？绝对定位和相对定位，元素浮动后的display值
link和@import引入css的区别
解释一下css3的flexbox，以及适用场景
inline和inline-block的区别
哪些是块级元素那些是行级元素，各有什么特点
grid布局
table布局的作用
实现两栏布局有哪些方法？
css dpi
你知道attribute和property的区别么
css布局问题？css实现三列布局怎么做？如果中间是自适应又怎么做？
流式布局如何实现，响应式布局如何实现
移动端布局方案
实现三栏布局（圣杯布局，双飞翼布局，flex布局）
清除浮动的原理
overflow:hidden有什么缺点？
padding百分比是相对于父级宽度还是自身的宽度
css3动画，transition和animation的区别，animation的属性，加速度，重力的模拟实现
CSS 3 如何实现旋转图片（transform: rotate）
sass less
对移动端开发了解多少？（响应式设计、Zepto；@media、viewport、JavaScript 正则表达式判断平台。）
什么是bfc，如何创建bfc？解决什么问题？
CSS中的长度单位（px,pt,rem,em,ex,vw,vh,vh,vmin,vmax）
CSS 选择器的优先级是怎样的？
雪碧图
svg
媒体查询的原理是什么？
CSS 的加载是异步的吗？表现在什么地方？
常遇到的浏览器兼容性问题有哪些？常用的hack的技巧
外边距合并
解释一下"::before"和":after"中的双冒号和单冒号的区别

JS

js的基本类型有哪些？引用类型有哪些？null和undefined的区别。
如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）
Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？
JS常见的dom操作api
解释一下事件冒泡和事件捕获
事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？
对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？
this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？
call，apply，bind
显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链
创建对象的多种方式
实现继承的多种方式和优缺点
new 一个对象具体做了什么
手写Ajax，XMLHttpRequest
变量提升
举例说明一个匿名函数的典型用例
指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？
attribute和property的区别
document load和document DOMContentLoaded两个事件的区别
=== 和 == , [] === [], undefined === undefined,[] == [], undefined == undefined
typeof能够得到哪些值
什么是"use strict",好处和坏处
函数的作用域是什么？js 的作用域有几种？
JS如何实现重载和多态
常用的数组api，字符串api
原生事件绑定（跨浏览器），dom0和dom2的区别？
给定一个元素获取它相对于视图窗口的坐标
如何实现图片滚动懒加载
js 的字符串类型有哪些方法？正则表达式的函数怎么使用？
深拷贝
编写一个通用的事件监听函数
web端cookie的设置和获取
setTimeout和promise的执行顺序
JavaScript 的事件流模型都有什么？
navigator对象，location和history
js的垃圾回收机制
内存泄漏的原因和场景
DOM事件的绑定的几种方式
DOM事件中target和currentTarget的区别
typeof 和 instanceof 区别，instanceof原理
js动画和css3动画比较
JavaScript 倒计时（setTimeout）
js处理异常
js的设计模式知道那些
轮播图的实现，以及轮播图组件开***播10000张图片过程
websocket的工作原理和机制。
手指点击可以触控的屏幕时，是什么事件？
什么是函数柯里化？以及说一下JS的API有哪些应用到了函数柯里化的实现？(函数柯里化一些了解，以及在* 函数式编程的应用，最后说了一下JS中bind函数和数组的reduce方法用到了函数柯里化。)
JS代码调试