In the afternoon, I went to the head office of Toutiao to interview for the front-end position, hanging in the second… My foundation is still some poor, here is a summary of the two rounds of interview topics:

Round of the interview

What is the principle behind typeof implementation?

https://ecma262.docschina.org/#sec-typeof-operator https://stackoverflow.com/questions/45462182/transform-a-javascript-object-to-function-manually https://stackoverflow.com/questions/29353177/what-is-base-value-of-reference-in-ecmascriptecma-262-5-1

How is JS inheritance implemented? How does it work?

Explained js prototype chain, but feeling expressed not clear enough. It’s one thing to find out you know it, it’s another to say it

Give A function A and A function B, A has property handwriting implementation B inherits A. And to optimize the inheritance implementation as much as possible

At that time, I was going to write a parasitic combinative inheritance method, but I seem to make a lot of mistakes in the handwriting process, and I still need to improve my handwriting code ability. Parasitic combinatorial inheritance implementation:

function inheritPrototype(SuperType, SubType) {
    var prototype = Object.create(SuperType.prototype);
    prototype.constructor = SubType;
    SubType.prototype = prototype;
}

function SuperType(props) {
    this.props = props;
}

function SubType(props) {
    SuperType.call(this, props);
}

inheritPrototype(SuperType, SubType);
Copy the code

In terms of A and B, A is SuperType and B is SubType. There is also an implementation of object.create (), which behaves the same as Object () below when passed a parameter. (Object.create() Optionally passes in a second argument that defines additional properties of the new Object, such as Object.create(SuperType, {name: {value: ‘Test’}})

function object(obj) {
    function F() {};
    F.prototype = obj;
    return new F();
}
Copy the code

A simple algorithm: find the KTH largest number in an array

Handwritten native Ajax requests

  1. When I finish, the interviewer is inif (xhr.readyState == 4 && xhr.status == 200)Is it ok to change the status code to 201
  2. Because I just wrote itvar xhr = new XMLHttpRequest(), did not provide IE compatibility, the interviewer asked IE compatibility again.

A more complete answer:

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else{// Compatible with IE5 and IE6return new ActiveXObject('Microsoft.XMLHttp');
    }
}

var xhr = createXHR();
xhr.onReadyStateChange = function() {
    if(xhr.readyState == 4) {// A status code between 200 and 300 or 304 indicates that the request was successfulif ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            console.log(xhr.responseText)
        } else{... } } } // GET xhr.open('GET', url);
xhr.send();

// POST
xhr.open('POST', url);
xhr.send(data);
Copy the code

After that, the interviewer drew a sketch, which was implemented with HTML and CSS. The content involved left fixation and right adaptive, vertical center and other contents. The sketch looks something like this:

How to handle errors when writing code?

React and the virtual DOM?

Second round interview

What do you know about HTML semantics? What new semantic tags are there?

Some semantic labels were answered at that time. To sum up: Semantic tags — the content of the tag itself — represent the meaning of the element to the viewer or developer. Elements such as

and
have no semantics. And

represents a form or

represents a table and is a semantic tag. H5 provides many new semantic elements, such as:

  • <header> <nav> <aside> <footer>Several tags are used to represent different parts of the page, such as the header, navigation, and sidebar.
  • <article>An element represents a separate structure within a document, page, application, or website. It is meant to be a structure that can be assigned or reused independently, such as in a publication, it could be a forum post, a magazine or news article, a blog, user-submitted comments, an interactive component, or other separate content item.
  • <section>Contains a set of contents and their titles.
  • <figure>Specify separate streams of content such as images, charts, photos, codes, etc.<figcaption>define<figure>The title.

What Bootstrap source code have you seen?

Here is the general implementation of the Bootstrap rasterization system and the response of Bootstrap. In passing, the interviewer asked Bootstrap how to achieve the responsiveness, and I said that I used @media of CSS. And then he asked me if I had any other characteristics that didn’t come to mind at the time

What do you know about Flex? What are the basic properties of Flex?

Just basic illustration-content, align-items flex-direction, and so on

How to achieve a two-column contour layout?

In the process of asking, also asked the question height: 100% related

How do I clear the float?

