preface

I have written an article about the front end mock interview. Today we will continue with the front end mock interview. Because there are many of the questions that are mentioned in the first section, I won’t write the answers here, but I will go over them briefly.

After the first session, it is best to have a time to review the knowledge points in the first session. The second interview can also pick out some of the answer is not good to ask questions, to see if you really master

The interview is always an interview. I hope that through these interview questions, I can test the results of my work and study, and really improve our front-end basic ability and practical ability, rather than just talk about it on paper

html

1. Commonly used labels

Meta tags, defined by the name and content attributes, describe the source information of an HTML file, such as the author

(1) Charset, the encoding form of HTML documents

 <meta charset="UTF-8" >
Copy the code

(2) http-equiv, set the expiration date of the HTTP cache

< meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT" >Copy the code

(3) Vieport, mobile terminal controls the size and proportion of the vieport.

< meta name = "viewport" The content = "width = device - width, initial - scale = 1.0, the maxmum - scale = 1.0, the minimum - scale = 1.0, user - scalable = no" >Copy the code

CSS

1. What are the middle ways

/* flex */ justify: text; // align :center; /* flex */ justify: text; // align :center; // Position: relative; // Position: relative; position:absolute; Translate: translate(-50%, -50%) /* position negative */ margin negative /* margin */ level middle margin:0 auto; /* display: table; vertical-align: middle;Copy the code

2. What are the methods of responsive layout? Talk about REM layout in detail

3. Have you used CSS extensions such as less, sass

  • What is Less, Sass/Scss?

Less is a dynamic styling language. CSS is endowed with dynamic language features such as variables, inheritance, operations, and functions. Sass is a dynamic style language. Sass syntax is indentation syntax, which has many more features than CSS (variables, nesting, operations, mixins, inheritance, color handling, functions, etc.) and is easier to read.

  • The similarities between less and sass

1. Mixins — class in class;

2. Parameter mixing — classes that can be passed as arguments, just like functions;

3. Nested rules — Nested classes within classes to reduce duplicate code

4, operation – CSS used in mathematics;

5, color function – you can edit color;

6. Namespace — grouping styles so they can be called

7. Scope — locally modify styles;

8. JavaScript Assignment — Use JavaScript expressions to assign values in CSS

  • The difference between less and sass

The main difference between Less and Sass is how they are implemented. Less is JavaScript based and is handled on the client side. Sass is Ruby based and is handled on the server side. The only difference between Less and Sass variables is that Less uses @ and Sass uses $.

Reference: www.jianshu.com/p/029792f0c…

4. BFC (block-level format context)

(1) Definition: is a separate render area, only block level box participation, which specifies how the elements inside the layout, does not affect the elements outside the area

(2) Characteristics:

  • The vertical distance of the box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap [internal elements].

  • BFC does not overlap with float box

  • A BFC is an isolated container on the page, and elements inside the container do not affect elements outside the container. And vice versa. 【 Intrinsic concept 】

  • When calculating the height of the BFC, the float element also participates in the calculation.

(3) Which cases will generate BFC

  • The root element

  • Float is not none

  • Position is absolute and fixed

  • Overflow is not visible

(4) Application

  • Margin overlap problem resolved
  • Two columns of the layout
  • Remove the floating

5. What are the layout units of the front end and what are the differences

em

rem

px

Pt PT (point) is a unit commonly used in the printing industry equal to 1/72 of an inch and indicating absolute length

5. The flex layout

6. Box model (standard box model, weird box model)

Box-sizing: border-box

Box-sizing: Content-box model

Difference: Width in the weird box model includes padding, not in the standard box model

7. How do browsers parse CSS selectors: from right to left

Floating 8.

(1) Problems caused by floating:

  • The height of a parent element cannot be stretched, affecting elements of the parent’s level.

  • Non-floating elements (inline elements) of the floating element’s sibling will follow

(2) How do I clear the float

  • The parent div sets the height

  • The last floating element adds the style clear: both. Or set a pseudo-element to the parent element and add the style

  • The parent div sets overflow: hidden/auto

9. The difference between pseudo-classes and pseudo-elements

Pseudo classes:

  • Formats information outside the DOM tree. For example: <a> tags :link, :visited, etc. This information does not exist in the DOM tree.

  • Information that is not available by regular CSS selectors. For example, to get the first child, we can’t use the normal CSS selector, but we can get it with :first-child.

