Baidu front end share test questions, with the answer

This is the 7th day of my participation in Gwen Challenge

Code word is not easy, your praise is my motivation to continue to update the creation.

In the process of job hunting, the overall process of Baidu was quite standard. Although I was told by HR that the interview would be cancelled temporarily due to the meeting reason when I went to Baidu Building for the first time, I had to change the appointment to another time. But when I came to chat with all the interviewers, I still felt the dachang style.

Compared with other companies that like to ask about principles and mechanisms, Baidu pays more attention to how you use the framework knowledge you have mastered in your work and how you balance business and technology in your work. It is very good to have in-depth discussions through some practical problems in your work.

The following mainly look at baidu offline test part, see what Baidu is more concerned about the basic literacy of a front-end.

Style related

1.1 Assume the following DOM structure & style (hint: scroll down and come back to the CSS)

<style>
body {
  background: #fff ! important;
 }
.root {
  border: 3px # 000 solid;
  width: 200px;
 }
.root div {
  box-sizing: border-box;
  border: 1px # 000 solid;
  background-color: #fff;
 }
.div-a {
  position: relative;
  z-index: 100;
  top: 50px;
  width: 200px;
  height: 100px;
 }
.div-b {
  position: absolute;
  z-index: 300;
  top: 80px;
  width: 100px;
  height: 50px;
 }
.div-c {
  position: absolute;
  z-index: 200;
  width: 50px;
  height: 100px;
 }
</style>

<div class="root"> 
  <div class="div-a"> 
    <div class="div-b"></div>
  </div>
  <div class="div-c"></div>
</div>
Copy the code

The problem

Which of the following render effects does the above HTML fragment correspond to?
Can you briefly explain your reasoning?
- Hint, this little question is mandatory, we need to refer to your actual derivation

answer

First, for root height, since only div-a is relative under root, in the document flow; Since all divs use standard box models, the height of root is equal to the height of div-a 200px + the height of its top and bottom borders 3px*2 = 206px;

Div-a is shifted 50px (top: 50px) down from its normal position. Div-b is shifted 80px (top:80px) down from its parent div-a.

The z-index of div-a and div-b is degraded according to the parent rule. The z-index of div-a and div-b is degraded according to the parent rule. The z-index of div-c is greater than the z-index of div-a, so div-c is above div-b. Therefore, choose B.

1.2 Briefly, how do you manage the Z-index of each element in your project?

Specify a specification for the use of z-index components such as popover, Modal, colorpicker, and so on, specifying the level of the specification according to the component characteristics. In addition, if z-index is used in the business layout, try to control its level in the lower specification. For example, use 1XX for Z-index in the layout and 2XX for components of the pop-up layer class.
Globally maintains a method to get z-index incremented by 1 each time it is called

1.3 Briefly, how do you manage styles in projects? How do I avoid styles affecting each other in different pages/modules?

Currently, the BEM rule is used in projects to name styles by distinguishing between modules and elements.
Use CSS modules to manage the CSS by modules.

Network related

2.1: What are same-origin policy and cross-domain? What are the solutions to cross domains?

The same origin policy means that the protocols, ports, and domain names are the same.

The limitations of non-same-origin include: cookies cannot be read, DOM cannot be retrieved, and Ajax requests cannot be sent.

Cross-domain: Requests are made between two domains (different protocols, ports, and domain names).

Cross-domain solutions:

JSONP, by dynamically creating a Script tag, the SRC attribute of the script tag is not restricted across domains.
Cors, the server adds some headers in response:
- Access-Control-Allow-Origin: http://ip:port

Required and has the value of Origin in the request header.

Access-Control-Allow-Credentials:true

This parameter is optional. The value is Boolean. This parameter specifies whether to allow the browser to send cookies.

Access-Control-Allow-Methods:

A request style that allows cross-domain requests.

Nginx does reverse proxy
Proxy for development environments that use Webpack-dev-server across domains

2.2: What are the “resource caching” headers in HTTP? And a brief introduction to the set of rules?

Mandatory cache

Expires specifies an expiration date for the cache. If a resource is requested before that expiration date, the cache will be hit. The disadvantage is that

This time is an absolute time. If the local time of the client is changed, the time difference between the server and the client becomes larger, resulting in cache confusion.

Cache-control specifies a relative time, in seconds, through max-age. Precedence over Expires. Other common

The values of are:

Public indicates that the response can be cached by any object
Private indicates that it can be cached only by a single user. If it is not shared, it cannot be cached by a proxy server
No-cache forces all users who have cached the response to send the request to the server using the cached data money.
No-store disables caching

Negotiate the cache

If the strong cache is not hit, the browser sends the request to the server. The server determines whether the negotiation cache is matched according to last-modify/if-modifysince or Etag/ if-none-match in the HTTP header. If a hit is made, the HTTP return code is 304 and the browser loads the resource from the cache.

Last-modify/if-modify-since When the browser requests a resource for the first time, last-modify is added to the header returned by the server. Last-modify indicates the time when the resource was Last modified. When the browser requests the resource again, The sent request header contains if-modify-since, which is the last-modify returned before the cache. After receiving ifmodify-since, the server determines whether the resource matches the cache based on the last modification time.
ETag/ if-none-match ETag Ensures that each resource is unique. Resource changes lead to ETag changes. If the ETag value changes, the resource status has been modified. The server determines whether the cache is hit based on the if-none-match value sent by the browser.

2.3: Briefly explain the differences between 301, 302 and 304?

301 Permanent redirect. This status code indicates that the requested resource has been assigned a new URI and will use the URI to which the resource now refers. And there are different ways to handle it depending on the method of the request.

