Bytedance

  • General business and past project experience
  • Values and soft skills.

See here you must not despise, otherwise will die very miserably.Copy the code

My interview process:

  • The interview was conducted through video remote interview. It has to be said that due to the impact of the epidemic, the remote interview did save a lot of work, but the video was far less than face-to-face interview, which made the interviewees feel more involved. For the first time, I am not very nervous about using video interview, which is largely due to my high expectations and low skills. I usually use compiler prompts when writing code, but you will find that you cannot write without prompts. Therefore, I suggest you to understand the code and reach your heart.
  • The interviewer is looking first at your familiarity with the resume and second at some very basic underlying principles.

Some lessons learned today:

  • CI/CD (continuous inheritance and continuous development) concepts are applied to tools and frameworks
  • The most commonly used keystrokes by programmers are control/command + C && Control /command + V
  • From researching language writing to researching tool use (e.g. Git=>sourcetree; Language => framework etc.)
  • High-level languages exist only for the convenience of developers

1. Display common attributes:

The display attribute specifies the type of box the element should generate.

  • None This element will not be displayed.
  • Block This element is displayed as a block-level element, preceded by a newline character.
  • The inline default. This element is displayed as an inline element, with no newlines around it.
  • Inline-block Inline block element. (New value in CSS2.1)

2, position common attributes:

The position property specifies the type of positioning method for an element (static, relative, absolute, or fixed).

  • Absolute Generates an absolute position relative to the first parent element other than the static position. The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes.

  • Fixed Generates a fixed positioned element relative to the browser window. The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes.

  • Relative Generates an element that is positioned relative to its normal position. Therefore, “left:20” adds 20 pixels to the left position of the element.

  • Static Default value. Without positioning, the element appears in the normal stream (ignoring the top, bottom, left, right, or Z-index declarations).

3. Difference between margin and padding

Margin refers to the distance from its own border to the border of another container, i.e. the distance outside the container.

Margin means the margin between box1 and box2 <div class="box1"></div>
<div class="box2"></div>
Copy the code

The padding is the distance between its own border and the border of another container inside it.

Padding is the inside margin between box1 and box2, usually <div class= between parent DOM elements"box1">
    <div class="box2"></div>
</div>

Copy the code
  • Margin can be negative /padding cannot be negative

4. Triangles with CSS

First we create a div with a border:

Width: 40px; height: 40px; border: 40px; border-style: solid; border-color: red green blue brown;Copy the code

② Then we set the width and height of the internal DIV to 0: 

width: 20px;
height: 20px;
border-width: 10px;
border-style: solid;
border-color: red green blue brown;
Copy the code

③ Remove the other three borders 

width: 0;
height: 0;
border-width: 40px;
border-style: solid;
border-color: red transparent transparent transparent;
Copy the code

5. How much px is 1rpx? How many physical pixels?

On the size conversion of the problem, there are comments, I also do not explain more, I recommend to look at the summary of others, I feel more comprehensive than my summary

www.cnblogs.com/leejersey/p…

6, up, down, left and right vertical center

There are thousands of ways – I only recommend using flex layout

I believe this is the easiest way to do it

index.html
<div id="app">
    <div class="center">hello world</div>
</div>
Copy the code
style.css
#app {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
#app .center {
            width: 300px;
            height: 300px;
        }
Copy the code

7, GET and POST differences

GET – Requests data from the specified resource.

  • GET requests can be cached

  • GET requests remain in browser history

  • GET requests can be bookmarked

  • GET requests should not be used when working with sensitive data

  • GET requests have a length limit

  • GET requests should only be used to retrieve data

POST – Submits data to be processed to the specified resource

  • POST requests are not cached
  • POST requests do not remain in browser history
  • POST cannot be bookmarked
  • POST requests have no data length requirements

However, this is only a superficial distinction. When you answer with confidence, the interviewer will laugh at you.

Get: Post: Get: Post: Get: Post: Get: Post: Get: Post

Whether the GET | | POST from the underlying we all want to abide by the HTTP protocol, HTTP protocol? Similar to our traffic laws, whether you have a GET license plate or a POST license plate, you must comply with HTTP requirements.

TCP (Transmission Control Protocol) is a connection-oriented, reliable, transport-layer communication Protocol based on byte stream. This is the code for a request to establish a connection with the server.

This is TCP (C: Tianwang getihu S: Pagoda town river demon C: everyone is a guest S: eat)

