Front simulation interview more than 234.77 million words | brush questions punch

Nuggets team number online, help you Offer impromptu! Click for details

Source: making stars ✨ | o | give a ❤ ️ attention, ❤ ️ thumb up, ❤ ️ encourages the author

Front-end development engineer interview

Today, I invited two friends, the interviewer (xiao huang) and the interviewer (xiao da), to conduct the following front-end mock interview :(omitted here, directly to the interview question and answer process)

Xiao Huang: Tell me your understanding of HTTP and HTTPS

Da: Yeah, okay.

HTTP is a hypertext transfer protocol, is the most widely used network protocol on the Internet, is a client and server side request and response standard, used to transmit hypertext from the WWW server to the local browser transport protocol, it can make the browser more efficient, so that the network transmission is reduced. As for HTTPS, it is the HTTP channel aiming at security, which is the secure version of HTTP. SSL layer is added to HTTP, and THE security basis of HTTPS is SSL.

HTTP connection is very simple, is stateless, HTTP transmission data is not encrypted, that is, plaintext, Netscape set SSL protocol to encrypt HTTP transmission data, so HTTPS protocol is constructed by HTTP and SSL protocol can be encrypted transmission and identity authentication network protocol. This protocol is more secure than HTTP.

HTTPS requires a certificate and costs a lot. HTTP is a hypertext transmission protocol, and information is transmitted in plain text. HTTPS is a secure SSL encryption transmission protocol.

HTTPS can be used to authenticate users and servers to ensure that data is sent to the correct client and server. When the client uses HTTPS to communicate with the Web server, the client accesses the web server using an HTTPS URL and requires the Web server to establish an SSL link. After receiving the request from the client, the Web server returns or transmits the website certificate to the client. The client and the Web server then negotiate the security level of the SSL link, that is, the encryption level. The two sides agree on the security level to establish the session key, and then use the public key of the website to encrypt the session key and send it to the website. (The Web server decrypts the session key through its own private key, and encrypts the communication between the client and the session key.)

Recommend using HTTPS, compared to the equivalent HTTP site, using HTTPS encryption site in the search results will be higher ranking oh!

HTTPS handshake takes time, lengthening page loading time by 50% and increasing power consumption by 10% to 20%. HTTPS cache is not as efficient as HTTP, which increases data overhead. SSL certificates also cost money 💴. You cannot bind multiple domain names to the same IP address.

Huang: Well, ok, you mentioned the handshake phase, then you say TCP three handshake

Da: Yeah, okay

It’s like a phone call. Hey, do you hear me? I heard you! Did you hear me? Yeah, we can talk now

In scenario mode, the sender sends a packet with the SYN flag to the other end. After receiving the packet, the receiver sends a packet with the SYN/ACK flag to confirm the handshake. The sender sends another packet with the ACK flag to the other end.

Huang: Well, ok, speaking of TCP, tell me the difference between TCP and UDP

Da: Yeah, okay

TCP is connection-oriented, whereas UPD is connectionless. That is, a connection does not need to be established before sending data. TCP provides reliable service. Data transmitted over a TCP connection is error-free, not lost, not repeated, and arrives in sequence. UDP does its best to deliver, that is, reliable delivery is not guaranteed.

And because TCP is reliable, connection-oriented and does not lose data, it is suitable for the exchange of large amounts of data. UDP is packet-oriented. UDP does not have congestion control. Therefore, congestion on the network does not slow down the sending rate of the original host, resulting in packet loss, which is useful for real-time applications, such as IP telephony and video conferences

Each TCP connection can only be 1-to-1. UDP supports 1-to-1, 1-to-many, many-to-1, and many-to-many communication. TCP has a header overhead of 20 bytes, while UDP has only 8 bytes. TCP is connection-oriented for reliable transport, while UDP is unreliable.

Xiao Huang: Well, yes, so speaking of communication, talk about the implementation and application of WebSocket

Da: Yeah, okay

HTTP does not support persistent connections. Http1.0 and HTTP1.1 do not support persistent links. Keep-alive in http1.1 consolidates multiple HTTP requests into one. You don’t have to re-establish TCP connections.

WebSocket is based on HTTP, or borrows HTTP to do part of the handshake, and is the same in the handshake phase. The HTTP lifecycle is defined by a request, i.e., a Response. In HTTP1.0, the HTTP request is over.

Improved in HTTP1.1, there is a Connection :keep-alive field, which means that multiple requests can be sent and multiple responses received within an HTTP connection.

However, in HTTP, a request can only correspond to one response, and the response is passive rather than actively initiated.

Based on the implementation of a WebSocket handshake protocol, there are basically two attributes, Upgrade and Connection, the basic request has these two attributes, tell the server initiated webSocket protocol:

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: fsdgfdsfew34rfdfdfds==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
Copy the code

The similarity between Websocket and Http is based on TCP, both of which belong to the application layer protocol. When websocket establishes a handshake connection, data is transmitted through Http. However, after the connection is established, the real data transmission stage does not need Http.

The application scenarios of WebSocket include: real-time display of the number of online websites, multi-player online games, multimedia chat, such as chat rooms, account balance and other real-time updates.

Xiao Huang: Well, yes, speaking of HTTP requests, let’s talk about HTTP requests, head

Da: Well, ok, HTTP requests are:

• Get, requests the specified page information and returns the entity body
• Post requests the server to accept the specified document as the new subordinate entity to the identified URI
• A head is similar to a GET request, except that there is no concrete content in the response returned, and the user retrieves the header
• Options, which allows the client to view the server’s performance, such as the types of requests the server supports
• PUT: transfers files
• DELETE: deletes a file
• OPTIONS, asking for supported methods
• TRACE the path
• CONNECT, which requires the use of the tunnel protocol to CONNECT to the agent

The HEAD method is the same as GET, except that the server does not return the message body in the response. The HTTP header in response to a HEAD request should contain the same meta-information as the one sent in response to a GET request. This method can be used to obtain meta information about the entity implied by the request without transferring the entity body itself.

This method is commonly used to test hypertext links for validity, accessibility, and latest modifications.

The response to a HEAD request can be cacheable because the information contained in the response can be used to update a previously cached entity from that resource. If the new field value indicates that the cached entity is different from the current one (as indicated by a content-Length, Content-MD5, ETag, or last-Modified change), the cache must treat the cached entry as expired.

Xiao Huang: HMM, tell me some BOM attribute object methods

Da: Yeah, okay.

BOM is a browser object, so common attributes are:

Location object

Location. href, returns or sets the URL of the current document, and location.search, returns the query string part of the URL.

Location. hash, returns whatever comes after URL#, or null if no # is present. Location. host, which returns the domain name part of the URL, and location.hostname, which returns the main domain part of the URL.

Location. port returns the port part of the URL, location.protocol returns the protocol part of the URL, location.assign, Sets the URL of the current document.

• Location.replace (), sets the URL of the current document, and removes the URL location.replace(URL) from the address list of the history object;
• Location.reload () — Reload the current page

history.go()

• History.go (num);
• History.back () — Back one page
• History.forward () — forward one page

The Navigator object

• Navigator.useragent – returns a string representation of the userAgent header (that is, a string containing browser version information, etc.)
• Navigator.cookieenabled – Returns whether the browser supports (enables) cookies

Huang: Well, do you know http2.0? Can I talk about it?

Da: Well, ok, compared to HTTP, HTTPS is the HTTP protocol based on SSL encryption.

Http2.0 is the first update based on http1.0 released in 1999. Improved access speed, less time required to request resources, faster access, and allows multiplexing compared to HTTP1.0.

Multiplexing allows multiple request-response messages to be sent simultaneously over a single HTTP/2 connection. In HTTP1.1, browser clients have a limit on the number of requests for the same domain name at the same time (the number of connections) and will block if the limit is exceeded.

HTTP2.0 splits all transmitted information into smaller messages or frames (binary sub-frames) and binary encodes them to compress the server-side push

Huang, um, what status codes do you usually see in projects, other than 200?

Da: Well, ok, like 400,401,403 status codes.

The 400 status code indicates that the request is invalid because the field name and field type of the data submitted by the front-end are not consistent with the entity in the background. The data submitted by the front-end to the background should be a JSON string, but the front-end does not convert the object json.stringify into a string.

The solution is to consistently serialize the obj object through json.stringify against the field name

• 401 Status code: The current request requires user authentication
• 403 Status code: The server received the request, but refused to execute it

Huang: Well, speaking of status codes, how many can you name

Dash, uh, like:

100 Continue.

The client should continue with its request

101 Switching Protocols Switching protocol.

The server switches protocols based on client requests. You can only switch to a more advanced protocol, for example, the new version of HTTP

200 The OK request succeeded.

Typically used for GET and POST requests

201 Created Created.

The new resource was successfully requested and created

202 Accepted.

The request has been accepted, but processing is not complete

Our Authoritative Information is Authoritative.

The request succeeded. The meta information returned is not the original server, but a copy

204 No Content No Content.

The server processed successfully, but did not return content. You can ensure that the browser continues to display the current document without updating the web page

205 Reset Content Resets the Content.

The server is successful, and the user end (for example, browser) should reset the document view. Use this return code to clear the browser’s form field

206 Partial Content

The server successfully processed some of the GET requests

300 Multiple Choices.

The requested resource can include multiple locations, and a list of resource characteristics and addresses can be returned for user terminal (e.g., browser) selection

301 Moved Permanently Moved Permanently.

The requested resource has been permanently moved to the new URI, the return message will include the new URI, and the browser will automatically redirect to the new URI. Any future new requests should be replaced with a new URI

302 Found temporary movement.

