Suggested collection: a summary to fix the autumn recruit! (Continuously updated…)

preface

Recently, many students began autumn recruitment, some large factories led to advance approval of the ethos, autumn recruitment began surprisingly early.

As the old saying goes:

❝

The foundation is weak and the earth shakes.

❞

Therefore, my friends and I sorted out some basic knowledge points that may be involved in the interview for you, hoping to help you get an offer in the autumn recruitment. “There may be mistakes in the article. If there are mistakes, please point them out in time.”

❝

“This article will continue to be updated, I suggest you collect, pick up the knowledge before the interview.“

❞

“Warm reminder: there are important contents at the end of the article!“

HTML

What tags have been added to HTML5?

On the arrow:

• template  section  nav  article  aside  header  footer  main  canvas  svg  video  audio  source  track  menuAnd so on.

Pure pomelo:

• datalist embedAnd so on.

Block-level tags

On the arrow:

• div     p     h1-h6     ul     ol     dl     li     header     footer     aside     section     article     form     tableAnd so on.

Inline tags

On the arrow:

• span     b     q     i     a     em     labelAnd so on.

Replace label (width and height can be set)

On the arrow:

• img     canvas     svg     video     iframe     input     buttonAnd so on.

linkWhat does the tag do when loading CSS@importWhat’s the difference?

On the arrow:

• linkTags can load resources and perform DNS pre-resolution
• with@importFirst of all, the loading time is different.linkTags are not blocked by DOM parsing, resources can be loaded in parallel, and@importLoaded resources cannot be loaded until DOM parsing is complete; Secondly, the scope of application of resource introduction method,linkTags can be created with JavaScript createElement and inserted into the document for dynamic import, while@importMethod can only be used in CSS.

Pure pomelo:

• Link is an external link element provided by HTML that can load not only style files but also other files such as images and scripts on tabs. @import is a CSS syntax that can only be used to load style files.
• CSS imported by multiple links will be loaded at the same time, and the first one to complete the loading will be resolved first. The CSS introduced by @import will not be loaded until the page has finished loading.
• @import is a CSS2.1 syntax, so it can only be recognized in IE5+. The link tag, as an HTML element, has no compatibility issues.
• You can manipulate the DOM with JS and insert the link tag to change the style; Because DOM methods are document-based, you cannot insert styles using @import.
• The style weight introduced by link is greater than that introduced by @import.

src  和 hrefThe difference between?

On the arrow:

• srcRefers to thesourceCan be set in thesrcAre mostly replacement labels, which are used to replace the content of the label after the resource is loaded.srcLoaded resources block DOM parsing.
• hrefRefers to thehypertext referenceCan be set in thehrefAre used to refer to other resources on the Internet or set anchor points.hrefReferenced resources do not block DOM parsing, but are loaded in parallel.

scriptOf the labelasyncProperties anddeferDo you know the properties?

On the arrow:

• async: Parallel loading. DOM parsing is interrupted if resources are loaded immediately after loading.
• defer: Parallel loading is delayed. DOM parsing is not interrupted when loaded resources are executed after DOM parsing is completed.
• The difference between:asyncThe loaded resources are executed immediately after the loading is complete. Therefore, the execution sequence of the loaded resources is not controllable. The loaded resources are executed first.deferAfter the loading is complete, the loaded resources are placed in the queue according to the loading sequence. The resources are executed one by one after DOM parsing is complete. The execution properties of the resources are controllable.

What are the benefits of semantic HTML tags?

On the arrow:

• Accessibility: Easy accessibility engine to parse web content.
• SEO: semantic clarity, friendly to search engine crawlers.
• Readability: HTML code is more readable and easier to maintain.

CSS

Tell me aboutinline  和 inline-blockThe difference between?

On the arrow:

• inline: Sets the label as an inline label. The width and height cannot be set.
• inline-block: Sets the label as an intra-line block-level label. You can set the width and height.

