I have been interviewing candidates recently, and I have summarized some of the 10 interview questions with high frequency, and I would like to share them with you.

1. Talk about the process of entering the URL and pressing enter

1. Read cache: Searches its OWN DNS cache. (If an IP address is found in the DNS cache, skip the next step of looking up the IP address and directly access the IP address.) TCP connection: TCP three-way handshake client: Server Are you there? Server: CLIENT I am here, do you want to connect me? Client: Yes server, I want the link. The server processes the request and returns HTTP packet 6. 7. Disconnect: TCP wave four times and we can talk a little bit about the sixth step of the browser parsing the rendered page if you return an HTML page and you parse the DOM tree from the HTML and you parse the CSS and you generate the CSS rule tree and you combine the DOM tree with the CSS rule tree, Generate rendering tree according to the rendering tree to calculate the information of each node according to the calculated information to draw the pageCopy the code

2. What is the difference between deep and shallow copies of JavaScript?

Shallow copy: Shallow copy can be assigned () using the new ES6 feature Object.assign() or by extension operations... The shallow copy modifies the copy and does not affect the original data. However, the shallow copy can only copy the data of the first layer and all the data are of value type. If there is reference data, modifying the copy will affect the original data. Deep copy: By using JSON. Parse (JSON. Stringify ()) to achieve the purpose of deep copy, but using JSON copy is also flawed, when it comes to copying of data contain undefined/function/symbol type is impossible to copy, Of course, we would like to project development need deep copy data generally does not contain the above three types, if necessary, you can encapsulate a function to achieve. Extended question: What are reference types? What is the idea of implementing a deep copy function?Copy the code

3. Describe the ways in which CSS can be vertically centered.

2. Table layout, display: table-cell; 3. Flex layout, align-items: center; 4. Absolute positioning, Top: 50%; transform: translate( 0, -50%); 5. display: inline-block; Use this parameter at the same time as vertical-align: middle.Copy the code

4. What are front-end security XSS and CSRF respectively? How to prevent it?

1. XSS: cross-site scripting attacks

The attacker tries every means to inject executable code into the web page storage type (server side) : Scenario: see with user saved data site functions, such as forum posts, product reviews, user private messages, etc. An attacker submits malicious code to the database of the target website. When a user opens the target website, the Server extracts the malicious code from the database and splices it into HTML and returns it to the browser. Reflection (Server) Scenario: Functions that transfer parameters through urls, such as website search and jump. The attacker constructs a special URL that contains malicious code. When a user opens a URL with malicious code, the website server will take out the malicious code from the URL and splicing it into Dom type (browser-side) Dom TYPE XSS attack. The extraction and execution of malicious code are completed by the browser side, which is a security vulnerability of front-end JavaScript itself. The other two types of XSS are server-side security vulnerabilities. Prevention scheme :(prevent attackers from submitting malicious codes and browsers from executing malicious codes) 1. Strict output encoding of data: such as HTML element encoding, JS encoding, CSS encoding, URL encoding, etc. Avoid splicing HTML; Vue/React stack, avoid using V-html/dangerouslySetInnerHTML 2. CSP HTTP Header, Content-security-policy and x-xss-protection Increase the difficulty of attacks and configure CSP(essentially creating a whitelist for the browser to intercept). Content-security-policy: Default-src 'self' - All Content from the same source of the site (excluding subdomain names) content-security-policy: Default-src 'self' *. Trusted.com - Allow Content from trusted domain names and their subdomains (domain names do not have to be the same as the domain where the CSP Settings are located) content-security-policy: Default-src https://yideng.com- This server allows documents to be accessed only through HTTPS and from the yideng.com domain name. 3. Input verification: such as some common numbers, URL, phone number, email address and so on to verify judgment 4. Enable browser XSS defense: Http Only cookie prevents JavaScript from reading sensitive cookies. Attackers cannot steal cookies after XSS injection. 5. Verification codeCopy the code

CSRF: Cross-site request forgery

