At the end of July, I left the zhengzhou, I’ve always wanted to go to the city – Shanghai, with confidence, but I find this a little different from what I expected, a bowl of zhengzhou hot-and-dry noodles are up to nine pieces, here give me a while to 16, can’t drink the water, I have been determined must find a job this month, the voice in my ear, I can’t starve to death if I can’t find it. Without further ado, LET me tell you about my interview experience.
My feelings
On the first day, I had three interviews, none of which I passed. The first one was even more shocking to me. After two hours of hard work on the subway, I was finally told that you are not suitable. Because my education background is a junior college, many companies are directly your education background is not acceptable, I was thinking good difficult, really is not good at high school now but I have to use ten times of efforts to make up for,
I gain experience
The first is to have confidence written on your face during the interview, so that the interviewer’s first impression can give you credit. The second is to be very clean. Then there is a polite, don’t sit there to the interviewer, you still sit where other – come, for once, is must pay attention to during the process of sound bigger and clear, just take the interviewer as kindergarten, so that the interviewer feel you are very have temperament, then don’t be nervous, nervous in advance can buy a bottle of water in hand in, There is an important point is that the interview questions must be prepared, or they will be directly passed, I interviewed six or seven homes a day at that time, the interview life is not love, sell you is more behind not afraid.
Through more than a week of interviews I summed up the interview questions
HTML report
The difference between standard and weird modes:
Standard mode page layout and JS mode are the highest standards supported by browsers, while weird mode is backward compatibility that mimics the behavior of old browser mode and prevents pages from working properly.
What are inline elements/block-level elements/empty elements?
Inline elements: a/b/strong/input/img/span/select/section block-level elements: div/p/table/ul/ol/li/h1 – h6 empty elements: br/hr/img/input/link/meta
What is your understanding of the browser kernel? Browser is mainly divided into two parts: rendering engine and JS engine rendering engine: mainly responsible for obtaining page content and layout rendering page JS engine: parsing and executing JS to achieve the dynamic effect of the page, as well as interactive content
- Describe the difference between cookies/sessionStorage and localStorage?
Cookies are the data stored on the user’s local terminal by the website for the purpose of representing the user’s identity. The data of cookies is always carried in the same HTTP request and passed back and forth between the browser and the server. The size of cookies is not 4K (usually encrypted, so there is no need to worry about account theft). The same origin policy prevents XSS, which uses the cookies of the browser to intercept user data, and CSRF, which simulates what users do on web pages, from attacking the browser. JSONP) sessionStorage and localStorage data are stored locally, will not send data to the server, localStorage is closed browser, data still exist will not be lost, SessionStorage automatically deletes data after leaving the browser.
What are the new HTML5 features? How to deal with the compatibility of HTML5’s new tags? How to distinguish HTML from HTML5? HTML5 new features: Drawing: Canvas drawing and SVG drawing; Semantic tags, such as header, nav, footer, section, article, etc. Local offline storage: Two local offline caching localStorage and sessionStory localStorage is long-term storage of data, data is not lost after closing the browser sessionStorage is close the browser after data automatically deleted form controls: Calendar, Date, Time, Email, URL, search; And some new technologies: Webwoker/websocket (Sakit)/ GelolCation(Beginning jēōlōˈ kāSHən)
What is your understanding of HTML semantics?
With the right tags to do the right things, HTML semantics make the content structure of a page easier to understand, read, maintain, and understand.
What is the difference between using link and @import when importing page styles?
Link is an XHTML tag that can be used to define RSS in addition to loading CSS. @import is provided by CSS and can only be used to load CSS. The link file is loaded at the same time when the page is loaded, while the CSS file introduced by @import is loaded after the page is loaded. @import has compatibility issues, which are not recognized by browsers below IE5, and link has compatibility issues
### How to implement communication between multiple tags in the browser?Copy the codeWebsocket/SharedWorker can share different threads as one thread, and their data is also shared. LocalStorage also enables communication between browser tabs. LocalStorage triggers an event when another browser is added/deleted/modified, and we can communicate with loacalStorage by listening for the event and controlling its value.
What’s the difference between Canvas and Svg?
Each element of an SVG graph is a separate DOM node that can be easily bound to events or modified. Canvas outputs a canvas, canvas outputs a scalar canvas, just like a picture, with enlarged distortion or sawtooth. The graphics output by SVG are vector graphics, and parameters can be modified later to zoom in and out without distortion or sawtooth.
CSS related
Browser box model?
W3C standard box model: width /padding/border/margin are separate IE box model: width = content width + padding + border are together
What are the CSS selectors?
ID selector (#ID) Class selector (.class name) Tag selector (tag) wildcard (*) Adjacent selector (div+ P) child selector (div> P) Descendant selector (div P) Multiple selectors (div, P, A,ul) Pseudoclass selector (A :hover)
What are the new CSS3 features and pseudo classes?
New features: Border-radius /box-shadow text-shadow/line-gradient/Transform Various styles (rotate/scale/position [xyz]/ tilt) added more CSS Rotated weapon, background color added to RGBA border-images/media query/multi-column layout pseudo-class: P: First-of-type selects the first P element of the same type in its parent. P:last-of-type selects the last P element of the same type in its parent ::after/::before Adds content before or after the element ::disabled Controls the disabled status of form controls :: Checked checkboxes or checkboxes are selected
Some advantages of less.
Structure is clear, easy to expand can easily shield browser private syntax differences can easily achieve multiple inheritance fully compatible with CSS code, can be easily applied to the old project. Less knowledge extends CSS syntax, so older CSS code can be compiled with Less code. Disadvantage: having to compile, both on the client and server side, is an additional expense
The value of the Position?
Relative (Relative to its original location, not out of the document flow) Absolute (Relative to its nearest location parent element, out of the document flow) Fixed window (Relative to the browser window, out of the document flow) The default value does not locate the position property of the Inherit parent element
Em, REM, PX?
A unit of length relative to the resolution of a display. Features: Internet Explorer can’t adjust font sizes that use PX as a unit. Most foreign websites can adjust font sizes because they use EM or REM as font units. Firefox can adjust PX, EM, REM, But more than 96% of Chinese Internet users use Internet Explorer or (kernel) EM relative length unit, relative to the font size of the text in the current object. If the current font size for inline text is not set manually, the font size is relative to the browser’s default font size (the browser’s default font size is 16px). Em inherits the font size of the parent element rem—– REM is a relative access (root em) unit added to CSS3, which has attracted a lot of attention. The difference between REM and EM is that when REM is used to set the font size for an element, the font size is still relative, but relative to the HTML root element. This unit allows font sizes to be scaled by modifying the root element. Can avoid the font size layer by layer compound chain reaction.
The principle and disadvantage of Base64
Advantages: Encryption is enabled, reducing HTTP requests. Disadvantages: CPU consumption for codec
JavaScript related
What are the JS data types?
Stack: (raw data) string/number/heap Boolean/null/undefined symbol: (reference data type) object (array and functions belong to the object) data type a total of 7 (six basic types of + 1 kind of reference types)
Scope and variable declaration enhancement in JS
Global variable: a variable declared in the global scope, for example, var a =1; Only assignment of undeclared values, such as a= 1 (note: if a=2 is used in a function environment, it is also a global variable) local variable: A variable written to a function, called a local variable, whose scope is limited to the function itself: program safety, memory release chain of scope: the process of finding a variable. First look for their local environment inside the declaration or function, if there is, then check whether the declaration is assigned or is the content of the function, if not, then look up the level. Variable declaration promotion: During the precompilation phase, the compiler elevates all defined variables to the top. That is, variable declaration statements are automatically placed at the top.
How to convert a type?
Turn the array parseFloat (); ToString ()/string() array toString join(); String to array: split();
How to explain the role of this in JS?
If the function is instantiated (the name of the new constructor ()),this refers to a brand new object. If the tag triggers an event that calls the function,this refers to the tag (the entire DOM node, including its children); If a function uses call/apply,this is passed to the object as an argument. Sometimes this is referred to the window if the reference is not clear. The arrow function in ES6 changed this to always refer to the scope
Js with this (classic) :
This is the js keyword. The value of this can change depending on where the function is used. But there is always a rule that this refers to the object on which the function is called.
Js with this (classic) :
This is the js keyword. The value of this can change depending on where the function is used. But there is always a rule that this refers to the object on which the function is called.
What are the methods of inheritance?
Prototype chain inheritance, construction inheritance, instance inheritance, copy inheritance, combination inheritance, parasitic combination inheritance
What is a closure? What do closures do?
Because in js, belong to the scope of the variable to the function scope, the scope will be cleared after the function, memory, it will be recycled, but because of the closure is based on a function within the function, because of its access to superior scope, even if the superior functions performed, the scope will not subsequently destroyed, The child function, the closure, then has access to the variables in the parent scope, so that the values in the scope are not destroyed after the parent function completes execution. What closures do: In essence, a closure is a bridge between the inside of a function and the outside of a function. Because a closure can cache a parent scope, it breaks the “function scope” shackles outside the function and allows access to variables inside the function. In the case of a successful Ajax callback, which is essentially a closure, the callback has the ability to access and manipulate the entire upper scope, providing several benefits. Developers do not have to write hook functions to manipulate variables inside the scope of the audit function. Closures are everywhere, a successful callback to an Ajax request, an event-bound callback, a setTimeout delay callback, or a function that returns another anonymous function inside. In short, no matter how you pass a value of a function type, the closure is always present when the function is called elsewhere. Disadvantages of closures: Because closures break the bounds of the function scope, the data inside cannot be cleaned up and destroyed, resulting in data overflow when the data is too large.
Event Agent (event delegate) :
The event broker is to write the event of the child element to a parent element, and let the parent element handle it instead, using e.target internally. E.target is the child element that triggers the event
The stages of the event
Capture phase –> target phase –> bubbling phase Document –> target target –> document The difference between the third parameter of addEventListener set to true and false is clear True –> indicates that the element responds to the event during the “capture phase” of the event (passed from the outside in) false –> indicates that the element responds to the event during the “bubble phase” of the event (passed from the inside out)
How many stages does the new operator go through when creating an instance
New creates an object that goes through four stages: create an empty object set the prototype chain so that this in the instantiated object points to the object, and execute the function body to determine the return value type of the instantiated object
Lazy loading of images
Picture lazy loading understanding: because too many mall pictures, will give the picture to add a lazy loading buffer effect. The image is only loaded when it enters the visual area, otherwise the image is just an empty label. This will optimize page rendering speed and improve the user experience.
Common memory leaks in js:
Memory leaks can cause a number of problems, such as: Slow running, crashes, and high latency memory leaks are variables that you don’t need (or can’t access), that still occupy memory space, and that can’t be reused. Unexpected global variables are not recycled (unless null is set or reassigned). In particular, the variable periodic functions that are used to temporarily store a lot of information are always running. The handler is not recycled. Jq will remove the event listener before removing the node
Deep and shallow copy problems:
For complex types such as Object and Array, a and B refer to the same block of memory, so if you change one of the values, the other will change. This is a shallow copy of a and B referring to the same block of memory, but if you change one of the values, the other variable is called, The “object.assign ()” method is used to copy the values of all enumerable attributes from one or more source objects to the target Object, which returns a deep copy of the target Object: Json.parse () and json.stringify () give us a basic solution. But the function can’t be properly treated
The difference between ForEach and map
Both apis can iterate over arrays of forEach functions, which are called once forEach element in the array and do not return a value. The Map method is used by calling each element in the array, mapping it into a new element, and thus framing a new array
What is the difference between addEventListener listening for click events and Click events?
The addEventListener event can handle multiple events on a normal element, and the Click event can only cause the element to run the latest event results
String manipulation methods
Splite () : Used to split a string into an array of strings search () : used to decrement a specified substring in a string, or to retrieve a string matching a regular expression indexOf () : Returns the position of the first occurrence of a character substitution string subString () : Trim () : removes Spaces on both sides of the string. Replace () : replaces characters
Array manipulation methods
IndexOf: Returns the position of the specified element. If the element does not exist, -1 slice is returned. Accept one or two parameters, the corresponding to return is to return to the starting position and end position, if only one parameter, the method returns from the parameter specifies the position to the array at the end of all items, if there are two arguments, it returns the starting position to the item’s position, but not including the end position, the returned result is a new array. Pop: Removes the last element at the end of the array, but the element will be removed. Unshift: Adds elements to the head of the array, and returns the length of the array. Shift: Reverse: reverses the data in the array and returns the reversed array concat: Join: Concatenates each element in the array with the specified string
What’s the difference between document.write and innerHTML?
Document. write is a stream of content written directly to the page. If document.open is not called before writing, the browser automatically calls open. InnerHTML is an attribute of a DOM page element that represents the HTML content of that element, and you can change it down to a specific element element. If you want to change the contents of the document, you need to modify the document. The documentElement. InnerElement. InnerHTML content into a DOM node, will not lead to a page full redraw, InnerHTML is superior to Document.write in many cases because it allows more precise control over which part of the page is refreshed
Explain the difference between threads and processes?
Process: The basic word for resource allocation, which is an instance of a program at execution time. When the program runs, the system creates a process, allocates CPU time to it, and the program actually runs. Thread: is the smallest unit of program execution, it is an execution flow of the process, is the basic unit of CPU scheduling and allocation, a process can be composed of many threads, threads share all the resources of the process, each thread has its own stack and local variables. Threads are scheduled by the CPU independently, allowing multiple threads to run simultaneously in a multi-CPU environment. Multithreading also allows concurrent operations, with one thread assigned to each request.
The difference between for in and for of
for … In loop: can only get the key name of the object, not the key value for… For ordinary objects, there is no native iterator interface deployed, just use for… “Of” will return an error. You can also use the object.keys (obj) method to generate an array of the key names of objects, and then iterate over the array for… The IN loop iterates not only over numeric key names, but also over other manually added keys, even keys on the prototype chain. for … ForEach loops do not break out of the loop, and neither break nor return will work for… The of loop can be used with break, continue, and retun to break out of the loop
Add, delete, change and check DOM nodes
Find getElementById() getElementsByClassName() getElementsByTagName() querySelector() returns the first matched element querySelectorAll() returns InsertBefore () at a specific position replaceChild() takes two arguments, the first being the node to be inserted, Remove removeChild() for the second node to be replaced
JQuery related
What are the jQ plug-ins
Optimization for jQuery?
Cache frequently manipulated DOM objects use ID selectors instead of class selectors whenever possible always inherit from #ID selectors use chained operations whenever possible use time delegates on bound events using jQuery’s internal function data () to store data using the latest version of jQuery
Optimization for jQuery?
Cache frequently manipulated DOM objects use ID selectors instead of class selectors whenever possible always inherit from #ID selectors use chained operations whenever possible use time delegates on bound events using jQuery’s internal function data () to store data using the latest version of jQuery
Describe the difference between GET and POST
A GET is harmless when the browser backs up, whereas a POST will submit a request again and the URL generated by a GET can be bookmarked, whereas a POST can’t GET a GET request will be actively cached by the browser, and a POST won’t, GET requests can only be URL-encoded unless manually set, whereas POST supports multiple encoding methods. The parameters in A GET request are not retained in the browser history. The parameters in a POST request are not retained in the URL. The parameters in A GET request are limited in length. POST has no restrictions. GET is less secure than POST, because the parameters are directly exposed to the URL, so you can’t use it to pass sensitive information. GET parameters are passed through the URL, POST is placed in the Request body. Get and POST are two methods of sending requests in HTTP. Because HTTP is based on TCP/IP, the bottom layer of GET and POST is also TCP/IP. Get generates one TCP packet and POST generates two TCP packets.
Cache differences between GET and POST requests
A GET request is similar to a search process in that the user does not need to connect to the database every time he or she gets the data. Unlike A POST request, which usually changes or deletes data and must interact with the database, the cache cannot be used. A GET request is more suitable for caching requests
AJax is what? Why Ajax?
Ajax is a web development technique for creating interactive web applications, which is equivalent to adding an intermediate layer (Ajax enabler) between the user and the server, making user actions and server responses asynchronous. Not all user requests are submitted to the server. Some data validation and data processing are left to the Ajax engine itself, which can implement partial page refreshes. Ajax includes the following technologies: based on web standards XHTML+CSS representation using DOM for dynamic display and interaction using XML and XSLT for data interaction and related operations using XMLHttpRequest for one-step data query and retrieval; Use Javascript to bind everything together
Briefly describe the ajax process.
Create an XMLHttpRequest object, that is, create an asynchronous call object. Create a new HTTP request, specify the HTTP request method, URL, and validation information. Set the function that responds to the change in the status of the HTTP request to send the HTTP request for the data returned by the asynchronous call Local refreshes are implemented using JavaScript and DOM
Pros and cons of Ajax?
The advantages of Ajax programs are: Through asynchronous mode, to improve the user experience page refresh to update (local), updates the user experience is very good Ajax engines running on the client side, took part had a server to undertake work, thereby reducing the service load Based on standardized technology, supported by gf don’t need to download a plug-in or small program Ajax drawback: Ajax does not support browser back button security issues, Ajax exposed the details of the server interaction to the search engine support is weak broke the program exception mechanism is not easy to debug
How does webSocket work with low browsers? (ali)
Adobe Flash Socket, ActiveX HTMLFile (IE), XHR based on Multipart encoding, XHR based on long polling
Why axios?
Axios is an HTTP client based on Promise for browsers and NodeJS, which itself has the following features: Create XMLHttpRequest from the browser make HTTP requests from NodeJS support Promise API Intercept request and response transform request and response data cancel request automatically transform JSON data Client support prevent CSRF, XSRF
The difference between XML and JSON?
In terms of data volume -JSON is smaller and faster than XML in terms of data interaction -JSON and JS are easier to interact with, easier to parse, better data interaction XML is better descriptive of data
ES6 related
The following lists common ES6 features:
Let, const arrow functions, class support, string modules, Symbols, Promises, JSON are much faster than XML,
Let, const, var
The scope of a var declaration variable is limited to the context in which it is declared. Non-declarations are always global. Since variable declarations (and other declarations) are always processed before any code is executed, declaring a variable anywhere in code is always equivalent to declaring it at the beginning of code; Let is a more perfect VAR, not a global variable, with block-level function scope, and in most cases no variable promotion occurs. Variables declared by lets with block-level scope let life variables cannot pass through the window. Variable name access for(let x…) The variable promotion let is not allowed to declare the same variable name repeatedly in the same scope. Var is allowed as a constant value defined by const and cannot be reassigned. If the value is an object, the property value in the object can be changed. A const variable must be initialized when it is declared.
Set data structure
The Set method in ES6 is itself a constructor, similar to an array, but with unique values for its members
A method to remove the weight of an array
ES6 set method
The arrow function this points to
In the case of non-arrow functions, this refers to the function object from which it was called, and to whoever is near it (this applies to regular objects, prototype chains, getter&setters, and so on); Under the constructor, this is bound to the new object being created; Under DOM events, this refers to the element that triggered the event; There are two types of inline events: bind, call&apply, etc. Sometimes this will also point to the window, so the arrow function in ES6 fixes this.
Promise and Async await and the difference between them:
Promise: a solution for asynchronous programming, mainly used for asynchronous programming. Promise has three states: Pending, Success, Rejected async and await. There is no substitution of async/await and promise because async/await is a syntactic sugar parasitic on promise, Generater. The difference between: Promise is ES6, async/await is ES7 async/await is more elegant, reject: Promise errors can be caught with a catch, and we suggest that tail catch errors async/await can be used. Then try-catch can also be used
Basic usage of async functions:
The ASyn function returns a Promise object, and callbacks can be added using the then method. When a function executes, it returns as soon as it encounters await, waits for the asynchronous operation to complete, and then executes the following statement in the function body. The async keyword in front of a function indicates that there are asynchronous operations inside the function. When this function is called, a Promise object is immediately returned. Since async functions return a Promise object, they can be used as an argument to an await command.
Do you ever make promises? Please write the following code execution results, and write your understanding of the idea:
setTimeout(()=>{ console.log(1); }, 0); new Promise((resolve)=>{ console.log(2); for(var i=1; i<200; i++){i=198&& resolve(); } console.log(3); }).then(()=>{ console.log(4); }); console.log(5);Copy the codeFirst of all, js is a single thread execution, so the code execution sequence; Have successively, that must have the rule (line up), otherwise disorderly, so how points successively? There are two kinds: synchronous and asynchronous; Synchronization is very easy to understand, need not say more (I am the boss, you should give way to me); Async (timer [setTimeout, setInterval], events, Ajax, promise, etc.), when it comes to async, we need to subdivide macro task and micro task two mechanisms, macro task: When macro task is encountered in js asynchronous execution, macro task will be executed first, and the macro task will be added to the event queue, and then micro task will be executed. Micro tasks: In the process of asynchronous execution, microtasks will also be added to the event queue, but note that the identity of these two queues is not the same, not you come first, you go out first (just like the imperial concubine in the palace, not you come first (or queue first) to favor the first). When it is executed, the corresponding callback function is taken from the micro task first, and then the queue callback of the macro task is executed. If you understand this order, then the results above are not hard to understand.
Introduce the difference between Set, Map, WeakSet and WeakMap?
Set: member cannot repeat only key value, no key name can be traversed, methods include Add, delete, has WeakSet: Members are weak references that can disappear at any time. They can be used to store DOM nodes. They are not prone to memory leaks. Similar sets can be traversed. There are many methods. WeakMap can be converted with various data formats: Only objects are accepted as key names (except null), and values of other types are not accepted as the objects to which the key names point. The methods are not included in garbage collection and cannot be traversed. The methods include GET, set, HAS, and DELETE
New ES6 features:
(1) Const and let: ES6 recommends using let to declare local variables, as opposed to var (which is treated as being declared at the top of the function wherever it is declared). Let does not declare variables earlier; Let declares a variable, and const declares a constant. Both are block-level scopes. A variable declared by const is considered a constant, meaning that its value cannot be changed once it has been set. Note: Variables declared by the let keyword do not have the property of variable promotion const and let declarations are only valid in the most advanced block (inside curly braces) const must be assigned when declared
Arrow function:
The arrow function is a shorthand form of a function that wraps arguments in parentheses, followed by a =>. The arrow function has three intuitive features: it does not need the function keyword to create the omitted return keyword
Map, Set and WeakMap, WeakSet
These are new collection types that provide a more convenient way to get property values instead of using hasOwnProperty to check whether a property belongs to the stereotype chain or to the current object. At the same time, there are special get and set methods when adding and acquiring attribute values.
Promises
Promise is a pattern for handling asynchronous operations, and has been implemented in many three-party libraries, such as JQuery’s Deferred pair of requests, When you bind event handlers like.when()/.done(), you’re actually applying the Promise pattern.
Vue related
What is the MVVM?
MVVM is divided into Model, View and ViewModel. Model stands for data Model, where both data and business logic are defined; View represents the UI View, responsible for the display of data; ViewModel is responsible for monitoring data changes in the Model and controlling the update of the view, and handling user interaction operations; The Model and View are not directly related, but through the ViewModel to be connected, Model and ViewModel have two-way data binding relationship. So when data changes in the Model, it triggers a refresh of the View layer, and data changes in the View due to user interactions are synchronized in the Model. This mode automatically synchronizes the data between the Model and View, so developers can only focus on the maintenance of the data instead of manipulating the DOM themselves.
What are the advantages of Vue?
Low coupling: Views can be changed and modified independently of Model. A ViewModel can be bound to different “views”. The Model can remain unchanged when the View changes, and the View can remain unchanged when the Model changes. Reusability: You can put some view logic inside the ViewModel and have many views reuse that view logic for independent development: developers can focus on business logic and data development (ViewModel), and designers can focus on page design
What are the two cores of vue.js?
Data driven, component systems
Value transfer between Vue components
The parent component passes values to the child component defined on the label (: parent component name = “name of the child component props”). The child component accepts data as props. The child component passes data to the parent component and the child component passes parameters to the parent component using the $emit method
Value transfer between Vue components
The parent component passes values to the child component defined on the label (: parent component name = “name of the child component props”). The child component accepts data as props. The child component passes data to the parent component and the child component passes parameters to the parent component using the $emit method
Vue component brothers pass values
Emit emit events bus.emit emit events bus.on Listens for events vuEX processes data interaction between components
Similarities and differences between V-show and V-IF directives
The V-show command modifies the CSS property of the display element to show or hide it. The V-if command destroys and rebuilds the DOM node directly to show and hide the element
keep-alive
When wrapping a dynamic component, the keep-alive tag caches inactive component instances to preserve the state of the component or avoid re-rendering
Vue common modifiers?
.precent: commits events that do not reload the page. Stop: organizes events but bubbles even when clicked. Self: triggers event listening when an event occurs within the element itself rather than a child element
What are the advantages and disadvantages of single-page applications like Vue?
Advantages: The goal of Vue is to implement data binding and composite view components for responses through as simple an API as possible, with a data binding system for responses at its core. MVVM, data-driven, componentized, lightweight, simple, efficient, fast, and module-friendly Disadvantages: Does not support browsers of earlier versions, only Internet Explorer 9 is supported. Not conducive to SEO optimization (if you want to support SEO, it is recommended to implement rendering components through the server side); The first time to load the home page is relatively long; You can’t use the browser’s navigation buttons
Active-class is a property of which component?
Router-link component of vue-router module
Name at least 4 vUE directives and their usage.
V-if: determines whether it is true, and then reorganizes and destroys the DOM node v-for: data loop V-bind: class Binds an attribute V-model: implements bidirectional binding V-on: adds events V-else: works with V-if
What is vue-loader? What are the uses for it?
Js can write ES6, style style can be SCSS, template can be added, etc
What is SCSS? How to install in VUe-CLI? What are the major features?
SCSS is a precompilation of CSS. Use steps: Install csS-loader, Node-loader, SCSS-loader, etc. Find webpack.base.config.js in the build directory and add an extended SCSS to that extends property. Add the lang property to the component’s style tag. The lang= “SCSS” property: you can use variables ($variable name = value); You can use mixers you can nest
22. What does a Key in a Vue really do?
The Key is the unique ID given to each vNode, which allows us to diff more accurately and quickly (diff nodes are also faster for simple list page rendering, but with some hidden side effects, such as not having transition effects, Or when some nodes have tied data (form) state, state dislocation will occur.) In the process of DIFF algorithm, the beginning and end of new and old nodes will be compared first. When there is no match, the key of the new node will be compared with the old node, so as to find the corresponding old node more accurately: Because there will be no repetition with Key, local reuse can be avoided in sameNode function a. Key === B. Key comparison. If the key is not added, the state of the previous node will be retained and a series of bugs will be generated faster: the uniqueness of the key can be fully utilized by the Map data structure, and the time complexity of the Map is only O (1) compared with the time complexity of traversal search O (n).
Talk about how nextTick works
Vue uses an asynchronous queue to control which DOM updates and which nextTick callbacks execute micTasks. It can ensure that the microtask in the queue is completed in an event cycle. Considering compatibility problems, the demotion scheme from microtask to Macrotask is made
28. The process by which Vue encapsulates components
First, create a component using vue.extend () and register the component using Vue.component(). Then, if the child component needs data, it can accept the definition in props. Finally, when the child component has modified the data and wants to pass it to the parent, it can use the emit () method
What is the principle of two-way data binding for Vue?
Vue. Js is a way of hijacking the published-subscriber model with data, hijacking setters and getters for individual properties via Object.defineProperty () to publish messages to subscribers when data changes. Trigger the appropriate listening callback. Observer: In Vue, the observer class is used to manage the process of instantiating Object.defineProperty. It adds getters and setters to properties of objects that rely on collecting and distributing update DEPs: Each responsive object has a DEp instance (subs is an array of Watcher instances). When data changes, Watcher Watcher will be notified via dep.notify () : There are three types of observer objects: watch(render watcher), watcher(computed watcher) and watcher(user watcher)
Briefly describe which scenarios are appropriate for each cycle
Mounted can be used for either of the following applications: beforecreate or beforecreate. This method can be used for either of the following applications: beforecreate or beforecreate Updated: If data is handled uniformly, write the corresponding function here. BeforeDestroy: Can make an acknowledgement stop event with an acknowledgement box nextTick: Update data immediately after manipulation of the DOM
What are the differences and application scenarios between computed and Watch?
The difference between:
Computed property: depends on other property values, and computed values are cached. The watch listener recalculates computed values only when the property values it depends on change: It’s more of a function of [observation], no caching, it’s like a callback for some data, and every time the data that you’re listening to changes, you’re going to do a callback for what’s going on in the application scenario where we need to do a numerical calculation and depend on other data, Because you can use computed caching, you avoid having to recalculate every time you get a value. Watch should be used when performing asynchronous or expensive operations when the data we need changes. Using the Watch option allows us to perform asynchronous operations (accessing an API), limits how often we perform that operation, and sets the intermediate state until we get the final result. These are all things you can’t do with computed properties
Why does the Vue component Data have to be a function?
Because components can be reused, the object in JS is a reference relationship, if the component data is an object, then the data attribute values in the sub-components will pollute each other, causing side effects. So a component’s data option must be a function, so each instance can maintain a separate copy of the returned object. Instances of new Vue are not reused, so there is no such problem.
Talk about the rendering process of Vue
Call complie to generate the render function string as follows: The parse function optimize generates the AST (abstract syntax tree) function optimize static nodes (flags that don’t need to be updated every time, diff skips the static nodes, reducing the comparison process. Call the new Watcher function to listen for changes in data. When data changes, the render function generates vNode objects to call the patch method. Compare old and new VNode objects and use DOM diff algorithm to add, modify, and delete real DOM elements
Vue3.0 was released this year. What are the differences between the responsive implementations?
Vue2 uses definedProperty to define GET and set to hijack and monitor data, while VUe3 uses proxy, which also represents that VUE has given up compatibility with IE
Vue project optimization method
Component optimization — Improve component reuse Vue-Router optimization uses route lazy loading V-IF and V-Show/computed and Watch to differentiate usage scenarios V-for traversal must add key values, Also avoid the use of V-IF event destruction — in the declaration cycle destruction phase, destroy some unnecessary data, timer, etc. Image lazy load third party plug-in on demand to extract common code to reduce ES6 to ES5 redundant code
How to optimize the slow loading of the Vue first screen?
As a single-page application, vUE will load all components and request data from the server when loading the home page if routing is not processed, which will slow down the loading speed. Solution: Vue-router lazy loading means that components are loaded on demand. The corresponding components are loaded only when the route is accessed, rather than when the home page is loaded. The larger the project is, the faster the home page is loaded, the faster the CDN acceleration is used in the project. Nginx reverse proxy: Nginx reverse proxy: Nginx reverse proxy: nginx.conf Using Node compression, you need to use compression library to load components asynchronously. Server-side rendering using PUG/JADE/EJS/Vue through application framework Nuxt and so on can achieve back-end rendering, and back-end rendering can also play a role in SEO optimization
Life cycle related interview questions
In the beforeCreate phase, the mount element EL and the data object data of the VUE instance are both undefined and not initialized. In the created phase, the data of the Vue instance is available, but the EL is not loaded before/after: In the beforeMount phase, the vue instance’s $EL and data are initialized, but the vue instance is a virtual demo phase before mounting, and data.message is not replaced.
In mounted phase, after vue instance is mounted,data.message is successfully rendered. Before/After update: Users trigger beforeUpdate and update methods when data changes.
Before/after destroy: Changes to data after destroy no longer trigger periodic functions, indicating that the vue instance has stopped event listening and binding to the DOM, but the DOM structure still exists. (1) 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. (2) What is the role of the Vue life cycle? There are multiple event hooks in the lifecycle, making it easier to form good logic while controlling the entire Vue instance. (3) How many phases are there in the Vue lifecycle? There are 8 stages: before/after creation, before/after load, before/after update, before/after destroy which hooks will be triggered the first time the page loads? Create, beforeCreate, Created, beforeMount, and Mounted are generated when the first page is loaded. BeforeMount and Mounted are created. Instance is created after the call, in this step, the instance has completed data observation, the properties and methods of operation, watch the callback, the event event, however, mount the stage has not yet started, el properties is not visible mounted: El Specifies the vm. El attribute. Mounted: Specifies the EL attribute. El is replaced by the newly created vm.el and mounted to the instance. If root is mounted, vm.$el is also in the document when mounted is called. (5) In what cycle is DOM rendering completed? DOM rendering is done in Mounted
Vue-router
(1) Vue-router redirect principle: Vue-router implements single-page route redirect and provides three hash modes: hash mode, history mode, and abstract mode. The mode parameter determines which hash mode to use: Routes are routed using URL hash values. Default mode.
History: Relies on the HTML5 History API and server configuration. Check out the HTML5 History mode. Support all JavaScript runtime environments, such as node.js server side
Jump between routes:
Declarative (tag jump) : programming with router-link tags (JS jump)
What kinds of navigation hooks does vue-Router have? And its parameters?
Three,
Global navigation hook: router. BeforeEach (to,from,next), intercepts before jumping. Components beforeRouteEnter, afterEnter, beforeRouterUpdate, beforeRouteL eave Parameters: There are to (the route to), from (the route to leave), and next (be sure to use this function to get to the next route, or intercept it if you don’t use it)
Vue routing implementation: Hash mode and History mode (two states of Vue)
Hash — the # symbol for the URL in the address bar, characterized by: Use window.onhashchange to listen, match different URL paths, parse, load different components, and dynamically render the HTML content in the area. HashHistory has two methods: Hashhistory.push () isto add a route to the top of the browser’s access history stack. Hashhistory.replace () isto replace the route at the top of the current stack. Although the browser does not request the server, the page state and URL are correlated one by one, Browsers can still do forward and backward history — taking advantage of the new pushState () and replaceState () methods in the HTML5 History Interface. These two methods are applied to the browser’s history stack to provide the ability to modify the history. History mode is not afraid of page forward and backward, but is afraid of refreshing. When refreshing, if the server has no response or resources, it will spawn 404. Hash mode does not
The difference between the route
Route Obtains name, path, query, and params from the current Router jump object (
transmits parameters such as this. Route obtains this from the current router jump object Such as name, path, query, and params (< router-link > contains the number of parameters Route.query = name, path, query, params, etc. (
) Route. params receives) route.params receives) Route. params receives) Route. params receives) Router is VueRouter instance. To navigate to different urls, use router.push, return the previous history using router.push, return the previous history using router.push, return the previous history using router.go
Vuex:
Vuex is a state management architecture specifically designed for vuue.js applications, which manages and maintains the changeable states of vUE components (i.e. the data in vUE components) in a unified manner.
Five attributes of Vuex: Vuex has five core concepts: State, getters, Mutations, Actions, modules State => basic data getters => Data mutations => Submit a method to change data, synchronous! Actions => like a decorator, wrap mutations, making it possible to asynchronously modules => modularize Vuex
Fill in other interview questions
What is cross-domain:
Because browsers follow the same-origin policy for retrieving data, they need to cross over when accessing non-same-origin data
Vue login process
The backend receives the request and returns a token. The front-end takes the token and stores it in LocalStoroae and Vuex. It jumps to the page and returns a 401 if it fails
Js garbage collection mechanism
Tag clearing and reference counting
How to add and prevent event bubbling
AddEventlinner and stoppropagetion
Interface security
The following problems occur: The management system background cannot run request timeout app cannot be logged in
The possible causes of the attack are as follows: The rights management name is bitwise and the ID is automatically added
What to do: restrict access to the interface, lock users, and negotiate with backend personnel to modify the interface
How to optimize your project (Do your own research)
How to solve cross-domain (their search interview must ask)