Similar to 301. But resources are moved only temporarily. The client should continue to use the original URI

304 Not Modified.

The requested resource is not modified, and the server does not return any resources when it returns this status code. Clients typically cache accessed resources by providing a header indicating that the client wants to return only resources that have been modified after a specified date

305 Use Proxy Uses Proxy.

The requested resource must be accessed through a proxy

400 Bad Request

Client request syntax error, server cannot understand

401 Unauthorized

The request requires user authentication

402 Payment Required

Reserved for future use

403 Forbidden

The server understands the request from the requesting client, but refuses to execute the request

404 Not Found

The server could not find the resource (web page) based on the client’s request. With this code, a web designer can set up a personalized page that says “the resource you requested could not be found.

405 Method Not Allowed

The method in the client request is disabled

503 Service Unavailable

The server is temporarily unable to process client requests due to overloading or system maintenance. The length of the delay can be included in the server’s retry-after header

504 Gateway Time-out

The server acting as a gateway or proxy did not get the request from the remote server in time

505 HTTP Version not supported

The server did not support the HTTP version of the request and could not complete the processing

Xiao Huang: Well, ok, tell me about HTTP headers

Da: Yeah, okay.

Accept

The content-types of acceptable responses.

Accept-Charset

Acceptable character set

Accept-Encoding

The encoding of acceptable response content.

Accept-Language

List of acceptable response content languages.

Accept-Datetime

An acceptable time-dependent version of the response content

Authorization

Authentication information of the resource to be authenticated in HTTP

Cache-Control

Used to specify whether caching is used in the current request/reply.

Connection

The type of connection that the client (browser) wants to use preferentially

Cookie

An HTTP Cookie Set by the previous server via set-cookie

Content-Length

The length of the request body in base 8

Content-MD5

The binary MD5 hash value (digitally signed) of the content of the request body, the result encoded in Base64

Content-Type

MIME type of the request body (for POST and PUT requests)

Expect

Indicates that the client is asking the server to perform a specific behavior

From

The email address of the user who initiated this request

If-Modified-Since

304 unmodified is allowed if the corresponding resource has not been modified

If-None-Match

Allows 304 Not Modified to be returned if the corresponding content has Not been Modified, referring to hypertext Transfer protocol entity flags

If-Range

If the entity has not been modified, the missing one or more parts are returned. Otherwise, the entire new entity is returned

If-Unmodified-Since

A response is sent only if the entity has not been modified since a certain time.

Max-Forwards

Limits the number of times the message can be forwarded by the proxy and gateway.

Range

Represents a request for a portion of an entity, byte offset starting at 0.

User-Agent

The browser identity string

Upgrade

Requires that the server be upgraded to a higher version protocol.

Huang: HMM, ok, so talk about strong caching, negotiated caching

Da: Yeah, okay.

There are two types of caching: strong caching and negotiated caching, depending on the header content of the response

Strong cache

• Obtain resources in form from cache access
• Status code200 (from cache)
• Send a request to the server No, direct cache access

Negotiate the cache

• Obtain resources in form from cache access
• Status code304 (not modified)
• Sending a request to the server tells the server whether the cache is available

Strong cache fields include Expires and cache-Control. Cache-control takes precedence over Expires if both exist.

The negotiation cache fields are last-modified/if-modified-since, Etag/ if-none-match

Huang: Uh-huh, so speaking of the two caches, when do you use which one

Da: Well, HTTP strong caching and negotiated caching are recommended

Since the resource on the server is not fixed all the time, most of the time it is updated. If we access the local cache, then for the user, it is equivalent to the resource is not updated, and the user sees the old resource. Therefore, we want to request new resources when the browser updates the resources on the server, and use the local cache when there is no update to minimize the waste of resources caused by network requests.

Browser caches are divided into strong caches (also known as local caches) and negotiated caches (also known as weak caches)

Xiao Huang: HMM, ok, so talk about why fetch sends two requests

Da: Yeah, okay. When the FETCH sends a POST request, it always sends two times. The first time the status code is 204 and the second time is successful. The reason is simple, because when you use the FETCH’s POST request, the fetch sends an Options request the first time, asking the server if it supports the modified headers, and then sends the real request the second time if the server does.

Huang, ok, tell me the difference between Cookie, sessionStorage and localStorage

Da: Yeah, okay.

The content of cookies mainly includes: name, value, expiration time, path, and domain. The path and the domain together form the scope of the cookie. If the time is not set, it indicates that the lifetime of the cookie is during the browser session. When the browser window is closed, the cookie disappears. Cookies with a lifetime of a browser session are called session cookies.

Cookies only remain valid until the set cookie expiration time, even if the window or browser is closed. (Key: it is a callback process itself, and disappears after closing the browser. Session is a callback. If the page is different, even if the same page is opened twice, it is regarded as the same callback.)

Session cookies are generally stored in memory rather than hard disk, although this behavior is not regulated by the specification. If you set the expiration time, the browser saves cookies to hard disk, closes the browser and opens the browser again and these cookies remain valid until the expiration time is exceeded. For cookies stored in memory, different browsers have different session mechanisms. Speaking of cookies, let me also talk about sessions.

When the program needs to create a session for a client request, the server first checks whether the client request contains a session identifier (called the session ID). If it does, it indicates that a session has been created for the client before. If the client request does not contain the session ID, create a session for the client and generate a session ID associated with this session. The value of the session ID should be a string that is neither duplicated nor easily found to be faked. The session ID will be returned to the client for storage in this response. The session ID can be stored in a cookie so that the browser automatically sends the id to the server during the interaction.

SessionStorage: valid only before the current browser window closes and cannot be persistent

LocalStorage: always valid and saved when a window or browser is closed and therefore used as persistent data

LocalStorage: localStorage is shared in all origin Windows; Cookies are also shared across all the same origin Windows. (Key: Same-origin Windows will be shared and will not be invalid, regardless of whether the window or browser is closed or not.)

SessionStorage, localStorage, and cookies have in common: They are all stored in the browser and of the same origin

The difference is:

1. Cookie data is always carried in same-origin HTTP requests (even if it is not needed), i.e. cookies are passed back and forth between the browser and the server, while sessionStorage and localStorage do not automatically send data to the server, only localStorage. Cookie data also has the concept of path, which can restrict cookies to a specific path

2. The storage size limit is also different. Cookie data cannot exceed 4K. SessionStorage and localStorage, while also limited in size, are much larger than cookies, reaching 5M or more

3, different data validity period, sessionStorage: only valid before the current browser window closes; LocalStorage: always valid, saved even when the window or browser is closed and therefore used as persistent data; Cookie: Only valid before the set cookie expiration time, even if the window is closed or the browser is closed

4, different scope, sessionStorage is not shared in different browser Windows, even the same page; Localstorage is shared in all origin Windows; Cookies are also shared across all the same origin Windows

Save the user login status. For example, storing the user ID in a cookie so that the user does not need to log in again the next time they visit the page is a feature that is now available in many forums and communities.

Cookies can also set the expiration time, when the time limit is exceeded, the cookie will automatically disappear. As a result, the system can often prompt users for how long they want to keep their login status: common options are one month, three months, a year, and so on.

Track user behavior. A weather website, for example, can display local weather conditions based on the region selected by the user. If it is cumbersome to choose the location every time, it will appear very humanized after using cookies. The system can remember the area visited last time, and when opening the page next time, it will automatically display the weather situation in the area where the user was last time.

Because everything is done in the background, such pages are very easy to customize as if they were customized for a particular user. If the site provides the ability to change the skin or layout, you can use cookies to record the user’s options, such as background color, resolution, etc. When the user visits the interface next time, the interface style of the last visit can still be saved

Xiao Huang: HMM, you mentioned session just now, so let’s talk about the difference between cookie session

Da: Yeah, okay.

1. Cookie data is stored on the client’s browser and session data is stored on the server.

2. Cookies are not very secure, so someone can analyze cookies that are stored locally and do cookie spoofing and you should use sessions for security purposes.

3. Sessions are stored on the server for a certain amount of time. Cookies should be used to reduce server performance when the number of accesses increases.

4. A single cookie can hold no more than 4K of data, and many browsers limit the number of cookies a site can hold to 20.

Xiao Huang: HMM, tell me about your understanding of HTML semantic tags

Da: Yeah, okay. HTML5 semantic tags are the right tags that contain the right content, are well structured and easy to read. According to the structure of the content (semantic content), the selection of appropriate tags (semantic code) is convenient for developers to read and write more elegant code while allowing browser crawlers and machines to parse well. Semantization is more readable, and teams that follow the W3C standard follow it, reducing differentiation.

Xiao Huang: HMM, have you ever used ifram? Tell me its disadvantages

Da: Well, as used, the iframe element creates an inline frame that contains another document, and you can put the prompt text between the

Its disadvantages will block the onload event on the main page, search engines can not interpret this page, is not conducive to SEO; Iframe and the home page share the connection pool, and browsers have restrictions on the same area, which can affect performance.

Huang: Well, what about the Doctype function? How to distinguish strict mode from promiscuous mode? What do they mean?

Da: Yeah, okay. Doctype is declared at the beginning of the document and tells the browser how to render the page. There are two modes, strict mode and hybrid mode.

Strict mode, or standard mode, means that the browser parses code according to w3c standards (strict mode’s layout and JS mode run to the highest standards supported by the browser).

Promiscuous mode, also known as weird mode or compatibility mode, is when the browser parses the code in its own way (backward compatibility, mimicking older browsers in case they don’t work with pages).

Significance: If only strict mode, then many older sites must be affected; If there is only promiscuous mode, then each browser has its own parsing mode

HTML5 doesn’t have a DTD, so there’s no distinction between strict and promiscuous schemas, it has a relatively loose syntax, and it’s implemented with as much backward compatibility as possible

Xiao Huang: HMMM, how can cookies prevent XSS attacks

Da: Yeah, okay.

XSS (Cross-site scripting attacks) is when an attacker embeds javascript scripts in the returned HTML. To mitigate these attacks, HTTP headers need to be attached. (XSS attacks are pages that are injected with malicious code)

The set – cookies:

• Httponly – This property prevents XSS, which prevents javascript scripts from accessing cookies.
• Secure – This property tells the browser to send cookies only if the request is HTTPS.

XSS defense is the responsibility of the back-end RD (developer), which should escape sensitive characters on all interfaces where users submit data before proceeding to the next step.

All data to be inserted into the page is escaped by a sensitive character filtering function. After filtering out common sensitive characters, the data can be inserted into the page.

What are the injection methods of XSS?

In text embedded in HTML, malicious content is injected as script tags.

In inline JavaScript, concatenated data breaks through the original constraints (strings, variables, method names, etc.).

In tag attributes, malicious content includes quotes to override attribute values and inject other attributes or tags.

In the href, SRC and other attributes of the tag, it contains javascript: and other executable codes.

Inject uncontrolled code in events such as onload, onError, and onClick.

In the style attribute and tag, include something like background-image:url(“javascript:…”) ); (newer versions of browsers are already defensible).

In the style attribute and tag, contain something like expression(…) CSS expression code (newer versions of browsers are already defensible).

Prevention methods:

• The input filter
• Pure front-end rendering, separating code from data (preventing stored and reflective XSS attacks)
• Fully escape HTML (to prevent stored and reflective XSS attacks)
• Prevent JS from concatenating untrusted data in strings (prevent DOM type XSS attacks)
• Content Security Policy
• Input length control
• Http-only Cookie: Disables JavaScript from reading certain sensitive cookies. Attackers cannot steal these cookies after XSS injection.
• Verification code: Prevents scripts from posing as users to submit dangerous operations.

Huang: Well, tell me about viewport and mobile layout

Da: Yeah, okay. Mobile terminal layout (generally adaptive layout), mobile terminal adaptation:

A. Fluid layout + small amount of response

B. Rem-based layout

C. Elastic layout.

Responsive layouts are rarely used on mobile because they are too much work to maintain.

<meta name="viewport" content="width=device-width,initial-scale=1"###
Copy the code

In static web pages, pixel px is often used as a unit to describe the width, height and location information of an element. (On PC, it is generally believed that the true length represented by 1px in CSS is fixed.)

Font size 16px on PC is different from font size 16px on mobile.

Pixels are the basis of the layout of a web page. A pixel represents the smallest area that can be displayed on a computer screen. There are two types of pixels: CSS pixels and physical pixels.

Physical pixels, called device pixels, are related only to devices or hardware, and the higher the density of devices on a screen of the same size, the more physical pixels there are.

Here I want to talk about viewports. In a broad sense, viewports refer to the screen area where the browser displays content. In a narrow sense, viewports include layout viewports, visual viewports and ideal viewports.

Recommended: Comparison of common solutions for responsive layouts (media queries, percentages, REM and VW/VH)

<meta id="viewport" name="viewport" content="width=device-width; Initial - scale = 1.0; maximum-scale=1; user-scalable=no;" # # #Copy the code

Huang: Well, tell me about the addEventListener parameter

Da: Yeah, okay. addEventListener(event, function, useCapture)

• Event Specifies the event name
• Function specifies the function to execute when the event is fired
• UseCapture specifies whether the event is executed in the capture or bubble phase

Huang: Well, tell me about front-end optimization

Da: Yeah, okay.

Reduce request volume: merge resources, reduce HTTP requests, Minify/gzip compression, webP, lazyLoad. Speed up the request: pre-resolving DNS, reducing the number of domain names, parallel loading, CDN distribution.

Cache: HTTP protocol cache request, offline cache manifest, offline data cache localStorage.

Rendering: JS/CSS optimization, loading order, server-side rendering, pipeline.

Xiao Huang: Well, tell me the difference between GET and POST

Da: Yeah, okay.

First, different functions

1. Get gets data from the server.

2. Post sends data to the server.

Second, the process is different

1. Get is to add the parameter data queue to the URL indicated by the ACTION attribute of the submitted form. The value corresponds to each field in the form, which can be seen in the URL.

2. Post is the HTTP POST mechanism, which places each field in the form and its content in the HTML HEADER and sends it to the URL address indicated by the ACTION attribute. The user does not see this process.

Three, the acquisition value is different

1. For get, the server uses Request.QueryString to get the value of a variable.

2. In POST mode, the server uses request. Form to obtain submitted data.

4. Different amounts of data to be transmitted

1. The amount of data transmitted by get is small and cannot be larger than 2KB.

2. The amount of data sent by POST is large and is generally unrestricted by default.

Five, different security

1. Get has very low security.

2. Post has high security.

• The GET argument is passed through the URL, and the POST is placed in the request body.
• Get requests pass parameters in the URL with length limits, whereas POST does not.
• Get is less secure than POST because parameters are directly exposed in the URL and therefore cannot be used to pass sensitive information.
• Get requests can only be url encoded, while POST supports multiple encoding methods
• Get requests are actively cached by the browser, while POST supports multiple encodings.
• Get request parameters are retained in the browser history, while POST parameters are not.
• GET and POST are essentially TCP links and are no different. However, due to HTTP regulations and browser/server restrictions, they are applied differently.
• GET generates a TCP packet; POST generates two TCP packets.

What’s the difference between GET and POST?

Huang: Well, tell me the difference between 301 and 302

Da: Yeah, okay.

301 Moved Permanently

The requested resource has been permanently moved to the new location, and any future references to this resource should use one of the several URIs returned by this response. If possible, clients with link editing capabilities should automatically change the requested address to the one that is returned from the server. Unless otherwise specified, the response is also cacheable.

302 Found

The requested resource now temporarily responds to the request from a different URI. Since such redirects are temporary, the client should continue to send future requests to the original address. The response is cacheable only if specified in cache-Control or Expires.

The literal difference is that 301 is a permanent redirect and 302 is a temporary redirect. The common scenario of section 301 is domain name forwarding. 302 is used for temporary redirects such as unlogged users to the user center and redirects to the login page.

Huang: Well, tell me about HTTP support methods

Da: Yeah, okay. For example: GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, CONNECT

Xiao Huang: HMMM, then tell me how to draw a triangle

Da: Yeah, okay.

div { 
    width:0px; 
    height:0px; 
    border-top:10px solid red; 
    border-right:10px solid transparent; 
    border-bottom:10px solid transparent; 
    border-left:10px solid transparent; 
}
Copy the code

Huang: Well, tell me about the new elements of HTML5

Da: Yeah, okay.

• increasedHeader, footer, nav, aside sectionAnd other semantic tags
• On the form side, input has been added to enhance the formcolor, emial, data, rangeSuch as the type
• In terms of storage, providedSessionStorage and localStorage, and offline storage, which facilitates data storage and acquisition on the client
• The audio and video elements are specified in multimediaAudio and vedioAnd then there’s geolocation,canvasCanvas, drag and drop, multithreaded programmingWeb worker and websocketThe agreement.

Huang: Well, what happens when you type in a URL in the address bar and it shows up on this page?

Da: Yeah, okay.

DNS domain name resolution

Search for the real IP address based on the entered URL domain name. During the search, the browser first searches the cache to check whether there are records in the cache. The search records in the cache are as follows:

• Browser cache – operating system cache – Router cache;
• If no, check whether there are records in the hosts file of the system.
• If not, query the DNS server, first from the top-level domain name to the second-level domain name, and so on.

After entering the URL, you need to find the server IP address of the URL domain name. To find the IP address, the browser searches the cache to check whether there is a record in the cache. The cache search record is as follows: Browser cache – System cache – Router cache. If no record exists in the cache, check whether there is any record in the hosts file of the system. If no record exists, query the DNS server

2. Establish a TCP connection

According to the IP address, the client and the server shake hands three times to establish a connection.

In order to get the data to the target accurately, TCP uses the three-way handshake policy: after sending the data packet with TCP, TCP will not ignore the data after transmission, it must confirm to the other party whether the successful delivery

• The sender first sends a packet with the SYN flag to the receiver.

• After receiving the packet, the receiver sends back a packet with the SYN/ACK flag to indicate correct communication and confirm the information.

• Finally, the sender sends back a packet with an ACK flag, indicating the end of the handshake.

After obtaining the IP address of the server, the browser constructs an HTTP request according to the IP address and the corresponding port number. The request message contains the information of the request, mainly the request method, request description and data attached to the request, and encapsulates the HTTP request in a TCP packet. The TCP packet passes through the transport layer, the network layer, the data link layer, and the physical layer to the server, which parses the request in response, returning the corresponding HTML to the browser

Data transmission

After the connection, the client sends an HTTP request to the server. After receiving the request, the server returns a request for static resources and invokes the Apache server to request interface data.

4. Close the TCP connection

After the data transfer is complete, the client and server wave four times to close the connection.

Four waves are required to disconnect a TCP connection:

• First wave: Initiative to shut down the sender a FIN, used to close the active party to passive closing data transfer, namely close party told passive close party actively, take the initiative to close the party has not to send data passive close again (of course, in the FIN bag before sending out data, if have not received the corresponding ACK confirmation message, The active close party will still resend the data), however, the active close party can still receive the data.

