Preface:
The following is according to their own review of the data and interview problems sorted out, behind gradually updated, review with!! I hope everyone can find a satisfactory job. My own technology stack is VUE plus small program, so I don’t write much about React. Because it is a summary of interview questions, I don’t write knowledge points in detail, but only the most concise words, which can be directly answered in the interview
An idea,
Tell me how you learned the front end.
Everyone here is different, so just answer by yourself
HTML CSS HTML5 and CSS3 stages
1, talk about the three-column layout, fixed on both sides, adaptive in the middle, five
1 Floating 2 Positioning 3Flex 4 Grail Layout 5 Twin wing layout CSS three column layout fixed on both sides of the middle adaptive five ways
2, landing the
Block-level formatting context: is a separate area, rendering rules and external BFC generated methods: 1. Float is not None. 2. Position is not static or relative. Display: Inline-block, table-cell, flex, table-flex, Caption: inline-flex; overflow: Visible
3. How to understand HTML semantics
The element itself contains some information about the type of content contained within the tag, and the browser or developer can learn its semantics from the tag. Advantages: Structured content, convenient for programmers to read and maintain, conducive to browser SEO
4. Talk about Flex
Flex layouts are flexible layouts designed to provide maximum flexibility for boxes. Based on the traditional box model, flex layouts rely on display properties + Position properties +float properties to make them easier to use
Talk about REM EM VW VH
Px is the smallest point that can be displayed on the physical screen, EM is the font size relative to the parent, REM is the font size relative to the root HTML element, vh and VW are the height and width relative to the viewport,1vh equals 1/100 viewport height and 1vw equals 1/100 viewport width
Translate Transform, Transition animation
Transition from animation to animation.
Transition: Transform: animation: Transform: animation
7. What if CSS blocks
Use CDN 2. Compress CSS 3. Use cache properly 4
8. Introduce the box model you know
Box-sizing: border-box; border-box; border-box; border-box; border-box; border-box; border-box Padding-box: width contains the padding+context+width Content-box: width contains the content
The order in which class selectors are parsed, left to right or right to left
The reason for going from right to left is to improve performance when traversing
10. The difference between inline elements and block-level elements
Block-level elements are exclusive to a single line, and can be set to width and height. Horizontal margin and padding Settings are valid, but vertical ones are invalid, and can contain inline and block-level elements
Inline elements do not occupy a single line, width and height Settings are invalid, margin and padding are invalid, inline elements cannot be nested with other inline elements or block elements.
11. How is the font size of the root node determined
JS Sets the root node (HTML) font size based on the width of the device
12. Several hidden ways and their differences
1, display: none 2, visibility: hidden 3, opacity=0 0 4, position: absolute set a large negative value after leaving the document flow 5, transform: Scale (0), turn a primal red child into an infinitesimal, position is still there, overflow: 8. Filter: blur (0), set the blur of an element to 0, and the element is invisible
1, visibility: hidden—- to hide elements, but the position in the web page will be occupied. Better performance. 2, display: none—- sets the display of elements to none, that is, does not take up any place in the web page.
13. What are the advantages of CSS animation over JS animation
CSS animation advantages: 1. The browser can optimize the animation 3. The animation control is weak and there is no callback function. 2
Js animation advantages: 1, the animation control ability is very strong 2, animation effect is richer than CSS3 3, CSS3 compatibility problems, JS has no disadvantages: code complexity is higher than CSS3 JS running in the browser’s main thread, may lose frames
14. CSS preprocessor
There are three known: sass less stylus uses less, and dependencies for installing less in VUE – CLI can be nested with selector mixers to declare inherited attribute reference links
15. Several ways to clear floats
1. Add an empty tag to the end of the float element and add clear: both attribute 2. Parent element adds overflow attribute to trigger BFC 3. Use after pseudo-element to clear float 4. Clear floats with before and after pseudo-elements
16. Why CSS first and JS last
The main point here is that when you put dom rendering CSS in the header, the CSS is downloaded and the HTML is parsed synchronously. If you put it in the tail, it takes extra time to parse it. When you load it, try an HTML page first. If the JAVASCRIPT script is too large, it will cause the page to freeze and block the reference link
17. The Mate tag
The mate tag is an AUXILIARY tag in the HTML header that can define the page coding language UTF-8 search engine Huoha automatic page refresh control page caching, responsive window and other mate common attributes
The difference between Alt and title in the IMG tag
Alt is a local attribute, and title is a global attribute that provides additional information if the image fails to load. Mouse over the element is a reminder of the definition
19, the cause of the CSS reset
CSS reset is to reset the default CSS properties of the browser. Because there are many types of browsers, the default styles of each browser are different. For example, the underline of link A and the front dot of Li are not needed during development. The inner margin of the element, the margin border, and so on, therefore need to be reset. Generally, a reset global reset stylesheet is introduced between development to reset the CSS style: CSS reset stylesheet
20. New cSS3 features
21. The difference between link and import
1. Link is XHTML tag, incompatibility problem, @import is proposed by CSS2.1, older browsers do not support, Link can load CSS javascript @import can load CSS only. 3. Link links are loaded synchronously with THE HTML page. Link is different from import
22. What is Canvas
Canvas is a newly added HTML element of HTML5 that can use JS to draw images in it. Simply speaking, it is a canvas. The basic concepts include coordinate drawing, basic graphics, line path, circular arc and so on
23. Make circles and triangles in the CSS
Draw a circle border-radus: 50%
Draw a triangle:
<! DOCTYPE HTML >< HTML >< head> <title></title> <style type="text/ CSS "> /* Css3 draw triangle */. Triangle {width: 0px; /* Set the width and height to 0, so that the content of the div is empty, so that the triangle Angle is formed */ height: 0px; border-bottom: 200px solid #00a3af; border-left: 200px solid transparent; */ border-right: 200px solid transparent; } </style> </head> <body> <div class="triangle"></div> </body> </html>Copy the codeTriangle principle: Draw triangles in the CSS
24, vertical middle method:
Display: table-cell (not out of the document flow) 4. Display: flex align-items:center justfy-content:center
Third, js JQuery
1, js basic data type and basic data type difference
Basic data type: 7 types STRING Number NULL Underpay Boolean object Include object array function) symbol (ES6 new unique will not repeat)
2. Detection and replacement of JS data types
Detection: four ways:
Typeof Typeof is a unary operator that returns a string to determine whether a variable is empty or of its type. Note: Typeof cannot determine null and object. Other can return right instanceof used to detect an object on the prototype chain if there is a prototype property constructor judgment reference type object. The prototype. ToString. The call () is the most accurate way to detect all types Refer to the link
ParseFloat parseInt Additional methods parseFloat parseInt additional methods
2. Convert tostring: what does the tostring method () look like before wrapping quotes around it
Therefore, I am therefore on the right; therefore, I am therefore on the right. Therefore, I therefore pay therefore I am 5
Implement instanceof
The instanceof operator is used to check whether the constructor’s prototype property appears on the prototype chain of an instance object. So the idea of instanceof is to determine if the prototype of the right variable exists in the prototype chain of the left variable.
function instanceOf(left, right) { let leftValue = left.__proto__; let rightValue = right.prototype; while (true) { if (leftValue === null) { return false; } if (leftValue === rightValue) { return true; } leftValue = leftValue.__proto__; }}Copy the codeWhat is a prototype chain
Prototype mode is a form of js implementation inheritance. All functions have a prototype property. When an object is generated by new, prototype is instantiated as a property of the object. All reference types have a -prototype-reference to the prototype of their constructor, Prototype chain refers to when accessing a reference type that doesn’t have the property, or method itself, the -prototype-attribute searches through the parent prototype until it reaches the top level. The top layer of the prototype chain is object. The -protot attribute of object points to null. Refer to the link
5. Judge the prototype chain
1. GetPrototypeOf, used to find the immediate parent of the prototype chain 2. IsPrototypeOf, can judge all objects on the prototype chain (I) : two ways to identify the prototype chain
6. How to use relpace
The replace() method is used to replace some characters in a string with other characters, or to replace a substring that matches a regular expression. The syntax of the replace method is: StringObj. Replace (rgExp, replaceText) where stringObj is a string (string), reExp can be a regular expression object (RegExp) or a string (string), ReplaceText is the replacement string reference link found
7. Generation of CA
CA certificate, an electronic document issued by the CA organization, is a string of numbers that can indicate the identity of network users, providing a way to verify the identity of network users on the computer network generation: this question I do not know the GENERATION process of CA certificates
8, array flat five
1, reduce 2. ToString & split 3. Join & split 4. Recursion 5. Extend operator reference links
9, On binding and addEventLisener differences
AddEventLister: A W3C standard event listener that reuses the same event multiple times. Functions that add multiple events before IE9 use attachEvent instead of a reference link
10. Delete reference links from regular expression strings
11, handwritten array flat reference link
12. Reflow and redraw
Backflow: the size, layout, and hidden changes of the elements in the Render tree need to be rebuilt. This is called backflow. Each page backflows at least once, when the page is first loaded. Redraw: When backflow occurs, the browser invalidates the affected part of the render tree, reconstructs that part of the render tree, and when backflow is complete, the browser redraws the affected part to the screen, redrawing the process.
13. When will backflow and redraw occur
When backflow occurs: (1) Add or remove visible DOM elements; (2) Element position changes; (3) Element size changes — margins, padding, borders, height, and width; (4) Content changes – text or image size changes cause the browser to recalculate height or width changes; (5) Initialization of page rendering; (6) The browser window size changes. When redraw occurs: An element’s attributes or attributes change (e.g. background color, font color). Reduce backflow and redraw: (1) Add CSS styles instead of using JS to manipulate DOM styles; (2) Multiple reflux into one
14. Closure memory leaks
A closure is a function b inside a function A. Function B has access to the contents of function A. The closure features include nested functions inside a function
A memory leak is a failure of a program to release memory that is no longer in use due to negligence or error. A memory leak is not a physical disappearance of memory, but a design error that causes an application to lose control of the memory allocated before it is released.
15. Garbage collection mechanism
Front-end garbage memory collection called GC memory leakage also occurs in this step, JS memory collection mechanism, although it can recover most of the garbage memory, but there are still unable to recycle the situation, need to manually clean up two methods: 1, reference technology garbage collection mechanism 2, mark cleanup method detailed link
16. Modularization
The engineering significance of modularization lies first in the idea of divide and conquer, which is beneficial to our maintenance. Secondly, reuse is beneficial to our development. Decompose a big problem into many independent small problems with the same nature of the original problem, and combine the solutions of all small problems to get the answer of the big problem. CommonJS CMD reference link
17, the generator,
Generator is a new data type introduced by the ES6 standard. A generator looks like a function but can return multiple times. Reference Link Reference link 2
18. Why 0.1+0.2! = 0.3
In the formula 0.1 + 0.2, 0.1 and 0.2 are approximate expressions. When they are added together, the two approximate values are calculated, resulting in the final value of 0.30000000000000004. At this time, for JS, it is not approximate enough to 0.3. So 0.1 + 0.2! = 0.3. Of course, not all approximations add up to the right result. The workaround: Convert a floating point number to an integer for calculation. Because integers can be represented exactly.
What is the difference between JQ and VUE when you use it
1. The change from jquery to Vue is a mental change, which is to change the original idea of manipulating DOM directly to manipulating data. 2. The traditional front-end development mode is centered on JQ, while VUE is a rising front-end JS library and a simplified MVVM. 3. JQuery is used to select D O M object with selector (), and assign, fetch, bind, etc. It differs from the original H T M L region only in that it can be more easily selected and operated as a D O M object, while the data and the interface are coexisting. Compared with the need to obtain l, A, B, E, L label inside capacity:) select DOM objects, to its assignment, value, event binding and other operations, he and the native HTML difference is only more convenient to select and operate DOM objects, and the data and interface is together. For example, the content of the label label needs to be obtained:) Select the DOM object and perform operations such as assignment, value and event binding. The difference between it and the native HTML is that it is more convenient to select and manipulate the DOM object, and the data and interface are together. For example, to obtain the contents of the label label :(” lable “).val(); Again, it depends on the DOM element value. Vue completely separates the data from the View through Vue objects. 4. Vue applicable scenarios: background pages for complex data operations, form filling pages jquery applicable scenarios: some HTML5 animated pages, some pages that need JS to operate the page style
20. Deep and shallow copies
Shallow copy: A copy of a memory address so that the pointer to the target object and the pointer to the source object point to the same memory space. Note that when memory is destroyed, the pointer to the object must be redefined before deep copy can be used: The memory addresses of the copied objects are independently allocated. After the copy, the values of the two objects are applied, but the memory addresses are different. The two objects do not interfere with each other
Write a deep copy
function deepclone(obj) { if (typeof obj ! == 'object') return obj; If (obj == null) return null; If (obj instanceof Date) return new Date(obj); If (obj instanceof RegExp) return new RegExp(obj); Let o = new obj.constructor(); for (let key in obj) { o[key] = typeof obj[key] === 'object' ? deepclone(obj[key]) : obj[key]; If obj[key] is still an object, call the clone recursively. If obj[key] is an object, call the clone recursively. If obj[key] is an object, call the clone recursively. } return o; } let o = { a: { a: 1 } } let c = deepclone(o); o.a.a = 2; console.log(o, c)Copy the code22. Talk about event capture. Bubble How do you determine whether an event is a capture phase or a bubble phase
Judgment: onclick and attachEvent can only get the bubbling phase addEventLister the third argument defaults to false for bubbling and true for capturing
23. Event Agent (Event Delegate)
Eventdelegation, also known as eventdelegation, is a common technique for events in javascript. Eventdelegation is the delegation of events that should be bound to the parent element, and the parent element is responsible for listening to events. The principle of eventdelegation is that events bubble up in DOM elements. The benefits of using event proxies are improved performance benefits: reduced number of events, improved performance, avoidance of memory leaks, preventing deletion of elements in earlier versions of IE without setting the removal event to cause memory overflow javascript events.
24. Corrification
Currization is a technical advantage of converting a function with multiple parameters into a series of functions with one parameter: 1. Parameter reuse 2. Validation in advance 3
25. This points to changing the way
This refers to the global scope. 3. When called by new, this always refers to the new object. 4, The arrow function this, this refers to the definition of the function’s inheritance context in three ways: call apply bind
26, Call apply bind
Common: All three can change the reference of this, and the first parameter passed is the object referred to by this, which takes the form of subsequent arguments. Difference: Call passes a single argument, while apply passes an array. Bind does not specify that single arguments and arrays can be used. Call and apply execute directly, while bind returns a function that is executed only when called.
27. The process of New
Prototype creates an empty object using the constructor. Prototype. Bind the constructor’s this to the created empty object and execute it. 4. Execute the constructor code
28. Event loop mechanism
The main thread will execute the event from the task queue, execute the event, fetch the event, execute the event… The event loop mechanism is called event loop: the JS engine lives in memory, waiting for the host to pass it JS code or functions. That is, waiting for the host environment to assign macro tasks, and repeated waiting-execution is an event loop.
Have an in-depth understanding of JavaScript event loops
Macrotasks and microtasks
Macro tasks are initiated by the host, while microtasks are initiated by JavaScript itself.
30. The order in which JS executes code
Inside a JavaScript file or block of JavaScript code, the browser preprocesses (compiles) the code before executing it. After preprocessing, the JavaScript code performs the logical operations and function calls sequentially from top to bottom. Refer to the link
Object inheritance method
Archetypal inheritance combination inheritance Parasitic combination inheritance ES6 extend inheritance
There are four common types of inheritance
ES6, 7,8,9,10
1. What is variable promotion
As a result, all variable declarations will be promoted to the header of the code. This is called variable promotion, because js works in the case of parsing code line by line, and in the process, the variable declarations will be promoted to the header
2. What is Promise and compatibility
Promises are a solution to asynchronous programming that is more powerful and reasonable than traditional callback functions and events. Promises are simply a container that holds events that will end in the future. Usually an asynchronous operation. Syntactically, a promise is an object from which to obtain information about an asynchronous operation, mainly addressing THE js callback hell problem compatibility: The IE kernel does not support Promise. The third-party plug-in Bluebird can be used to encapsulate the original Promise of ES6, which solves the browser compatibility problem
3. Several states of promise
Filed (successfully) Rejected (failed)
4, async and await
Async and await are used to simplify promise objects in my project. Data objects can be directly parsed and returned to facilitate rendering as syntax-candy for Generator functions. , the advantage is to process then call chain, can write code async and await more clearly and accurately understand JavaScript async/await
Var let = const var let = const var let = const
2, Let and const are block-level local variables. 3, var and const cannot be block-level local variables. So window can access variables defined by var, but not const. No further modification can be made after the declaration; If you are declaring compound type data, you can modify its properties
6. Talk about symbol
ES6 introduced a new primitive data type, Symbol, which represents a unique value. The largest use is to define the unique attribute name of an object. ES6 Symbol What is a Symbol
What are the new features of ES6
Quite a lot, 11 in all: 1, let&const 2, destruct assignment 3, template string 4, simplify object 5, arrow function 6, allow function default values to set parameters 7, symbol unique values 8, iterator 9, generator 10, Promise 11, set set 12, Map ES6 7 8 Summary of new features
8. Do you know the bottom of Axios
Axios is a promise based HTTP library that can be used in browsers and Node.js: CreateInstance creates a new Axios object with the default Settings for all requests in Axios [Axios, axios.get, axios.post, etc…] Call axios.prototype. request internally and bind this of axios.prototype. request to the newly created Axios object to form an instance of Axios. When you create an Axios object, there are two interceptors, the Request interceptor and the Response interceptor.
8. What makes Axios special
Axios is an HTTP library based on Promise, which supports all apis of Promise. 2. It intercepts request and response data. 3. The client supports XSRF defense
9. What are axios’ common methods?
Axios.delete (url[, config]) // delete(url[, data]) // delete(url[, data]) Put (url[, data[, config]]) //post request for adding information
10. What configuration attributes do you know about Axios? Axios-related configuration properties
Fetch
The FETCH API is based on promise’s design and was created to replace the irrational writing of traditional XHR. Fetch is used to replace the traditional XMLHttpRequest. It has many advantages, including syntax for chain calls, returning promises, and so on. Understanding and use of Fetch
12. Talk about map and set
A Set is a Set of data structures called a Set, and a Map is a Set of data structures called a dictionary. A dictionary is a collection of elements made up of unordered, related, and non-repeating memory structures. Each element has a field called a key. Different elements have different keys in common: Sets and dictionaries can store unique values. Differences: Sets store elements as values, dictionaries store maps and sets as keys
13. What is arrow function and the difference between ordinary function
Arrow functions have no prototype properties Arrow functions are anonymous, cannot be used as constructors, cannot use new arrow functions cannot be used as generators, cannot use yield keyword when arrow functions call a function through call() or apply(), they pass in only one argument, It doesn’t affect this. Arrow functions do not bind this and capture the value of this for the context in which they are present. Arrow functions do not bind arguments and use rest arguments instead… To solve
This article describes 10 differences between nb arrow functions and ordinary functions
14, Talk about the difference between CommonJS and ES modularity
Fifth, network foundation
1. HTTP
HTTP is a hypertext transfer protocol, is the most widely used network protocol on the Internet, all WWW files must comply with this standard HTTP features, HTTP is connectionless stateless, HTTP is generally built on TCP/IP protocol, the default port is 80, HTTP can be divided into request and response, HTTP defines different modes of interaction on the server. The four most common modes are GET PUT POST DELECT HTTP responses contain a status code that indicates the result of the server’s response to the client. Disadvantages: Communication uses plaintext (not encryption), and the content may be eavesdropped. The identity of the communication party is not verified, so it may encounter camouflage. The integrity of the packet cannot be proved, so it may have been tampered with
2, HTTP2.0 features:
*** Multiplexing: **** a domain requires only one TCP link, the same link concurrently processes multiple requests, and the number of concurrent requests is several orders of magnitude larger than http1.0 binary framing: Header compression: Http2 consider header information does not change very often, so the server side to do a cache: The server sends multiple responses to a single request from the client, the push can be cached in the server, and the cache can be shared by different pages following the same origin
4. HTTP setup process
1 The browser analyzes the URL of the link. 2 The system searches for the HOSTS file and obtains the server IP address based on the file. Go to Step 5. 3 The browser sends a request to the DNS for the IP address of the URL. 4 The DNS resolves the IP address of the URL as XXX. Send the file to the browser. 8 Release the TCP connection. 9 The browser displays the text
5, http1.1 and http1.2
What is the difference between keep-alive in HTTP1.1 and HTTP 2.0
HTTP+ Encryption + Authentication + Integrity Protection = HTTPS
What is the difference between XSS and CSRF
XSS cross-site scripting attack: User A submits normal content, which is displayed on B’s page without any problem; Malicious user C submits malicious content, which is also displayed on B’s page, but can arbitrarily tamper with B’s page CSRF: cross-site request forgery; The attacker constructs the request address of a functional interface in the background of the website and induces users to click or use some special methods to make these requests automatically load; If the user is logged in, these requests will be mistaken as legitimate operations by the user when received by the server. For the GET form interface will be easy to be broken, the POST form interface is not 100% secure, attackers he can induce the user to enter a form with POST submit parameters page; What are XSS and CSRF respectively
11. What are the improvement methods of CSRF
Preventive measures (anti-CSRF-Token scheme is adopted) When the server receives a routing request, it generates a random number and inserts the random number into the page (usually in the form form) when rendering the request page. The server sets the setCookie and enters the random number into the user’s browser as cookie or session. The user sends a GET or POST request with the _cSRF_token parameter (in the case of the form itself, the form submits all input values to the background, including _cSRF_Token); After receiving the request, the server parses the cookie of the request to obtain the _CSRF_Token value and compares it with the _CSRF_token parameter submitted by the user. If the value is equal to the value, it indicates that the request is valid.
12. Say HTTPS
HTTPS is an HTTP channel aimed at security. Simply speaking, IT is the secure version of HTTP. HTTPS consists of two parts: HTTP + SSL/TLS, which adds a layer to process encrypted information on HTTP. Both the server and client are encrypted through TLS. Therefore, the transmitted data is encrypted
304. DNS
DNS is a domain name system, is on the World Wide Web as a domain name and IP address mutual mapping of a distributed database, enabling users to more convenient access to the Internet, without having to remember the number of IP can be directly read by the machine to put it simply: DNS is a domain name server, his task is to determine the resolution of the domain name. We type in a website, and DNS translates the website we type into an IP, ping a website, and it comes back with an IP. When this IP comes out, DNS will have done its job. DNS (Domain name Resolution Protocol) details
15. Osi seven-layer model
Application layer Presentation layer Session layer Transport layer Network layer Data link layer Physical layer Diagram Seven-layer network model
16. Common port Numbers Common port numbers
What are HTTP request headers
HTTP headers include general headers, request headers, response headers and entity headers. Each header field consists of a domain name, a colon (:), and the field value. Common header Request header Corresponding header Entity header
18, Get and POST
Get generates a TCP packet, and POST generates two packets. Get sends HTTP headers and data to the browser, and the server responds with 200 OK. Post requests the browser to send the header first. The server responds 100 when the continue browser sends date the server responds 200 (returns data), firefox only sends once
Talk about symmetric and asymmetric encryption
In symmetric encryption algorithms, encryption and decryption use the same key, that is, the same key is used to encrypt and decrypt the same password; Asymmetric encryption has two keys, public key and private key (public key and private key exist in a pair, if the original text is encrypted using the public key, use the corresponding private key to decrypt; Because encryption and decryption do not use the same key, this algorithm is called asymmetric encryption
Advantages and disadvantages of symmetric and asymmetric encryption:
Symmetric encryption: Advantages: simple algorithm, easy encryption and decryption, high efficiency, fast execution. Disadvantages: Relatively not particularly secure, only one key, ciphertext if intercepted, and the key is hijacked, so, the message can be easily deciphered. Asymmetric encryption: Advantages: Security. Even if the ciphertext is intercepted and the public key is obtained, the ciphertext cannot be deciphered because the private key cannot be obtained. As the receiver, be sure to keep your own key. Disadvantages: encryption algorithm and its complexity, security depends on algorithm and key, and encryption and decryption efficiency is very low.
Talk about three handshakes and four waves
1, client first launch for the first time shaking hands, to the server, asking whether can transfer data 2, after the server receives said can accept data, the data to the client by the second, because the TCP/IP is full duplex, server-side the handshake is also can ask the client whether can accept the data returned after 3, the client receives, Initiate a third handshake to tell the server that the returned data is acceptable (the link is ok)
TCP/IP four wave protocol TCP/IP is full duplex, each direction has to be closed, and when one party completes its data transmission it can send a FIN to terminate the connection in that direction for example the client can send a FIN to tell the server that there is no data transmission, this is the first wave, Told the client server returns an ACK after receipt, ok, I know this is the second wave, the client receives the confirmation can close to the server-side data channels, the server at this time still will continue to be sent to the client data, with no data on the server needs to be sent to the client, also sent a FIN to the client, Tell him I don’t have any data to send to you either, that’s the third wave, the client gets that and sends back an ACK telling the server, ok, got it, the server can safely close the client’s data channel, that’s the fourth wave, and the two-way transmission channel is closed,
21. How do three handshakes and four handshakes identify people
22, four times waved client and server shutdown time
The client is closed on the second wave. The server is closed on the fourth wave
23. Is the private key or public key transmitted from the server to the client
24. What is CDN? What are the application scenarios of CDN? What are the high-level applications of CDN
Content distribution network (CDN) can solve the problem of distributing shared libraries. A CDN is a network of servers whose purpose is to decentralize and store some common content. Each server in the CDN contains a copy of the library, which is distributed in different countries and regions of the world to take advantage of bandwidth and speed up downloads. Browsers access libraries using a common URL, and the underlying CDN provides files from the nearest, fastest server, thus eliminating bottlenecks in the system.
CDN application scenarios: Website/application acceleration video and audio on demand/large file download and distribution acceleration video live broadcast acceleration (in internal test) mobile application acceleration
Multiple asynchronous requests, how to ensure that they are processed in parallel
A x I o s. A L L: a x I o s. A L L: a x I o s. First, Axios is also an asynchronous request that encapsulates promises, so it’s written more succinctly because of the encapsulation. Note that it has to work with the axios.all scheme. First, Axios is actually an asynchronous request wrapped around Promise, and it’s written a little more succinctly because it’s wrapped in a layer. Note that it has to work with axios.spread
Single threading and multithreading
Multithreading: Multithreading means that a program contains multiple execution streams, that is, it is possible to run multiple different threads simultaneously in a program to perform different tasks, that is, to allow a single program to create multiple parallel executions. Single thread: A thread is a flow of execution in a program, each thread has its own proprietary registers (stack Pointers, program counters, etc.), but the code area is shared, that is, different threads can execute the same function
Do you know how an ETAG is generated in an HTTP response header
Etag generation requires that several conditions be met when the file does not change, the eTAG value remains the same. So you can’t just use inodes, which are easy to compute and don’t consume a lot of CPU. This hash is not particularly suitable for horizontal scaling, and the eTag values generated on multiple nodes are consistent. So inode rules it out
28. Threads and processes
A thread is the smallest unit of program execution, while a process is the smallest unit of resources allocated by the operating system. A process consists of one or more threads, threads are different lines of code execution in a process. 3. Processes are independent of each other, but each thread in the same process shares the program memory space. 4. Scheduling and switching: Thread context switching is much faster than process context switching. Deadlocks in the operating system
Vi. Browser
1. Cross-domain solutions
The server is configured with CORS (Cross-domain resource sharing), which supports same-origin communication as well as cross-domain communication. 3, jSONP upgrade json on the basis of json. Using the script tag cross-domain feature, plus the header setting, H5 provides the psotMasssge () method for cross-domain applications. You can transfer values between parents
Jsonp CORS Configure the pre-check for multiple domain name CORS on the front and back ends
Jsonp can’t use post to wrap a jSONP function. Let’s talk about what eatAG does in sending requests and how it solves callback hell with handwritten JSONP. Let’s talk about caching strong cache and weak cache. What urls are strong cached keywords from input to page display? What’s going on
Find strong cache -> Build request -> DNS resolution -> Establish TCP connection -> Send HTTP request -> Response (200/304 negotiated cache) -> Build DOM tree -> Build CSSOM tree -> Claim Layout tree -> Build Layer tree -> Generate draw list -> Generate blocks -> Display
Comparison of history mode and Hash mode Three local caches, advantages and disadvantages Differences cookie disadvantages How can a browser determine whether a CSS property is compatible with single-page applications and multi-page applications
Seven, ajax webpack
How does Ajax determine the result of a request? What is websocket webpack? What is webpack
Viii. Vue stage
MVC and MVVM
MVVM Advantages: Low coupling, reusability, independent development, testable MVC and MVVM development patterns and their differences
2. Understanding of VUE
Vue is a building in the user interface from the bottom to the top of incremental development based on the gradual MVVM framework core idea is data driven, modular data driven: view content according to the data changed by modular: increase the code reusability, maintainability, testability, improve the development efficiency, convenient and reuse, embodies the high cohesion and low coupling.
Personal understanding: As VUE is bidirectional binding based on MVVM idea, it can reduce the frequent operation of DOM denial and directly establish a connection between the data layer and the view layer, which is convenient to use and increases the reusability of code through componentalization, and maintainability improves our development efficiency
3. Vue life cycle. What hook functions are there for each lifecycle
The VUE life cycle consists of four phases: 1. Instance creation 2. DOM rendering 3. 1. BeforeCreat — Trigger behavior before creation: the mount element $EL and the data object data of the vue instance are both undefined and uninitialized. Loading event 2:created — created action: Loading event 2:created — Created action: Created BeforeMount Behavior triggered before rendering: Vue instance el and data are initialized, but are still virtual DOM nodes, data.filter is not replaced. Vue instance mount complete, data.filter successfully render what can be done at this stage: use with routing hooks 5: beforeUpdate behavior triggered beforeUpdate: data triggered when update 6: updated behavior triggered after update: Trigger what you can do at this stage when data is updated: Do some processing when data is updated (watch can also be used to observe) 7: beforeDestroy Actions triggered before destruction: Trigger what you can do at this stage when components are destroyed: Ask the user whether to destroy 8: Destroy Post-destruction behavior: When the component is destroyed, the Vue instance unlistens for the event and is unbound to the DOM (no response), but the DOM node still does what it can do at this stage: prompt when the component is destroyed
4. Talk about vuex
Interviewer: Will you please tell me the five properties of VUex? What are the differences and uses of vuex
5. Data transfer between vUE components
Parent passes child using props
** Parent component code ** <template> <header-box :title-txt="showTitleTxt"></header-box> </template> <script> import header from './header' export default { name: 'index', components: { 'header-box': Header }, data () { return { showTitleTxt: }}} </script>Copy the code** subcomponent code ** <template> <header> {{thisTitleTxt}} </header> </template> <script> export default {name: 'header-box', props: { titleTxt: String }, data () { return { thisTitleTxt: this.titleTxt } } } </script> `Copy the codeChild the parent
O n and on and ON and EMIT that is, the child component uses an event to trigger $emit to pass an event and parameters, then binds the event to the parent component, processes the event, and gets the parameters passed by the parent component. The child component changes the props passed by the parent component (as you can see, props can pass complex types of data, Data content can be changed by subcomponents. This is not recommended because vue is a one-way binding for props.)
Create an empty VUE instance, mount it to the prototype of the current VUE instance, and then a component does the emT transaction and the data to be passed. In the other component, you can use the emit to send events and data that need to be sent. The emit can then be used in the other component to send events and data that needs to be sent. The other component can use on to accept the event and handle the pass parameter
6. Why can only use mutation to change data
Differences between VUe2/0 and VUe3/0 Differences between VUe2.0 and VUe3.0
8. New vue3.0 features
9. Talk about the two-way binding of VUE2/0 in detail. How is the two-way binding of VUe3/0
VUE2.0: Data hijacking combined with the publiser-subscribe model, using Object.defineProperty () to hijack the seter. Getter for individual attributes. Vue3.0: VUe3 uses the Proxy API to implement the data Proxy by publishing messages to subscribers when data changes, triggering the corresponding listening callback
Vue – principle of the router
Vue -router is a route manager specially designed for VUE. 1. Hash mode: Default mode. H5 has a new historyAPI that does not display hash but requires server configuration. 404 Add a candidate resource on the server side that covers all cases. If the URL does not match the static resource, it should return the same index. HTML page, this page is their APP depends on the page, the server will not return 404 error page
Vue2.0: How does vue3.0 listen on an array
Vue2.0 has three methods: 1deep listening (not recommended) 2. Computed and watch listening for computed attributes 3. Watch directly listens for vue2.0 array methods for attributes in objects
In VUe3.0, a proxy can listen to an array and detect changes in the array without separate operations
Life cycle relationship between parent and child components. Parent communication, non-parent communication
Common modes of communication components: Functions EventBus vuex User-defined event List Item Boundary condition $parent $Children $root $refs provide/ Inject Non-prop feature $attrs $Listeners
Component communication details
16. Say key
Mainly used in the virtual DOM; Key to make a unique identification for each node, Diff algorithm can correctly identify this node, find the correct location area to insert a new node.
Talk about the virtual DOM. Virtual DOM for VUE3/0
The virtual DOM was designed to address browser performance issues. When you had to update the DOM multiple times you had to update the DOM each time you had a virtual DOM and instead of immediately erecting the DOM, the virtual DOM would store the diff content that had been updated multiple times into an object and then do it all at once. Greatly improved performance, the benefits of the virtual DOM is that the page update can be all reflected in the JS object (virtual DOM), after the completion of the update in the JS object into the real DOM to draw; Vue Core Virtual DOM(VDOM)
Vue3.0 virtual DOM. Static marking, upADte performance increased by 1.32 times, Static attribute optimization Static attribute dynamic binding attribute Patch Flag Static attribute optimization Event listener cache new feature of Vue3 (3) — the underlying principle of virtual DOM
18. What are the methods to jump to a page using routing
Use router-link this.router. P ush()th I s. router.push() this.router.push ()this.router.replace() $router. Go (n) this.$router. Go (n)
19. How is the redirect component destroyed
20. React vs. Vue
Similarities: 1. Both support server rendering 2. Both have virtual DOM componentization development and implement webConponent specification 3 for data transfer through props parameters. React React Native Vue WEEX 5. React, Redux, vue has its own vuex
React is strictly for MVC view layer, vue is for MVVM layer 2… Unlike Virtual DOM, VUE tracks the dependencies of each component without the need to re-render the entire component tree. React requires shouldComponentUpdate () to render every time the state of the application changes. React recommends using JSX + inline style, which translates HTML and CSS into JavaScript ‘all in JS’. Vue recommended practice is webpack+ VUe-Loader single file component format, i.e. HTML, CSS, JD written in the same file; 4. Data binding: VUE implements bi-directional data binding and React data flows are unidirectional. 5. In vUE, the state object is not required; the data is managed by the data attribute in the VUE object.
21, The difference between V-if and V-show
Both v-if and V-show can show and hide elements. 1. V-show simply controls the display attribute of elements, while V-if is conditional rendering. V-if has higher switching overhead, v-show has lower switching overhead. V-if can be used with v-else v-else if, v-show can not be used with v-if template. V-show can not be used with v-if template. For multiple dom operations, run v-show. If the dom operations are not frequent, you are advised to use V-if to reduce dom operations
22. Computed is different from Watch
For a computed name, it must be synchronized. A return must be used. Multiple value changes cause one value change, man-to-one watch: a name must reference an object in data
23, keep – live:
Keep-alive is an abstract component (built-in) : it does not render a DOM element on its own and does not appear in the parent component chain; Wrapping dynamic components with keep-alive caches inactive component instances rather than destroying them: state is retained in memory during component switching, preventing repeated DOM rendering, reducing load events and performance consumption, and improving user experience.
Vue optimization: VUE optimization
25, [vue] can a function name have the same name as the data in the data source when using calculated attributes?
Cannot have the same name because neither the computing properties nor the data or props are mounted on the VM instance, so none of the three can have the same name
How do [VUE] define global methods for VUE?
1. With Prototype, this is very handy. Vue.prototype[method]=method; Use (plugin); 3, through mixin, vue. mixin(mixins);
27. The diff algorithm:
28, Which is implemented first in Vue: Watch or created? Why is that?
Init ReActivity is later than beforeCreate but earlier than Created. Watch adds immediate, which should be executed with the init reactivity cycle before created. In a normal watch, data changes are executed after Mounted, which is later than Created.
29, [vUE] What are the usage scenarios of mixins in VUE?
Mixins are an extension of VUE components. Some common data or methods are used to build a data structure that can be mixed and merged by different VUE components, so that the same method or basic data can be used in different VUE components. Vue introduces mixins data. Mixins data or methods are independent of each other and belong to the VUE component itself. (In JS, somewhat similar to deep copy)
For components with repetitive methods, consider a mixin. Or for things like page permissions, consider a mixin
30. What is the difference between Created and Activated in VUE?
Created (): called immediately after an instance is created. In this step, the instance completes the configuration of data Observer, property and method operations, and watch/ Event event callbacks. However, the mount phase has not yet started and $EL Property is not currently available. Activated () : This lifecycle occurs during route setting. Called when activated by a keep-alive cached component.
31. How to introduce asynchronous components in a VUE project?
new Vue({
/
componets: {
my-componets: () = > import('./my-model-component')}})newA new vUE instance in the Component component of the VUE uses the arrow function to point to the asynchronous componentCopy the code32, [VUE] SCSS Scoped penetrator >>> invalid solutions in VUE project?
You can use the /deep/ operator (alias of >>>) :: V-deep
33, Why is v-for key not recommended to use random number or index? So how to use it better?
When inserting or deleting data, the index of the key binding of the following data will change, resulting in a new rendering, which will reduce the efficiency. When data is changed, the virtual DOM tree will be judged by the key to determine whether the virtual DOM tree has changed. If the same DOM-key is found, it can be reused directly. Reduced performance cost of rendering.
34, [vue] Where is vuE-loader in the Webpack compilation process?
Template compilation stage: starting from the entry file, call all configured Loader to translate the module, find out the module that the module depends on, and then recurse this step until all the entry dependent files have gone through this step
What is the difference between [VUE] prerendering and SSR(server-side rendering)?
There is a clear difference between server-side rendering and pre-rendering usage scenarios. Pre-rendered usage scenes are more in the form of what we call static pages. Server-side rendering is suitable for large, complex page data processing, and server-side data interaction functional websites, an obvious use scenario is e-commerce websites.
Have you ever used pre-rendering techniques? How did you do that?
Prerender-spa-plugin new PrerenderSPAPlugin({staticDir: path.join(__dirname, ‘dist’)), routes: [‘/’, ‘/home’, ‘/infomation’, ‘/ticket’, ‘/scenery’, ‘/about’], renderer: new renderer ({ False, renderAfterDocumentEvent: ‘render – event’})}), project all routing, the resulting after a few pages, all is based on the configuration, rather than your routing in vue – the router configuration.
37, how to use VUE to determine whether the page is edited and edit the page is not saved to leave, give a pop-up prompt
Set flag in the update hook function. BeforeDestory prompts watch() to listen for data changes based on flag
Nine, small program
The principle of wechat applets:
Start from the four layers of wechat applets: JS, WXML, WXSS, JSON. You can then analyze the webView and JScore sections of the applet.
Applets adaptation and H5 the difference between wechat applets life cycle
Ten, handwritten questions
11. Algorithm questions
Xii. Server
Xiii. Projects
Xiv. Miscellaneous
Performance optimization talk about the components you encapsulate talk about Node.js node.js process management what books you read what new things you’re learning about you said your project has five people, what’s the mode of operation front-end development. The difference between background oriented and user oriented if the user responds with a blank screen. How to deal with reactive pop-up ads reactive man-in-the-middle attack Linux commands do you know which implementations return to the top achieve uniform return to the top how to understand the large front direction LRU principle KOA Onion model
15. Data structure and algorithm
Data structures and algorithms what do you know about quicksort time complexity space complexity what is balanced binary tree diff algorithm complexity binary lookup binary tree implementation flip pseudo-random stack versus queue
16. Mobile terminal
Mobile terminal 300ms problem solution Mobile endpoint penetration problem talk about mobile terminal and h5 adaptation difference fastClickJS principle
Due to time constraints, many knowledge points in the article are referenced by other bloggers. If there is infringement, please contact me and delete it immediately
I recently formed a group of friends who are looking for jobs. If you are interested, you can chat privately. I will invite you to join the group