302 Temporary redirect. The status code indicates that the requested resource has been assigned a new URI and the user is expected to use the new URI to access it this time.

304 The status code indicates the condition that the server allows the request to access the resource when the client sends a conditional request, but the condition is not met.

The 304 status code is returned without containing any subject part of the response. A conditional request is one in which the GET request header contains any of the following headers: if-match, if-modified-since, if-none-match, if-range, or if-unmodified-since.

JS & algorithm related

3.1: Please describe what results are printed by the following procedure and briefly explain the derivation

const result = ['1'.'3'.'10'].map(parseInt);
// What will be printed here?
console.log( result );
Copy the code

answer

The printed result is [1, NaN, 2] because the map argument is

function(current, index, arr) { // Current element value, current element index value, array itself
}
Copy the code

ParseInt takes the following arguments:

parseInt(str, radix) // Parsed string in base (10 if omitted or 0, NaN if less than 2 or greater than 36)
Copy the code

So the question is expanded to write:

const result = ['1'.'3'.'10'].map(function(cur, index, arr) {
return parseInt(cur, index);
});
// Execution process:
// parseInt('1', 0) -> 1
// parseInt('3', 1) -> NaN
// parseInt('10', 2) -> 2
Copy the code

3.2: Please modify the following code so that 1, 2, 3, 4, 5 can be printed sequentially at last

for (var i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i);
  }, 1000);
}
Copy the code

Requirements: The interval between each number is 1 second.

Answer:

const myPromise = num= > {
  return new Promise((resolve, reject) = > {
    setTimeout(() = > {
      resolve(num)
      }, 1000)})}async function test() {
  for (let i = 0; i < 5;) {
    i++;
    console.log(await myPromise(i))
  }
 }
test();
Copy the code

3.3: Implement the process method as follows

Get the same parts of both arrays and deduplicate them
The results are then sorted in ascending order, and the results are returned (note that the results are returned, not printed out)

const arrayA = [4.2.1.2.5];
const arrayB = [2.3.1.6];
function process(arrayA, arrayB) {
// This is where you implement your code
}
/* should return [1, 2] */
process(arrayA, arrayB);
Copy the code

Answer some

The first:

function process(arrayA, arrayB){
  return arrayA
    .filter((v) = > arrayB.includes(v))
    .filter((v, i, arr) = > arr.indexOf(v) === i )
    .sort((a, b) = > a-b);
}
Copy the code

The second:

function process(arrayA, arrayB) {
  const set = new Set(a);while(arrayA.length > 0) {
    const ele = arrayA.pop();
    if(arrayB.includes(ele)) { set.add(ele); }}return [...set].sort((a,b) = > a - b);
}
Copy the code

3.4 (Additional questions) : Xiao Ming needs to climb a long ladder, which has N steps in total. If Xiao Ming can climb one or two steps at a time, how many ways can he take to climb this ladder?

Your goal is to achieve a method
The input is a “number N”
The output is a “number”

/* For example, n = 1, return 1 (method 1: 1 step) n = 2, return 2 (Method 1: 1 step & method 2: 2 steps) n = 3, return 3 (Method 1: 1 step *3 times, Method 2: 1 step &2 steps, method 3: 2 steps &1 step) */
function step(n) {
// This is where you implement your code
}
Copy the code

answer

(Typical Fibonacci sequence)

Recursive solution:

function step(n) {
  if (n <= 0) {
    throw new Error("param err");
    return -1;
  }
  if (n == 1) return 1;
  if (n == 2) return 2;
  return step(n - 1) + step(n - 2);
}
Copy the code

Non-recursive solution:

function step(n) {
  if (n <= 0) {
    throw new Error("param err");
    return -1;
  }

  if (n === 1) return 1;
  if (n === 2) return 2;

  let nMinusOne = 2,
  nMinusTwo = 1,
  timeN = 0;

  for (let i = 3; i <= n; ++i) {
    timeN = nMinusOne + nMinusTwo;
    nMinusTwo = nMinusOne;
    nMinusOne = timeN;
  }
  return timeN;
}
Copy the code

In general, Baidu’s requirements for the front end are actually more focused on the ability to solve problems and some very basic knowledge. In fact, the interview process is also a review of their own process, through the review again and again to better understand their strengths and weaknesses, clear their own positioning, so that in the future work, the strengths and weaknesses, gradually improve their knowledge system.

Baidu front end share test questions, with the answer

Style related

1.1 Assume the following DOM structure & style (hint: scroll down and come back to the CSS)

The problem

answer

1.2 Briefly, how do you manage the Z-index of each element in your project?

1.3 Briefly, how do you manage styles in projects? How do I avoid styles affecting each other in different pages/modules?

Network related

2.1: What are same-origin policy and cross-domain? What are the solutions to cross domains?

2.2: What are the “resource caching” headers in HTTP? And a brief introduction to the set of rules?

2.3: Briefly explain the differences between 301, 302 and 304?

JS & algorithm related

3.1: Please describe what results are printed by the following procedure and briefly explain the derivation

answer

3.2: Please modify the following code so that 1, 2, 3, 4, 5 can be printed sequentially at last

Answer:

3.3: Implement the process method as follows

Answer some

3.4 (Additional questions) : Xiao Ming needs to climb a long ladder, which has N steps in total. If Xiao Ming can climb one or two steps at a time, how many ways can he take to climb this ladder?

answer

Related Posts

Learn the core points of Next. Js in one article

【ES6 basics 】 Arrow functions

💗HTTP/2.0 and HTTP/3.0 stuff