Spring is always the best time to hunt for a job, so if you’re preparing for a job interview, this article will help you!

Byte’s front end has always been a hot choice, many people do not know much about the bytedance technical post’s rank system and technical requirements, want to go to the interview is not sure, here is a brief overview.

In addition, at the end of the article, there is a share: the latest front end questions (including answers) compiled by byte interviewers, fresh out! Hope you understand and master these knowledge points, and strive to pass every round of interview!

Bytedance has 10 ranks in development

The monthly salary base varies greatly among different sequences, and the overall technical base is relatively high. For example, the monthly salary of 2-1 will be 20K +, and the package of 2-2

It will be around 60W-100W (about 30% including options). At the T2-2 level, around 40K and 500 shares per year, ByteDance’s cash compensation is 25% to 40% higher than BAT’s.

Byte front-end engineer position requirements

1. Proficient in various front-end technologies, such as JavaScript, CSS, HTML, DOM, drawing, animation, protocol, security, network and performance optimization;

2. Have an in-depth knowledge of JavaScript language, at least one of the mainstream front-end frameworks (React \ Vue \ Angular, etc.) and have an in-depth understanding of their design principles; 3, good product awareness, have certain pursuit of user demand, experience, interaction, operation process, willing to take product effect as the most important driving factor of work; 4. Positive and optimistic, strong sense of responsibility, careful and meticulous work, good sense of service, good team communication and collaboration skills.

Performance appraisal and promotion

Bytedance’s internal performance reviews are divided into eight grades, from lowest to highest: F, I, M-, M, M+, E, E+, and O. The mandatory distribution is based on year-end bonus and percentage increase in monthly salary. M gets a raise. A promotion interview is also about performance reviews.

They are assessed twice a year, usually in March and September. The assessment is based on Google’s OKR+360 model: the headline is a bi-monthly OKR, and you can see everyone’s OKR from Lark, know what everyone’s doing, what big goals you’re aligned with, and what the people who are aligned with you are doing. 360 Evaluation: Everyone can evaluate others and be evaluated by others, whether they are leaders or employees.

welfare

Free meals and afternoon tea.

If you live near the company, there is room allowance, Beijing 1500 hangzhou 800.

Summary of the interviewer: the test set before the word

HTML

  • HTML5 new features, semantic
  • Standard mode and weird mode for browsers
  • Differences between XHTML and HTML
  • Benefits of using data-
  • Meta tags
  • canvas
  • HTML obsolete tags
  • IE6 bugs, and some location writing methods
  • CSS JS position and reason
  • What is progressive rendering
  • HTML Template language
  • Principle of meta viewport