The attacker lures the victim to a third-party site, where a cross-site request is sent to the targeted site. Using the victim's registration credentials obtained from the attacked website, bypassing the user authentication in the background, the victim can impersonate the user to perform an operation on the attacked website. The victim logs on to the a.com and keeps the login credentials (cookies) 2. The attacker lured the victim to visit b.com. 3. B.com sent a request to a.com: a.com/act=xx browser will carry the Cookie of a.com by default. 4. After receiving the request, a.com verifies the request and confirms that it is the victim's credentials, mistakenly thinking that the request is sent by the victim. The attack is complete, the attacker in the victim unaware of the situation, posing as the victim, let the a.com to perform their own definition of the operation attack type: 1. GET: such as in a page img launched a GET request 2. POST: through automatic submission of forms to malicious websites 3. Link type: the user needs to be induced to click the link. Prevention schemes: 1. Origin detection: The Origin Header and Referer Header of the Header are used to determine the Origin detection, but different browsers may have different implementations, which cannot be completely guaranteed. The CSRF Token is output to a page (usually stored in a Session), the request submitted by the page carries the Token, and the server verifies that the Token is correct. 3. Dual cookie authentication: When the user visits the website page, a Cookie is injected into the request domain name, the content is a random string (for example, cSRFCookie = V8G9e4ksfhw). When the front-end and back-end initiate the request, the Cookie is taken out and added to the parameters of the URL. The back-end interface verifies whether the fields in the Cookie are consistent with those in the URL parameter, and rejects any inconsistency. 4. Samesite Cookie attributeCopy the code

5. Talk about front-end engineering, modular, componentization

1. Front-end engineering

1. Analyze, organize and construct front-end projects as a system engineering so as to achieve clear project structure, clear division of labor, tacit team cooperation and improved development efficiency. 2. Such as directory is divided into assets, the components, the router, utilCopy the code

2. Front-end modularization

1, can simply think of modular and componentalization is the expression of engineering 2, JS modular scheme many AMD/CommonJS/UMD/ES6 Module,CSS modular development is mostly in less, SASS, stylusCopy the code

3. Front-end componentization

1, componentization of the page as a container, each independent part of the page such as: head, navigation, focus map, sidebar, bottom, as independent components, different pages according to the needs of the content, to put related components can form a complete page. 2. One of the most direct benefits of modularization and componentization is reuse + divide-and-conquerCopy the code

6. How is Vue bidirectional binding implemented?

Vue uses data hijacking and publiser-subscriber mode, using Object.defineProperty () to hijack getters and setters for properties when data changes, publish messages to the dependent collector, notify the observer, and make corresponding callbacks to update the view. Specifically: MVVM as the binding entry, integrate Observe,Compil and Watcher, listen to model changes through Observe, parse and compile template instructions through Compil, Finally, Watcher is used to build the communication bridge between Observe and Compil so as to achieve the bidirectional binding effect of data change => update view and view interactive change (input) => data model change. Extended question: What are the changes and advantages of two-way binding in VUe3.0?Copy the code

7. Talk about the role of Babel. What is the process?

Overview: Babel is a tool for converting ECMAScript 2015+ version code into backwardly compatible JavaScript syntax so it can run in current and older browsers or other environments. Parse: Convert code (actually strings) into an AST(abstract syntax tree) transform: Access the nodes of the AST to perform transformation operations to generate a new AST generate: The AST is a tree structure that describes the code's variable declarations, assignments, parentheses, function calls, etc. Babel interprets the source code into syntax and API parts: Syntax similar to expand object, optional chain, let, const, etc. 2. API: similar to [1,2,3]. Includes, map, etc.Copy the code

8. Talk about front-end performance optimization

Several aspects to illustrate front-end performance optimization routines: 1. Babel-loader uses include and exclude to help avoid unnecessary translation of js files in node_moudules. 'babel-loader? CacheDirectory =true' 2. Files are loaded on demand etc. 3. To do this, add accept-Encoding :gzip 4 to your Request Headers. 5. Browser cache mechanism, which is divided into strong cache and negotiated cache: SessionStorage, localStorage, and cookies React Native,Flutter, HTTP2, 3, etc.Copy the code

9. How to analyze and solve the problem of white screen?

Detection of blank screen: 1. Detection of key DOM rendering on the page 2. General DOM rendering listening 3. Use Performance. GetEntries ("paint") to get FP/FCP. Network status 2. Script error 3. Js, CSS and browser or WebView compatibility problem Solution: 1. Skeleton screen 2. Enable server rendering SSR 3. Static HTML on the first screen 4. Offline package or PWACopy the code

10. What complex problems have you encountered in your work and what are the solutions?

Open questions