Pseudo-classes are a way to make up for the lack of CSS selectors and make it easier to get information.

Pseudo elements: :

Pseudo-elements can create virtual elements that cannot be created in the document language.

  • For example, document languages do not have a mechanism for describing the first letter or line of an element’s content, but pseudo-elements do (::first-letter, ::first-line).
  • Pseudo-elements can also create content that does not exist in the source document, such as using ::before or ::after.

Pseudo-elements, on the other hand, essentially create a virtual container (element) to which we can add content or styles.

10. Under what circumstances will rearrangements and redraws be triggered

11. How to avoid rearranging and redrawing

12. How to implement instant messaging WebSocket

13. The link and @ import

  • Link does more than just load CSS

  • @import is loaded after the page is loaded. When the page is loaded, the CSS introduced by the link tag is loaded at the same time. @import The imported CSS will be loaded after the page has loaded.

  • Compatibility link is better than @import

  • You can use JAVASCRIPT to manipulate the DOM and insert a link tag to change the style. Since DOM methods are document-based, you cannot insert styles using @import.

JS

1. Dom event flow

Captured events: document-> the current element

Bubbling events: current element -> Document

2. Event agent

3. The cookie, sessionStorage and localStorage difference and features

4. The closure.

(1) Definition: A closure is a function that has access to a function’s scope variables. A common way to create a closure is to create another function inside a function.

(2) Features: If an internal function references a variable in an external function, it authorizes the use of that variable to be delayed. Therefore, when the external function call completes, the variables’ memory is not freed (the value is saved) and the closure can still use the value.

(3) Disadvantages: Memory leaks may occur

5. settimeout(0)

Create an asynchronous thread, place it on the call stack, and execute as soon as the main thread is idle. The minimum setTimeout interval is 4ms.

6. iframe

(1) shortcomings

  • The iframe blocks the onLoad event on the home page

  • Search engine search procedures can not interpret this page, not conducive to SEO

  • The iframe and the home page share a pool of connections, and browsers have restrictions on the same connections, which affects the concurrent loading of pages.

Solution: xxx.src=”xxx.html”. Set the SRC of the iframe to the HTML of the main page

7. Memory leak

(1) Definition: When a piece of memory is no longer used by an application, for some reason this piece of memory is not returned to the operating system

(2) Problems: slow operation, crash, high latency, etc.

(3) Common memory leaks and solutions:

  • Unexpected global variables

An undeclared variable creates a new variable in the global object. That is, the window object. (Windows objects are always present and will not be destroyed unless the page is uninstalled)

The variable bound under this to the window object

Use strict mode to avoid creating unexpected global variables.

  • Missed timers and callbacks

Solution: leave the page in time to clear, such as micro channel small program page if set setTimeout, that onHide time, to remember clearTimeout

  • References outside the DOM: If an element needs to be removed at some point, all references to it, such as event bindings, need to be cleared.

  • Closures: Closures are anonymous functions that have access to the scope of their parent.

8. RequestAnimation and setTimeout, setInterval

Note: If the animation reaches 60 frames per second, the user will have no sense of spacing. So the requestAnimation is at this frequency. Besides, it has the following advantages

(1) All THE DOM of each frame will be collected and completed in a single redraw or rearrangement.

(2) In hidden or invisible elements, rrequestAnimation will not rearrange and redraw, which means less CPU, GPU, and memory usage

(3) requestAnimation is superior to setTimeout in that it is a browser API for animations. Methods are automatically called while the browser is running, and animations are automatically stopped if the page is not active, saving CPU overhead.

9. Differences between GET and POST requests

(1) Transmission mode: GET (address bar) POST (message)

The most intuitive difference is that GET includes the parameters in the URL, and POST passes the parameters through the request body.

(2) Transmission length. GET requests pass parameters in the URL with a length limit, while POST does not.

(3) Get sends one TCP packet, post sends two [bonus points]

For a GET request, the browser sends the HTTP header and data together, and the server responds with 200 (returning data).

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

Sending the header and body separately is part of the browser or frame request method, and is not part of the necessary behavior of post.

(4) Get requests are actively cached by the browser, while POST requests are not, unless manually set.

(5) GET can only use URL encoding, post supports multiple encoding methods [see below]

(6) GET is less secure than POST because the parameters are directly exposed to the URL, so it cannot be used to pass sensitive information