Pure pomelo:

• For inline elements, width is invalid, height is invalid, and margin and padding are unaffected.

flexYou know the layout,flex: 1Is an abbreviation of how many properties? What are the default values?

On the arrow:

• flexCommon layout properties:flex-directionSet flex main axis, column vertical from top to bottom, row horizontal from left to right;justify-contentSet the arrangement of elements along the main axis, center, space-around blank space evenly divided, space-between blank space evenly divided, flex-start main axis direction, flex-end main axis opposite direction;align-itemsSet “Center”, “Stretch” and “flexbox” (default), “flex-start”, “flex-end”, and “baseline” below the baseline.
• flex: 1Is:flex-grow flex-shrink flex-basisThe three attributes are abbreviations and default values are:0 1 auto, corresponding to the flex element space, scale, container width and height.

How are responsive layouts implemented?

On the arrow:

• Media queries
• Flex layout
• Grid layout (poor compatibility)
• Percentage layout

What is BFC? How is the BFC triggered?

On the arrow:

• Block Formatting Context. How elements in the BFC are arranged does not affect those outside the BFC.
• Trigger the landing:overflowDon’t forvisible ， floatDon’t fornone ， display  为 inline-block tabel-cell table-captionOne of them,positionDon’t forrelative  或 static 。
• Function: to solve the problem of height collapse of parent element; Solve the problem of margin overlap; Clear internal element float;

CSS animation? Why is CSS better than JS for animation?

On the arrow:

• transition: Triggered when the listening property changes, with other style properties can achieve most transition animations.
• animation: Automatic trigger, collocation@keyframesCan achieve most of the more complex loop animation.
• CSS to animate: trigger GPU acceleration, invoke GPU capability, high frame rate (60). Dynamic Settings are difficult and are suitable for animations with fixed effects.
• JS animation: use JavaScript engine, CPU calculation, low frame rate (30-50), easy to stall. The dynamic setting is simple, suitable for the animation with complex and high dynamic effect requirements.

JavaScript

newWhat does the operator do? Can you simulate it in code?

On the arrow:

function Person(name) {
  this.name = name;
}

function myNew() {
 var person = Object.create({});  person.__proto__ = Person.prototype;  var obj = Person.call(person, 'Jack');  if (typeof obj === 'object') {  return obj;  } else {  return person;  } }  var me = myNew(); // Person { name: 'Jack' } Copy the code

How much storage space does Number() have, and what if the background sends a Number that exceeds the maximum byte?

Yufeng:

• The essence of the Number type is a 64-bit floating point Number. (8 bytes)
• JavaScript’s Number type uses 53 bits for fractional bits, 10 for exponential bits, and 1 for symbolic bits. So the maximum exponent part is 2^10=1024. Therefore, for the range of Number, it means that the range is 2-2, that is, 5e~1.7976931348623157e+308.
• The range of integers that JavaScript can accurately represent is between -2^53 and 2^53 (not including two endpoints).
• If more than that, you can send the string type back end

thisCan you tell the point apart?call apply bindWhat’s the difference?

On the arrow:

• As long as the display binding is not used (call apply bind), then who callsthisJust point to someone.
• call: The first parameter is changedthisThe second and subsequent arguments are arguments to which the function is executed, and the function is executed immediately.
• apply: The function of the first parameter andcallAgain, the second argument is the array of arguments that the function executes, and the function is executed immediately.
• bind: creates a new function when executedthisThe second and subsequent arguments are arguments to be executed by the new function. The function will not be executed immediately.

What is a closure? What’s the use?

On the arrow:

• Closure as function back a small bag, the bag inside the function after birth will use some of the things, using a professional language to describe is in a parent function returns function, sub function if variable, in reference to the parent function in these variables will become a closure, in the life cycle of sub function can be get.
• What it does: You can reference internal values outside of a function, do some encapsulation, and privatize some internal state, just like in TypeScript. Another is the ability to keep frequently used variables in memory for a long time (beware of memory leaks).

