preface
Looking for a job or we need to not be nervous, stem our line of contact is not many people, it is inevitable to see the interviewer will be nervous, mainly because the interviewer asked the question can not answer, don’t worry at that time, can not answer the question don’t talk nonsense, directly to the interviewer that I have not been in touch with, Later if you meet a word I can work quickly to solve this problem, but we have this article, on the other hand, interview of a consortium of some basic knowledge, the company is the benchmark of the industry, brush a brush more interview is of great help/very helpful to all of you, I am here wish you work smoothly, happy every day ~ okay, here’s to the chase.
Due to the limited space of this article, it is not possible to present all the interview questions in text form. Here is a selection of interview questions for you. If you need them, you can click the portal below to get the questions + analysis for free
Click on the free title + parse PDF
CSS
1. Box-sizing can be used to set the layout model of DOM elements for page rendering. Content-box (W3C standard box model) border-box (IE box model) padding-box (Previously supported by FireFox) margin-box (not implemented by browser)
The w3c and MDN specifications only support Content-box and border-box.
2. Add the BORDER, padding and itself (excluding margin) to the IE box model. The standard CSS setting method is as follows:
Standard model :box-sizing:content-box; IE model: box – sizing: border – box; Copy the code
3. Several ways to get width and height:
Dom.style. width/height this method can only be used to get the width and height of the INLINE style of the DOM element, that is, if the style of the node is set in the style tag or in an external CSS file, this method can not get the width and height of the DOM. Dom. CurrentStyle. Width/height is obtained after the page rendering this way, the result of the style to say either way, you can get. However, this method is only supported by Internet Explorer. Window.getcomputedstyle (dom).width/height the principle of this method is the same as 2, this can be compatible with more browsers, more general. Dom. GetBoundingClientRect (). The width/height is this way according to the elements in the Windows of the absolute position to obtain wide high dom. The offsetWidth/offsetHeight that have nothing to say, the most commonly used, It is also the most compatible.
4. Expand the variety of ways to get width and height:
To obtain the height and width of the screen (screen resolution) : window. The screen. The height/width for the working area of the screen height and width (remove the status bar) : window. Screen. AvailHeight/availWidth page full height and width: Document. The body. The article scrollHeight/Width rolling roll up the height and the Width of the rolls to the right: the document. The body. The scrollTop/scrollLeft page visible region of the height and Width (do not add line) : Document. Body. ClientHeight/clientWidth page visible region of the height and width (line) : document. Body. OffsetHeight/offsetWidth
5. Edge Overlap solution (BFC)
The inner boxes will be placed vertically, one after the other, to the left of the margin box containing each element, touching the left of the border box containing the block (for formatting from right, otherwise the opposite). The vertical distance of the box is determined by the margin. The margin of two adjacent boxes belonging to the same BFC will overlap. The BFC area will not overlap with the box of the floating area. The BFC is an independent container on the page, and the elements outside the BFC will not affect the elements in the BFC. Float elements also participate in the calculation to create a BFC float property that is not None (out of the document stream) and position that is absolute or fixed Display inline-block,table-cell, table-texted,flex,inine-flex overflow; display inline-block,table-cell, table-texted,flex,inine-flex overflow; Under the margin – top: 50 px;
6. What is the difference between CSS reset and normalize.css?
Both are consistent browser styles by restyling the former adds styles to almost all tags, the latter keeps as many browser styles as possible consistent the latter fixes common desktop and mobile browser bugs: These include display Settings for HTML5 elements, font-size issues with pre-formatted text, SVG overflow in IE9, and many forms-related bugs in browsers and operating systems. The former has a large inheritance chain and the latter is modular and more documented than the former
7. CSS priority setting:
Each selector has a value, and the larger the weight, the higher the priority of the inherited style is lower than its own specified style! At the same time, styles close to elements have higher priority in order of inline style sheets (inside the tag) > internal style sheets (in the current file) > external style sheets (in the external file).
8. Adaptive layout:
Left float or absolute position, then right margin spread using div inclusion, then negative margin form BFC using Flex
9. Link@import import CSS:
Link is an XHTML tag that, in addition to loading CSS, can define other transactions such as RSS; @import belongs to CSS and can only load CSS. When link references CSS, it is loaded at the same time as the page loads. @import requires the page to be loaded after the page is fully loaded. Link Has no compatibility problem. @import was introduced in CSS2.1 and is not supported by older browsers. Link supports using Javascript to control the DOM to change styles; @import is not supported.
10. Length-width ratio scheme:
Use padding in combination with calc to implement length, width, percentage, and aspect-ratio (plug-in required)
11. The display:
Block: div container types such as inline: img span such as inline type table series: style into table type flex: mainly master, very powerful grid: ditto the inline – block: width can be set up, a bit of a gap between inherit: inherit the parent
12. The CSS optimization:
The hierarchy is flat, avoiding too many layers of selector nesting; Specific selectors are better than layer by layer searches:.xxx-child-text{} is better than.xxx. child-text{} to reduce the use of wildcards and attribute selectors; Reduce unnecessary redundant attributes; Use animation properties to achieve animation, animation from the document flow, enable hardware acceleration, preferentially use CSS animation; Use an alternative native @import
13. Enable GPU acceleration for the CSS
Add CSS3 styling to animated DOM elements -webkit-transform: transition3D (0,0,0) or -webkit-transform: translateZ(0); Both of these attributes enable GPU hardware acceleration mode, which allows the browser to switch from THE CPU to the GPU when rendering animations. This is actually a trick and a Hack. -webkit-transform: Transition3D and -webkit-transform: translateZ are used to render 3D styles, but when we set the value to 0, the 3D effect is not used, but the browser has enabled GPU hardware acceleration mode.
14. Problems that may be triggered by enabling GPU hardware acceleration:
Through its – transform: transition3d/translateZ open after the GPU hardware acceleration, sometimes may lead to browser frequent blinking or jitter, can try the following solution: -webkit-backface-visibility:hidden; -webkit-perspective:1000;
**15. The difference between link and @import in CSS:
16.CSS selector list priority and weight:
17. Display :none and visibility:hidden
18. Similarities and differences between Absolute and fixed of position:
19. Introduce the box model of CSS:
20. What are the CSS selectors?
21. Which attributes can be inherited?
22. How is the priority algorithm calculated?
23. What are the new pseudo classes of CSS3?
24. List the values of display to show what they do:
25. The values of position, relative and absolute are relative to whom:
What are the new features of CSS3?
27. Why should CSS styles be initialized
28. What’s the difference between canvas setting the width on a tag and style setting the width on a style?
29. What is a CSS HACK?
The difference between 30. Less Sass/Scss
31. Differences between CSS and JS animation:
32.CSS preprocessor (Sass/Less/Postcss) :
33.CSS animation: **………
Due to the limited space of this article, it is not possible to present all the interview questions in text form. Here is a selection of interview questions for you. If you need them, you can click the portal below to get the questions + analysis for free
Click on the free title + parse PDF
JavaScript
1. Please talk about the advantages and disadvantages of cookies
Advantages: High scalability and availability
- Data persistence.
- No server resources are required. Cookies are stored on the client and read by the server after being sent.
- You can configure expiration rules. Controls the lifetime of cookies so that they do not last forever. The thief probably got hold of an expired cookie.
- Simplicity. Text-based lightweight structure.
- With good programming, control the size of session objects stored in cookies.
- Through encryption and secure transmission technology (SSL), reduce the possibility of cookie cracking.
- Store only insensitive data in cookies, so there is no significant loss if stolen.
Disadvantages:
- Limits on the number and length of cookies.
Number: The total number of cookies per field is limited. A) Maximum of 20 cookies for IE6 or later b) Maximum of 50 cookies for IE7 and later c) Maximum of 50 cookies for Firefox d) Chrome and Safari do not impose hard limits on the length: The length of each cookie cannot exceed 4KB (4096B), otherwise it will be truncated. 2) Potential security risks. Cookies can be intercepted or tampered with. If cookies are intercepted, it is possible to retrieve all session information. 3) The user is disabled. Some users limit this capability by disabling the browser or client device’s ability to accept cookies. 4) Some states cannot be saved in the client. For example, to prevent forms from being submitted repeatedly, we need to save a counter on the server side. If we keep this counter on the client side, it does nothing.
2. Array. Prototype. Slice. Call (arr, 2) method is:
Slice (2) using the slice method on the Array prototype, this in this method refers to ARr using the first argument of the call function, passing the argument 2, which is actually equal to arr.slice(2), truncated from subscript 2 to the end
3. What are the pros and cons of Flash versus Ajax?
Flash: suitable for processing multimedia, vector graphics, access to machines. But on CSS, processing text is insufficient and not easy to be searched. Ajax: good support for CSS, text, but not enough for multimedia, vector graphics, access machines.
4. Valid javascript variable definition rules
The first character must be a letter, underscore (_), or a dollar sign ($); Other characters can be letters, underscores, dollar signs, or numbers.
5. What is the difference between XML and JSON?
- Data volume. JSON is smaller and faster than XML.
- Data interaction aspects. JSON and JavaScript interaction is more convenient, easier to parse processing, better data interaction.
- Data description. JSON is less descriptive of data than XML.
- Transmission speed. JSON is much faster than XML.
6. What is the difference between HTML and XML?
(1) XML is used to transmit and store data, while HTML is used to display data; (2) The tags used by XML are not predefined, (3) XML tags must come in pairs, (4) XML is case-sensitive, (5) no whitespace is deleted in XML, (6) all special symbols in XML must be encoded, and (7) images in XML must be written
7. Progressive enhancement and graceful degradation
Progressive enhancement: Build the page for the lower version browser to ensure the most basic functions, and then improve the effect and interaction for the advanced browser to achieve better user experience. Graceful downgrading: Build full functionality from the start and then make it compatible with older browsers.
8.Web workers and Web sockets?
Web Socket: Provides full-duplex, two-way communication over a single persistent connection. Using user-defined protocols (WS ://, WSS ://), the same origin policy does not apply to Web sockets. Web Worker: JavaScript running in the background without affecting page performance. Create worker: var worker = new worker (url); Send data to worker: worker.postmessage (data); Receive the data returned by the worker: worker.onMessage Terminates the execution of a worker: worker.terminate()
9. How do Web applications actively push data from the server to the client?
JavaScript data push: COMMET (HTTP long connection based server push technology). Web Socket-based push: SERVER-send Event (SSE)
10. How to delete a cookie?
Document. Cookie = ‘user=’ + encodeURIComponent(‘ name ‘) + ‘; Expires = “+ new Date (0); Var data = new Date(); date.setDate(date.getDate()-1)
11.Ajax request page history status problem?
(1) Use location.hash to record the state, so that the browser can record the changes of the page state when Ajax requests are made. (2) Through HTML5 history.pushstate, to achieve browser address bar without refreshing changes.
12. Those operations cause memory leaks
Global variables, closures, DOM empties or deletes events that are not cleared, and child elements that have references
13. What is Cookie isolation? (Or: How to request resources without cookies)
Through the use of multiple non-primary domain name to request static files, if static files are placed under the primary domain name, the static file request with cookie data submitted to the server is very wasteful, it is better to separate.
Cookie is limited by domain, so requests cannot be submitted across domains. Therefore, when a non-primary domain name is used, cookie data will not be contained in the request header, which can reduce the size of the request header and the request time, so as to reduce the overall request delay. In addition, this method does not transmit cookies to the server, reducing the processing and analysis of cookies by the server and improving the parsing speed of HTTP requests by the server.
14. Respond to events
Onclick Click on an object; Onfocus gets focus; Onblur out of focus; Onmousedown The mouse is pressed
15. How do Flash and JS interact through what classes?
Flash provides the ExternalInterface interface to communicate with JavaScript. ExternalInterface has two methods, call and addCallback. Call allows Flash to call methods in JavaScript. AddCallback is used to register flash functions to be called by JS.
**16.js drag function implementation
17. Asynchronous loading of JS methods
Ajax solves browser cache problems
The inadequacy of js stabilization
20. Js throttling
Garbage collection mechanism in JS
22. What does Eval do
23. How to understand front-end modularity
24. Talk about Commonjs, AMD and CMD
25. Simple implementation of object deep cloning
26. Implement a once function, passing in function parameters only once
27. Wrap native Ajax as a promise
28.js listens for object property changes
29. How to implement a private variable that can be accessed using getName but not directly
30. Differences between setTimeout, setInterval, and requestAnimationFrame
31. Implement a two-column contour layout
32. Implement your own bind function
33. What is the difference between setInterval() and setInterval() simulated using the setTimeout() method?
34. How does js control loading one image at a time, and then loading the next image after loading
35. How to achieve sleep effect (ES5 or ES6)
36. What is Function. Proto (getPrototypeOf)?
37. Implement deep clone of all objects in JS (wrapper object, Date object, re object)
38. Simply implement the Events module of Node
39. The arrow function this points to an example
40. Js judgment type **………
Due to the limited space of this article, it is not possible to present all the interview questions in text form. Here is a selection of interview questions for you. If you need them, you can click the portal below to get the questions + analysis for free
Click on the free title + parse PDF
Vue
1.nextTick
A deferred callback is executed after the next DOM update loop, which can be used to obtain the updated DOM status. The default in the new version is Microtasks, and the v-ON version uses MacroTasks: osetImmediate / MessageChannel / setTimeout
2. What is the VUE lifecycle
The lifecycle of a Vue instance is the process from creation to destruction. We call this the life cycle of a Vue, which starts with creating, initializing data, compiling templates, mounting Dom, rendering, updating, rendering, and unmounting.
3. Function of the key value in vUE
Use keys to give each node a unique identity. The key’s main purpose is to update the virtual DOM efficiently. In addition, vUE also uses the key attribute when switching between elements with the same label name. The purpose is also to allow VUE to distinguish between them. Otherwise, VUE will only replace its internal attributes without triggering the transition effect.
4. Why must data be a function in the Vue component?
In New Vue(), data can be operated on as an object, whereas in Component, data can only exist as a function and cannot be assigned to it directly. When the data option is a function, each instance can maintain a separate copy of the returned object, so that the data in each instance does not affect each other and is independent.
5. Name at least four vUE commands and their usage
V-if (to determine whether to hide) V-for (to iterate over data) V-bind (to bind attributes) V-model (to bind both ways)
6. The vUE neutron component calls the parent component’s method
The first method is to call the parent component’s methods directly in the child via this.parent. Event. The second method is to call the parent component’s methods in the child with parent-event. The second method is to call the parent component’s methods in the child with parent-event. The second method is to emit an event from the child component to the parent component, and the parent component listens for the event. Third, the parent passes the method to the child and calls the method directly from the child.
7. Transfer values between vue page-level components
1. Use vue-router to transfer parameters through the forward link. 2. Use the local cache localStorge. 3. Use vuEX data management to transfer values.
8. Talk about vUE’s dynamic components.
Multiple components switch components through the same mount point. The page displays the component whose name is the value of IS. Check the is property of the interview component.
9. Functions of keep-alive built-in components
The current component or route can be cached instead of being created and destroyed by the keep-alive component, except for the first time. It won’t go through the create and destroy phase. It will be cached after the first creation.
10. Use of recursive components
Components can call themselves in their own templates. But they can only do this with the name option. First of all, we need to know that since the component is recursive, there must be an end condition, otherwise we will use the component loop reference, and finally “Max Stack size exceeded” error, i.e. stack overflow. So, we can use v-if=”false” as the end condition for the recursive component. When v-if is false, the component will no longer render.
11. What kinds of route guards does vue-router have?
The routing guard is as follows: Global guard: beforeEach Rear guard: afterEach Global resolution guard: beforeResolve Exclusive route guard: beforeEnter
12.
What is the difference between a Router?
The Router is an instance of the VueRouter. It is a global routing object that contains hop methods, hook functions, and so on. The Router is an instance of the VueRouter. It is a global routing object that contains hop methods, hook functions, and so on. The Router is an instance of the VueRouter. It is a global routing object that contains hop methods, hook functions, and so on. Route is routing information object | | jump route objects, each object of a route is a route, is a local object that contains the path, params hash, query, fullPath, matched, routing information parameters such as the name.
13. What is the State feature of VUex?
Vuex is a warehouse with many objects in it. The Vue component reads the data from the Store. If the data in the Store changes, the Vue component reads the data from the store. Components that depend on this data are also updated. 3. It maps global state and getters to computed properties of the current component using mapState
14. What is the Getter feature of Vuex?
Getters can be used to calculate State, which is the calculated property of Store. 2. Although it can also be used to calculate property within components, getters can be reused between multiple components
**15. What are the Mutation features of VUEX?
16. Should ajax request code in vue.js be written in component’s Methods or vuex’s Actions?
17. What is MVVM?
18. The difference between MVVM and MVC? What distinguishes it from other frameworks (jquery)? Which scenarios fit?
19. What are the advantages of VUE?
20. Value transfer between components?
21. Switches between routes
22. How to use custom components in vue.cli? Have you encountered any problems?
23. How does vue implement on-demand loading with Webpack setup
24. Steps to introduce components in Vue?
25. What does instruction V-EL do?
26. Steps for using plug-ins in Vue
27. What is the role of the VUE lifecycle
28. There are several phases in the VUE lifecycle
29. Which hooks are triggered the first time the page loads
30.DOM rendering is completed in any cycle
31. Briefly describe which scenarios are appropriate for each cycle
32. What is vue-loader? What are the uses for it?
33. What is SCSS? What are the installation steps in vue.cli? What are the major features?
34. Why use key?
35. Why avoid using V-if and V-for together
What is a VNode? What is the virtual DOM?
37. What is vue-loader? What are the uses for it?
38. What is the use of each folder and file in the SRC directory in vue.cli project?
39. How to use custom components in vue.cli? Have you encountered any problems?
40. What is your understanding of template compilation in vue.js?
41. Several ways of VUE route jump
42. Vue-cli Create custom components
43. What is the function of <keep-alive</keep-alive?
44. How does vue implement on-demand loading with WebPack setup?
45. Principle of Vue to implement two-way data binding Object.defineProperty()
46.Vue routing implementation: Hash mode and history mode
How does Vue differ from Angular and React?
48. Vue route hook function **
Due to the limited space of this article, it is not possible to present all the interview questions in text form. Here is a selection of interview questions for you. If you need them, you can click the portal below to get the questions + analysis for free
Click on the free title + parse PDF
Server and network
1. Common status codes
201: created 202: accepted 203: Become, but not authorized 204: succeeded, no content 205: succeeded, reset content 206: Succeeded, partial content 301: Permanently moved, redirected 302: Temporary move, use original URI 304: Unmodified resource, use cache 305: proxy access required 400: request syntax error 401: identity authentication required 403: request rejection 404: resource does not exist 500: server error
2.TCP three-way handshake
Before establishing a connection, the client and server need to shake hands to confirm each other: The client sends a SYN request and enters the SYN_send state. After confirming that the server receives and confirms the SYN packet, the client sends a SYN + ACK packet. After receiving the SYN + ACK packet, the client sends an ACK packet. The two sides enter the Established state
3.TCP waves four times
Client — FIN –> server,FIN — WAIT server — ACK –> client, close-wait server — ACK,FIN –> client, last-ACK client — ACK –> server, CLOSED
4. Summary of the URL
URL is short for Uniform Resource Locator (URL), which refers to a resource on the Internet that can be located based on the URL. Every URL is a URI, but not necessarily a URL, because A URI also includes a subclass, the Uniform Resource Name (URN), that names a resource but does not specify how to locate it. URL is a unified resource locator, which is a concise representation of the location and access method of the resources that can be obtained from the Internet. It is the address of the standard resources on the Internet. Every file on the Internet has a unique URL that contains information indicating where the file is and what the browser should do with it. For example, baidu URL is www.baidu.com.
5. Cache location
We fetch resources directly from the cache when a strong cache hit or when the server in the negotiation cache returns 304. There are four types of caches in the browser, from highest priority to lowest: Service Worker Memory Cache Disk Cache Push Cache Service Worker allows JS to run outside of the main thread and cannot access DOM because it is out of the browser window. All the same. But it still helps us with a lot of useful features, such as offline caching, push notifications, and network proxies. The offline Cache is the Service Worker Cache. Service workers are also an important implementation mechanism for PWA (Progressive Web App). Memory Cache Memory Cache, which is the fastest in terms of efficiency. But from the survival time is the shortest. When the rendering process is finished, the Disk Cache is no longer available. The Disk Cache is slower than the memory Cache in terms of access efficiency, but it has advantages in terms of storage capacity and storage duration. How do I decide whether to put resources into hard disk or memory? Large JS and CSS files are directly dumped to the disk, whereas large JS and CSS files are dumped to the memory. When memory usage is high, files are preferentially dumped to disk Push Cache, which is the last line of defense for the browser Cache. It is part of HTTP/2, and although it is not widely used today, it is becoming more and more widely used as HTTP/2 becomes more and more popular.
6. Strong cache
Strong caching is controlled by the Expries and cache-Control fields in the HTTP header. In a strong cache, when a request is made again, the browser determines whether the target resource “matches” the strong cache based on the expires and cache-control parameters. If so, the browser directly obtains the resource from the cache without communicating with the server. Hit strong cache, return status 200(from disk cache). The red line in the image above is the whole process. Implementation of strong caching: From Expires to cache-control implementation of strong caching, which used to be expires. When the server returns a response, write the expires field in Request Headers: Tue, 15 Oct 2019 13:30:54 GMT Exprires is a time stamp. When we request a resource from the server again, the browser compares the local time with the expires timestamp. If the local time is less than the expires time, So I’m going to go directly to the cache and fetch that resource. HTTP1.1 adds a cache-control field that controls the expiration date of a resource through max-age, which is a relative time. Cache-control is a good way to circumvent expires issues with timestamps such as cache-control: Max-age =31536000 Indicates that resources are valid cache control within 31536000 seconds. Cache-control 1, no-store and no-cahe no-store indicate that no cache is performed. Nothing about client requests and server responses can be stored in the cache. The complete response is downloaded for each request initiated by the client. Cache-control: no-store no-cache indicates that an expired resource is not cached. Instead, the Cache processes the resource to the source server after the expiration date is confirmed. Perhaps do-notserve-from-cache-without-revalidation is more appropriate. Cache-control is enabled by default in the browser. Cache-control is enabled by default in the browser. No-cache 3, public, and private Public and private are the opposing concepts for whether a resource can be cached by a proxy server. When we set pubile for a resource, it can be cached by both the browser and the proxy server. If this parameter is set to private, the resource can only be cached by the browser. The default value is private. S-maxage only works on public servers for multiple users (such as CND cache), and only works on public caches. We only consider using max-age on clients.
5. Advantages of caching
6. Request execution process of different refreshes
7. Why are there cross-domain problems
8. How to solve cross-domain problems
9. Access Control Scenarios (Simple and non-simple requests)
10. WithCredentials attribute
11. How do I set CORS for the server
12. Common methods in URL classes
13. Common network architectures
14. Status of the CLIENT and server during the TCP connection
15. The difference between multiple processes and multiple threads
16.OSI, TCP/IP, five layer protocol architecture, and each layer protocol
17.HTTP long and short connections?
18. What are the differences between transport layer protocols and network layer protocols?
19. What services may be provided by the Data link Layer protocol?
20. Why do TCP connections need to be established three times?
21. Why four waves?
22. What if the connection has been established, but the client suddenly fails?
Due to the limited space of this article, it is not possible to present all the interview questions in text form. Here is a selection of interview questions for you. If you need them, you can click the portal below to get the questions + analysis for free