(7) GET request parameters are fully preserved in the browser history, while POST parameters are not.

Native Ajax requests

(1) Create ajax objects


var xhr = null;

if(window.XMLHttpRequest){

 xhr = new XMLHttpRequest;

}else {

 xhr = new ActiveObject('Microsoft.XMLHttp');

}

Copy the code

(2) Connect to the server


xhr.open('GET', the url,true)

Copy the code

(3) Send the request to the server

xhr.send();
Copy the code

(4) The return from the receiving server


xhr.onReadyStatechange = function(){} xhr.responseText: string response data xhr.responseXML: XHR XML format of the response data. The status/XHR statusText: returns a text and Numbers of HTTP status? XHR. GetAllResponseHeader () : obtain all the corresponding head getResponseHeader () : Gets the value readyState property for the first field in the corresponding meat0: uninitialized, the open() method has not been called1: loaded, send() has been called, sending the request2: load complete, send() completed, response received3: The response content is being parsed4: Completed. The response content is parsed and can be used on the clientCopy the code
function ajax(url, fnSucc, fnFaild) {
  var xhttp;
 
  // Step 1: Create the XMLHttpRequest object
  if (window.XMLHttpRequest) {
      // Modern browsers
      xhttp = new XMLHttpRequest();
   } else {
      // Older browsers such as IE6
      xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  // Step 4: Process the response
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState === 4) {
      if (xhttp.status === 200) {
        fnSucc(xhttp.responseText)
      } else {
      	if (fnFaild) fnFaild(xhttp.responseText)
      }
    } 
  };


  // Step 2: Initialize XMLHttpRequest method
  xhttp.open('GET', url);
  Step 3: XMLHttpRequest sends a request to the server
  xhttp.send();

}
Copy the code

What is the content-type type of the Ajax post method

Content-type Specifies the content encoding type of HTTP/HTTPS messages sent to the server. The server uses a specific parsing method based on the encoding type.

(1) application/json

(2) application/x – WWW – form – urlencoded

(3) the application/XML

(4) the multipart/form – the data

12. The prototype chain

13. What are micro and macro tasks

14. Regular

Juejin. Im /entry/68449…

es6

1. New data type symbol in ES6

comprehensive

1. Differences between PC and H5

(1) Events

(2) Compatibility

(3) Layout

2. When to cause the page to rearrange and redraw. How to avoid

3. Do you know the W3C standard? Tell me

75. The team/post/first -…

The framework

1. How do different vUE components communicate

2. Life cycle of VUE

3. How to understand the responsive system of VUE

4. Since Vue can accurately detect data changes through data hijacking, why does virtual DOM need to perform diff detection of differences?

5. What is the use of key in vue

Small program

1. Applet life cycle

Application, page, component

【onLaunch】【onShow】【onHide】

The first time the user opens the applet, the onLaunch method is triggered (only once globally).

After the applet initialization is complete, the onShow method is triggered to listen for the applet display.

The applet enters the background from the foreground and fires the onHide method.

Small program from the background into the foreground display, triggering the onShow method.

Small program running in the background for a certain time, or the system resource occupation is too high, will be destroyed.

Page: [onLoad] [onShow] [onReady] [onHide] [onUnload]

Components:

  • The [created] component is instantiated, but the node tree has not been imported, so setData cannot be used at this time
  • The attached component is initialized and the node tree is complete. You can render the node with setData, but you can’t manipulate the node
  • [Ready] When the component layout is complete, you can obtain node information and perform operations on the node
  • The component instance was moved to another location in the tree
  • [detached] The component instance is moved from the node tree

Reference: www.cnblogs.com/lilicat/p/1…

Packaging tools

Differences between WebPack and GULp

The WebPack build process

How to optimize front end performance with WebPack

How can I make WebPack faster

How can I speed up webPack builds

How to configure a WebPack multipage application

algorithm

1. Quicksort

network

  • TCP Three-way and four-way handshakes

git

1. Version rollback

Security issues

1. XSS, CSRF

The last

1. Evaluate the achievements of your last company

2. Your strengths and weaknesses

3. Your hobbies

Career planning

Do you have any questions

conclusion

The mock interview is over. Although it is a mock interview, IT is also a great thing that I can realize many of my shortcomings and review in time before the real interview.

I hope to be able to give you a little inspiration, but also welcome you to pay attention to my public number, and look forward to communication and growth with you