What other methods do you use? Clear: both is not enough.

The main principle of clearing floating elements is to create Block Formatting Context (BFC) on the parents of floating elements. All elements in a BFC are included in the BFC, including floating elements. There are many ways to create a BFC. The most common ones are:

  1. displayforflex inline-block inline-flex table-cellThe elements of the
  2. overflowforvisibleOutside element
  3. positionforabsoluteorfixedThe elements of the
  4. floatfornoneOutside element

So simply apply the above attributes to the parent of the float element to create a BFC on the parent element to clear the float. Alternatively, using clear:both can also clear floats. The best way to do this is to use pseudo-classes on the parent element :after to add this element to clear floats, as in:

.parent-box:after{
    clear: both;
    content: ' ';
    display: block;
}
Copy the code

The content here is from the summary of this article, which is very well written and I recommend reading it

What is the priority of style weights?

! Important > inline style > id > class > tag style weight stacks content from: https://juejin.cn/post/6844903570001625102

The CSS in the unitemandremWhat’s the difference?

  • remIt’s relative to the rootemRem is the EM of root, as opposed to the HTML root element
  • emIs a unit of relative length, relative to the font size of the text in the current object. If the current font size for inline text has not been manually set, it is relative to the browser’s default font size. In fact, according to the W3 standard, em units are the font size relative to the element that uses em units. The font size of the parent element can affect the EM value because of inheritance.
  • Conclusion:remUnits translated to pixel values are determined by the font size of the HTML element. This font size is affected by the font size Settings in the browser, unless an explicit unit is overridden.emThe units are converted to pixel values, depending on the font size they use. This font size is inherited from the parent element unless overridden explicitly with a specific unit.

This part from: © https://www.w3cplus.com/css/when-to-use-em-vs-rem.html w3cplus.com

How to turn text beyond elements into ellipses (…)

If you implement a single-line text overflow to ellipsis, you need several CSS attributes in combination:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Copy the code

Webkit kernel browser can be satisfied with multiple lines, the following specified display 2 lines, the extra 2 lines are displayed as ellipsis:

overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
Copy the code

Hand write a countdown page

  1. Here because I used itvar date = new Date()“, so the interviewer asked what time the date was. Is it the current time zone event or the computer time or something else? I didn’t answer that. The answer isIf no arguments are entered, the Date constructor creates a Date object based on the current time set by the system.
  2. Because I use it for myselfsetInterval()To implement the countdown, it said 1000 milliseconds, so the interviewer asked me again about the js task queue, and asked me if the browser can guarantee 1000 milliseconds. I said that because of the task queue, the main thread is not guaranteed to execute once in 1000 milliseconds. He asked me if THERE is any optimization method. I said yesrequestAnimationFrameLoop so that the browser itself optimizes, and then the interviewer asks me how the browser optimizes (which is a really hard question), but I can’t answer that.

How do I determine if a variable is an array?

How is instanceof implemented in JS?

What new ES6 features have you used and what are the basic data types of JS? Are there any new data types in ES6?

I answered arrow functions, Map, Set, etc. The interviewer asked about the features of arrow functions. ES6 has a new primitive data type of Symbol, which has not been used before. Then he asked the Promise question when he mentioned Promise:

How does Promise come true? Can you write your own function to implement Promise?

I didn’t write it before, so I wrote a function by myself, and the interviewer asked me all kinds of questions about the code I wrote, but it was basically wrong.

What’s the difference between HTTP and HTTPS? HTTPS features?

Most frequently asked: the process from entering a URL to rendering a web page

This asks about the order in which HTTP requests and DNS queries are sent.

What is the loading sequence of DOM tree and render tree? What is the loading order of HTML, CSS and JS? (Or so it goes)

In addition to the loading order, there are also in-depth questions such as is the DOM tree fully loaded before rendering CSS? Or do you build DOM trees while rendering CSS? Will it affect the rendering of the page if there is a long loop of JS code in the HTML? This is basically the wrong question because you haven’t delved into the loading order issue. After the interview, I felt that my foundation was not good enough. Then I was nervous during the interview. I could not express many things at ordinary times. I hope to be helpful to those who are looking for front-end positions.