Write a Promise by hand?

On the arrow:

• ! @ # $%…… &*, I don’t face! (Just kidding, just kidding, the interviewer picked on me)

function myPromise(fn) {
  // A collection of callback functions
  this.callbacks = [];

  / / resolve method
 // Mount data to the instance  // Return to the function in turn  function resolve(value) {  setTimeout((a)= > {  this.data = value;  this.callbacks.forEach((callback) = > callback(value));  });  }   // Return the resolve method  fn(resolve.bind(this)); }  myPromise.prototype.then = function (onResolve) {  return new myPromise((resolve) = > {  this.callbacks.push((a)= > {  // Returns the result to the incoming callback  const res = onResolve(this.data);  // The return value of the chained call is still a Promise object  if (res instanceof myPromise) {  res.then(resolve);  } else {  resolve(res);  }  });  }); }; Copy the code

Prototype chain

Uu:

• prototypeEach function object has a prototype property that points to the function’s prototype object. An object inherits methods and properties from its prototype, which are defined on the Prototype property of the object’s constructor function rather than on the object instance itself. Prototype is like a toolbox for constructors, with all kinds of tools in it and the constructor is always there.
• __proto__: Properties that every object has, whether instance, constructor, or prototype object.
• __proto__Attribute refers to the prototype object of the constructor:

person.__proto__ === Person.prototype;
Object.__proto__ === Function.prototype; // Object is essentially constructed by Function
Funtion.__proto__ === Funtion.prototype; // This is a special place
Copy the code

• Prototype chains are essentially linked by __proto__, not prototype.

• Keep the following points in mind:

  1. The instance’s __proto__ points to the constructor’s prototype object. 2. Function object __proto__ points to function.prototype. 3. __proto__ points to Object.prototype. (Don’t know what you’re writing, don’t know how to refine what you’ve written)

Computer network

What are the HTTP header fields?

On the arrow:

• User-agent: enables the server to identify the application type, operating system, software developer, and version of the user agent software that initiates the request.
• Referer: Source of request.
• Origin: exists for cross-domain requests and indicates the source of the request.
• Cache-control: indicates strong cache control. For the field, see MDN.
• Expires: Strong cache control. The value is a timestamp that marks when the cache expires.
• Cookie: state retention. For details, see the browser section.
• Content-type: specifies the MIME type in the request/response body file.
• Content-length: indicates the length of the request or response body.

What are HTTP request methods?

On the arrow:

• GET: Request parameters are concatenated in a URL in the form of key-value pairs. Parameters support ONLY URL encoding format and are usually used to obtain resources.
• POST: Request parameters are stored as text in the request body. They support multiple types (MIME) and are encoded in various formats. They are usually used to create or modify resources.
• PUT: Similar to POST, it is used to create resources.
• DELETE: Similar to POST, it is used to DELETE resources.
• OPTION: pre-check request, used to check server performance. It is usually used in non-simple cross-domain requests. You can set access-Control-max-age to set the validity period of the pre-check request to avoid sending the pre-check before each cross-domain request. (Non-simple request: except GET, HEAD, and POST, content-Type istext/plain multipart/form-data appliction/x-form-urlencodedOutside)
• HEAD: Returns only the response header.

What is the difference between HTTP 2.0 and HTTP 1.1?

On the arrow:

• Multiplexing: Allows multiple requests to be sent and received simultaneously over a single HTTP 2 connection. Because TCP slow start the process, if for every message to create a TCP connection, will experience slow start stage for many times, this for HTTP this is sudden and real-time request is very time consuming, therefore, to reuse the same TCP connection can greatly improve the transmission efficiency, avoid a slow start to the effects of transmission rate. According to RFC 2616 in HTTP 1.1, only two TCP connections can exist in the same domain name, that is, only two HTTP connections can exist. If the number of connections exceeds two, the number is blocked (six in Chrome).
• Binary frames: In HTTP 2.0, packets are transmitted in binary frames that can be transmitted over a single connection (multiplexing).
• Header compression: Stores hash tables between the server and client to record header fields that appear during packet transmission. When the same header appears again, only the ID of the header field is required during packet transmission.
• Server push: In HTTP 1.1, the request can only be initiated by the client and follows the request-reply mode. The client can only rely on polling to obtain real-time information, which is very inelegant and has poor performance. In HTTP 2.0, after the client initiates a request, the server can respond multiple times, preloading some resources, and realizing the push function of the server.

Keep-alive? What does it do?

On the arrow:

• An HTTP request is sent and a TCP connection is created. After receiving the response, the client does not release the connection and uses the same TCP connection channel for communication, avoiding the unnecessary cost of establishing and releasing the connection.

How do I prevent transmitted data from being modified? In other words, how do you ensure that data is sent and received unchanged?

Yufeng:

• By using the HTTPS protocol transmission, network security, details: blog.csdn.net/Endno/artic… .

The browser

LocalStorage and sessionStorage?

On the arrow:

• LocalStorage: key-value pair, about 5M in size. It is never deleted except manually. All same-origin Windows are shared.
• SessionStorage: key-value pair, about 5M in size. The session is deleted immediately after closing. It is independent according to the session window.

Does Cookie know? What are the fields?

On the arrow:

• Since HTTP is stateless, cookies are created to maintain state between server and client. Cookie is essentially a text fragment transmitted between the server and the client, which stores some status information of the client, facilitating the server to read and perform other operations.
• Name: indicates the key Name.
• Value: indicates the key Value.
• Domain: indicates the Domain name that can carry the key value pair. It starts with.It indicates that subdomain names can also be carried.
• Path: the file Path that can carry the key-value pair.
• Expires/ max-age: indicates the timestamp of the cookie expiration time. If the cookie Expires, it is automatically deleted.
• Size: indicates the cookie Size.
• HttpOnly: Disables JavaScript from reading and modifying cookies.
• Secure: Transfers are allowed only over HTTPS.
• SameSite: Disallows cookies in some requests. The value isNone Lax Strict. A value ofNone, any request can carry the cookie; A value ofLaxSome cross-site requests cannot send the cookie (onlya link GETRequest can be carried); A value ofStrict, all cross-site requests cannot send the cookie, only same-site requests are allowed. (The default is until Chrome 80NoneAfter version 80, the default value is changed toLaxWWDC 2020 also features a new version of SafariNoneChange toLax ）

Network security

Does XSS understand? How do I conduct an XSS attack?

• XSS (Cross-site scripting attack) : in untranslatedurlOr the user enters the attack script in the input field to execute the script to obtain cookies and open dangerous attack web pages.
• Prevention: All user input is untrusted,urlAnd the text content entered by the user must be translated to prevent the content called HTML from being parsed by the browser. Cookies can also be set to HttpOnly to prevent JavaScript from reading and writing cookies.

Does CSRF understand? How do I conduct a CSRF attack?

• CSRF (Cross-site request forgery) : In the website A without CSRF protection, it is induced to click on the third party attacking website B. There is A request sent to the server of website A in the third party attacking website B, which will be automatically sent when visiting website B. The request will automatically bring the cookie of website A and can impersonate the identity of website A. This creates a CSRF attack.
• Prevention: Add origin and referer to HTTP headers to verify the source of the request and block third-party requests; During user access, the server generates a random token, saves it in the server session, and sends the token to the client. Each request of the client needs to carry this token, and compares it with the token saved in the server session. If the token is valid and the comparison is successful, the token is authenticated as a valid request. Cookie SameSite property;

Principle of the framework

How does Vue implement bidirectional binding?

On the arrow:

• Object.defineproperty () overrides setter/getter of an Object, iterates through properties in the Object, and recursively overrides.

var data = {
  name: 'Jack Wang'.  age: 21.  salary: 3500.  array: ['Jack'.'should'.'fighting']
};  // Simulate rendering function render() {  console.log('render'); }  // Define an array method that needs to be overridden var method = ['push'.'pop'.'unshift'.'shift'.'reverse'.'sort'.'splice']; // Get the array prototype var arrayProto = Array.prototype; // Create a new prototype object var proto = Object.create(arrayProto); // Iterate over the array method that needs to be overridden method.forEach(function (method) {  // Modify the new prototype object  proto[method] = function () {  // Call the array prototype method  var res = arrayProto[method].call(this. arguments); render();  return res;  }; });  // Data hijacking/proxy methods function observe(obj) {  // Non-object type returns directly  if(! obj ||typeofobj ! = ='object') {  return;  }  // add the new prototype to its prototype chain  if (Array.isArray(obj)) {  obj.__proto__ = proto;  return;  }  // Iterate over the object key and pass it in  Object.keys(obj).forEach(function (key) {  defineReactive(obj, key, obj[key]);  }); }  // Set object properties function defineReactive(obj, key, value) {  // Recursive subattributes  observe(value);  Object.defineProperty(obj, key, {  / / rewrite the getter  get: function () {  console.log('get');  return value;  },  / / rewrite setter  set: function (newValue) {  console.log('set', newValue);  // Recursive subattributes  observe(newValue);  // Render occurs if the new value is not equal to the old value  if(newValue ! == value) { value = newValue;  render();  }  }  }); }  // Data hijacking/proxy observe(data); Copy the code

var data = {
  name: 'Jack Wang'.  age: 21.  salary: 3500.  array: ['Jack'.'will'.'be'.'the'.'best']
};  // Simulate rendering function render(params) {  console.log('render'); }  // Proxy logic var handler = {  get(target, key) {  console.log('get');  // If the value obtained is an object, it is recursive  if (typeof target[key] === 'object'&& target[key] ! = =null) {  return new Proxy(target[key], key);  }  return Reflect.get(target, key);  },  set(target, key, value) {  console.log('set', value);  // The length property of the object is returned  if (key === 'length') {  return;  }  Reflect.set(target, key, value);  render();  } };  // Data broker var proxy = new Proxy(data, handler); Copy the code

• Two-way binding: User-defined V-Model, set the sub-component Model property, set the value of the property monitored by V-Model, and bind the event executed when the property changes to achieve user-defined V-Model, that is, two-way binding.

What is the difference between computed and Watch in Vue?

On the arrow:

• Computed: Computes attributes. When a value is computed by multiple values in data, it can be computed and returned using computed data, and the result is cached. If the data value on which this value depends has not changed, the result of the cache will not be recalculated but returned directly. In principle, computed generates an inert Watcher object that is marked true when the data value it depends on changes, and when it is referenced, The value of dirty is used to determine whether the result is recalculated (true) or cached (false).
• Watch: Property listening, actions that are triggered automatically when the monitored property changes. In principle, when a Watch is created, it generates a Watcher object that triggers a callback when the monitored property changes.

Performance optimization

On the arrow:

• Look at my blog for this one. I’m a little lazy and don’t want to tidy it up.

Special thanks to

• Some of the content in this article is the answer that my friends and I discussed and learned together. Meanwhile, my friends also participated in the editing. I would like to thank them especially.
• We are a group of fresh graduates, because of the front end and a dream into dachang and meet each other, if you also want to join us, welcome to add my wechat, we study together, exchange, progress together! (My wechat official account has ~)

At the end of the article’s welfare

In addition to the basics, there are a lot of interview skills to pay attention to, which are listed on my official account: “Hello FE”.

There is a “Dachang Series” in the public account, which contains a lot of “Experience summary of Dachang interns”, “if you pay attention to it, you will be given a book collection of front-end books (really very complete)”, welcome everyone to follow, the qr code is placed below: