What does semantic HTML tag mean

Concept: Let the label have its own meaning advantage

  • The code structure is clear, easy to read, with the use of team development
  • Good for search engine optimization
  • It is convenient for other devices to parse

The difference between the b tag and the strong tag

  • Strong indicates an emphasis label, and B indicates a bold label

How to implement CSS3 animation

  1. transfrom

    • Transition: Used to set style property values to move smoothly from one state to another. There are four properties
      • Transition-duration Specifies the duration of the change
      • Transition-property Specifies the transition property
      • Transition-timing-function Indicates the transformation rate
      • Transition-delay Specifies the transition delay

  2. Animation: frame by frame animation

@keyframes

JS inheritance

  • Objects have a __proto__ attribute, only function objects have a unique Prototype attribute
  • Object’s __proto__ points to the prototype of its constructor,

JS prototype chain

  • When an object accesses its attribute, if the attribute itself does not exist, the prototype chain is formed by looking up its prototype layer by layer through __proto__

JS prototype

  • Constructor prototype, which has properties and methods that can be used by objects created based on the constructor

This points to the scene

  1. A function call
    • This refers to a global object in the function
  2. The method call
    • In a method call, this is the object that owns the entire method
  3. The constructor
    • The this in the constructor refers to the newly created object
  4. Implicit call
    • This is the first argument

Differences between TCP and UDP

  • UDP is a connectionless, unreliable datagram service
  • UDP supports one-to-many, many-to-many, and one-to-one services
  • TCP is a connection-oriented, reliable, byte stream based transport layer communication protocol that is connection-oriented, ensures sequential, reliable transmission, and provides congestion control

TCP three-way handshake

  1. First handshake: The client sends a connection request packet to the server. After the request is SENT, the client enters the SYB-sent state
  2. Second handshake: After receiving the connection request packet and agreeing to the connection, the server sends a reply and enters the SYB-received state
  3. Third handshake: After receiving the connection approval reply, the client sends an acknowledgement packet to the server. After the packet is sent, the client enters the Established state and the connection is established successfully
  4. Three-way handshake Cause: TCP ensures reliable data transmission and transmission efficiency to ensure data return and return

TCP Disconnection

  • First wave: the client sends a connection release request to the server
  • Second wave: After receiving the connection release request from the client, the server sends an ACK packet and enters the close-wait state. In this case, the server does not accept the data sent by the client, but continues to send the remaining data
  • Third wave: The server sends a connection release request to the client, after which the server enters the last-ACK state
  • Fourth wave: After receiving the release request, the client sends an acknowledgement to the server. At this TIME, the client enters the time-wait state, and the client continues the time-wait state for 2MSL. If no server resends the request, the client enters the CLOSED state

Explain the Promise

  • The promise was to queue asynchronous tasks, output multiple asynchronous tasks in sequence, and solve callback hell with chained calls, with three states: success, failure, and wait. It can only go from waiting to success/failure, one way

Difference between let and VAR

  • Let: variable is non-promotable, block-level scope, non-repeatable declaration, temporary dead zone (to reduce runtime errors, prevent variable from being used before declaration)
  • Var: A variable can be promoted and is the scope of a function
  • Const: The value must be assigned immediately after the declaration or an error will be reported. Simple types cannot be changed once declared. Internal data can be changed if the address to which the pointer points cannot be changed

AJAX principle

  • AJAX is a Web development technique that asynchronously requests data to load background data,

Use the XMLHttpRequest constructor to create the Ajax core object XMLHttpRequest sends the request to the server

  • Open Indicates the connection to the sending server
  • The send to port
var xhr= new XMLHttpRequest()
xhr.onreadyStateChange = function(){
    if(xhr.readyState == 4 && xhr.status == 200) { 

    }
}
xhr.open(method,url,async)
xhr.send(string))
Copy the code

The difference between GET and POST requests for data

  • GET is harmless when the browser falls back, while POST resubmits the request
  • The URL generated by GET can be stored in the history, but not by POST
  • GET requests are URL-encoded only, whereas POST supports multiple encoding methods
  • GET request parameters are retained in browser history, while parameters in POST are not
  • GET requests pass parameters in the URL with length limits, whereas POST does not
  • GET requests accept only ASCII characters, while POST has no limit
  • GET is less secure than POST because parameters are exposed directly to the URL and therefore cannot be used to pass sensitive information
  • The GET argument is passed through the URL, and the POST is placed in the Request body

POST Usage Scenarios

  • The results of the request have persistent side effects, such as adding new rows to the database, or if you use GET, the data collected by the form may make the URL too long
  • The data to be transmitted is not 7-bit ASCII

GET Usage Scenarios

  • The request is to find the resource, and the HTML form data is used only to aid the search
  • Request results have no lasting side effects
  • The collected data and input field names in HTML forms contain a maximum of 1024 characters

Arrow function

  • This points to the object where the arrow function is defined
  • Arrow function definitions are much cleaner and much cleaner than normal function definitions

To solve the cross domain

Juejin. Cn/post / 689857…

  • Using JSONP
  • Using a Reverse proxy
  • Use cross-domain resource sharing

What is cross-domain – protocol, domain name, port inconsistency caused by cross-domain JSONP

  • There are no compatibility issues, basically all can be used, only to solve GET requests
  • JSONP is essentially resolved through the SRC attribute on the Script tag
function dealData(data) {}let scp = document.createElement('script')
scp.src=""
document.body.appendChild(scp)
Copy the code

The reverse proxy

  • A layer of servers, called proxy servers, is installed between the target server and the browser. The reverse proxy method is to deploy static resource files to the proxy server.

Cross-domain resource sharing CORS

  • Cross-domain resource sharing (CORS) is supported by both the browser and the server
  • The CORS communication process is done by the browser itself and does not require user participation
  • For developers, CORS communication is the same as homologous AJAX communication, and the code is the same
  • Once an AJAX cross-domain request is made during communication using CORS
  • The key to realize CORS lies in the server. As long as the server is realized, CORS communication can be carried out

How to obtain random numbers from 0 to 9

function getRandom(start,end) { 
return Math.floor(Math.random()  * (end - start  + 1)  + start)
}
Copy the code

What’s wrong with single-page apps? (404 will appear after F5, how to solve the front-end?)

  • Report 404 is caused by single page mode development mode, single page is by the JS framework will be based on the url currently visited the path to the corresponding sub-page components, logical judgment and page rendering

Solution:

  • When refreshing, ensure that the page is unchanged, that is, can not use redirection to visit the main page of a single page, because the URL will change, change js framework can not route, do not know which URL was last time
  • The server response must be index.html, because index loads the JS framework and initializes something

Summary: Respond to the index.html resource without changing the URL

Advantages of single page:

  • User experience is good, fast, content changes do not need to reload the entire page
  • Without switching between pages, there will be no white screen

Disadvantages of single page:

  • The initial loading takes a lot of time
  • Is not conducive to SEO
  • You cannot use navigation to move forward or backward
  • High page complexity

How to take precautions against front-end security

  • attack
  • Escape the front-end output data,
  • CORF attack
  • CSRF is cross-site request forgery, where a hacker steals data when visiting a website
  • Use post and GET wisely

Px/EM/REM difference and application

  • Device pixels: The number of pixels the device screen actually has generally 1920 pixels in width and 1080 pixels in length

  • Logical pixel: Units of CSS pixels that are relative in size, also known as individual pixels

  • Resolution: Device pixels of screen length x device pixels of screen width

  • Ppi: Pixel density, the number of pixels per inch along the diagonal

  • Device size x pixel density = resolution

  • Px: We can adjust the size of the page on the mobile. This value is viewPort. The mobile browser will set the viewPort width to 980px, that is, 1px = 1/980

  • < span style = “box-sizing: border-box; line-height: 22px; By default, 16px = 1em

  • ** REM: ** REM is only relative to the root directory, i.e. the HTML element. With rem, we only need to adjust the font size of the root HTML element to achieve dynamic adaptation of all elements

Why can’t HTTP1.x be multiplexed

  • HTTP1.X is a text segmentation protocol with no serial number. If http2 is a frame segmentation protocol with a serial number, it can be multiplexed

OSI seven layer protocols: physical layer, data link layer, network layer, Transport layer, session layer, presentation layer,

  1. Application layer — Functions: For a specific application of the agreement, the contact of the protocol are mainly composed of HTTP, see the browser as an application, when a user initiated the request, through data for your browser to use the HTTP protocol, which is the application layer USES, and there was an error request, to deal with error, which is the application layer responsible for – common agreement are: HTTP,FTP,TELNET,SMTP
  2. Presentation layer – device inherent data format and network standard data format conversion, mainly responsible for data format conversion, is to set the inherent data format to network standard format conversion
  3. The session layer – functions: establishes, manages and maintains communications, and the layer below the management transport layer – is responsible for: establishes and disconnects communication connections, as well as data segmentation and other data transport-related management
  4. Transport layer — Function: manage the data transmission between two nodes, ensure that the data is reliably transmitted to the target address — protocol: TCP UDP — function: specify the communication port, specify the transmission port, only know you want to use HTTP protocol
  5. Network layer — Function: Address management and routing — Responsible for: transmitting data to destination address — Protocol: IP ICMP
  6. Data link layer – function: interconnect devices to transmit and identify data frames – responsible for: communication between interconnected nodes at the physical layer
  7. Physical layer – function: data 0,1 is converted into voltage and pulse, optical transmission to the physical transmission medium

What is the EventLoop

  • EventLoop is a mechanism to prevent JS from blocking during execution
  • There are a lot of things you can dig into for an interview

What does a Vuex do

  • Vuex is a state management model developed specifically for VUE applications that manages the state of all components of an application with a centralized storage

New API for H5

  • Full screen: docuement requestFullscreen ()

  • Close the full screen: document. CancelFullScreen

  • Document.isfullscreen ()

  • Network detection: online The callback function is triggered when the network is disconnected from the network

  • Offline When the network is offline, the callback function is triggered

Drag the source object

  • Ondragstart is triggered when the mouse is pressed over the drag element
  • Ondrag continues to fire when the mouse is over the drag element, regardless of whether the mouse is moving
  • Ondragend fires when the mouse is lifted over the drag element

Drag and drop the target element

  • Ondragenter fires when the mouse enters the target element
  • Ondragover fires continuously when the mouse moves over the target element
  • Ondragleave fires when the mouse leaves the target element

HTML5 new Tags

What is HTML semantics

  • According to the structure of the content, choose the appropriate tag, which is convenient for developers to read and write more elegant code, and at the same time let the browser afraid of ugly and machine good parsing

Why semantic

  • Why does a page have good content structure, good code structure, without CSS
  • Conducive to SEO:
  • It is convenient for other devices to parse
  • Easy for team development and maintenance, semantic readability, is the next important trend of the web page

The difference between a process and a thread, how do processes communicate with each other, how do threads communicate with each other

  • Thread: The smallest unit of instruction execution flow in a process and the basic unit of CPU scheduling
  • Process: refers to a program with some independent function, a dynamic execution process on a data set

How processes communicate:

  • Pipes/Anonymous pipes
  • Named pipe
  • signal
  • The message queue
  • A semaphore
  • The Shared memory

How do threads communicate with each other

  • The mutex
  • A semaphore
  • The event

JS eventloop mechanism

  • Synchronization task: A synchronization task is a task that is queued to be executed on the main thread. A synchronization task can be executed only after the previous task is completed
  • Asynchronous task: an asynchronous task is executed in the main thread only when the task queue informs the main thread that an asynchronous task is ready for execution

The operation mechanism of asynchronous tasks is as follows:

  1. All synchronization tasks are executed on the main thread, forming an execution stack
  2. Outside the main thread, there is a task queue in which an event is placed whenever an asynchronous task has a result
  3. Once all synchronous tasks in the execution stack are completed, the system will read the task queue to see what events are in it, and which asynchronous tasks are corresponding to 1. Then the wait state ends, the stack enters, and the execution begins
  4. The main thread repeats step 3 above

The difference between an arrow function and a normal function

  • Syntax is more concise and clear
  • Arrow functions have no prototype, so the arrow function itself does not have this
  • Arrow functions do not create their own this
  • Call /apply/bind cannot change the direction of this in the arrow function
  • Arrow functions cannot be used as constructors
  • Arrow functions do not bind arguments, and instead use rest arguments

Vue data bidirectional binding

  • Data to template binding, template to data binding

The differences between map and foreach:

  • Foreach changes the value of the original array, calling each element of the array
  • Map returns a new array, mapping a new array without changing the value of the original array

Ajax readyState has five state values

  • 0 is not initialized, the object has been created, but the open method has not been called
  • 1 loading, open method already called, no request sent
  • 2 The load is complete, and the SEND request is sent
  • 3 Interaction. You can receive some data
  • 4 Complete. Global data has been received and the link has been closed

Base64: text files, dependent encoding, small icon solutions

  • Base64 encoding will inflate the image to 3/4 of the size of the original file
  • Is a representation of binary data based on 64 printable characters
windowTranscoding. Btoa (STR)window.ATOB (STR) decoding when there are Chinese characterswindow.beta(window. EncodeURIComponent (STR)) transcoding and decodingwindow.decodeURIComponent(window.atob(str))
Copy the code

JPG: lossy compression, does not support transparency, small size, fast loading

  • JPG usage scenarios: suitable for rendering rich images. JPG images are often used as large background images, rotating images,

PNG: lossless compression, large volume, high quality, transparent support

  • PNG advantages: lossless compression of the high fidelity image format, PNG images than JPG stronger color expression, more delicate line processing, higher support for transparency, the only disadvantage is too large
  • PNG scene: Display LOGO or background images with fine lines and high color contrast

SVG: Text file, small size, no distortion, good compatibility, more compressibility

  • SVG is an image format based on XML syntax that can be written with infinite magnification without distortion

Soure-map source map, which generates a separate Soucemap file that identifies the column and row that is currently reporting an error,

CSS margins overlap, cause

  • Concept: CSS margin overlap is when two or more boxes overlap to form a single boundary
  • The reason: empty element boundaries overlap: Suppose you have an empty element that has a margin, but no border or padding, in which case the upper margin and the lower margin meet and merge

Github.com/zuopf769/no…

Calculation method of margin overlap:

  • They’re all positive. Take the maximum
  • They’re not all positive, they all take the absolute value, and then subtract the minimum absolute value from the maximum positive value
  • If there’s no positive value, you take the absolute value of everything, and you subtract the maximum value from 0

Solutions:

  • The bottom element is set to float float: left
  • The position of the bottom element is absolute/fixed out of the document stream
  • When setting margin-top/bottom, set up or down
  • Margin value problem: When the parent element has no border, padding, or inline content, the margin-top/bottom of the child element overlaps the margin of the parent element