CSS

  • Box model, box-sizing
  • CSS3 new features, pseudo class, pseudo element, anchor pseudo class
  • The CSS is used to hide pages
  • How to achieve horizontal centering and vertical centering.
  • So position, display
  • Please explain * {box – sizing: border – box; } and explain the benefits of using it
  • What are the problems and solutions caused by floating elements? Absolute and relative positioning, element float after the display value
  • Link and @import introduce the difference between CSS
  • Explain the CSS3 Flexbox, and how it works
  • Difference between inline and inline-block
  • What are the block-level elements and what are the row-level elements
  • The grid layout
  • The role of the table layout
  • What are the ways to achieve a two-column layout?
  • css dpi
  • You know the difference between an attribute and a property
  • CSS layout problems? How does CSS implement a three-column layout? What if it’s adaptive in the middle?
  • How is streaming layout implemented? How is responsive layout implemented
  • Mobile terminal layout scheme
  • Achieve a three column layout (Grail layout, Twin Wings layout, Flex layout)
  • Clear float principle
  • Overflow: What are the drawbacks of Hidden?
  • Is the padding percentage relative to the parent width or its own width
  • Css3 animation, the difference between Transition and animation, animation properties, acceleration, gravity simulation implementation
  • Transform: Rotate CSS 3
  • sass less
  • What do you know about mobile development? (Responsive design, Zepto; @media, ViewPort, JavaScript regular expression judgment platform.
  • What is a BFC and how do you create one? Solve what problem?
  • CSS unit of length (px, pt, rem, em, ex, vw, vh, vh, vmin, vmax)
  • What is the priority of CSS selectors?
  • Sprite figure
  • svg
  • What is the principle of media query?
  • Does CSS load asynchronously? In what place?
  • What are some common browser compatibility issues? Common hack techniques
  • Margin merge
  • Explain the difference between a double colon and a single colon in “::before” and “:after.

JS

  • What are the basic types of JS? What are the reference types? Null and undefined.
  • How do I determine if a variable is Array type? How do I determine if a variable is of type Number? (More than one)
  • Is Object a reference type? What is the difference between reference types and primitive types? Which one is in the heap and which one is on the stack?
  • JS common DOM manipulation API
  • Explain event bubbling and event capture
  • Event delegate (handwritten example), event bubbling and capturing, how to prevent bubbling? How are default events organized?
  • What about closures? When does a closure form? How to implement closures? What are the pros and cons of closures?
  • What are the usage scenarios for this? How is this different from this in C,Java? How do I change the value of this?
  • Call, apply, bind
  • Display prototype and implicit prototype, hand-drawn prototype chain, what is a prototype chain? Why have a prototype chain
  • Multiple ways to create objects
  • There are many ways to implement inheritance, as well as advantages and disadvantages
  • New what exactly does an object do
  • Handwritten Ajax, XMLHttpRequest
  • Variable ascension
  • Illustrate a typical use case for an anonymous function
  • Point out the difference between JS host objects and native objects, why extending JS built-in objects is not a good practice? What built-in objects and built-in functions are there?
  • Attribute and Property
  • Document Load and Document DOMContentLoaded
  • = = = and = = = = = [] [], undefined = = = undefined, [] = = [], undefined = = is undefined
  • What values typeof can get
  • What is “use strict”, the pros and cons
  • What is the scope of the function? How many scopes does JS have?
  • How does JS implement overloading and polymorphism
  • Common array API, string API
  • Native event binding (cross-browser), difference between DOM0 and Dom2?
  • Given an element gets its coordinates relative to the view window
  • How to realize lazy loading of picture scrolling
  • What are the methods for string types in JS? How to use regular expression functions?
  • Deep copy
  • Write a generic event listener function
  • Setting and obtaining cookies on the Web side
  • Execution order of setTimeout and promise
  • What is the JavaScript event flow model?
  • Navigator objects, Location, and History
  • Js garbage collection mechanism
  • Causes and scenarios of memory leaks
  • Several ways to bind DOM events
  • The difference between target and currentTarget in DOM events
  • Typeof is different from Instanceof, the Instanceof principle
  • Js animation and CSS3 animation comparison
  • JavaScript Countdown (setTimeout)
  • Js handling exceptions
  • The JS design pattern knows that
  • The realization of the rote map, as well as the rote map component development, rote 10000 picture process
  • The working principle and mechanism of WebSocket.
  • What happens when a finger clicks on a touchable screen?
  • What is a function Coriolization? What is the APPLICATION of THE JS API to the implementation of the function Coriolization? The bind function and array reduce method in JS are used in the function curryization.
  • JS code debugging

The framework

  • What frameworks have you used?
  • How is zepto related to jquery?
  • How to implement the selector in jquery source code, why the $object is designed as an array, what is the purpose of this design
  • How does jquery bind events, how many types and differences are there
  • What is MVVM, MVC, MVP
  • Two-way data binding between Vue and Angular
  • Vue, Communication between Angular components, and routing
  • React and Vue life cycles
  • React and Vue virtual DOM and diff algorithms
  • Vue observer, Watcher, compile
  • What businesses do React and Angular use? Performance versus MVC level
  • What is the difference between a jQuery object and a JS Element
  • How are jQuery objects implemented
  • Aside from the methods that jQuery encapsulates, what else is there to learn and use?
  • What does jQuery’s $(‘ XXX ‘) do
  • Describe how the Bootstrap grid system is implemented

Browser dependent

  • Cross-domain, why does JS restrict cross-domain
  • Front-end security: XSS, CSRF…
  • How does the browser load the page? What is the solution to script blocking? What is the difference between defer and Async?
  • Browser strong caching and negotiated caching
  • What are the browser’s global variables
  • How many resources a browser can download from a domain name at one time
  • Load on demand, judging criteria for elements of different pages
  • Use and distinction of Web storage, cookies, LocalStroge, etc
  • The browser kernel
  • How to implement the caching mechanism? (from 200 cache, to cache, to etag, to)
  • Explain the difference between 200 and 304
  • What is preloading, lazy loading
  • How many states can an XMLHttpRequest instance have?
  • DNS resolution principle, how to find the server after entering the URL
  • How does the server know about you?
  • Browser rendering process
  • Some compatibility problems with IE
  • session
  • Drag and drop to realize
  • Unpick the parts of the URL

ES6

  • To talk about a promise
  • Do you know all the ES6 features? If you come across something and you don’t know if it’s ES6 or ES5, how do you tell it apart
  • What is the difference between ES6 inheritance and ES5 inheritance
  • Promise to encapsulate the ajax
  • Advantages of let const
  • What is ES6 generator and async/await implementation principle
  • ES6 and Node commonJS modular specification differences
  • Arrow function, and its this

Computer network

  • HTTP protocol header contains what important parts, HTTP status code
  • How do I do web URL input to output?
  • Why should performance tuning reduce THE number of HTTP calls?
  • The process and principle of Http request
  • HTTPS (yes HTTPS) how many handshakes and waves? How HTTPS works.
  • How many waves and handshakes does HTTP have? What is the Chinese name for TLS? Which network layer is TLS?
  • What are the features of TCP connections? How can TCP connections be secure and reliable?
  • Why does a TCP connection require three handshakes, not two? Why
  • Why does TCP have three handshakes and four waves?
  • TCP three-way handshake and four-way wave drawing (write ack and SEq values on the spot)?
  • Differences between TCP and UDP
  • What’s the difference between get and Post? When is it used?
  • What is the difference between HTTP2 and HTTP1?
  • websocket
  • What is a TCP stream and what is an HTTP stream
  • How does Babel compile ES6 code into ES5
  • Persistent connection and pipelining of HTTP2
  • TCP or UDP for domain name resolution
  • Domain name divergence and domain name convergence
  • When you Post a file, where does the file go?
  • What’s in the Header of the HTTP Response?

engineering

  • Do you know webpack,gulp, Grunt, etc? Contrast.
  • Webpack entry file how to configure, how to split multiple entry.
  • Webpack loader and Plugins are different
  • Specific use of GULP.
  • Understanding front-end engineering, how to implement a file package yourself, such as a JS file with ES5 and ES6 code, how to compile compatible with them

modular

  • Do you know anything about AMD,CMD,CommonJS?
  • Why modularity? How to write code when not in use and when using RequireJs?
  • Tell me what modularity libraries are out there. Do you know the history of modularity?
  • Respectively talk about synchronous and asynchronous modular application scenarios, say the principle of AMD asynchronous modular implementation?
  • How to replace all the require module syntax in the project with the ES6 syntax of import?
  • When using modular loading, what is the order in which modules are loaded, and if not, what do you think the order should be based on what you already know?

Nodejs

  • Do you know anything about NodeJS
  • What is the relationship between Express and KOA, and what is the difference?
  • What kind of business is NodeJS suited for?
  • How is NodeJS different from PHP and Java
  • What is the difference between Stream and Buffer in Nodejs?
  • How is node asynchrony resolved?
  • How does Node achieve high concurrency?
  • Describe the principle of Nodejs event loop

The data structure

  • Basic data structures :(arrays, queues, linked lists, heaps, binary trees, hash tables, etc.)
  • Eight sorting algorithms, principles, and applicable scenarios and complexity
  • Can you tell me as many ways as possible to implement the Fiboacci sequence?

Performance optimization

  • What is the use of CDN? When do you need it?
  • Page optimization for the browser?
  • How can I optimize the performance of DOM operations
  • What are the SEO solutions for single page apps?
  • Why is the first screen of a single page app slow? What are the solutions?
Due to limited space, only part of the interview questions can be shared, more questions and answers are available【 Click on me 】Read download oh ~ free to share with you, is a Thanksgiving feedback bar

feeling

In the late stage of the spring recruitment interview, luck and strength are very important, and I also have good luck. In order to reward my fans and friends (after all, I have played for so long ha ha ha), I will sort out my personal feelings and summarize the above. Finally, I wish everyone can harvest the ideal offer!!