• Second wave: After receiving a FIN packet, the passive closing party sends an ACK with the received sequence number +1 (the same as SYN, one FIN occupies one sequence number).

• Third wave: the passive closing party sends a FIN to close the data transmission from the passive closing party to the active closing party, which tells the active closing party that the data from the passive closing party has been sent and no more data will be sent to the active closing party.

• Fourth wave: After receiving the FIN, the active closing party sends an ACK to the passive closing party, confirming that the serial number is +1. Thus, the four-way handshake is completed.

Render the page

For static resources returned by the browser from the server, the browser uses a Native GUI engine to render HTML and CSS. Load JS using the JS engine.

Because HTML is a tree structure, the browser builds the DOM tree based on this HTML. During the DOM tree construction process, if it encounters JS scripts and external JS connections, it will stop building the DOM tree to execute and download the corresponding code, which will cause blocking. This is why it is recommended that JS code be placed after HTML code, followed by external styles, internal styles,

Build a CSS object model tree (CSSOM), and merge it with the DOM tree into a rendering tree. The main thing to do here is to exclude non-visual nodes, such as script, meta tags and exclude nodes with display none, and then layout. Layout is mainly to determine the location and size of each element, followed by rendering the page, because HTML files will contain images, videos, audio and other resources, in the process of DOM parsing, encounter these will be parallel downloads, browsers have a certain limit on the number of parallel downloads in each domain, generally 4-6. Of course one of the things we need to look at in all of these requests is caching

• Parsing HTML nodes into A DOM tree structure

If you encounter JS scripts and external JS connections during the DOM tree building process, you will stop building the DOM tree to execute and download the corresponding code, which can cause blocks, which is why it is recommended that JS code be placed after HTML code.

Bytes =### Characters =### Tokens =### Nodes =### DOM

Computers can only recognize 0 and 1 bytes, convert bytes into strings according to the byte encoding rules, and then convert strings into tags defined by W3C to generate tokens that match strings. Convert tokens into nodes containing attributes and rules according to rules, and convert them into an intuitive tree structure based on the hierarchical relationships (parent-child node relationships) and rules of each node. HTML is built incrementally, and the transformation process begins while the HTML file is still in transfer. The final result is the complete DOM(Document Object Module Document Object Model)

• Parse CSS into a CSSOM rule tree

The main thing to do here is to exclude non-visual nodes such as script, meta tags and nodes with display none; With Render Tree, browsers already know what nodes are in a web page, their CSS definitions, and their dependencies

The process of building CSS is similar to DOM, except that CSS involves complex calculations, such as the source of CSS properties, matching different classes (ID or class), confirming copying rules and weights, and finally determining the style values of each node. Form the CSS Object Module (CSS Object Model).

• Combine DOM and CSSOM into a Render tree

• Layout: Calculates the position of each node in the screen

• Draw: That is, walk through the Render tree and draw each node using the UI back-end layer

Load the JavaScript script

Although HTML\CSS and JS are loaded by different engines, they are mutually exclusive, i.e. when HTML\CSS is loaded, JS will stop loading, and vice versa, because the JS engine can manipulate the DOM, changing styles, content, etc. So when JS is executed, the render tree is rebuilt.

The Cache is controlled by header fields such as cache-Control, last-modify, and Expires. The difference between cache-Control and Expires is that cache-Control uses relative time, whereas Expires uses absolute time on the server. Because of time differences, cache-control is usually used. If not, the local cache is used directly. If the file is expired, the request is made and the server verifies whether the file has been modified. If the ETag value was set in the last response, the request will be sent to the server as if-none-match. If they are consistent, last-Modified is verified. If ETag is not set, last-Modified is verified directly, and then 304 is returned.

In a nutshell:

The DNS

A TCP connection

Sending an HTTP request

The server processes the request and returns HTTP packets

The browser parses the rendered page

Connect the end of the

Huang: Well, tell me what the values of cache-control are

Da: Yeah, okay.

Cache-control is a generic header field used in HTTP requests and responses. The cache mechanism is implemented by specifying directives. This cache directive is one-way, and the common values include private, no-cache, max-age, and must-revalidate. The default is private.

Huang: Well, what two trees do browsers generate when they generate pages?

Da: Yeah, okay.

Construct two trees, DOM tree and CSSOM rule tree. When the browser receives the corresponding HTML document from the server, it will traverse the document node to generate DOM tree. CSSOM rule tree is generated by the browser parsing CSS file.

Small huang: hm en, that you CSS3 use much? Know what their new properties are?

Xiao Da: HMM, it’s ok.

CSS 3 borders:

Border-radius: CSS3 rounded border.

Adding rounded rectangles in CSS2 was tricky, we had to use a different image for each rounded corner, in CSS3 it was very easy to create rounded corners, in CSS3 the border-radius property was used to create rounded corners. Border: 2 px solid;

Box-shadow: indicates the shadow of the CSS3 border. In CSS3, box-shadow is used to add a shadow to a box.

box-shadow:10px 10px 5px #888888;
Copy the code

Border-image: indicates the image of the CSS3 border.

With CSS3’s border-image property, you can create borders using images. Border-image: url(border-.png) 30 30 round;

Background-size: Property specifies the size of the background image. Before CSS3, the size of the background image was determined by the actual size of the image. In CSS3, you can specify the size of the background image, which allows you to reuse the background image in different environments. You can specify dimensions in pixels or percentages. If the size is specified as a percentage, the width and height of the size relative to the parent element.

Background-origin: Property specifies the location area of the background image. Background images can be placed in the Content-box, padding-box, or border-box areas.

Text-shadow: In CSS3, text-shadow applies a shadow to text. text-shadow:5px 5px 5px #FFFFFF;

Word-wrap: words that are too long may not be able to extend beyond a certain area, allowing long words to be split and wrapped to the next line: p{word-wrap:break-word; }

Transform: With CSS3 transformations, we can move, scale, rotate, stretch, or stretch elements.

CSS3 3D conversion:

RotateX () : The element is rotated around its X-axis by a given degree. The transform: rotateX (120 deg);

RotateY () : The element rotates about its Y-axis in a given degree. The transform: rotateY (120 deg);

Huang: Well, tell me about the CSS box model

Da: Yeah, okay.

The box model in CSS includes IE box model and standard W3C box model

As you can see from the figure above, the scope of the standard W3C box model includes margin, border, padding, and content, and the Content section does not contain the rest.As you can see from the figure above, the scope of the IE box model also includes margin, border, padding, and content. Unlike the standard W3C box model, the content part of the IE box model includes border and padding.

Xiao Huang: Well, tell me the difference between the link tag and the import tag

Da: Yeah, okay.

• Link is an HTML tag, while @import is provided by CSS
• When the page is loaded, link is loaded at the same time, and the CSS referenced by @import is loaded after the page is loaded.
• Link is an HTML tag, so it is not compatible, while @import is only recognized above IE5.
• Link style has a higher weight than @import.

Huang: Well, tell me about Flex layout

Da: Yeah, okay.

Learn front-end Flex layout – seven days punching

The traditional solution to layout, based on the box model, relies on the display property + position property + float property.

Container properties:

Flex - direction: the direction of the spindle (i.e., the son of item arrangement method). The box {flex - direction: row | row - reverse | column | column - reverse; } the flex - wrap: decided to break rules. Box {flex - wrap: nowrap | wrap | wrap - reverse; } the flex - flow: box {flex - flow: < flex - direction# # # | | < flex - wrap# # #; } context-content: specifies the order in which items are sequentially aligned. The smaller the order, the higher the order. Default is 0. If the flow-shrink value of an item is set to 0, the Flex-basis property is not reduced: Defines the amount of space that an item occupies in allocating excess space. Flex: short for flex-grow, flex-shrink, and flex-basis. The default value is 0. 1 Auto. Align-self: Allows a single item to be aligned differently from other items. It is possible to override align-items, with default ownership being auto, which means inheriting the align-items of the parent element. For example, using Flex for the Holy Grail layoutCopy the code

Huang: Well, tell me about BFC

Da: Yeah, okay. BFC block-level formatting context, used to clear floats, prevent margin overlap, etc

The block-level formatting context is a separate rendering area with certain layout rules.

• BFCThe region does not overlap the float box
• BFCIs a separate container on the page, child elements do not affect the outside
• When calculating the height of the BFC, floating elements are also involved in the calculation

Those elements will generate the BFC

How do I create a BFC

1. Float is not none

2. Position is not static or relative

3, display is inline-block, table-cell, flex, table-caption or inline-flex

Overflow is not visible

<! DOCTYPE html### <html lang="en"### <head### <meta charset="UTF-8"### <meta name="viewport" content="width=device-width, Initial scale=1.0"### <meta http-equiv=" x-ua-compatible "content="ie=edge"### <title### <style### *{ margin: 0; padding: 0; } p { color: #f55; background: yellow; width: 200px; line-height: 100px; text-align:center; margin: 30px; } < / style# < < p# body# # # # # # # and see how much is the margin I < / < p# p# # # # # and see how much my margin is < / p# # # # # < / body# < / html# # #Copy the code

<! DOCTYPE html### <html lang="en"### <head### <meta charset="UTF-8"### <meta name="viewport" content="width=device-width, Initial scale=1.0"### <meta http-equiv=" x-ua-compatible "content="ie=edge"### <title### <style### *{ margin: 0; padding: 0; } p { color: #f55; background: yellow; width: 200px; line-height: 100px; text-align:center; margin: 30px; } div{ overflow: hidden; } < / style# < < p# body# # # # # # # and see how much my margin is < / p# < div # # # # # # # < p# look at how much my margin is < / p# # # < / div # # # # # < / body# < / html# # #Copy the code

Huang: Well, tell me about vertical centralization

Da: Yeah, okay.

Display :flex,align-items:center;

Margin-top: – (height /2)

Transform: translateY (-50%)

Parent element table layout, child element vertical-align:center;

div { width: 400px; height: 400px; position: relative; border: 1px solid #465468; } img { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } < div # # # < img SRC = "mm. JPG" # # # < / div # # # using flex display: flex. align-items:center; justify-content:center;Copy the code

Huang: Well, tell me about block elements and row elements

Da: Yeah, okay.

• Block element: exclusive row, with auto-fill parent element, can be setMargin and paddingAnd height and width
• Row elements: Do not monopolize a row,Width and heightWill be invalidated, and will be invalidated on vertical padding and margin.

Huang: Well, tell me about the position property

Da: Yeah, okay.

Fixed positioning:

The position of the element is fixed relative to the browser window, and it does not move even if the window is scrolling. Fixed positioning makes the position of the element independent of the document flow and therefore does not take up space. Fixed positioned elements overlap with other elements.

Relative position:

If an element is positioned relative to it, it will appear at its location. The element can then be moved “relative” to its starting point by setting its vertical or horizontal position. When relative positioning is used, the element still occupies the original space, whether or not it is moved. Therefore, moving an element causes it to overwrite other boxes.

Absolute:

The position of an absolutely positioned element is relative to the nearest positioned parent, or if the element has no positioned parent, its position is relative to

Sticky positioning:

The element is positioned according to the normal document flow and then relative to the element’s flow root (BFC) and containing block (the nearest block-level ancestor element) in the flow. Element positioning is then represented by relative positioning before crossing a specific threshold, followed by fixed positioning.

Default location Static: the default value.

Without positioning, the element appears in the normal stream (ignoring the top, bottom, left, right or Z-index sound).

Inherit: Specifies that the value of the position property should be inherited from the parent element

Huang: HMMM, then you say clear float

Da: Yeah, okay.

Method 1: Use an empty element with the clear attribute

Float the element with an empty element such as

Method 2: Use the OVERFLOW property of CSS

Add overflow: Hidden to the container of floating elements; Or overflow: auto; You can clear floats, and in IE6 you also need to trigger hasLayout, such as setting the container width or zoom:1 for the parent element. After the overflow property is added, the float element goes back to the container layer and pushes up the container height to clean up the float.

Method 3: Do nothing with adjacent elements and add the clear attribute to the element after the float element.

Method 4: Use CSS :after pseudo-elements

A combination of: After pseudo-elements (note that this is not a pseudo-class, but a pseudo-element that represents the nearest element after an element) and IEhack, which is used to trigger hasLayout, is perfectly compatible with all major browsers. Add a ClearFix class to the container of floating elements, and then add one to the class :after pseudo-element implementation adds an invisible Block element to the end of the element to clean up the float.

Recommended: CSS Tip (1) : Clear the float

Huang: Well, tell me what CSS selectors are and their priorities

Da: Yeah, okay.

• Id selector,Class selector, tag selector, pseudo-element selector, pseudo-class selectorEtc.
• The priorities are as follows:Id selector ### class selector ### tag selector
• with! importantThe style attribute of the tag has the highest priority
• The priorities are as follows:Inline styles ### Internal styles ## External styles ## Browser user defined styles ### browser default styles

Huang: Well, how do you make an element disappear

Da: Yeah, okay. You can use:

display:none; 
visibility:hidden; 
opacity: 0;
Copy the code

Xiao Huang: Well, tell me about the overflow treatment in CSS3

Da: Yeah, okay.

• text-overflowProperty, the value of clip is the clipped text;
• ellipsisTable clipped text for display ellipsis;
• stringTo use the given string to represent the trimmed text.

Xiao Huang: HMM, could you tell me the location method of Z-index

Da: Yeah, okay. The z-index attribute sets the stack order of the elements. The elements in a better stack order are placed before the elements in a lower order. The Z-index can be negative, and the Z-index can only work on positioned elements. Its property values are auto, default, stack order equal to the parent element, number, inherit, inherit from the parent element’s z-index property values

Xiao Huang: Well, tell me about redrawing and rearranging

Da: Yeah, okay.

• Redrawing does not necessarily require rearrangement; rearrangement inevitably leads to redrawing
• Rearrangement: As part of the render tree must be updated and the size of the node has changed, the browser will disable rendering affected part of the tree, and to reconstruct the render tree (when the DOM element changes caused the change of the geometric properties, such as wide high change of element, the position of the element, causes the browser to calculate element geometric properties, and rebuild the render tree, This process is called rearrangement.)
• Redraw: The behavior of the browser triggered when the appearance of an element is changed. The browser redraws the element based on its new properties and gives the element a new appearance. (After rearranging, the reconstructed render tree is rendered to the screen. This process is called redraw.)
• DOM tree: Represents the structure of the page
• Render tree: How are nodes representing pages displayed
• Once the render tree is built, it’s time to paint the page elements

The fundamental principle behind rearrangement is that the geometry of an element has changed

• Add or remove visible DOM elements
• Element position change
• The size of the element itself changes
• Content change
• The page renderer is initialized
• The browser window size changed. Procedure

Xiao Huang: Well, say box-sizing

Da: Yeah, okay. Box-sizing: content-box/border-box/inherit

Example specifies two side-by-side framed boxes:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
Copy the code

• content-box: Width and height are applied to the element’s content box, respectively, drawing the inside margin and border of the element outside the width and height
• border-box: The width and height you set for an element determines its border box
• inherit: inherits the parent elementbox-sizing

Xiao Huang: Well, tell me the difference between get and POST requests in terms of caching

Da: Yeah, okay.

• Get requests are similar to lookups in that the user retrieves data without having to connect to the database every time, so caching can be used.
• Unlike Post, which generally does modification and deletion, it must interact with the database, so it cannot use caching. Therefore, GET requests are suitable for request caching.

Xiao Huang: HMMM, then you say a sentence to summarize the closure

Da: Yeah, okay. A closure is a function that can read variables inside other functions, or a child function that is called outside the scope of its parent function.

Huang: Well, tell me about class creation and inheritance

Da: Yeah, okay.

Class creation (es5) : New a function, add properties and methods to the prototype of this function.

Create an Animal class:

/ / define a Animal function Animal (name) {/ / attribute this. Name = name | | 'Animal'; This.sleep = function(){console.log(this.name + 'sleeping! '); } // animal.prototype. eat = function(food) {console.log(this.name + 'eating:' + food); };Copy the code

So that creates an Animal class, instantiated as an object, with methods and properties.

Class inheritance — Stereotype chain inheritance — Stereotype chain inheritance

function Cat(){ } 
Cat.prototype = new Animal(); 
Cat.prototype.name = 'cat'; 

// Test Code 
var cat = new Cat(); 
console.log(cat.name); 
console.log(cat.eat('fish')); 
console.log(cat.sleep()); 

console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true
Copy the code

• Features: Based on the prototype chain, it is both an instance of a parent class and an instance of a subclass
• Disadvantages: Cannot implement multiple inheritance

Constructor inheritance: Using a parent class’s constructor to enhance a child class instance is equivalent to copying the parent class’s instance properties to the child class (without using the stereotype).

function Cat(name){ 
Animal.call(this); 
this.name = name || 'Jeskson'; 
}

// Test Code 
var cat = new Cat(); 
console.log(cat.name); 
console.log(cat.sleep()); 

console.log(cat instanceof Animal); // false 
console.log(cat instanceof Cat); // true 
Copy the code

• Features: Can achieve multiple inheritance
• Disadvantages: Can only inherit the attributes and methods of the parent instance, not the attributes and methods of the prototype

Combinatorial inheritance: equivalent to the combination of construction inheritance and prototype chain inheritance.

function Cat(name){ 
Animal.call(this); 
this.name = name || 'Tom'; 
}

Cat.prototype = new Animal(); 
Cat.prototype.constructor = Cat; 

// Test Code 
var cat = new Cat(); 
console.log(cat.name); 
console.log(cat.sleep()); 
console.log(cat instanceof Animal); // true 
console.log(cat instanceof Cat); // true
Copy the code

• Features: You can inherit instance properties/methods as well as stereotype properties/methods
• Disadvantages: Called the superclass constructor twice, generating two instances

Parasitic combinatorial inheritance:

Example:

function Cat(name){ Animal.call(this); this.name = name || 'Jeskson'; } (function(){var Super = function(){}; Super.prototype = Animal.prototype; Cat.prototype = new Super(); }) (); // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); // true console.log(cat instanceof Cat); //trueCopy the code

Xiao Huang: Well, how do you make the event bubble first and then capture

Da: Yeah, okay.

In the DOM standard event model, capture is followed by bubble. However, if you want to achieve the effect of bubbling first and then capturing, for the same event, listen to capture and bubbling, corresponding to the corresponding handler function, listen to capture event, first suspend execution, until the bubbling event is captured and then execute capture event.

Xiao Huang: Well, tell me about event delegation

Da: Yeah, okay.

Event delegate means that the listener function is not set on the event occurrence place, but on the parent element. Through event bubble, the parent element can listen to the event occurrence on the child element, and make different responses by judging the DOM type of the event occurrence element.

For example: the most classic is ul and LI tag event monitoring, for example, when we add events, we use the event delegation mechanism, not directly added to the LI tag, but added to the UL parent element. Benefits: Suitable for binding dynamic elements, new child elements can also have listener functions, can also have event triggering mechanism.

Xiao Huang: Well, what about lazy loading and preloading of images

Da: Yeah, okay.

• Preloading: Images are loaded ahead of time and rendered directly from the local cache when the user needs to view them.
• Lazy loading: The main purpose of lazy loading is to serve as a front-end optimization for the server, reducing the number of requests or delayed requests.

The nature of the two technologies:

The behavior of the two is opposite, one is early loading, one is slow or not loading. Lazy loading relieves the pressure on the front end of the server, while preloading increases it.

Xiao Huang: Well, tell me the difference between a mouseover and a mouseEnter

Da: Yeah, okay.

• Mouseover: Events are triggered when the mouse moves over an element or its child, so there is a repetitive, bubbling process. The corresponding remove event is mouseout

• Mouseenter: When the mouse removes the element itself (any child element that does not contain the element), it triggers an event that does not bubble. The corresponding remove event is mouseleave

Huang: Well, tell me what the new operator of JS does

Da: Yeah, okay.

The new operator creates an empty object that points to the constructor’s prototype and returns the object after the constructor is executed

Xiao Huang: HMM, then you talk about the implementation of JS drag function

Da: Yeah, okay.

The first three events are mousedown, Mousemove, and Mouseup

When the mouse is clicked down, you need a tag to indicate that the mouse has been clicked down. You can perform the specific methods in mousemove. ClientX, clientY identifies the coordinates of the mouse, abscis and ordinate respectively, and we use offsetX and offsetY to represent the initial coordinates of the elements of the element

An example of movement would be: the coordinates of mouse movement – the coordinates of mouse down.

That is, the positioning information is: the coordinate when the mouse is moved – the coordinate when the mouse is down + the initial offetLeft element. There is another thing that is also rational, that is, drag and drop is absolute positioning at the same time. What we change is the equivalence of left and top under absolute positioning condition.

Huang: HMMM, then you talk about JS throttling and anti – shake

Da: Yeah, okay.

Image stabilization

If (this.timer){// Clear clearTimeout(this.timer) this.timer=null} // Set timer and event  this.timer=setTimeout(()=>{ // do something },500) }Copy the code

The throttle

Test (){let that=this if(thate.stopClicklogin){console.log(' please wait 1s and click >>>>>>>>> 'again) return false} that.stopClickLogin=true setTimeout(()=>{ that.stopClickLogin=false },1000) console.log(`do something >>>>>>>>>`) }Copy the code

• Search box input events, for example, to support input real-time search, you can use throttling scheme (interval of a period of time must query the relevant content), or achieve input interval greater than a certain value (such as 500ms), as the user input is completed, and then start the search, the specific use of which scheme depends on business requirements.
• The page resize event is usually used when page adaptation is needed. Dom rendering is required based on the final rendering of the page (this is usually done using anti-shake, since only the last change is needed)

Function image stabilization

Function of the throttle

Xiao Huang: Well, then you implement a once function, passing in the function argument and executing it only once

Da: Yeah, okay.

function ones(func){ 
    var tag=true; 
    return function(){ 
        if(tag==true){ 
            func.apply(null,arguments); 
            tag=false; 
        }
        return undefined 
    }
}
Copy the code

Xiao Huang: Well, tell me== and ===, and object.isThe difference between

Da: Yeah, okay.

(1) == cast to number,null==undefined

" "==0 //true "0"==0 //true " " ! ="0" //true 123=="123" //true null==undefined //trueCopy the code

(2) The main difference of object.js is that +0! =-0 and NaN==NaN (improvements over === and ==)

Xiao Huang: Well, then you implement a bind function

Da: Yeah, okay.

Function.prototype.bind=function(obj,arg){ var arg=Array.prototype.slice.call(arguments,1); var context=this; return function(newArg){ arg=arg.concat(Array.prototype.slice.call(newArg)); return context.apply(obj,arg); } } Function.prototype.bind=function(obj,arg){ var arg=Array.prototype.slice.call(arguments,1); var context=this; var bound=function(newArg){ arg=arg.concat(Array.prototype.slice.call(newArg)); return context.apply(obj,arg); } var F=function(){} var F=function(){} bound.prototype=new F(); return bound; }Copy the code

Xiao Huang: HMMM, how to array de-weight

Da: Yeah, okay.

1: indexOf loops for deweighting

Two: ES6 Set to weight; Array.from(new Set(array))

3. Object key value pairs are deduplicated. Object[value1] = true. If Object[value2] is present in another value, the value is duplicate.

Huang: Well, how do you determine an array

Da: Yeah, okay.

• Object.prototype.call.toString()
• instanceof

Xiao Huang: HMM, talk about JS basic data types

Da: Yeah, okay. Basic data types: undefined, NULL, number, Boolean, string, symbol

Huang: HMM, talk about cross-domain

Da: Yeah, okay.

Cross-domain means that the browser cannot execute scripts from other sites. It is caused by the same origin policy of the browser, a security restriction imposed by the browser on JavaScript, so that any difference in protocol, domain name, or port is treated as a different domain. The cross-domain principle is to circumvent browser security restrictions in various ways.

Xiao Huang: HMMM, what is load on demand

Da: Yeah, okay. The corresponding function is loaded only when the user triggers the action. The triggered action depends on the specific service scenario, including but not limited to the following: mouse click, text input, scroll bar pull, mouse movement, window size change, etc. Loaded files can be JS, images, CSS, HTML, etc.

Huang: HMM, tell me about some of the ways inheritance is implemented in JS

Da: Yeah, okay.

1. Prototype chain inheritance

2. Structural inheritance

3. Instance inheritance

Copy inheritance

5. Combinatorial inheritance

6. Parasitic combination inheritance

Xiao Huang: HMM, tell me about the life cycle of Vue

Da: Yeah, okay.

A Vue instance has a complete life cycle, that is, from the beginning of creation, initialization of data, template compilation, Dom mounting, render, update, render, destruction, etc., we call this the life cycle of a Vue. In layman’s terms, it is the lifecycle of a Vue instance from creation to destruction.

Each component or instance goes through a complete life cycle consisting of three phases: initialization, running, and destruction.

The beforeCreate hook function is used to initialize the events and life cycles for the new Vue() instance and component. The new Vue() hook function is used to initialize the events and life cycles for the new component

Mount data, bind events, etc., and then execute the created function, which already uses the data and can also change the data. The updated function does not fire when changing the data. The penultimate opportunity to change the data before rendering does not fire other hook functions. This is generally where you can get the initial data

Start looking for the instance or component’s template, compile the template for the virtual DOM and put it into the render function for rendering, then execute beforeMount hook function, where the virtual DOM is created and will be rendered immediately, you can also change the data here, Updated is not triggered. It is the last chance to change data before rendering. Other hook functions are not triggered

Then render the real DOM, and execute the Mounted hook function. At this point, the component is displayed on the page, the data and the real DOM are handled, and the events are mounted, and you can manipulate the real DOM and so on

BeforeUpdate is performed immediately after a component or instance’s data changes. Vue’s virtual DOM mechanism then reconstructs the virtual DOM with the last virtual DOM tree using the diff algorithm and rerenders it

When the update is complete, the updated data is complete and the DOM is re-render. You can operate the updated virtual DOM

Immediately after calling the $destroy method through some way, execute beforeDestroy, where you typically do some cleanup, such as clearing timers, clearing non-instruction-bound events, and so on

Component data binding, listening… You will also need to implement destroyed and clean up after removing the DOM shell

Huang: HMM, tell me about the actions that are affected by browser blocking

Da: Yeah, okay. Script will block DOM tree parsing, rendering, and delay the DOMContentLoaded event during execution.

Xiao Huang: HMMM, tell me about the file upload, what did you do before and after

Da: Yeah, okay.

• Verify file type and suffix for security
• Compress the image
• Large file splitting upload requests are supported
• Support breakpoint continuation
• Support to display upload progress and pause upload

Xiao Huang: HMM, tell me about the implementation of the V-Model in Vue

Da: Yeah, okay.

<template>
 <input type="text" :value="inputValue" @change="handleInputChange"/>
</template>
export default {
 methods: {
  handleInputChange(e) {
   this.inputValue = e.target.value;
  },
 }
}
Vue.component('child',{
 template: `<span>1024bibi.com</span>`,
 model: {
  prop: 'checked',
  event: 'change',
 },
 props: {
  checked: Boolean
 }
})
<child v-model="status" @change="handleChange"></child>
Copy the code

Xiao Huang: HMMM, what is event monitoring

Da: Yeah, okay.

The addEventListener() method is used to add event handlers to the specified element. This method makes it easier to control events. The syntax is element.addeventListener (event, function, useCapture).

The first argument is the type of the event (such as “click” or “mousedown”)

The second argument is the function called after the event is triggered.

The third parameter is a Boolean value that describes whether the event is bubbling or being captured. This parameter is optional. There are two ways to pass events, bubbling and capturing

Event passing defines the order in which element events fire, so if you insert P elements into div elements, the user clicks on P elements, and in the bubble, the inner elements fire first, then the outer elements fire, and in capture, the outer elements fire first, then the inner elements fire.

Huang: Well, tell me about promise

Da: Yeah, okay. A Promise is an object that holds events that will end in the future

The Promise object represents an asynchronous operation, with three states. During pending, this state can be determined only by the result of asynchronous operation, which is fulfilled successfully and rejected fails. No other operation can change this state. That’s where the name promise came from

Once the state changes, it will not change again. There are only two possibilities for the state of the Promise object to change from pending to depressing or from pending to Rejected. As long as these two situations happen, the state will be frozen and will not change again. This is called stable resolved

Basic uses of Promise:

let promise1 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve('ok')
},1000)
})
promise1.then(function success(val){
console.log(val)
})
Copy the code

