The browser

Cookie, localStorage, sessionStorage?

1. Cookie data is always carried (even if it is not needed) in same-origin HTTP requests, that is, cookies are passed back and forth between the browser and the server, whereas sessionStorage and localStorage do not automatically send data to the server and only keep it locally. 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, and because cookies are carried with each HTTP request, cookies are only good for small data, such as session identifiers. SessionStorage and localStorage, while also limited in size, are much larger than cookies, reaching 5M or more
3. SessionStorage: valid only 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 scopes, sessionStorage is not shared in different browser Windows, even on the same page; Localstorage is shared in all origin Windows; Cookies are also shared across all the same origin Windows

What is the difference between cookie, session and token?

A cookie is a very specific thing. It refers to a kind of data that can be stored permanently in the browser. It's just a data storage function implemented by the browser

The server uses a session to temporarily store user information on the server, which is destroyed when the user leaves the site. This method of storing user information is more secure than cookies, but sessions have a drawback: if the Web server is load-balanced, the session will be lost when the next operation request reaches another server

Token user authentication is a stateless authentication mode on the server. The server does not need to store token data. The computation time spent parsing tokens is exchanged for storage space in the session, thus reducing the strain on the server and reducing frequent queries to the database. Token is completely managed by the application, so it can avoid the same-origin policy

Why can cookie attack, but not token attack?

1. In the first place, tokens are not XSS proof, but CSRF proof
2. The reason for CSRF attacks is that the browser automatically carries cookies, but the browser does not automatically carry tokens.

Token: After the user clicks the link, the browser does not automatically carry the token. Therefore, even after the request is sent, the token authentication fails. Therefore, the backend does not perform other operations

Cross-domain solutions (5)?

The same origin policy is a convention. It is the core and most basic security function of the browser. Without the same origin policy, the browser is vulnerable to XSS and CSRF attacks. Same-origin means that the protocol, domain name, and port are the same. Even if two different domain names point to the same IP address, they are not same-origin. After AJAX requests are sent from DOM nodes of stored content such as cookies, LocalStorage, and IndexedDB, the browser intercepts the results

But there are three tags that allow cross-domain loading of resources: img Link Script

1. jsonp
   • Web pages can get JSON data dynamically generated from other sources by taking advantage of the fact that tags have no cross-domain limitations. JSONP requests must be supported by the other party’s server.
2. cors
   • CORS requires both browser and backend support. Internet Explorer 8 and 9 need to be implemented through XDomainRequest.
   • The browser will automatically carry out CORS communication, the key to achieve CORS communication is the back end. As long as the backend implements CORS, cross-domain is achieved.
3. postMessage
   • The postMessage() method allows scripts from different sources to communicate asynchronously in a limited manner, enabling cross-text file, multi-window, cross-domain messaging.
4. webSocket
   • WebSocket is a two-way communication protocol. After a connection is established, both the webSocket server and client can actively send or receive data to each other
5. Nginx reverse proxy
   • It works like a Node middleware proxy, requiring you to set up a forwarding Nginx server to forward requests.
6. iframe

What’s the difference between HTTP and HTTPS?

HTTPS uses asymmetric encryption to prevent data theft during transmission. The public key is held by the certification authority

What happens between entering the URL and presenting the page?

How does the browser work?

Steps for browser rendering

Calculate the information of each node according to the Render Tree. Render the whole page according to the calculated information

If the browser encounters a script tag while parsing the document, it immediately parses the script and stops parsing the document (because JS can change the DOM and CSS, and continuing parsing is wasteful). In the case of an external script, parsing the document will continue after the script has been downloaded. Now that the script tag has deferred and async properties, script parsing will parse out changes to the DOM and CSS in the script and append them to the DOM Tree and Style Rules

Event Loop execution mechanism

Macro task, micro task, task queue

Design patterns

Observer pattern, Policy pattern, adapter pattern, factory pattern, composite pattern, proxy pattern, facade pattern

Js based

Function scope

The function scope is created when the function is called and destroyed when the function is finished executing. Each time a function is called, a new function scope is created, independent of each other. In function scope, variables of the global scope can be accessed. Variables in the function scope cannot be accessed in the global scope

Global scope

JS code written directly within a script tag is either globally scoped or in a separate JS file. Global scopes are created when the page is open and destroyed when the page is closed. There is a global object window (representing a browser window created by the browser) in the global scope that can be used directly.

Block-level scope

Block scopes are included in {}. The {} in the if and for statements also belong to block scopes

Static scope

The scope of a function is determined when the function is defined

Dynamic scope

The scope of a function is determined at the time the function is called

The concept of closures

The concept of performing functions immediately

The difference between a closure and an immediate function

Base data type, reference data type

String, number, Boolean, NULL, underpay, Symbol Function, object, array

Storage of data types (heap, stack)

Implicit conversion of data types

Prototype chain

Linked lists (unidirectional and bidirectional)

Symbol

Common DOM operations

new

Handwriting various native methods

The Set and Map

Talk about short polling, long polling, long connections, and short connections in the HTTP protocol

css

What about Flex layout and common properties?

Mobile responsive design?

1. Viewport Viewport Settings
2. @media Media query
3. Do not write dead size
   • Use the percentage width to determine the layout size
   • Rem and EM are used to determine the layout size
   • Use VH and VW to determine the layout size

ES6

This refers to the principle

Prototype/Prototype chain

Object-oriented correlation

Synchronous async/callback /promise/async, await

Modular CommonJS, AMD

webpack

1. How is Webpack different from Grunt and gulp?
2. What are the common loaders? What problems do they solve?
3. What are the common plugins? What problems do they solve?
4. What is the difference between Loader and Plugin?
5. What is the webPack build process? The process from reading configuration to output file is as complete as possible
6. Have you written Loader and Plugin? Describe the idea of writing a Loader or plugin?
7. How does webpack’s hot update work? How does that work?
8. How can YOU leverage WebPack to optimize front-end performance? (Improved performance and experience)
9. How can I speed up webPack building?
10. How to configure a single page application? How to configure a multi-page application?
11. What do YOU need to pay attention to when packaging NPM? How can WebPack be used for better builds?
12. How to implement on-demand loading in a VUE project?

Font icon library

vue

1. MVC and MVVM introduction and differences.
2. Communication between VUE components
3. Vue sibling component communication
4. Vue parent-child component communication
5. Vue horizontal component communication
6. Partition of VUE components
7. Vue dynamic routing
8. Vue route interception
9. Vuex understand
10. Axios understand
11. Postcss understand
12. Vue custom command
13. Vue bidirectional data binding principle (source code implementation ideas)
14. Vue keep-alive’s understanding
15. Vue Mixins understanding

Code specification

1. CSS code specification
2. Js code specification
3. Templete code specification
4. Vue file code specification
5. Annotation specifications
6. Project directory structure specification

Performance optimization

Front-end performance optimization is divided into two directions, one is engineering direction, the other is detail direction. This concept comes from Zhihu Lucas HC.

Engineering direction

1. Client Gzip offline package, server resources Gzip compression.
2. JS slim, Tree Shaking, ES Module, dynamic Import, dynamic Polyfill.
3. Image loading optimization, Webp, considering compatibility, can load a picture in advance, sniff whether support Webp.
4. Lazy loading does not require long content. Click to see if some popover or subcontent should be initialized to load.
5. Server render, client prerender.
6. CDN Static resources
7. Webpack Dll, generic priority pack extraction, use browser cache.
8. Skeleton diagram
9. Data prefetch, including interface data, and load detail page images.
10. Webpack itself offers optimization, Base64, resource compression, Tree Shaking, unpacking Chunk.
11. Reduce redirection.

Details of the direction

1. Picture, picture placeholder, picture lazy loading. 4. Async (execute js immediately after loading current JS) /defer(execute JS after loading all resources) 5. Reduce Dom operations and rearrange redraw 6. The first screen reduces interaction with the client and merges interface requests. 7. Data caching. 8. The home page does not load invisible components. 9. Prevent rendering jitter and control timing. Reduce the component hierarchy. 11. Use Flex layout first.

Carden problem solved

1. CSS animation efficiency is higher than JS, CSS can be GPU accelerated, 3D accelerated. If you must use JS animations, you can use requestAnimationFrame.
2. Batch DOM operations to fix the size of image containers to avoid screen jitter.
3. Reduce redrawing rearrangements.
4. Throttling and anti-shaking.
5. Reduce temporary large object generation by using object caching, mainly to reduce memory fragmentation.
6. Asynchronous operation, IntersectionObserver, PostMessage, RequestIdleCallback.

Performance Optimization API

1. The Performance. Performance.now () differs from new Date() in that it is high precision and is relative to the time at which the page loads. But not necessarily suitable for single-page scenarios.
2. window.addEventListener(“load”, “”); window.addEventListener(“domContentLoaded”, “”);
3. The onload event of Img monitors whether the image in the first screen is loaded and determines the first screen event.
4. RequestFrameAnmation and RequestIdleCallback.
5. IntersectionObserver, MutationObserver, PostMessage. 6. Web Worker, where time-consuming tasks are executed. #### Detection tool
6. Chrome Dev Tools
7. Page Speed
8. Jspref