Significant differences

  • For GET requests, the browser sends HTTP, header, and data together, and the server responds with 200.

  • For POST, the browser sends a header, the server responds with 100 continue, the browser sends data, and the server responds with 200 OK (returns data).

So, theoretically, get is better, but remember that the computing power of the server is already 🐂. It is no longer a von Neumann machine, and the difference between one millisecond and three milliseconds is completely imperceptible to the user experience. Since post has unlimited size, security and many other advantages, I recommend using POST.

8. Cross-domain issues

One of the most common problems in development is cross-domain. Solving cross-domain applications, whether through JSONP or in the background, is complex in principle.

Programmers don’t like to bother themselves, they don’t like to bother other people, and other people don’t like it when you bother them.

So cross domain this kind of thing is best to solve by yourself, I recommend the way to build a local NGINX server is too easy to use, anyone do not have to look at the face, want to request what what. NGINX setup method and configuration see my previous summary: https://juejin.cn/post/6844904131161784333 is waiting for you how to use the Mac Nginx 】 【 after the project set up to deploy front and back side is certainly under an IP is no cross-domain, If it is a large project, deploy the front and back ends separately, then simply play NGINX 666.

9, closures

Essentially: closures are functions

  • Privatization variable
  • Avoiding memory leaks

This article I purposely put closure said said https://juejin.cn/post/6844904199898005512

10, the front store cookies | | sessionStorage | | localStorage

cookie

Strictly speaking, cookies are related to the back end. Cookies are generally set by the back end and sent to the front end through response stream. And set the expiration time. Cookies are stored in the browser until the expiration date expires. It is carried in the HTTP request header each time an HTTP request is sent.

localStorage

The localStorage life cycle is permanent, which means that unless the user manually clears it. Otherwise, it will remain stored in the user’s browser. Write to hard drive)

const db = window.localStorage
db.setItem('name'.'bill')
db.setItem('age',22)
console.log(db.getItem('name')) / /'bill'
console.log(db.getItem('age')) / /'22'Db.removeitem ('age')
console.log(db.getItem('age')) / / when a nonexistent data is removed, return null db. The clear () / / delete all the data to the console. The log (db. The getItem ('name'))
Copy the code

If the storage is an object, the direct storage is [object object] cannot be used.

const obj = {xxxxx}
localStorage.setItem('key',JSON.stringify(obj))
const obj2 = JSON.parse(localStorage.getItem('key'))
Copy the code

sessionStorage

SessionStorage is the same as localStorage. I won’t do any more introductions here. It is cleared after all tabs except seesionStorage under the current domain are closed (just written to memory, stored on the server, deactivated when disconnected).

SessionStorage. SetItem (key, value) storage sessionStorage. / / the getItem (key, value) / / for sessionStorage. RemoveItem (key) / / delete SessionStorage. The clear () / / clearCopy the code

Function (){} =>{

  • More concise syntax
  • There is no this
  • The new constructor cannot be used
  • Instead of binding arguments, use rest arguments… To solve
  • Call with call() and apply()
  • Capture its context’s this value as its own this value
  • Arrow functions have no stereotype attributes
  • You cannot simply return an object literal
  • Arrow functions should not be treated as Generator functions and the yield keyword should not be used
  • Arrow functions cannot break lines

Conclusion:

  • The arrow function’s this always refers to its context’s this, and no method can change the reference, such as call(), bind(), apply().
  • The this of an ordinary function refers to the object on which it was called

Var const let

People who ask this question are trying to gauge your familiarity with ES6; Recommend to see my previous article about ES6 new features: new features 】 【 you don’t know the ES6 https://juejin.cn/post/6844904023783374862

13, Call && apply && bind change this to refer to

  • call :function.prototype.call()
The call method can specify that this points to (the scope in which the function is executed), and then specify that the argument to the call method should be obj. If the argument is null or undefind, the global object will be passed by defaultCopy the code
  • apply:func.apply(thisValue, [arg1, arg2, …] )
The only difference is that apply takes an array as an argument when the function is executedCopy the code
  • bind:Function.prototype.bind()
      bindUse to bind this in the function body to an object and return a new functionCopy the code

Recommend a more complete article https://www.cnblogs.com/nana-share/p/9469455.html

First write so much is mainly too sleepy, free to add, I suggest that if you have time or to read more books, search out only others have to the knowledge, each person can only explain their own cognition, so directly read the authority of the interpretation of more profound and comprehensive.