Huang: HMMM, talk about the JS prototype chain. What’s the top of the prototype chain? What is the prototype of Object? What is the prototype of Object? The method of deleting duplicate data in array prototype chain is realized

Da: Yeah, okay.

The prototype object has a constructor property that points to the constructor. The prototype object has a constructor property that points to the constructor. Each instance will have a _proto_ attribute that points to the Prototype object. We can call this an implicit prototype. when using an instance’s method, we will check whether the prototype object has a method or not

Each function has a Prototype property that points to an object that is the prototype of the instance created by calling the function

So what is a stereotype, that every JavaScript object, when it’s created, premanages another object, which is what we call a stereotype, and every object inherits properties from that stereotype

So how do you represent the relationship between an instance and an instance prototype

_proto_ This is a property that every JS object has, pointing to the prototype of the object

Since both the instance object and the constructor can point to the stereotype, does the stereotype have properties pointing to the constructor or to the instance? Pointing to the instance is not possible because a constructor can generate multiple instances, but the stereotype has properties pointing directly to the constructor via constructor

Relationship between instance and prototype:

When reading an instance property, if it can’t find it, it looks for the property in the prototype associated with the object. If it still can’t find it, it looks for the prototype, all the way to the top. So what is the prototype

First, a prototype is also an Object, and since it is an Object, we can create it as a constructor, so the prototype Object is generated by the Object constructor

