2021 end test summary
1. What is the difference between using link and @import? (1) Dependencies: Link is an HTML tag, @import is provided by CSS (2) Loading differences: When the page is loaded, link will be loaded at the same time, while the CSS introduced by @import will be loaded after the page is loaded. (3) Compatibility, @import is not compatible. Describe the difference between block-level elements and inline elements. What are inline elements and block-level elements? What element is Img? (1) The differences: ① The elements in the row will be arranged in a straight line, horizontally; Block-level elements occupy a row and are arranged vertically. A block element can contain an inline element and a block element. An inline element cannot contain a block element, but only text or other inline elements. Span, a, em, strong, and I, input, select (2) the block-level elements: div, ul, ol, li, h1-6, p (3) the img and input to replace inline elements, height/width/padding/margin are available. Display: Block 3, what’s new in H5? (1) the semantic tags: header, footer, section, nav, value, the article (2) enhanced form: the imput added multiple type (3) new form elements: datalist, the keygen, the output (4) new form properties: Placehoder, require, min, Max (5) Video, audio (6) Canvas, geolocation, drag and drop (7) localStorage, localStorage- data storage with no time limit, sessionStorage- data storage for one session, when the user closes the browser window, Data will be deleted (8) new events: onresize, onscroll, onerror, onplay, onpause, ondrag, onmousewheel webSocket (9) : full duplex agreement on a single TCP link 4, CSS selectors have? Priority (1) Wildcard selector (*) : (2) element selector (3) Id selector (4) Class selector (5) Descendant selector (6) child selector (7) adjacent selector ① Priority:! Import> Inline >ID selector > Class selector > Label selector 5, what is the CSS box model? How many box models are there? Css box model is a kind of thinking mode of Css technology. Css box model has two kinds, IE box model and W3C standard box model, where IE model width=content+padding+border, width=content+padding+border, Width =content (3) Margin (4) Padding (6) width=content (3) Margin (4) Padding (6) (1) Use appropriate semantic tags according to the structure of the content, so that browser crawlers and machines can better parse, while increasing the readability and maintainability of the code 7. XHTML (1) XHTML must be properly nested (2) XHTML tags must be lowercase (3) XHTML empty tags must be closed (4) XHTML documents must have root elements (8) Div + CSS layout benefits (1) Code is lean and structure is separate from style, Easy to maintain (2) reduced code, faster page loading, improved user experience (3) seo search engine more friendly, and H5 has added many semantic tags is more so (4) allow more cool page effect, rich page (5) in line with W3C standards, (1) Box-sizing:content-box(w3c) (2) box-sizing :content-box (1) Flex ① Display: Flex; justify-content:center; align-items:center; (2) position. Box {position: relative; height: 100px; width: 100px; background-color: pink; }
.box-center{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; width: 50px; height: 50px; background-color: greenyellow; } or. Box {position: relative; background-color: pink; }
.box-center{ position: absolute; left: 50%; top: 50%; Transform: translate(-50%,-50%) margin: auto; width: 50px; height: 50px; background-color: greenyellow; } 11, Flex compatibility issues (1) IE9 (including IE9) the following is not supported, ie10-11 part support, but requires -ms- prefix (2) other mainstream browsers including Android and ios basic support 12, font style easy to write (1) font: Font style font-variant font-weight font-size/line-height font-variant (1) The top and bottom margins of block elements sometimes merge (collapse) into a single margin (the largest margin after merging). This phenomenon is called margin collapse. A negative margin will change the display position of the floating element, even if my element is written after the DOM, I can make it appear first. Netscape6 above (3) Presto kernel: opera7 and above (4) Webkit kernel: 16, front-end performance optimization (1) reduce DOM operations (2) pre-deployment, image compression, code compression (3) optimize JS code structure, reduce redundant code (4) reduce HTTP requests, (5) Accelerating the use of content delivery CDN (6) Static resource caching (7) Image lazy loading 17, Understanding of front-end engineering (1) Development specification (2) Modular development (3) componentized development (4) Development warehouse (5) Performance optimization (6) Project deployment (7) Development process (8) Development tools 18, compatibility processing: filter.alpha(opacity) (2) Mozilla: The advantage of the REM layout over EM is that the font size does not gradually increase or decrease because the font size of the root element is always inherited. Rem units can be used not only for font size, but also for setting width and height and other sizes, so that pages can be adapted to different screen sizes. (1) CSS preprocessor is to use a specially defined programming language to increase the programming features of CSS, you can use variables, loops, nesting and other functions in CSS, CSS as a target file generation, so that CSS is more concise, readable and other benefits, There are three main types of CSS preprocessors, Sass, Less, and Stylus, which usually use webpack building tools to convert the files they generate into CSS files. (2) CSS post-processor is the processing of CSS and ultimately generates CSS preprocessors, which belong to the broad sense of the preprocessor. Post-processor usually adopts autoprefixer scheme, according to the defined browser list automatically add prefix 21, meta ViewPort six attributes (1) set width: width (2) set height :height (3) page initial zoom value: Initial-scale (4) : minimum-scale (5) : maximum-scale (6) : User-scalable 22, 1 pixel border Some phones have a higher resolution (2x or 3x). If you define a border of 1px in the CSS, the physical pixels of these phones may be 2,3 pixels (which looks much thicker than 1px). Implemented by Transform: Scale (0.5), by Viewport + REM 22, strict mode and promiscuous mode – how to distinguish these two modes, and what is the significance of distinguishing them? (1) Definition: DOCTYPE is a standard Generic Markup language document type declaration. Its purpose is to tell the standard Generic Markup language parser that it should use a declarative document type definition (DTD) to parse documents. Mainstream browsers that support the HTML5 standard recognize this declaration (2), which states the parse type of the document (document). CompatMode) to avoid weird modes for browsers
Typeof: ‘string’, ‘number’, ‘Boolean’, ‘undefined’, ‘symbol’; Typeof (null) : ‘object’; (2) Instanceof: Principle is the constructor’s prototype attribute appears in the Object prototype chain any position (3) the Object. The prototype. ToString. Call () : used to determine the browser built-in objects, for all the basic data types can judge, Array.isarray (): null and undefined (4) array.isarray (): null and undefined (4) array.isarray (): Var and function (2) {let, const, class, import}} Advantages and disadvantages (1) Advantages: ① Avoid pollution of global variables (2) want a variable to be stored in memory for a long time (cache variables) (2) disadvantages: ① Memory leakage (consumption) ② Resident memory, increase memory usage 4, (1) ES6 Set ① Let arr=[1,1,2,3,4,5,5,6] ② Let arr2=[…new Set(arr)] (2) Reduce() (3) Filter() (1) There are three stages: capture stage — target stage — bubbling stage. (2) Event proxy is simply: The event is not directly bound to an element, but is bound to the element’s parent element. When the event is triggered (e.g. ‘click’), the statement after the event is triggered (e.g. ‘alert(e.target.innerhtml)’) is executed by conditional judgment. Make code cleaner; One of the hallmarks of the Javascript language is that it can only do one thing at a time. Single threading means that all tasks need to be queued until the first one is finished before the next one can be executed. If the first task takes a long time, the second task has to wait forever. Js designers are aware of this problem and divide all tasks into two types, one is synchronous task and the other is asynchronous task. No asynchronous task will be executed until all synchronous tasks are completed. (1) A promise is a container that holds the result of an event (usually an asynchronous operation) that will end in the future. Syntactically, a promise is an object from which to get messages for asynchronous operations. Promises provide a unified API, and all kinds of asynchronous operations can be handled in the same way. The Promise object represents an asynchronous operation with three states: Pending, fulfilled, and Rejected. Only the result of an asynchronous operation can determine the current state, and no other operation can change the state. That’s where the name Promise came from. ② Once the state changes, it will never change again, and this result can be obtained at any time. The state of the Promise object changes, and there are only two results: from pending to depressing and from pending to Rejected. As soon as these two things happen, the state is fixed and will not change. This is called resolved. If the change has already occurred, you can add a callback to the Promise object and get the same result immediately. This is quite different from an event, which has the characteristic that if you miss it and listen again, you will not get the result. (3) Promise is a constructor. (4) Promise’s prototype method ① promise.prototype.then (): adds a callback to the promise instance when the state changes. (2) the Promise. The prototype. The catch () : when the error is used to specify the callback function (3) Promise. The prototype, the finally () : the finally method is used to specify whether or not the Promise object the final status, will perform the operation. This method is the standard ④ promise.all () introduced in ES2018: used to wrap multiple Promise instances into a new Promise instance ⑤ Promise.allSettled(): accepts a set of Promise instances as parameters, Wrap it into a new Promise instance. ⑥ Promise.any(): introduced by ES2021, it accepts a set of Promise instances as parameters and returns them wrapped as a new Promise instance. As long as one parameter instance becomes a depressing state, the packaging instance will become a depressing state. ⑦ Promise.resolve() : Resolve (): this is the case when you need to turn an existing object into a promise object. HTTP details (1) A complete HTTP transaction flow ① domain name resolution ② initiate TCP three-way handshake ③ Initiate AN HTTP request after establishing a TCP connection ④ The server responds to the HTTP request and the browser gets the HTML code ⑤ The browser parses the HTML code. (1) The translation from the URL to the IP address, called DNS resolution, DNS resolution is a recursive query process 10, three handshake (1) the first handshake: establish a connection. The client sends a connection request packet (2). The server receives the request and returns the request. (3) The server transmits data. (1) 1** : the server receives the request and requires the requestor to continue the operation. Redirection, further action required to complete the request (4) 4** : client error, request contains syntax error or cannot complete the request (5) 5** : server error, server error in processing the request 12, browser rendering process: (1) The browser parses the HTML source code and creates a DOM tree: In the DOM tree, each HTML tag has a corresponding element node, and each text also has a corresponding text node. The root node of the DOM tree is the documentElement, which corresponds to the HTML tag (2). Then create a render tree based on the DOM tree and the CSSSOM tree. (4) After the tree is created, the browser can draw the page directly to the screen based on the tree. (1) Reflow: the browser takes time to render, and when it finds that something has changed and affected the layout, it needs to go back and rerender. If you change an element’s background color, text color, etc., without affecting the surrounding or interior layout of the element, it will cause the browser to repaint a portion of the element. Reflow takes more time than Repaint, so it affects performance more. Try to avoid backflow (4) When does reflow occur? (1) Page initialization (2) DOM manipulation (adding or removing DOM elements) (3) Size of some elements (margin, padding, border, width and height) (4) Css properties change (hide display: ⑥ The browser window size changes (when the resize event occurs) 14, how to reduce reflow/repaint? (1) Instead of changing the DOM style one by one, you can pre-define the CSS class and then change the DOM className. Modify multiple elements that need to perform the same operation at once (2) do not place DOM node property values in a loop as variables in the loop (3) When an animation element is removed from the document stream using fixed or position, Reflow does not occur when modifying their CSS. (4) Do not use the table layout, because small changes can cause the entire table to be rearranged. (5) Operate the node in memory several times, and then add it to the document. (6) If you need to perform complex operations on an element, (display: None) (display: None) (display: None) (display: None) (display: None) (display: None) (display: None) (display: None) (display: None) (display: None) (display: None) (display: None) (display: None) (display: None) CSS loading does not block the dom tree parsing (2) when the page loads, according to from top to bottom, from left to right order loaded, if the js in front, will be executed immediately, block the subsequent resource download and execution, rapid static page to appear either at the same time (3) some js depends on the style (4) in front of js is commonly processing functions, (1) Use CDN (2) compress CSS (3) Make proper use of cache (4) Reduce HTTP requests, merge CSS files (17), optimize page performance? (1) 16 fully available (2) style sheets at the head, scripts at the bottom (3) reduce reordering and redrawing 18, JS inheritance (1) prototype chain inheritance ① focus; The constructor attributes of the instance, the constructor attributes of the parent class, and the prototype attributes of the parent class can be inherited by the instance. (The instance does not inherit the attributes of the parent instance!) (3) shortcomings
- The new instance cannot pass arguments to the parent constructor
- Inheriting the single
- All instances share attributes of the parent instance
(2), borrow constructor inheritance (3) combination inheritance (4) primitive inheritance (5) Parasitic inheritance (6) Parasitic combination inheritance 19, call: syntax fn. Call (obj,… Apply: fn. Apply (obj,arr) (1) apply: fn. Apply (obj,arr) (1) apply: fn. fn.bind(obj,… (1) Functions: Call ()/apply()/bind() (1) Call (obj) /apply(obj) call(obj) /apply(obj) Specify this as the value of the first argument in the function bind(obj); Return a new function that calls the original function internally, and this is the value of 23 as the first parameter specified by bind (), throttling (1) Page scroll, DOM element drag (mousemove), snap up click (click), playback time, progress bar information (3) The throttling function is executed at most once within the set delay milliseconds (simply speaking, I lock, no matter how many times you click, I will unlock when the time is up). (2) Scenario: real-time association of search box (keyUP/INPUT), button click too fast, multiple requests, window adjustment (3) Function: The anti-shake function is called after the delay is delayed milliseconds, and before the delay is reached, you click again, clear the timer and start again until the delay is so many seconds
26, Function unique(arr) {const res = [] const obj = {} arr. Foreach ((item) => {if (item] === undefined) {function unique(arr) {const res = [] const obj = {} arr. Foreach ((item) => {if (item] === undefined) { Obj [item] = true res.push(item)}}) return res} // other methods // array. from(new Set(Array)) //[…new Set(Array)] 27, (1) for primitive types, all types except null can display the correct type, but for objects, all functions except array and object are object, so to determine the correct Typeof an object, use instanceof 28. Instanceof (1) [] Instanceof array //true 29, Constructor (1) ([]). Constructor === array //true 30 Constructor, each object has a _proto_ pointing to its prototype. (2) The prototype chain is made up of prototype objects, each object has a _proto_ attribute, The prototype refers to the constructor that creates the object. _proto_ connects objects together to form a prototype chain, which is a finite chain of objects used to implement inheritance and shared properties 31, (1) Flat() removes empty items ① Let arr=[1,2,[3,4],[5,6]] ② Let BRR =[].concat(… arr); 32, XSS attack and Prevention (1) XSS; Cross-site scripting attack means that the attacker will try every means to inject executable code into the web page, which will execute malicious code (such as obtaining user cookies and tokens) when opening the web page. (1) Input check: Limit the characters allowed to be input in different scenarios, and limit the length and format of the input. (2) Output check: Strict output encoding, HTML encoding, JS encoding, CSS encoding, URL encoding (3) Set HTTP header (CSP); By the way to increase the difficulty of XSS tools, by browser interception (4) Cookie set httpOnly attribute, prevent JS from reading Cookie (5) verification code operation, prevent scripts posing as users to submit dangerous operations 34, CSRF attack and Prevention (1) CSRF attack (Cross Site Request Forgery): The attacker sends forged requests to the server disguised as users with the help of the victim’s credentials (cookies). The attacker induces users to enter the third party website, sends requests to the attacked website in the third party website, and bypasses the website’s verification of requests by using the user’s registration credentials previously obtained by the attacked website. Thus posing as a user for an operation ④ prevention: Set the sameSite attribute on the cookie of the response header ⑤ verify the referer ⑥ Use token, abandon the cookie to verify the user 34, man in the middle attack and attack means (1) Man in the middle attack, when the data leaves one endpoint to another endpoint, The process of data transmission is the process of losing control of the data. In this case, when a middleman stands between two endpoints to hijack and forward the data, this is called the man-in-the-middle attack 35, HSTS(prevent 301/302 redirection hijacking) (1) from the insecure HTTP domain name to secure HTTPS domain name 36, Binary framing: Http2 divides the original HTTP information into smaller frames and encodes them in binary format. For example, the header information in HTTP1 is now in the header frame, and the body information is in the Data frame. (header or data can also be stored in multiple frames, such as header frame 1 and header frame 2.) (2) multiplexing: All requests in HTTP2 share one TCP connection. Specifically, the client sends multiple requests to the server, and these requests are split into multiple frames that are transmitted in parallel over the TCP link. When the request reaches the server, because the same request is in the same stream, Http2 uses hPACK compression to reduce the amount of header data in each request. (4) Server side push: In addition to responding to the original request, the server can also push other resources to the client. (The resources to be pushed must comply with the same origin policy.) 37. (4) Put: updates data (5) Options: returns HTTP request methods supported by the server (such as cORS cross-domain precheck request) (6) Head: sends a response header to the server that is consistent with the GET request (7) Trace: (8) Connect: http1 reserved for proxy servers that can change the connection mode to pipe mode (9) Patch: A supplement to the PUT method that performs a local update to a resource, such as a field in a table that needs to be passed in to update the value 38. What does the browser do when clicking a button (1) create the current event instance (2) place the current event in the event queue via an event loop (3) execute the event after the synchronization task has completed (4) Event capture phase (from top dom to target node) (5) Target event (execute event) (6) Bubble stage (bubbling from target node to dom top layer) 39, five-layer model of network (1) application layer (2) transmission layer (3) network layer (4) Data link layer (5) physical layer 40, SSL (Secure Sockets Layer) and TLS (Transport Layer Security) protocols provide security and data integrity for network communications. In other words, asymmetric encryption is used to generate symmetric encryption keys. SSL3.0 came out in 1996, and SSL3.1 was standardized and updated to TLS1.0 in 1999, so TLS1.0===SSL3.1; 41. Brief introduction to PWA: Progressive Web App, in fact, is to use web technology to write a webpage application, add app Manifest and Servive worker to realize the installation and offline functions of PWA 42, Black Formatting Context (BFC) is a block level formatting context. It is an independent rendering area, and only BLCOK-level BOS is involved. It specifies how the internal BLCOK-level box is arranged. (1) The web page and each of its elements have a coordinate system, and the HTML elements are arranged along an imaginary Z-axis relative to the user. The cascading context is a three-dimensional representation of these HTML elements. HTML elements occupy this space in order of priority based on their element attributes 44, the process from entering the URL to the page display (1) Perform DNS domain name resolution on the URL to obtain the corresponding IP address (2) according to the IP address, find the corresponding server, Initiate a TCP three-way handshake (3) Initiate an HTTP request after establishing a TCP connection (4) The server responds to the HTTP request and the browser obtains the HTML code (5) The browser parses the HTML code and requests resources in the HTML code (such as JS, CSS, and images). (6) the browser renders the page to the user (7) the server closes the TCP connection (45) stack memory and closure scope (1) basic types are stored directly, reference types are stored in the heap first (2) reference types are a heap, each heap has a hexadecimal address, Can give us direct access (object heap stores key-value pairs, function pairs store code strings – function is both function and object, store prototy, length, name etc. key-value pairs when dropped) 46, new What happens to a function? (1) Create a new object. (2) This object performs a Prototype connection, linking the new object’s prototype to the object pointed to by the constructor prototype. (3) This new object is bound to the function call’s this. So the function call in the new expression will automatically return this new object 47. What’s the closure? (1) a closure is a function that has access to a variable in another function’s scope. (2) The nature of closure generation: references to the parent scope exist in the current environment. (3) What is a closure? A closure is A special object that consists of two parts, the execution context (code A) and the function created within that execution context (code B). When B executes, if the value of A variable object in A is accessed, the closure is generated. And the name of the function used in the execution context A in the browser refers to the closure (4) how the closure is generated ① returns the function ② passes the function as an argument (5) the application scenario of the closure ① Bind ② module 48, macro and microtask: JS asynchronous tasks. (1) When the micro task and macro task are not nested, the micro task is executed first and then the macro task is executed. When the macro task and micro task are nested, (2) Macro task ① SetTimeout ② setInterval ③ setImmediate ④ requestAnimationFrame (3) Microtask ① process.nexttick ② MutionObserver ③ Promise. Then catch finally 49, which array methods will change the original array? Will change: pop, push the shift, unshift, reverse, sort, splice, copyWithin, the fill will not change: Concat, Join, slice, toString, toLocalString, indexOf, lastIndexOf, includes All methods outside of Slice that affect the array length property or position transform change the array
Vue interview question 1, what are the advantages of the Vue framework? (1) Lightweight framework: (2) Simple and easy to learn, the document is smooth and clear, and the syntax is simple. (3) Two-way data binding, data view structure separation, only need to operate the data to complete the corresponding page update. (4) Componentized development, clear engineering structure, easy code maintenance. (2) Model represents the data layer, which is responsible for storing business-related data. (3) View represents the view layer, which is responsible for displaying data on the page. Methods of transferring values between VUE components (1) The parent component transmits values to its child component (1) The parent component binds custom properties in the tag of the child component (2) the child component receives values from its parent component (3) The parent component binds custom events in the tag of the child component (3) The child component transmits values to its parent component (4) The parent component binds custom events in the tag of the child component (4) The child emits a custom event via the this.$emit() method, which is passed to the parent (3) siblings: ② Using VUEX ③ Using bus event bus 4 Vue Lifecycle Hook function (1) Beforecreate (2) Created (3) beforeMount (4) Mounted (5) beforeUpdate (6) Updated (7) beforeDestory (8) Why data must be a function in the Vue component? (1) If data is an object, when reuse components, because data will point to the same reference type address, once the data of one component is modified, the data of other reused components will be modified as well. If data is a function that returns an object, because every time a component is reused it returns a new object with a different reference address, the above problem does not occur. (1) support the cache, only depend on the data changes, will back to calculate function attribute does not support asynchronous operations within (3) (2) to calculate the properties of the function has a get (by default, has access to computing properties) and set (added manually, setting calculation properties) method (4) attribute is calculated by the change of the automatic monitoring rely on, To dynamically return the content. (2) Listening attribute watch: The value of the listening attribute can be an object that accepts callbacks from the handler, deep, and immediate attributes. The value of the listening attribute can be an object that accepts callbacks from the handler, deep, and immediate attributes. And do something else