Preface This article mainly brings you some of my interview experience and experience, I hope to be helpful to the students who are looking for jobs. I would like to briefly talk about my personal information before the interview: I officially joined Hikvision Digital Technology Co., LTD in July 2017 and used vue.js technology stack.
I may write a bit too long, if you just want to see the success of the interview, please directly from the Intelligent business division of Ali enterprise (side) to start, we forgive you ha.
I recommend reading previous articles (the first two are practical, the latter two should be helpful for interviews) :
Vue CLI 3 combined with Lerna UI framework design Cz toolset use introduction – specification Git submission instructions do you really understand $nextTick based on Vue to achieve a simple MVVM about Hikang tips: this is my own secretly to the tutor advertising, we can directly ignore if there is no job intention.
I still have a very deep affection for haikang, the company I left. After all, it is the first company I joined. At the same time, I also want to thank my mentor and leader, who gradually cultivated me into a qualified Web front-end developer. Due to my sudden resignation, there was a vacancy in the team, which also had some impact on the team construction. Although our team’s vue. js technology stack only started two years ago, the team’s technical system construction has been developing rapidly (the previous article Vue CLI 3 combined with Lerna for UI framework design is one of the UI framework design solutions). If you are looking for a job, You can send your resume to Boss Zhipin (I secretly checked his recruitment information). Now I am looking for Web front end internship and formal Web front end position (working place is no. 555 qianmo Road, Binjiang District, Hangzhou) :
Web front-end internship Web front-end Resume My resume is just a simple USE of MD, which roughly includes the following parts:
Basic information professional skills Internship experience (optional) project experience tip: in the basic information must fill in the correct email address, when I was in the early stage of the interview did not open the mailbox to check the interview situation, lead to some point in time and the interview results are not clear (thought) will send SMS.
If you go to an on-site interview, always bring a pen and resume. On the one hand, your resume must be up to date (you’ll have to revise it as you go through the process), on the other hand, it gives the interviewer a great sense of comfort.
As for my resume, try not to dig a hole for yourself when writing about your professional skills and project experience. Here are my professional skills (not many) :
Familiar with embedded C, JavaScript, node.js. Familiar with vue.js framework. Don’t write a bunch of skills that feel fancy, especially if they’re shallow (except for basic skills). If you have skills that are hard for others to replace, then those are the highlights. I don’t have any highlights here. Some of the skills that you are not proficient in can be appropriately reflected in your project experience. For the project experience as far as possible to choose their own feel very technical content of the project to explain (rather short of rather heavy), for their own participation in but not particularly familiar with the project as far as possible not to fill in, to prevent digging holes for their own.
Tip: Enclosed here is my interview resume for your reference. Thanks to Jsliang for her article in the 2019 Interview series, Resume, which you can refer to when creating your resume.
In the delivery of the resume, we must not be frightened by the requirements in the recruitment information, remember once I said to the employer that they do not meet the requirements, the employer said that the requirements are bluffing, feel interested in the investment, some recruitment requirements may be your future study or in-depth field.
After the interview, I applied to about four companies: Youzan, Didi, 51 Credit Card and Ali. Among them, “Like” is hung on the second side, “Didi” is hung on the first side, “51 credit card” is hung on the first side, “Ali” is hung on the second side, and one department is successfully interviewed. The experience of many interviewees may be similar to mine. They constantly summarize and make progress after failing in the interview and finally get the ideal Offer.
Tip: It is recommended that you first apply to small companies to see if you are qualified for an interview. At the end of each interview, write down the questions the interviewer asks. If you don’t get an answer, try to understand or practice it, because the next interviewer may ask the same question.
During the interview, here are my suggestions:
Stable mentality, assuming that the first question you don’t answer is normal, the interviewer will not because you won’t PASS you can’t questions first must not blind guess, often the interviewer give you dig a pit is want you to guess wrong direction, be sure to answer don’t know Don’t say too much content has nothing to do with the current interview question, asked what problem you try to answer any questions, Unless specified by the interviewer you divergent thinking If you don’t understand the interview questions can try to ask the interviewer, you need to ask is about the problem of XXX For some problem must oneself first refine in advance (for example, the scope chain, inheritance, and the prototype chain, etc.) if the interviewer asks a technology used in some of the scenes or other scenarios have seen to use, If it’s the Vue stack and you want to dig into the source code or at least understand some of the source code analysis of someone else, you should be prepared before the interview with ali: What do you think you are good at? Interview must be sincere and do not cut corners. Interview must be humble.
Most of the answers are borrowed from other people’s blogs some of the answers are not necessarily reasonable some of the answers are piecemeal some of the answers are generalizable some of the answers are too basic or repetitive some of the answers are too general or they don’t know how to make sense, I hope you can add your answers in the comments so that more people can benefit from the likes of CSS selectors and their priorities! Important Inline style (1000) ID selector (0100) Class selector/Attribute selector/pseudo-class selector (0010) Element selector/Relation selector/pseudo-element selector (0001) Wildcard selector (0000) This question focuses on what a BFC is, what are the conditions that a BFC triggers, and what a BFC can do. Here I have tried to explain the clearing float of Boostrap (display: table creates anonymous table-cell and triggers BFC indirectly). If you see the use of other scenarios or the use of their own scenarios, you can try to explain how to use them. This will show the interviewer that you not only know what the question is about, but that you can use it well.
BFC is known as Block Formatting Context. BFC is a concept in the W3C CSS 2.1 specification that determines how elements position their content and how they relate to and interact with other elements. Block Formatting Context provides an environment when it comes to visual layout. HTML elements are laid out in this environment according to certain rules. Elements in one environment do not affect the layout of other environments. For example, a floating element forms a BFC. The children of the floating element are mainly affected by the floating element. The two floating elements are not affected by each other. It’s kind of like a BFC is an independent administrative unit. The BFC is a scope, so to speak. It is understood as a separate container, and the layout of the box inside the container has nothing to do with the box outside the container.
The conditional root element or other element containing it that triggers the BFC float element (float of the element is not None) Absolute position element (element has position to be absolute or fixed) inline block (element has display: Inline-block) table cell (element with display: table-cell, HTML table cell default attribute) table header (element with display: Display: flow-root column-span: Display: flow-root Column-span: display: flow-root Column-span: The boxes inside the all BFC will be arranged one by one vertically (it can be seen as a normal flow with one in the BFC). Elements in the same BFC will interact with each other, and margins may overlap to the left of the margin box of each element. Contact the left side of the container block border box (for formatting from left to right, but not otherwise), even if there is a float. The BFC is a separate container on the page, and the child elements inside the container do not affect the outside elements, and vice versa. Float elements are also involved in the calculation float box areas do not overlay on BFC vertical margin overlap problem removal float self-applicable two-column layout (float + overflow) Box model includes content area, inside margin area, border area, and margin area.
Box-sizing: content-box (W3C box model) : The width and height of the element is represented by the size of the content. Box-sizing: border-box (IE box model) : the width and height of the element is expressed as the content + inside margin + border size. The background extends to the outer edge of the border.
IE5. X and IE6 use non-standard box models in weird mode, where the width property of these browsers is not the width of the content, but the sum of the width of the content, inner margins, and borders.
Tip: This is a problem the interviewer will ask for several solutions.
DOM structure
Copy the code using float + margin. Box {height: 200px; }
.box > div {
height: 100%;
}
.box-left {
width: 200px;
float: left;
background-color: blue;
}
.box-right { margin-left: 200px; background-color: red; } Copy code using calc to calculate width. Box {height: 200px; }
.box > div {
height: 100%;
}
.box-left {
width: 200px;
float: left;
background-color: blue;
}
.box-right { width: calc(100% – 200px); float: right; background-color: red; } copy the code using float + overflow. Box {height: 200px; }
.box > div {
height: 100%;
}
.box-left {
width: 200px;
float: left;
background-color: blue;
}
.box-right { overflow: hidden; background-color: red; } Duplicate code implemented using Flex is not the best answer, it would be more reasonable to use flex-basis
.box {
height: 200px;
display: flex;
}
.box > div {
height: 100%;
}
.box-left {
width: 200px;
background-color: blue;
}
.box-right { flex: 1; // Set flex-grow to 1, default to 0 overflow: hidden; background-color: red; } CORS and Nginx reverse proxy are used in the same way as CORS and Nginx reverse proxy.
Cross-domain behavior Same-origin policy restrictions, security considerations protocol, and INCONSISTENT IP and port are all examples of cross-domain behavior. If you mention JSONP, the interviewer will probably ask you about the entire implementation process, so be sure to understand the implementation of JSONP, and if you don’t quite understand it, start your own Express service and try it out.
Prior to define a Web front-end for cross domain response data of the callback function, and there is no limit to the homologous strategy of scripts to initiate a request (put the name of the callback function in the request of the query parameter), then the server returns the execution of the callback function, and it will need to be response data in the callback function parameters, The script tag on the front end requests the callback function to execute immediately, and thus gets the execution response data.
Disadvantages: JSONP can only initiate GET requests
How to implement a JSONP here are a few links:
Segmentfault.com/a/119000001… Zhangguixu. Making. IO / 2016/12/02 /… www.cnblogs.com/iovec/p/531…
JSONP security issues CSRF attack front end constructs a malicious page, requests the JSONP interface, collects sensitive information on the server side. If the JSONP interface also involves sensitive operations or information (such as login, deletion, and so on), it is even less secure.
Solution: Verify the source of the JSONP call (Referer), the server determines whether the Referer is whitelisted, or deploy random tokens to defend against it.
Callback =douniwan ({data}); http://youdomain.com?callback=({data}), if the content-type is not strictly defined (content-type: Application/JSON), plus no filter callback arguments, which is a naked XSS when the HTML is parsed.
Solution: strictly define content-Type: application/json, then strictly filter the parameters after callback and limit the length (character escape, e.g. < < for <, > for >), so that the script Content returned will be text format and the script will not be executed.
The server is hacked and returns a string of maliciously executed code. The executed code can be forwarded to the server for verification of JSONP content, and then return the verification result.
Tip: If you answered CORS, the interviewer will definitely ask you about access-Control-Allow-Origin.
CORS (Cross-origin Resource Sharing) allows browsers to send XMLHttpRequest requests to cross-domain servers to overcome cross-domain problems. It requires both browser and server support.
The browser automatically adds the Origin field to the request header to indicate the source of the current request. On the server, set access-Control-allow-methods, access-Control-allow-headers, and access-Control-allow-Origin fields in the response header to specify the allowed method, header, and source information. Requests are classified into simple requests and non-simple requests. For non-simple requests, the OPTION method is used to pre-check whether the current cross-domain request is allowed. Simple request The request method is one of three ways:
HEAD GET POST The HTTP request header cannot exceed the following fields:
Accept accept-language content-language last-event-id content-type: Application/X-www-form-urlencoded, multipart/form-data, text/plain backend header
Access-control-allow-origin: This field is required. Its value is either the value of the Origin field at the time of the request, or an *, indicating acceptance of requests for any domain name. Access-control-allow-credentials: This field is optional. Its value is a Boolean value indicating whether cookies are allowed to be sent. Access-control-expose-headers: This field is optional. In CORS requests, the getResponseHeader() method of the XMLHttpRequest object takes only six basic fields: Cache-control, Content-language, Content-Type, Expires, Last-Modified, Pragma. If you want to get other fields, you must specify access-Control-expose-headers. Non-simple requests Non-simple requests have special requirements on the server, for example, the request method is PUT or DELETE, or the content-Type field is application/ JSON. CORS requests that are not simple requests are preceded by an HTTP query request, called a “preflight” request.
Access-control-request-method: This field is required to list HTTP methods used by the browser for CORS requests. In this example, PUT.
Access-control-request-headers: This field is a comma-separated string that specifies the additional Header field to be sent by a browser CORS Request. X-custom-header is used in this example.
If the browser denies the “precheck” request, it will return a normal HTTP response, but without any CORS related header fields. At this point, the browser decides that the server did not approve the precheck request, and therefore fires an error that is caught by the ONError callback function of the XMLHttpRequest object.
JSONP only supports GET requests. CORS supports all types of HTTP requests. The advantage of JSONP is that it supports older browsers, Nginx reverse proxy postMessage Document.domain
Cache processing: With Entity Tag, If-unmodified-since, if-match, if-none-match, etc. Caching information (HTTTP1.0 if-modified-since,Expires) Bandwidth optimization and network connection usage error notification management Host header handling long connections: Connection: keep-alive is enabled by default in HTTP1.1 to compensate for the fact that HTTP1.0 requires a Connection to be created on every request. Optimizations for HTTP2 over HTTP1.1:
HTTP2 supports binary transmission (easy to implement and robust), http1. x is a string transmission, HTTP2 supports multiplexing, HTTP2 uses the HPACK compression algorithm to compress the header, reducing the volume of the transmission, HTTP2 supports server push. If you have ever encountered a cache pit or made good use of the cache, you can explain your own use scenario. If you haven’t noticed caching issues with Webpack builds, you can also try to explain the Webpack build that is relevant to us (the hash value of static resource names changes with each build), which is actually related to caching. Interested students can check out Yunlong Zhang’s blog how to develop and deploy front-end code in large companies? .
Caches are classified into strong cache and negotiated cache. The strong cache is not the server. The negotiation cache needs to pass the server. The negotiation cache returns the status code 304. Both types of caching mechanisms can exist at the same time, with strong caching taking precedence over negotiated caching. When a strong cache is executed, if the cache hits, the data in the cache database is directly used without cache negotiation.
Strongly cached Expires(HTTP1.0) : The value of Exprires is the expiration date of the data returned by the server. When the request time on a second request is less than the returned time, the cached data is used directly. However, since the server time and client time can be inconsistent, this will also lead to errors in cache hits. Expires, on the other hand, is a product of HTTP1.0, so cache-control is now mostly used instead.
Disadvantages: Absolute time is used. If the server time and client time are different, the hit cache will be different.
Pragma(HTTP1.0) : A legacy field from HTTP1.0 that enforces validation caching when it is “no-cache”. Pragma disables caching and takes a higher priority if Expires is defined. Server response adds’ Pragma ‘:’ no-cache ‘, browser behavior is similar to refresh (F5).
Cache-control (HTTP1.1) : There are many attributes, each of which has a different meaning:
Max-age =t: indicates that the cache content will expire in t seconds. No-cache: indicates that the negotiated cache is used to verify the cached data. No-store: indicates that the negotiated cache is used to verify the cached data. Note that the no-cache directive is often mistaken for not caching, which is not accurate. No-cache means you can cache, but you should check with the server every time you use it. No-store does not cache content. When a max-age directive is specified in the header field cache-Control, the max-age directive is processed before the header field Expires. A strong cache hit is in the form of a gray 200 status code in Firefox. The status code of Chrome is 200 (from disk cache) or 200 OK (from memory cache).
Negotiation cache The negotiation cache needs to be compared to determine whether the cache can be used. The first time the browser requests data, the server responds with the cache id along with the data to the client, which backs it up to the cache. When requested again, the client sends the cached identity to the server, which determines based on this identity. If not, the 304 status code is returned and the browser can use the cached data directly.
Last-modified: When the server responds to a request, it tells the browser when the resource was Last Modified.
If-modified-since: The request header contains this field when the browser requests the server again, followed by the last modification time obtained in the cache. The server receives the request with if-modified-since, and compares it with the last Modified time of the requested resource. If the request is consistent, 304 and the response header are returned. The browser only needs to retrieve the information from the cache.
If it has Not been Modified: then simply transfer the response header and the server returns 304 Not Modified if-unmodified-since: Whether a file has not been modified since a certain point in time is a relative time, regardless of the time difference between the client and the server.
The server returns 200 OK if the file is modified do not transmit, and the server returns 412 Preprocessing failed. If, on the server, a resource is Modified but its actual contents have not changed at all, the entire entity is returned to the client because the Last-Modified time does not match (even if the client has an identical resource in its cache). To address this issue, HTTP1.1 introduced Etag.
Etag: This field tells the browser the unique identity of the current resource generated by the server when the server responds to a request (the generation rule is determined by the server)
If-match: conditional request that carries the ETag of the resource in the previous request. The server uses this field to determine whether the file has been modified
If-none-match: If the browser requests the server again, the header of the request packet contains this field, and the following value is the identifier obtained from the cache. After receiving the secondary packet, the server compares if-none-match with the unique identifier of the requested resource.
If no, the resource has been modified. The status code 200 is returned in response to the entire resource content. If yes, the resource does not need to be modified. In this case, the browser responds to the header and directly obtains data from the cache. However, in practical applications, Etag is seldom used because the calculation of Etag is obtained by algorithm, and the algorithm will occupy the computing resources of the server. All the resources of the server are precious.
F5 tells the browser, don’t be lazy, at least go to the server to see if the file has expired. So the browser boldly sends a request with if-modify-since Ctrl+F5 telling the browser that you should delete the file from your cache first, and then go to the server to request the full resource file. So the client completes the operation of forced update cache scenario for most scenarios can use strong cache and negotiated cache to solve, but in some special places may need to choose a special cache strategy
For some don’t need Cache resources, can use the cache-control: no – store, said don’t need to Cache the resources For frequent changes of resources, can use the cache-control: No-cache, used with ETag, indicates that the resource is cached, but a request is sent each time to ask if the resource is updated. For code files, cache-control is usually used: Max-age =31536000 and use with the policy cache, then fingerprint the file, once the file name changes, the new file will be downloaded immediately. If you have done similar optimization, it may be easier to answer. If you have not done similar optimization, you can focus on explaining lazy loading (of course, I was asked by the interviewer about lazy loading Webpack configuration). Those of you who use the Vue stack have looked closely at the REL attribute of the link tag in the HTML file built by Vue CLI 3.
Vue-router Lazy loading (using Webpack code cutting) using CDN acceleration, pulling common libraries from vendor Nginx GZIP compressed Vue asynchronous component server rendering SSR if using some UI libraries, If the first screen is a login page, it can be a multi-entry Service Worker cache file processing. Set prefetch using the REL attribute of the Link tag (this resource will be used for some future navigation or function). However, the download order weight of this resource is relatively low, prefetch is usually used to speed up the next navigation), preload (preload will increase the download order weight of the resource, so that the key data can be downloaded in advance. How to configure path aliases on Node side (similar to the alias configuration in Webpack) global variable environment variable HACK itself a @ symbol pointing to a specific path HACK require method reference
Segmentfault.com/a/119000001… Chashaobao.net/2017/09/03/… www.zhihu.com/question/26…
The same type of problem can also be prototype chain, inheritance, closure, etc., this kind of conceptual problem you certainly can not be clear in two sentences, suggest after understanding yourself try to sum up, how to explain the important knowledge points in a short words.
Before we get to scope chains, we need to know a few concepts:
Activetion Object (AO), Variable Object (VO)
Create: the JS parsing engine pre-parses the function declaration and puts the function in global scope or local scope of the function above the current function.
Execution: The JS engine will declare the local variables and internal functions of the current function in advance, and then execute the business code. When the function exits after execution, the execution context of the function is released, and the local variables of the function are deregister.
Declaration of variables and functions: If the variable name and function name are declared the same, the function declaration takes precedence.
Activetion Object (AO), Variable Object (VO) :
AO: Activetion Object VO: Variable Object VO corresponds to the function creation stage. When the JS parsing engine performs pre-parsing, all variables and functions are declared as Variable Object. This variable is context-dependent, knows where its data is stored, and knows how to access it. VO is a special execution context-specific object that stores the following declared in the context:
Variables (var, variable declaration); FunctionDeclaration (FD); The parameter AO of the function corresponds to the execution stage of the function. When the function is called and executed, an execution context will be established. The execution context contains all the variables required by the function, which together constitute a new Object called Activetion Object. This object contains:
All local variables of a function all named arguments of a function set of arguments of a function this points to the scope chain:
When code is created in an environment, a scope chain of variable objects is created to ensure that variables and functions are accessible to the execution environment. The first scoped object is always the variable object (VO) of the environment in which the code is currently executing. In the case of the function execution phase, its Activation Object (AO) is the first object in the scope chain, the second object is the execution context AO of the parent function, and so on.
As mentioned in JavaScript In-depth variable Objects, when searching for a variable, it will first search from the variable object of the current context. If it is not found, it will search from the variable object of the parent (lexical level of the parent) of the execution context until it finds the variable object of the global context, that is, the global object. Thus a linked list of variable objects in multiple execution contexts is called a scoped chain.
Vue responsive Principle Tip: If you are using the Vue stack, the responsive principle is a must-ask question, and interviewers will often ask about the optimization of Vue 3.0 on the responsive principle.
If the reactive principle is not clear, check out my previous article implementing a simple MVVM/ data hijacking implementation based on Vue.
The difference between the Event Loop on the browser and the Event Loop on the Node. If you want to know more about the Event Loop mechanism on the browser side check out my previous article do you really understand the $nextTick /JS engine thread and the Event trigger thread/Event Loop mechanism?
How is the task queue managed by event-triggering threads generated? The fact that the task is produced from JS engine threads itself, the main thread at runtime execution stack, stack the code in certain asynchronous API calls will be added in the task queue, stack of code execution has been completed, will read the tasks in the queue events, corresponding to the callback function to execute the event, such a cycle, the formation mechanism of event loop. There are two types of tasks in JS: microtask and macrotask. In ES6, microtask is called Jobs and macrotask is called task:
Macro tasks: Script (main code block), setTimeout, setInterval, setImmediate, I/O, UI Rendering What is the difference between Event Loop in process.nexttick (Nodejs), Promise, Object.observe, MutationObserver Node.js and Event Loop in browser
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ ┌ ─ > │ timers │ < — — –, perform setTimeout (), setInterval () callback │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ | | < — perform all Next Tick Queue and MicroTask Queue callback │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ pending callbacks │ < — –, performed by a Tick on the delay of the I/O Callback (to be perfected, Negligible) │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ | | < — perform all Next Tick Queue and MicroTask Queue callback │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ idle, Prepare │ < – – – – – internal call (negligible) │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ | | < — perform all Next Tick Queue and MicroTask Queue callback | | ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ incoming: │ ├ ─ execute almost all callbacks, In addition to the close callbacks, timers, setImmediate) │ │ poll │ < ─ ─ ─ ─ ─ ┤ connections, │ │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ │ data, Etc. │ │ | | | | | └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ | | < — perform all Next Tick Queue and MicroTask Queue callback | ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ Check │ < — — setImmediate () callback will be at this stage to perform │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ | | < — perform all Next Tick Queue and MicroTask Queue callback │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ └ ─ ─ ┤ close callbacks │ < — — socket. On (” close “, etc.) └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ copying code Node. Js in macro task is divided into several types, and on a different task in the queue. Task queues also differ in their execution order, with microtasks placed at the end of each task queue:
SetTimeout /setInterval is of the timers type. SetImmediate is of the check type; The close event of a socket is of the type close callbacks. All other MacroTasks are of the poll type. Process. nextTick is essentially a MicroTask, but it executes before all other microtasks; All microtasks are executed after switching between macroTasks of different types. Idle /prepare is for internal calls only and can be ignored. Pending callbacks are uncommon and can be ignored. How to avoid backflow and redrawing the browser rendering process Enter Image Description here. Browsers use a Flow Based Layout. Browsers parse HTML into DOM, CSS into CSSOM, DOM and CSSOM combine to produce RenderTree. With RenderTree, you can know the style of all nodes, calculate the size and position of nodes on the page, and draw nodes on the page. Since browsers use streaming layout, the calculation of RenderTree usually only needs to be done once. Except for tables and their internal elements, which usually require multiple computations and take three times as long as the equivalent elements, which is one of the reasons to avoid table layouts:
Create a Render Tree Layout by combining the DOM Tree with the CSSOM Tree. Layout is carried out according to the generated rendering tree to get the geometric information (location, size) of the node. Painting: Absolute pixel of the node is obtained according to the rendering tree and the geometric information obtained by backflow. Display: Send the pixel to GPU and Display it on the page. (There is more to this step, such as merging multiple compositing layers into one layer on the GPU and displaying them on a page. Css3 hardware acceleration works by creating a new composition layer, which we won’t expand, but we’ll write a blog post later.) When backflow is triggered and redraw when backflow occurs:
Add or remove visible DOM elements The position of the element changes the size of the element (including the margin, inner border, border size, height, and width) changes the content, such as text changes or the image is replaced by another image of a different size. When the browser window size changes when the page is first rendered (this is inevitable) (since backflow calculates the location and size of elements based on the viewport size) redraw occurs (backflow must trigger redraw) :
When a change in the style of an element in a page does not affect its position in the document flow (e.g., color, background-color, visibility, etc.), the browser assigns the new style to the element and redraws it, a process called redraw.
Sometimes even if only a single element is backflowed, its parent element and any elements that follow it will also backflow. Modern browsers will optimize the frequent backflow or redraw operation, the browser will maintain a queue, put all cause re-flow and re-paint operation in the queue, if the number of tasks in the queue or interval reached a threshold, the browser will queue to empty, a batch, so that you can make multiple re-flow and re-paint again. The browser clears the queue immediately when you access the following properties or methods:
ClientWidth, clientHeight, clientTop, clientLeft offsetWidth, offsetHeight, offsetTop, offsetLeft ScrollWidth, scrollHeight, scrollTop, scrollLeft width, height getComputedStyle() All of the above attributes and methods need to return the latest layout information, so the browser has to clear the queue and trigger a backflow redraw to return the correct value. Therefore, it is best to avoid using the attributes listed above when modifying styles, as they will all refresh the render queue. ** If you want to use them, it is best to cache the values.
How to avoid triggering backflow and redraw CSS:
Avoid table layouts. Change the class at the very end of the DOM tree whenever possible. Avoid setting multiple inline styles. Apply animations to elements with position property absolute or fixed Avoid USING CSS expressions (e.g., calc()) CSS3 Hardware acceleration (GPU acceleration) JavaScript:
To avoid frequent manipulation of styles, it is best to overwrite the style property once, or define the style list as class and change the class property once to avoid frequent manipulation of DOM. Create a documentFragment and apply all DOM operations to it. You can also set display: None to the element and display it when you’re done. Because DOM operations on elements with the display attribute none do not cause backflow and redraw, avoid frequently reading properties that cause backflow/redraw, and if you do need to use them multiple times, use a variable cache to absolutely position elements with complex animations out of the document stream, Tips: To enter the on-site interview, you need to pay attention to prepare your resume. The interviewer will usually ask and answer questions according to the project.
At the beginning of the pen test, the interviewer handed out two pen test papers with four questions, which covered the following points:
Scope prototype chain (e.g. Instance property, same as prototype property, delete instance property to continue to access prototype property questions) Print order of macro and micro tasks A few of the questions I remember were as follows (in fact some of the questions he asked were not very relevant to the resume) :
Where are the servers deployed for your product? How did you implement a Tooltip component? Can you write how to use it? I know some of your Hikon development, and I know that your products are sold in sets… I felt on the spot that the interviewer asked perfunctory questions. Maybe he thought my resume was not good enough, or he thought my ability was not good, and then the interviewer asked me to do an algorithm question.
Algorithm questions 1, 4, 5, the total number of n pieces of the minimum number of coins did not work out, non-academic training may be a little difficult to do these, there is no systematic learning, the interviewer saw that I was very difficult, so I changed a question.
One, one, two, three, five, eight… Calculate the value of the NTH number (Fibonacci sequence) this problem is still done, after all it is relatively easy, and then the interviewer said to come here today, the result of the interview will be informed in a week, and then the evening back to receive the interview failed to notice.
Summary or very grateful for the on-site interview experience, let me know that if they are not hard enough, where will be very passive. The advantage of the interview is not only to test how much ability you have, but also to find their own shortcomings, and constantly make up for these shortcomings. So I took before again and put “introduction to Algorithms, and created an algorithm study presentation I – Algorithms, hoping to simplify some theoretical knowledge” introduction to Algorithms, which made us for learning algorithm can become more systematic and simple, also hope that through this study makes the algorithm interview will become more comfortable, Hope interested students can star.
What do you know about security issues and how to avoid tips: HERE’S a quick look at defending against XSS attacks with V-HTML in Vue.
XSS (Cross Site Script) XSS (Cross Site Script) Originally abbreviated as CSS, it is called XSS in the security world to distinguish it from Cascading Style Sheets.
XSS attack refers to an attack in which an attacker injects malicious client code into a website and tampers the client’s web page through malicious scripts, so as to control the user’s browser or obtain the user’s private data when browsing the web page.
Malicious scripts that attackers inject into client web pages usually include JavaScript, but sometimes also HTML and Flash. There are many ways to carry out XSS attacks, but they all have in common: sending private data such as cookies and sessions to the attacker, redirecting the victim to a website controlled by the attacker, and performing malicious operations on the victim’s machine.
XSS attacks can be divided into three categories: reflective (non-persistent), storage (persistent), and DOM based.
Reflective XSS simply “reflects” the user’s input data back to the browser. This type of attack usually requires the attacker to trick the user into clicking on a malicious link. (An attacker can send a malicious link directly to the trusted user in a variety of ways, such as email, private message from the website, comment, etc. Attackers can buy ads for vulnerable websites and insert malicious links into the links of the ads), or submit a form, or when entering a malicious site, inject scripts into the targeted site. The simplest example is to visit a link where the server returns an executable script:
Const HTTP = the require (” HTTP “); Function handleReequest(req, res) {res.setheader (‘ access-Control-allow-origin ‘, ‘*’); Res. WriteHead (200, {‘ the content-type ‘:’ text/HTML. Charset = utf-8 ‘}); Res. Write (‘, ‘); res.end(); }
const server = new http.Server(); Server. Listen (8001, ‘127.0.0.1); Server on (” request “, handleReequest); Copy-code storage Storage XSS “stores” user-input data on the server side, where scripts are returned and executed when the browser requests the data. This XSS attack is very stable. A common scenario is that an attacker writes an article or comment containing malicious JavaScript code on a community or forum. After the article or comment is published, all users accessing the article or comment will execute the malicious JavaScript code in their browsers:
For example, enter the following message in the comment // If the server does not escape this message, the page will execute this malicious code after the request
Dom-based XSS attacks are attacks that modify the DOM structure of a page through malicious scripts, and are purely client-side attacks:
XSS:
When the Submit button is clicked, a link is inserted on the current page with the address of the user’s input. If the user constructs the following as input:
At οnclick=alert(/ XSS /) The page code becomes:
TestLink copies the code at this point, the user clicks on the generated link and the corresponding script is executed.
XSS attack Defense HttpOnly prevents Cookie hijacking: HttpOnly was first proposed by Microsoft and has become a standard. The browser will prohibit the page’s Javascript from accessing the Cookie with the HttpOnly attribute. As mentioned above, attackers can obtain users’ Cookie information by injecting malicious scripts. Cookies usually contain user login credentials. After obtaining cookies, attackers can launch Cookie hijacking attacks. So, strictly speaking, HttpOnly does not prevent XSS attacks, but rather prevents cookiehijacking attacks after XSS attacks.
Input checking: Do not trust any input from the user. Any input from the user is checked, filtered, and escaped. Creates a trusted whitelist of characters and HTML tags, and filters or encodes characters or tags that are not in the whitelist. In XSS defense, input check is generally used to check whether special characters such as <, > are contained in the data entered by users. If so, special characters are filtered or encoded. This method is also called XSS Filter. In some front-end frameworks, there is a decodingMap, which is used to encode or filter special characters or tags contained in user input, such as <, >, script, to prevent XSS attacks:
Const decodingMap = {‘ < ‘:’ < ‘, ‘>’ : ‘>’, ‘” :’, ‘&’ : ‘&’, ‘: ‘\n’} Copy code output check: there will be problems with user input, and problems with server output. In general, with the exception of rich text output, you can use encoding or escaping to defend against XSS attacks when a variable is output to an HTML page. For example, sanitize-HTML is used to filter the output regularly and then output it to the page.
Cross Site Request Forgery CSRF, or Cross Site Request Forgery, is an attack that jacks a trusted user to send an unexpected Request to the server. Under normal circumstances, CSRF attack means that the attacker uses the victim’s Cookie to win the trust of the server and sends forged requests to the attacked server in the victim’s name without the victim’s knowledge, so as to perform operations under permission protection without authorization.
Cookie A Cookie is a small piece of data that a server sends to a user’s browser and keeps locally. It is carried and sent to the server the next time the browser makes a request to the same server. Cookies are mainly used for the following three aspects:
Session state management (such as user login status, shopping cart, game score or other information that needs to be recorded) personalized Settings (such as user custom Settings, themes, etc.) Browser behavior tracking (such as tracking and analyzing user behavior, etc.) Cookies held by browsers are divided into two types:
Session Cookie: The Session Cookie is the simplest Cookie. It does not need to specify an expiration date or max-age. It is only valid during the Session and is automatically deleted after the browser closes. Permanent Cookie: Unlike session cookies, persistent cookies can specify a specific expiration time (Expires) or max-age. Res.setheader (‘ set-cookie ‘, [‘ mycookie=222 ‘, ‘test=3333; Expires =Sat, 21 Jul 2018 00:00:00 GMT;’]); This code creates two cookies: myCookie, which is a session-duration Cookie, and Test, which is a persistent Cookie.
CSRF attack Enables the login user to access the attacker’s website and launch a request. Because the Cookie contains user authentication information, when the user accesses the attack environment prepared by the attacker, the attacker can launch a CSRF attack on the server.
In this attack, the attacker uses the victim’s Cookie to defraud the server of trust, but cannot get the Cookie or see the content of the Cookie. The result returned by the server cannot be parsed by the attacker due to the same origin policy of the browser. (Although the attacker’s website is cross-domain, the link he constructs is of the source website, which is homologous with the source website, so it can carry cookies to initiate access).
But the attacker gets nothing from the returned result. All he can do is send a request to the server to execute the command described in the request, changing the value of the data directly on the server side, rather than stealing the data from the server. For example, deleting, modifying, and adding data cannot be obtained.
CSRF Attack Defense Verification code: The verification code is regarded as the simplest and most effective defense against CSRF attacks. As you can see from the examples above, CSRF attacks often construct network requests without the user’s knowledge. Captcha forces the user to interact with the application in order to complete the final request. In general, captchas are a good deterrent against CSRF attacks. But captcha is not a panacea, because for the sake of users, you can’t add captcha to every operation on the site. Therefore, captchas can only be used as an adjunct to CSRF defense, not as a primary solution.
Referer Check: According to the HTTP protocol, there is a field in the HTTP header called Referer, which records the source address of the HTTP request. With the Referer Check, you can Check whether the request is from a legitimate “source.”
Add Token authentication: The key to defending against CSRF is to put information in the request that an attacker cannot forge and that does not exist in a Cookie. A randomly generated token can be added to the HTTP request as a parameter, and an interceptor can be established on the server side to verify the token. If there is no token in the request or the token content is incorrect, the request may be rejected as a CSRF attack.
Here are the Graphql tips: This problem is to give yourself dug a pit, holding the learning mentality to attempt to use Graphql technology, did not understand what is in the scenarios in order to solve the problem of what should be used, also have no a good ready to how to describe the new technology, often this unfamiliar technology oneself in your resume should be retained some heart, try not to mention, otherwise the answer will be very embarrassed, Make the interviewer doubt your project elements.
Graphql is an API query language. The return value of the API interface can change from static to dynamic, that is, the caller declares what data the interface returns, further decoupling the front and back ends. In Graphal, a pre-defined Schema and a declared Type are used to dynamically fetch interface data:
The abstraction for the data model is described by Type and the logic for fetching data from the interface is described by Schema. Large number of interfaces high cost of maintenance high cost of interface expansion Unpredictable data formats to respond to reduce requests for useless data, strong Type constraints on demand (API data formats are defined by the front end, not the back end) One is called Scalar Type and the other is called Object Type:
Scalar Type: Built-in Scalar types include String, Int, Float, Boolean, and Enum
Object Type: A typescript-like interface Type
Type Modifier: Used to indicate whether the Modifier is required, etc
Schema defines field types, data structures, and rules for interface data requests
Query (Query, operation type) Query types: Query (Query), mutation (change) and subscription
Query: When retrieving data, the Query type mutation should be selected. Mutation type subscription should be used when attempting to modify data: You can push messages when you want data to change, using the Subscription Resolver (parsing function) to provide logic for the data returned by the associated Query. Query and its corresponding Resolver have the same name so that they can be matched in GraphQL. The process of parsing may be recursive, as long as it encounters a non-scalar type, it will try to continue parsing, and if it encounters a scalar type, it will complete parsing. This process is called parsing chain.
Note the implementation principle of Vue: if the user is using Vue stack, how to implement nextTick: If the candidate is using a Vue technology stack, a quick note on how nextTick works: If the interviewer is using the Vue stack, the nextTick principle is a high-frequency question that allows the interviewer to ask more questions, For example, browser Event Loop, microtask and macro task, Node.js Event Loop, asynchronous update DOM (responsive data for Loop changed 1000 times why view updated only once), $nextTick historical version issues, etc.
If this isn’t clear, check out my previous article to see if you really understand $nextTick.
Text-align :center For an inline element text-align:center for its parent element text-align:center for a block-level element Margin :0 auto for block elements, set the parent element to Flex layout, and set the child element to Margin :0 auto for block elements. Using flex 2012 layout, you can easily achieve horizontal center. / / flex container
/ / flex project
.box { width: 200px; height: 200px; display: flex; // Center the internal Flex project horizontally; background-color: pink; }
/* .box-center { width: 50%; background-color: greenyellow; } * /
Copy code using absolute positioning and CSS3’s transform property. Box {width: 200px; height: 200px; position: relative; background-color: pink; }
.box-center { position: absolute; left:50%; // width: 50%; height: 100%; // With the translate() method, the element moves from its current position, defining 2D transformations based on the given left (x) and top (y) positions: // Translate (x,y). // translateX(x) defines the transition, just using the X-axis value. // translateY(y) defines the transition, just using the Y-axis value. // left: First, the overall offset is 50% to the left of the parent container, which is not in the middle. Since the element itself has a size // Then use transform to center horizontally with the percentage offset to the left by half of the width of the element itself (where the percentage is based on the width and height of the element itself) background-color: greenyellow; } copy the code using absolute positioning and margin-left (element constant width). Box {width: 200px; height: 200px; position: relative; background-color: pink; }
.box-center { position: absolute; left:50%; height: 100%; // similar to transform // width: 50%; // margin-left: -25%; width: 100px; margin-left: -50px; background-color: greenyellow; If the element is a single line of text, set line-height to the parent element’s height. If the block level element is a block level element, set the parent element to flex layout and the child element to margin: If the element is an in-line block-level element, the basic idea is to use display: inline-block, vertical-align: middle and a pseudo-element to place the content block in the center of the container:. Box {height: 100px; }
.box::after, .box-center{ display:inline-block; vertical-align:middle; }. Box: : after {content: “; height:100%; } The vertical-align attribute is available only when the parent layer is TD or TH. Other block-level elements, such as div and p, are not supported by default. To use vertical-align, we need to set the parent element display:table and the child element display:table-cell; Vertical-align :middle:. Box {height: 100px; display: table; }
.box-center{ display: table-cell; vertical-align:middle; } Duplicate code is available with Flex 2012, which is the future of CSS layouts. Flexbox is a new CSS3 property designed to solve common layout problems like vertical center:. Box {height: 100px; display: flex; align-items: center; } Duplicate code advantage: the width and height of the content block is arbitrary, elegant overflow. Can be used in more complex and advanced layout techniques. Disadvantages: IE8/IE9 is not supported, requires browser vendor prefixes, may have some rendering issues.
Transform. Box {height: 100px; position: relative; background-color: pink; }
.box-center { position: absolute; top: 50%; transform: translate(0, -50%); background-color: greenyellow; } Copying code disadvantages: IE8 does not support this, attributes need to be prefixed by the browser vendor, which may interfere with other transform effects, and in some cases text or element boundaries may be blurred.
Centering element height fixed sets parent element relative positioning, child element CSS style as follows:
.box {
position:relative;
height: 100px;
background-color: pink;
}
.box-center{ position:absolute; top:50%; // The percentage of the margin is calculated relative to the width of the parent container, even including margin-top and margin-bottom height: 50px; margin-top: -25px; } Copy the code to set the relative position of the parent element and the child element with CSS styles as follows:.box {position:relative; width: 200px; height: 200px; background-color: pink; }
.box-center{ position:absolute; top: 0; bottom: 0; margin: auto 0; height: 100px; background-color: greenyellow; } Copy code horizontally and vertically centered Flex layout (child elements are block-level elements). Box {display: Flex; width: 100px; height: 100px; background-color: pink; }
.box-center{ margin: auto; background-color: greenyellow; } copy the code Flex layout. Box {display: Flex; width: 100px; height: 100px; background-color: pink; justify-content: center; align-items: center; }
.box-center{ background-color: greenyellow; } copy code absolute position implementation (position element fixed width fixed height). 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; } Flex, copy the code used to make a brief introduction of yao tip: if used in the project, can be simple introduce myself to you using Flex to solve any problem, here I am in the project is more impressive content using Flex to solve the above height is not fixed, the following content height automatically through the parent container full residual height problem.
If you are not familiar with Flex, check out Yifeng Ruan’s Flex Layout tutorial: Syntax. The interviewer asked, besides Flex, do you know Grid? This due to compatibility problems, I have not studied, here can see ruan Yifeng article CSS Grid layout tutorial.
Bind can be implemented using a function called Currize plus apply or call. The interviewer asked for more details.
Later I own a rough implementation, just for reference:
Function. The prototype. MyCall = Function (obj) {let context = obj | | window obj. Fn = this let the args = [r]…. the arguments splice (1) Let the result = obj. Fn (… args) delete obj.fn return result }
Function.prototype.myApply = function (obj) { let context = obj || window obj.fn = this let args = arguments[1] let Result if (args) {result = obj.fn(… args) } else { result = obj.fn() }
delete obj.fn
return result
}
Function.prototype.myBind = function (obj) { let context = obj || window let _this = this let _args = [r]…. the arguments splice (1)
Return function () {let args = arguments // return obj.fn(… _args,… Return _this.apply(context, [… _args,… args])}}
function myFun (argumentA, argumentB) {
console.log(this.value)
console.log(argumentA)
console.log(argumentB)
return this.value
}
let obj = { value: ‘ziyi2’} console.log(myfun. myCall(obj, 11, 22)) console.log(myfun. myApply(obj, 11, 22)) 22]) console.log(myfun.mybind (obj, 33)(11, 22)) This problem I was stupid, no reaction to come over, want to ask what the interviewer is a both on CSS priority have distinction, then no problems due to some tension is much said some nonsense, but obviously this is not the answer the interviewer wants patience and consumes the interviewer interview, said that’s not what he asked. Again, if you feel like you don’t know what to say, but you do know something, I suggest you say you don’t know. Don’t worry. The interviewer won’t PASS you just because you don’t know a question.
Pseudo-classes and pseudo-elements are used to modify parts that are not in the document tree, such as the first letter in a sentence or the first element in a list. Pseudo-classes and pseudo-elements are explained as follows:
Pseudo-classes are used to style existing elements when they are in a state that changes dynamically based on user behavior. For example, when a user hovers over a specified element, we can use :hover to describe the state of the element. Although it is similar to a normal CSS class in that it can style existing elements, it can only style elements in a state that the DOM tree cannot describe, so it is called a pseudo-class.
Pseudo-elements are used to create and style elements that are not in the document tree. For example, we can append some text to an element and style the text with :before. Although this text is visible to the user, it is not actually in the document tree.
The action object that distinguishes a pseudo-class is an existing element in the document tree, whereas a pseudo-element creates an element outside the document tree. Thus, the difference between a pseudo class and a pseudo element is whether an element outside the document tree is created.
The CSS3 specification requires the use of double colons (::) for pseudo-elements to distinguish pseudo-elements from pseudo-classes. Pseudo-elements such as ::before and ::after use double colons (:? Pseudo-classes such as, :hover and :active use a single colon (? . With the exception of some browsers later than IE8, most browsers support the double colon (::) notation for pseudo-elements.
For the interview with Didi, I feel that I am not fully prepared, especially the project technology Graphql on my resume. At the same time, I forced myself to explain some of the questions I didn’t know. In fact, I should tell the interviewer clearly that I didn’t know.
Tip: I’ve covered a lot here, from borrowed constructors to composite inheritance to parasitic composite inheritance, but the interviewer really wants to hear about parasitic composite inheritance. The interviewer also pressed me on how to achieve parasitic inheritance. Of course, there are many more questions that could be asked here, such as the difference between ES6 class inheritance and ES5 inheritance.
If you are not clear about inheritance and the difference between inheritance, feel free to take a look at my big notes on JS classes and inheritance.
Absolute positioning tip: Remember if the child element is positioned relative to the padding, border, or content of the parent element.
Shake out and Throttling tip: The interviewer just asked about the usage scenario, not how it works.
Function debounce (fn, wait = 1000) {let timeOutId
return function () {
let context = this
if (timeOutId) {
clearTimeout(timeOutId)
}
timeOutId = setTimeout(() => {
fn.apply(context, arguments)
}, wait)
Copy the code- 1
- 2
- 3
- 4
- 5
- 6
- 7
}} function debounceImmediate (fn, wait = 1000, immediate) {let timeOutId, context, args
const later = (immediate) => setTimeout(() => { if (! immediate) { fn.apply(context, args) timeOutId = context = args = null } }, wait)
return function () { if (! timeOutId) { timeOutId = later(true)
if (immediate) {
fn.apply(this, arguments)
}
context = this
args = arguments
} else {
clearTimeout(timeOutId)
timeOutId = later(false)
}
Copy the code- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Function throttle (fn, wait) {let timeoutId = null return function () {let context = this if (! timeoutId) { timeoutId = setTimeout(() => { fn.apply(context, arguments) timeoutId = null }, Quick tip for computed implementation principles in copy code Vue: This is a very detailed question, and the interviewer is definitely asking if you have read the source code. He first asked how computed works, and then asked why one computed value can depend on the other when there are two computed values. Incidentally, the realization principle of Watch is also attached here.
Classification of Watch:
Deep watch User watch (user monitor) Computed watcher Sync watcher (monitor)
After data is initialized (at this point, data is set to reactive via Object.defineProperty), the watch key will be read from Watcher. If there is an immediate attribute, then the callback function of watch is executed immediately. If the key of data changes, then the callback function of watch is executed immediately. Trigger user watch to implement the execution of the watch callback function. How does computed work? Properties of computed are dynamically mounted to the VM instance, and getters for computed are declared in data with different Settings. If the function corresponding to computed is executed, since the function reads the value of the data attribute, the getter function for the value of the data attribute is triggered, and during this execution, the dependency between computed and data can be handled. When computed computed for the first time, Performs the getter for the vm.computed property (a user-specified computed function, or if no getter is set, the currently specified function is assigned the getter for the computed property), If computed attribute values depend on other computed attribute values, the current target will be temporarily stored in the stack, and other computed attribute dependent collection will be performed first. After other computed attribute dependent collection is completed, it will pop out of the stack. Continue with current computed dependency collection var VM = new Vue({el: ‘#demo’, data: {firstName: ‘Foo’, lastName: ‘Bar’}, computed: {fullName: Function () {return this.firstName + “+ this.lastName}}}) copies the code due to this.firstname and this.lastname All are responsive variables, so they fire their getters, and according to our previous analysis, they add their own DEP to the watcher they are currently computing, which in this case, is the deP. Target computed watcher, The specific steps are as follows:
Getter setter for data property initialization Computed property initialization, the provided function is used as the getter for the attribute vm.fullName when the fullName computed property value is first obtained, When message Getter is executed, if the Dep is in the dependency collection state, it determines that firstName and lastName are fullName dependencies and establishes dependencies. When firstName or lastName changes, According to dependencies, a recalculation of fullName does not trigger view updates if the computed value does not change and we know from the above analysis that the computed property is essentially a computed watcher, You’ve seen how it’s created and how it’s accessed to trigger getters and depend on updates. This is actually the latest implementation of computed properties. It’s designed this way because Vue wants to make sure that not only do computed properties depend on values change, Instead, watcher rerenders when the final calculated value of the calculated property changes, essentially an optimization.
Computed values why you can rely on another computed value Tip: this problem was completely unknown at the time, alas, the official source code is too deep…
Here I hope there is a god can add a clarification.
What are periodic functions (beforeCreated and created)?
Initialize data, props, computed, watcher, and provide. The official source location SRC/core/instance/init. Js:
callHook(vm, ‘beforeCreate’) initInjections(VM) // resolve injections before data/props initState(VM) initProvide(VM) // resolve Provide after data/props callHook(VM, ‘created’) 解 决 51 credit card this interview is actually quite in-depth, ask some Vue underlying source code implementation, the general feeling of my answer is still ok, but the interviewer said: You should go to Ali…
Ali department unknown (side) talk about Webpack implementation principle tip: this direct answer do not know, the problem is larger, I guess here is similar to Babel and AST abstract syntax tree related, free to see the source code.
I hope you can add something to this question.
In the course of answering the lazy loading question, the interviewer asked about the lazy loading Webpack configuration, and I said it had something to do with code cutting.
I recommend a great article about lazy loading: Code Splitting.
Node.js loads (require and module.exports) Module. exports vs. exports, CommonJS vs. ES6
What do you think you are good at? What do you think you are good at?
React vs. Vue: React vs. Vue: React vs. Vue: Vue vs. JSX
This question is expected to be added by students who are familiar with React and Vue.
React, Vue and JQuery should be selected in different scenarios.
Tip: The interviewer should want to ask what situations might block DOM rendering. I said I didn’t know.
I hope you can add something to this question.
What asynchronous function tips are available: macro and micro tasks are answered.
Tip: I posted a nuggets post about this, but a lot of people didn’t seem very interested in it, but the interviewer actually asked this question.
The evolution history of a simple MVVM/MV* design pattern based on Vue is recommended in my previous nuggets article, which started with a focus on the evolution and differences between MVC, MVP, and MVVM.
Ali CBU technology department (side) say z-index what need to pay attention to the local tip: really forget about, simply said that only in the same cascading context for z-index value comparison, and absolute positioning of the relationship, Z-index value does not need to set too large, only need to clear hierarchy relationship. The interviewer asked about the coverage relationship between z-index and background, as well as the absolute positioning elements and the rules for coming from behind. What is the default value of z-index? Is there any difference between 0 and auto? It is true that CSS is not often used, so this question is not well answered.
Here’s what interviewers probably want to know:
Zhang Xinxu’s article provides an in-depth understanding of cascading context and cascading order in CSS.
Here, because of the answer to positioning, the interviewer asks what fixed positioning elements are positioned relative to? Does relative positioning deviate from normal document flow? Absolute positioning is positioning relative to what element?
Familiar with CSS3 animation tips: CSS3 animation hardware acceleration? Performance issues with CSS3 animations (redraw and restream, need to deviate from normal document flow)? I didn’t know that at the time, it’s really rarely used. If you are familiar with Vue transition animation, can you talk about transition animation?
Have you done any visualization projects tip: My answer: Does the map count? Vue component library designed map based on OpenLayers.
I hope you can add something about visualization.
What do you think you’re best at? Tip: This question is a minefield.
Flex implements a two-column layout (using the flex-basis attribute instead) :
Copy the code. Box {height: 200px; display: flex; }
.box > div {
height: 100%;
}
.box-left {
width: 200px;
background-color: blue;
}
.box-right { flex: 1; // Set flex-grow to 1, default to 0 overflow: hidden; background-color: red; } copy code ES6 / ES7 / ES8 features about the DOM event stream tip: what are the advantages of the interviewer ask event delegation (at least two or more), the target/currentTarget/relateTarget what specific points to target.
Do you feel like you’ve done something to drive or improve a process? Give me an example of a tip: this would be easier to answer if you’ve worked on specifications or development tools.
Summary on the whole surface of the interview was very thin, some knowledge has forgotten, suggest that we put some feel before the interview is not very familiar with the native knowledge recall, especially how can not be used in the development of some CSS style design of children’s shoes (now many are the design of a component library style packaging already dropped).
The difference between the Loader and plugins of Event Loop Webpack: AT that time, I directly answered that I didn’t know. It is true that I only know how to use Webpack, and I haven’t understood the internal implementation principle and composition. This follow-up, however, requires a good understanding of the principle.
I hope you can add something to this question.
HTTP status code 206: I have never had to upload or download large files in my work, so I honestly don’t know. Specific should be related to breakpoint continuation, may also need to answer some range header information.
React high-order components can be used to implement two-way data binding similar to Vue.
I hope you can add something to this question.
React Vue Service Worker React Vue Service Worker React Vue Service Worker React Vue I later checked that it was related to caching and HTTP request interception.
I hope you can add something to this question.
We only know that the uploaded header information is Application/X-www-form-urlencoded, and we can also intercept and process the data of uploaded files, for example, encrypt the information of uploaded files.
I hope you can add something to this question.
In fact, I feel that the interview is not very good (although the interviewer did ask more questions than I listed above), because THERE are several questions I do not know. Again, if you don’t know, just say you don’t know, so that you don’t create a negative impression on the interviewer. Luck had a lot to do with this interview.
Quick tip: The interviewer asked me what Vue does for computed data, from writing a. Vue file to DOM rendering on a page. Then I didn’t understand that the interviewer was going to ask vue-loader? DOM tree rendering process? Back and forth tentatively asked the interviewer several times, only to understand the original interviewer wants to know the Vue source code of the entire implementation process.
If you want to understand the whole process of Vue source code implementation, you can look at the previous written article based on Vue implementation of a simple MVVM/Vue operation mechanism brief.
Communication tip: Because some Hikon devices are involved here (communication between upper and lower computers), the interviewer asked me how I knew that the upper computer software sent five messages to the lower computer devices. In fact, most of the Web front-end development is difficult to meet similar problems in the work, fortunately, I did the upper and lower computer TCP communication in the graduation project. Later, I learned from the Leader that the second interviewer should be engaged in iot development.
The request frame data structure is as follows:
Frame Header Frame No. Frame Load Frame Check Frame Tail 2 Byte 1 Byte N Byte 1 Byte 1 Byte In this case, the frame header is identified by 2 bytes, and the CRC check can be adopted for the check. The frame number is used to identify the number of times the message has been sent.
Tip: I don’t know about this at the time, but the easiest way to do this is to find some common features of the AD elements and then hide them by injecting scripts into Chrome.
I don’t know if there are other better ways, such as whether Service Work can effectively block advertisements for request blocking processing. I hope students can add something to this question.
Two variables are equal to each other. There are two basic types and reference types. This is the first question that the interviewer asked me. At that time, I answered directly that I did not know, and I felt that the following was going to be cool.
Why does Vue data change frequently but only update once? Tip: Vue source code is optimized for view update. My answer here is confused, I hope some students can give a precise and brief answer.
Vue performs DOM updates asynchronously. Whenever a data change is observed, Vue opens a queue and buffers all data changes that occur in the same event loop. If the same watcher is triggered more than once, it will only be pushed into the queue once. This removal of duplicate data while buffering is important to avoid unnecessary computation and DOM manipulation. Then, in the next event loop, “TICK,” Vue refreshes the queue and performs the actual (de-duplicated) work. Vue internally tries to use native promise.then and MessageChannel for asynchronous queues, or setTimeout(fn, 0) instead if the execution environment does not support it.
Also, with the waiting variable, this is an important flag bit that ensures that the flushSchedulerQueue callback (executed in $nextTick) is allowed to be put into the callbacks once.
Because the event mechanism of Vue is to schedule execution through the event queue, it will wait for the main process to execute idle, so it will wait for all synchronous code execution to complete and then update again. The performance advantages are obvious, such as:
Mounted Specifies that the value of test is executed ++1000 times. Every time ++ triggers setter->Dep->Watcher->update->run in response. If the view is not updated asynchronously, then each ++ will directly operate on the DOM update view, which can be very performance costly. So Vue implements a queue, and the next tick (or microtask phase of the current tick) executes Watcher’s run in the queue. At the same time, Watcher with the same ID will not be added to the queue repeatedly, so Watcher’s run will not be executed 1000 times. The final update to the view simply changes the DOM 0 of the test pair to 1000. Ensuring that the DOM action of updating the view is invoked at the next tick (or the microtask phase of the current tick) after the current stack completes execution greatly optimizes performance.
Update -> queueWatcher -> Maintain observer queue (Watcher with duplicate id) -> Waiting bit processing (ensure that the flushSchedulerQueue method that needs to update the DOM or Watcher view will only be pushed into the asynchronously executed callback group once) Parse the nextTick callback array once) – > Process the nextTick callback array once) −> Process nextTick (asynchronously updating the DOM for microtasks or macro tasks) ->
Vue is an asynchronous update of the Dom, Dom updates on the next acer mission or the current task at the end of the task (micro) to perform As a result of the VUE data-driven view update is asynchronous, or modify the data of the moment, the view is not immediately update, but all the data in the same event loop, such as change is completed, unified view to update again. After the data in the same event loop changes, the DOM completes the update and immediately executes the callback in nextTick(callback).
Vue, like React, changes to the DOM are asynchronous. It records your dom operations in a queue and diff them, overwriting the previous one, and updating the DOM.
Event Loop what else can be used for layout besides Flex? Tip: I guess the interviewer is asking about Grid.
Absolute positioning, fixed positioning and Z-index tip: Thanks to the interviewers in CBU Technology.
The display:block absolute element overrides elements in the normal document flow (z-index is not required, Natural overwrite) to reduce the overhead of redrawing and redrawing (such as absolute+ top:-9999em, or Absolute + visibility:hidden, to place the animation into absolute) property static, default. An element whose position is set to static will always be in the position given by the document flow. Inherit, stating that the value of the position property should be inherited from the parent element. However, the property value inherit is not supported in any version of Internet Explorer (including Internet Explorer 8). Fixed, generates an absolutely positioned element. By default, it can be positioned at the specified coordinates relative to the browser window. The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes. The element remains in that position whether the window scrolls or not. But when the ancestor element has the transform attribute and is not None, coordinates are specified relative to the ancestor element, not the browser window. Absolute, an element that generates an absolute position relative to the element’s nearest located ancestor. The position of this element can be specified by the “left”, “top”, “right”, and “bottom” attributes. Relative, generates an element that is positioned relative to its initial position in the document. Sets the offset of this element relative to its position with the “left”, “top”, “right”, and “bottom” attributes. Floating, absolute, and fixed positions are positioned outside the document flow. Relative positions are not positioned outside the document flow. Absolute positions are positioned relative to the closest positioned ancestor of the element.
Absolute position relative to the starting position of the containing block:
If the ancestor element is block-level, the containing block is set to the inside margin boundary of that element. If the ancestor element is inline, the contain block is set to the content boundary of that ancestor element. Question:
The starting position of the positioned element is the inner margin of the parent block (not in the border, unless it is in the padding). The margin of the positioned element still works. The background property is shown in the border and the z-index is layered. It is important to consider the cascading priority of the same cascading context. Z-index is negative and does not overwrite the background color of the containing block (but if there is content, it will be overwritten by the contents of the containing block). The value of z-index affects the positioning element and the positioning element above the Flex box, the element below the normal flow, The location element will be overwritten by the normal stream element unless z-index is given a negative value. The root element of the page HTML has a cascading context by nature. This is called “cascading context at the root”. If you can’t answer the first question in the interview, don’t panic. Keep a good attitude and answer the next question that you can. May be many students will doubt, if there are several questions feel didn’t answer, but may be a problem as long as there is a very brilliant, still can make up for those who didn’t answer up problem (here the interviewer said at the time the Vue source I said is clear, the implementation of the process is not an interviewer a clearer than me).
The three sides of ali enterprise Intelligence Division (Leader side) are the Leader site side. I was particularly worried about the occurrence of the two sides, so I gave you an algorithm problem out of the blue. These are really my worst points. Because a little guilty I asked the next in Ali elder brother (elder brother may also do recruitment work, then also blame me for not looking for him to push…) “He said that the on-site interview was really about preparing the content of your resume, which was the basis for the interviewer’s q&A, and that when he interviewed Ali, he asked him to draw a framework for one of the projects. (I didn’t mind that, but the interviewer did ask me to draw a framework for one of the projects.) There are two interviewers and one HR present when the Leader meets.
At first, a Leader came into the interview. He seemed very authoritative, but he asked questions casually. He simply asked me to introduce the projects I had done and then looked over some of my work. I felt that he seemed absent-minded and looked through the pages at random. When I was answering the questions, I paid attention to the leader’s expression in the corner of my eye, and I felt that he stayed in the experience section of my project for a long time.
When I was answering the question about my project experience, Leader 2 and HR came in and asked Leader 2 to interview me after I finished answering the question. Leader 2 asked me about two of the projects. The first project HE asked me was an internal tool he had built for the company. He asked me what measurable data the platform had to show how people in the company used it. I answered that I didn’t do statistics because my boss didn’t think it was necessary and told him some real data in the database. Then he asked PV, UV should how statistics (I was also cheeky to ask him what PV and UV are)? If the page can not be accessed PV statistics? Does the page do any behavior monitoring? How to deal with large page views? I gave you a rough idea of what I was thinking.
Then I asked about the second project (Low Code related), and I answered the technical system of the project, and explained everything in detail from what I had done in the past to what I was doing now to what I needed to do in the future. Leader 2 asked me what I could do in the future and gave me 5 minutes (during this time, he kept reading my resume repeatedly). Then I pretended to think for about five minutes, but my mind was blank, and I had only an idea of what I wanted to be. Then Leader 2 was very considerate. He said you could draw a picture on the wall (you could write on the wall), so I drew a picture roughly. Leader 2 asked me if I could draw a frame diagram of the project, so I simply drew a picture… Finally, Leader 2 directly said that what you did was too Low. This (Low Code) was already two years old in our company. (this I still want to explain, I department from the beginning to use Vue so far only two years, during this two years technical system was rapid in precipitation and development, has been conceived and implemented before I left part of the Vue technology stack Low Code solution, if anyone interested in this field can also find my communication).
Leader 2 was quite funny. He said that if the Low Code was really done, there would be nothing at the front end, so why would you go there? Following the question, he asked me what the future of the front end should be. What’s the future of the front end? I answered some questions about Graphql, visualizations, etc., and I also gave a particularly funny answer, saying that in the past, the front end should take over the resources of the back end, and let the front end do what the back end limits us, and make the front end more free. Leader 2 refuted on the spot, saying that we should do it only for the sake of value, rather than for the sake of being able to do it, which scared me so much… Then Leader 2 explained to me in detail what answer he hoped to get on the question of future development. At that time, Leader 2 was still kind to me.
HR asked me the following questions after the second interview with the Leader:
Why do you want to leave the current company? What is the job system of the previous company? Were you recruited by the school?
Do you have any future plans for your career? Finally, I asked if I had any other questions. I was a little confused by the questions from three people, and then I thought about it and said no.
Summary This scene face actually I feel oneself face is not very good, always feel oneself want to hang up. The interview lasted for about one and a half hours in total. In particular, many of the questions of Leader 2 were not the answers he wanted, but he finally passed.
The Leader of The Enterprise Intelligence Business Division of Ali received the interview notice of HR after the interview. The following questions were roughly asked in this round of interview:
Why do you want to leave your present company? You now what position Talk about your situation in the company’s performance What do you think of the most rewarding thing you do Do you usually what are the methods to solve the problem Because you an opportunity to choose to do the front Do you have for your company do any improvement on the process or system specification What have you been in reading, and work related? Why do you want to read these books? I see you interviewed with two other departments and both of them failed. What’s the reason? HR will ask here is more than these problems, for example, why do you like the Web front end this job, your career planning in the future, do you think what are the advantages and disadvantages of, why do you choose alibaba, evaluation under several interviewers do before, have you worked on which products of ali talk about the advantages and disadvantages of these products, by the way, how do you understand the Internet is…
It’s important to prepare for the interview, especially when it comes to questions such as why you left your current company. (You shouldn’t complain about what’s wrong with your current company, but more about the fact that you are looking for a better opportunity. For example, is now for me to apply for the company closer to home, or is their work reached the confused period, want to jump out of the confused period, etc.), what do you think of the most rewarding thing you do (if you say a simple, HR will think you work ability is not strong, you usually what are the methods to solve the problem (HR, of course, also want to review your ability to solve the problem, If you say something about Baidu, of course, HR will think you are not strong in solving problems), what salary do you expect (if you don’t like the company, you can expect more, if you like the company, the interview process is happy to increase about 30%, the interview process is generally increased about 20%).