As shown in figure:

We can print console.log(Object.prototype.__proto__ === null) and return true

Null means there is no Object, that is, there should be no value, so Object.prototype has no prototype

Example:

Constructor: function Person(){} var Person = new Person(); console.log(Person === person.constructor);Copy the code

The constructor property is not originally present in Person, and when the constructor property cannot be read, it is read from the original type of Person, so point to the constructor person

__proto__ :

Most browsers support this nonstandard method of accessing prototypes, but it doesn’t exist in Person.prototype. It actually comes from Object.prototype, and when using obj.__proto__, Return object.getPrototype (obj)

Inheritance:

Each object inherits properties from the stereotype

Inheritance means copying operations, but JS does not copy the properties of objects by default. Instead, JS creates an association between two objects, so that one object can access the properties and functions of the other object through delegation, so rather than inheritance, it is more appropriate to call it delegation.

Xiao Huang: HMM, what is a JS closure?

Da: Yeah, okay.

Closures are functions that have access to free variables. Free variables are variables that are used in a function but are neither function parameters nor local variables of the function

So technically speaking, all JS functions are closures, but this is a theoretical closure. There is also a practical closure, which only satisfies:

1. It exists even if the context in which it was created has been destroyed

2. Closures are called when free variables are introduced into the code

** Closure applications: **

• Mimic block-level scopes
• Save variables of external functions
• Encapsulating private variables

Xiao Huang: HMM, tell mepromise+Generator+AsyncThe use of

Da: Yeah, okay.

The problem Promise solved: Callback hell

Promise specification:

Promise has three states, which are pending, fulfilled/resolved and rejected.

Promise states can only change from “wait” to “complete” or “reject,” not reverse, nor can “complete” and “reject” switch back and forth.

A promise must provide a THEN method

Promise.then (resolve, reject),resolve, and reject are optional arguments. If resolve or reject are not functions, they must be ignored. The then method must return a Promise object.

Use: To instantiate a Promise object, you pass in the two arguments resolve and reject, which determine the state internally. The resolve and reject functions pass in arguments that can be used in callbacks Then is received in the callback function.

var promise = new Promise(function(resolve, reject) {
setTimeout(function(){
resolve('1024bibi.com');
});
}); 
promise.then(function(val){
console.log(val)
})

promise.then(val=>{ 
//resolved 
},reason=>{ 
//rejected 
})
Copy the code

Promise callback chain:

Promise can use returns and throws in callback functions, so you can return a promise or some other value in then, and you can throw an error object, but without a return, Will return undefined by default, and the subsequent then callback arguments will receive undefined.

The Generator function:

Generator functions use:

1. The execution can be paused in stages

2. You can control the phases and the return value of each phase

3, can know whether to execute to the end

Generator and asynchronous control:

Using the pause effect of Generator functions, asynchronous operations can be written in yield statements and executed later when the next method is called. This is essentially equivalent to not having to write the callback function, because subsequent operations of the asynchronous operation can be put under the yield statement until the next method is called anyway. Therefore, an important practical use of Generator functions is to handle asynchronous operations and override callback functions.

Async and asynchrony:

Usage:

Async means that this is an async function and await can only be used inside the function. Await means to await the result of an asynchronous operation before continuing.

Await is usually followed by a promise object

Example :async used to define an asynchronous function that returns a Promise. If async returns a synchronized value, the value is wrapped as a Promise to resolve, equivalent to return promise.resolve (value). Await is used before an asynchronous operation to “wait” for the return value of the asynchronous operation. Await can also be used with a synchronized value.

Huang: HMM, talk about event delegation and bubbling

Da: Yeah, okay.

Event delegation is implemented using the bubbling phase mechanism, which is to delegate functions of one element in response to events to another element, typically a group of elements’ events to its parent element

The advantage of delegation is that

To reduce memory consumption, saving efficiency dynamic binding event bubbling events, is the element itself after the event is triggered, if the parent element have the same event, such as the onclick event, the element itself trigger condition will pass, also is to risk to the parent element, the parent element of the same event will be cascaded to trigger based on nested relation, Until document/ Window is done bubbling.

Xiao Huang: HMM, talk about code specifications

Da: Yeah, okay.

• The source file

JavaScript source files must be encoded in UTF-8 without BOM.

• The indentation

Must be indent with 4 Spaces. Tab characters or 2 Spaces are not allowed

• Case and default in switch must be indented.

Switch (variable) {case '1': // do... break; case '2': // do... break; default: // do... }Copy the code

• The blank space

Binary operators must use Spaces between their operands, but unary operators cannot have Spaces between their operands.

let a = ! arr.length; a++; a = b + c;Copy the code

• in{There must be 1 space before.

/ / is the if (condition) {} set (' attr, {some: 'XXX', any: "yyy"}); function funcName() { }Copy the code

• if / else / for / while / function / switch / do / try / catch / finallyYou must add a space between the parentheses and the keyword.

If (condition) {} while (condition) {} (function () {})();Copy the code

• In the statement that creates the object,:Must be followed by a space,:There can be no Spaces before it.

// const obj = {a: 1, b: 2, c: 3};Copy the code

• In function declarations, named function expressions, and function calls, the function name and(There must be no Spaces between them.

Function funcName() {} const funcName = function funcName() {}; funcName();Copy the code

• , and;There can be no Spaces before it.

CallFunc (a, b);Copy the code

• (and [after,) and]You can’t have Spaces before.

// Example callFunc(param1, param2, param3); save(this.list[this.indexes[i]]); needIncream && (variable += increament); If (num > list.length) {} while (len--) {} const arr1 = []; const arr2 = [1, 2, 3]; const obj1 = {}; const obj2 = {name: 'obj'}; const obj3 = { name: 'obj', age: 20, sex: 1 };Copy the code

• There can be no trailing Spaces after each line of code.

• A single line cannot contain more than 120 characters. If the number of characters exceeds 120, a line break is required.

• If the contents in parentheses have more than one line, open a new line for),],} and make the new line correspond to the indentation of the lines (, [, {).

// if (product) {product.load(); if (user.isAuthenticated() && user.isInRole('admin') && user.hasAuthority('add-admin') ) { sendProduct(user, product); } } const arr = [ 'candy', 'sugar' ];Copy the code

• , 或 ;No line breaks before

// const obj = {a: 1, b: 2, c: 3}; foo( aVeryVeryLongArgument, anotherVeryLongArgument, callback );Copy the code

• If you use multi-line blocks,The else and catchYou have to open a new line.

If (condition) {// some statements; } else { // some statements; } try { // some statements; } catch (ex) { // some statements; }Copy the code

• Statement must start with;At the end.
• If there’s only one row,{}Can’t be omitted.

If (condition) {callFunc(); }Copy the code

• Function definitions cannot end with a semicolon;.

Function funcName() {} function funcName() {}Copy the code

• Object and array declarations cannot have trailing commas.

// const obj = {attr1: 'XXX ', attr2: 'yyy'}; const arr = [ 'xxx', 'yyy' ];Copy the code

Naming rules

• The naming of variable, attribute, and function names must be followedlowerCamelCaseLittle camel spelling.

const loadingModules = {};
function loadProduct() {
}
Copy the code

• classClass names must be followedUpperCamelCase (Pascal)The big camel spelling (Pascan spelling).

function Element(options) {
}
Copy the code

• All the characters of an acronym should be capitalized or lowercase.

function parseSVG() {
}
const svgParser;
Copy the code

• Const variables are preferred. Multiple variables cannot be declared on a single line.

// const name = 'MyName'; const hangModules = []; const missModules = []; const visited = {};Copy the code

• For the equality operator,= =This parameter can only be used to check whethernullorundefinedThe rest must be used= = =

If (age === 30) {//... } if (type == null) { // ... }Copy the code

• You are advised to use XXX == NULL to determine null or undefined

• Function expressions or function declarations should not be placed in the body of a loop.

Function clicker() {//...... } for (let i = 0, len = elements.length; i < len; i++) { const element = elements[i]; addListener(element, 'click', clicker); }Copy the code

• It is recommended to use+ ' 'Convert the value to a string.

Num + '';Copy the code

• It is recommended to use+Convert a value to a number.

/ / are + STR patients;Copy the code

• In the use ofparseIntThe second parameter must be passed.

ParseInt (STR, 10);Copy the code

• You must use the'Rather than"Define strings.
• Object literals must be used{}To create simple objects.

// const obj = {};Copy the code

• If all attributes of an object literal do not need quotation marks, quotation marks must be omitted. If quotation marks are required, use them'Rather than"

// const info = {name: 'someone', age: 28};Copy the code

• Disallows modification of stereotypes for built-in objects.

String. Prototype. Trim = function () {};Copy the code

• Use whenever possible.Rather than[]Access properties of an object.
• usefor ... in ...Should be used with carehasOwnPropertyIn case ofObjectIn some runtime environment, some additional attributes are added to the stereotype.

const newInfo = {}; for (const key in info) { if (info.hasOwnProperty(key)) { newInfo[key] = info[key]; }}Copy the code

• Array literals must be used unless you want to create an array of specified length[]Create an array.

// const arr = []; const arr2 = new Array(1e4);Copy the code

• Don’t usefor inStatement traverses an array.
• In order to useThe eval and with. Allows the use ofnew Function.

Xiao Huang: HMM, tell me about dark copy

Da: Yeah, okay.

Shallow copy of array:

If it is an array, we can use some array methods, such as slice, concat method to return a new array to achieve the property of copying, but if the array is nested objects or arrays, using concat method is not complete cloning, if the array element is a basic type, a copy will be made without any influence. In the case of objects or arrays, only the references to the objects and arrays will be copied, so that both will change regardless of whether we make changes to the old and new arrays. We call this method of copying the references a shallow copy

Deep copy

To copy an object completely, even if the object is nested, the two objects are separated from each other. Modifying the properties of one object does not affect the properties of the other

Xiao Huang: HMM, let const var is different

Da: Yeah, okay.

Var is global or block-wide, while let const is block-level. Var is promoted. Let const is not allowed to be reassigned

Huang: HMM, tell me about the features of ES6 arrow functions

Da: Yeah, okay.

Arrow functions differ from normal functions in that:

1. Arrow functions do not have this, so we need to find the value of this by searching the scope chain. This means that if the arrow function is contained by a non-arrow function, this is bound to the nearest non-arrow function’s this

Arrow functions don’t have arguments objects of their own, but can access arguments objects of peripheral functions

3. It cannot be called by the new keyword, nor does it have a new. Target value or prototype

Huang: Well, tell me about the execution order of setTimeout and Promise

Da: Yeah, okay.

The setTimeout callback for an asynchronous operation is executed only if no synchronous code is executed on the main thread

When the promise executes, the code in the PROMISE constructor executes synchronously

The callbacks pointed to by the then method will be executed after all synchronization tasks of the current script have been executed, in the following order: sync code – “promise.then-> setTimeout

Xiao Huang: HMM, tell mesetTimeout(fn,100); 100How are milliseconds weighed

Da: Yeah, okay.

The setTimeout() function simply inserts the event into the task list. The main thread will not execute the callback until the current code has finished executing. This may take a long time, so there is no guarantee that the callback will execute within the specified time. 100 milliseconds is the time to insert the queue + the time to wait

Huang: HMM, tell me how to get properties on objects

Da: Yeah, okay.

• For (let I in obj)The method accesses an object and its prototype chain in turnAll enumerable types
• object.keys: Returns an array containingAll enumerable property names
• object.getOwnPropertyNames: returns an array containingAn attribute that is not enumerable

Huang: HMM, tell me about some new ES6 features

Da: Yeah, okay.

In ES6, let and const variables are added to the declaration and definition of variables, and the concept of local variables is introduced. There are attractive structural assignments in the assignment. Meanwhile, ES6 extends some methods for strings, arrays, reguls, objects, functions, etc. Examples include template strings for strings, default arguments for functions, and concise representations of properties for objects

ES6 also introduces a new data type, Symbol, and a new data structure, set and Map. Symbol can be detected through Typeof, promises and generators are introduced to address asynchronous callbacks, and the most attractive classes and modules are introduced. Class allows for better object-oriented programming, and module loading facilitates modular programming

Of course, for browser compatibility, we need to use Babel for compilation in real development

Important features:

Block-level scope: ES5 has only global and function scopes. The benefit of block-level scope is that you no longer need to execute function expressions immediately, and there are no problems with closures in the body of the loop

Rest arguments: Used to get extra arguments to functions so you don’t need to use arguments objects,

Promise: a solution for asynchronous programming that is reasonably powerful over traditional solution callbacks and events

Modularization: The module functions are mainly composed of two commands, export and import. The export command defines the external interface of the module, and the import command is used to input functions provided by other modules

Xiao Huang: HMM, tell meCall and applyWhat is it for

Da: Yeah, okay.

Call and apply work exactly the same, except for the different forms of parameter passing

1. Change the direction of this

2. Borrow methods from other objects.

3. Call the function, because the apply, call methods cause the function to execute immediately

Xiao Huang: HMM, tell mefor(var i=0; i<5; i++) { setTimeout(function(){ console.log(i); }, 1000); } console.log(i)

Da: Yeah, okay.

Output five 5’s after one second

SetTimeout is executed every time the for loop is executed, but the function inside is not executed and placed in the queue, so it is placed 5 times. The for loop completes five times in less than 1000 milliseconds; After 1000 ms, all the functions in the task queue are executed, so it prints five 5’s.

Huang: Well, do you know the grammar of ES6 and ES7

Xiao Da: HMM. Promise, await/async, let, const, block-level scope, arrow function

Xiao Huang: HMM, do you know the difference between basic object types and reference object types

Xiao Da: HMM.

Divided into ** basic object type and reference object type **

Basic data types:

Access by value to manipulate the actual value stored in a variable. Primitive type values refer to simple data segments. There are six basic data types :undefined, NULL, String, Number, Boolean, symbol.

Reference type:

When copying holds a variable of an object, you manipulate a reference to the object, but when you add ownership to the object, you manipulate the actual object. Reference type values refer to objects that may be composed of multiple values.

There are several reference types: Object, Array, RegExp, Date, Function, special primitive wrapper types (String, Number, Boolean), and single built-in objects (Global, Math).

Xiao Huang: HMMM, do you know arguments

Xiao Da: HMM. Arguments is an array-like object with a length property and cannot call Array methods using the array.from () conversion

Huang: HMMM, do you know the disadvantages of JSONP

Xiao Da: HMM. JSON only supports GET, because script tags can only use GET requests; JSONP requires backend coordination to return data in the specified format.

Speaking of JSONP, cross domain: Cross domain (JSONP, Ajax)

Json:

Ajax requests are not allowed to make cross-domain requests due to the same origin policy, whereas links in the SRC attribute of the script tag can access cross-domain JS scripts. With this feature, the server no longer returns JSON data, but returns a piece of JAVASCRIPT code that calls a function. The call is made in SRC, which is cross-domain.

Speaking of Ajax, let’s talk about its return states

0 – (uninitialized) The send() method has not been called

1 – (load) The send() method has been called and the request is being sent

2 – (load completed) The send() method is complete and all responses have been received

3 – (Interaction) Parsing the response content

4 – (Done) The response content is parsed and can be invoked on the client side

Huang: Well, tell me about the mobile layout

Recommended: Common layout of the CSS

Recommended: REM and EM use and differences in detail

Recommended: mobile terminal fit 1px problem end solution

Recommended: Mobile performance optimization methods

Recommended: Common mobile compatibility problems

• Analysis of Mobile Web page adaptation
• (super detailed) Media query, percentage, REM and VW/VH layout comparison analysis
• Mobile: Active pseudo-class invalid workaround
• Mask in CSS – make good use of mask-image
• Mobile web and interview questions
• How does Babel work?
• Permission to verify

Go back to my previous articles and you may get more!

• A qualified junior front-end engineer needs to master module notes
• Vue.js pen test questions Solve common business problems
• [Primary] Personally share notes of Vue front-end development tutorial
• A long summary of JavaScript to consolidate the front end foundation
• ES6 comprehensive summary
• Dada front-end personal Web share 92 JavaScript interview questions with additional answers
• [Illustrated, like collection oh!] Re-study to reinforce your Vuejs knowledge
• 【 Mind Mapping 】 Front-end development – consolidate your JavaScript knowledge
• 14 – even liver 7 nights, summed up the computer network knowledge point! (66 items in total)
• This was my first JavaScript primer
• LocalStorage and sessionStorage localStorage
• Drag and drop in HTML5
• Challenge the front-end HTTP/ECMAScript
• Must learn must learn – Audio and video
• 170 Interview questions + answer Learn to organize (conscience making)
• Front-end HTML5 interviewers and candidates ask and answer questions
• Ne Zha is sweeping the sea
• Tencent location service development applications
• [Advanced] The interviewer asked me how Chrome renders (6000 words)
• The interviewer started by asking me about Chrome’s underlying principles and HTTP protocol (swastika)
• Staying up late summed up the “HTML5 Canvas”
• This /call/apply/bind
• The HTTP/HTTPS/HTTP2 / DNS/TCP/classic problem
• Execute context/scope chain/closure/first-class citizen
• Web page creation basics
• Learn the summary of HTML5 finger front-end (suggested collection, illustrated)

❤️ follow + like + Favorite + comment + forward ❤️

Likes, favorites and comments

I’m Jeskson, thanks for your talent: likes, favorites and comments, and we’ll see you next time! ☞ Thank you for learning with me.

See you next time!

The article is constantly updated, you can search wechat”Programmer Doraemon“The first time to read, reply [information] I prepared the first line of large factory information, this articlewww.dadaqianduan.cn/#/Has been included

githubIncluded, welcomeStar:Github.com/webVueBlog/…