After the interview
Record tidy it up before the interview questions, in August 2019, participated in an interview ahead of netease game, rearranging here to summarize, there is error, place still hope you practive Experienced a written in two rounds of technical director with HR round face, four wheel is in the on-site interview, from surface to five o 'clock in the afternoon at two o 'clock in the afternoon, HR face it some timeCopy the codeCSS
- CSS layout topic
Browser mobile compatibility
- Gets all checkboxes in the specified div for browser compatibility
- Mobile terminal image selection
- Base64 related
Computer Fundamentals
- Front-end security (XSS CSRF Network hijacking attack Console injection code phishing)
- What is a forward proxy and what is a reverse proxy
- HTTPS and handshake
- Iframe communicates between multiple pages across domains
- Disadvantages of jSONP cross-domain solutions
- PostMessage communicates across domains
- The CORS configuration allows cross-domain access for several requests
- DNS server resolution process
algorithm
- How many ways can a matrix go from the top left corner to the bottom right corner
- A quick way to shuffle arrays (shuffle algorithm)
- Template compilation
js
- Write a summation function such that sum(1), sum(2) and sum(1, 2) give the same answer.
node.js
- Nodejs pressure measurement
- Buffer upper limit, stream and buffer comparison
- Nodejs can be used in other ways than just encapsulating interfaces
- Nodejs log management, whether there is a visual interface
The framework
- Underlying implementation of Angular dependency injection
- Angular lazy load (ocLazyLoad, used with uiRouter)
- Angular interview questions
- The method by which a VUE component resets data
- The essential difference between VUEX and global variables
- The VUE life cycle and what each life cycle does
Project related
- How to load dependencies with gulp package (assest. Js) gulp package and Webpack
- Now imagine the fastest way to add a throttling or anti-shaking method to all the buttons in a system
- What other methods are there to call the back-end interface besides HTTP requests (graphQL)
Engineering and deployment
- docker image
- How do I roll back code
- Docker rollback
- Git rebase differs from Git merge
- Git rebase operation
- Git selects several commits to merge into a branch (one with cherryPick, one with rebase)
The database
- The redis operation does more than save the Sesson token
- What a database thing is
- The difference between mysql and Mongo
CSS layout topic
<div class="box">
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<style>
.box {
width: 400px;
height: 400px;
display: block;
border: 1px solid blueviolet;
}
.content {
width: 100%;
height: 50%;
margin-top: 200px;
}
ul {
padding-left: 0;
display: flex;
flex-direction: row-reverse;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
}
li {
list-style: none;
border: 1px solid black;
width: 50px;
height: 100px;
line-height: 100px;
text-align: center;
vertical-align: middle;
}
li:nth-child(3) {
height: 200px;
line-height: 200px;
vertical-align: middle;
}
</style>
Copy the code
Gets all checkboxes in the specified div for browser compatibility
Incompatible IE6 IE7... Document. QuerySelectorAll (" div > input [type = checkbox] ") compatible with IE6 IE7 link https://www.jianshu.com/p/872d69047ddaCopy the code
Mobile terminal image selection
1. Don't use pictures. A lot of times will use a lot of modified pictures, in fact, this kind of modified pictures can be replaced by CSS. 2. For mobile terminals, the screen width is so small that there is no need to waste bandwidth by loading the original image. General pictures are loaded with CDN, you can calculate the width of the screen, and then request the corresponding cropped picture. 3. Base64 format for small images 4. Integrate multiple icon files into one image (Sprite image) 5. Choose the right image format: Use WebP for browsers that can display WebP. Because WebP format has better image data compression algorithm, can bring smaller image volume, and has naked eye recognition of no difference in image quality, the disadvantage is not good compatibility with PNG small picture, in fact, for most ICONS such pictures, can completely use SVG instead of photos using JPEGCopy the code
Base64 related
DataURI allows small files to be embedded in HTML documents, and converted Base64 encoding can be embedded using IMG tags or CSS to reduce HTTP requests and speed up the loading time of small images. Base64 encoded files are typically about 30% larger than the source file. Box {background-image: url("data:image/ JPG; base64,/9j/4QMZR..." ); <img SRC ="data:image/ JPG; base64,/9j/4QMZR..." />Copy the code
Front-end security (XSS CSRF Network hijacking attack Console injection code phishing)Refer to the link
XSS allows malicious Web users to insert code into pages that are provided to other users. <script> < img > < img > < img > < img > < img > < img > < img > < img > < img > < img > < img > < img > < img > < img > < img > < img > < img > < img > < img > * * * * * * * * * * * * * * * * * * * * * * * * * * * * CSRF cross-site request forgery (CSRF cross-site request forgery) : this is a CSRF cross-site request forgery (CSRF cross-site request forgery) that cannot read or write cookies using the HttpOnly attribute of cookie. The web site of your Internet bank). Example: In a POST request, the user submits the form without knowing it, and the server thinks it is a solution submitted by the user: Add verification code verify token on every request Network hijacking attack Data is intercepted by hijackers at the intermediate proxy layer steal data, such as connecting to a third party WiFi solution: Submit with HTTPS form use asymmetric encryption -- encryption on the client, only the server can unlock the console injection code solution: The console warns users not to do this phishing operation by entering account passwords on third-party websites, such as QQCopy the code
What is a forward proxy and what is a reverse proxyRefer to the link
Forward proxy science Internet access, unable to visit a website, in the state to build a proxy server, let the agent to help me request that website, the agent to request the result returned to me. When a reverse proxy dials 10086, there are multiple customer service providers to provide services. The customer only needs to dial 10086 switchboard number without the actual service provider. Nginx is a reverse proxy server with excellent performance, which is used for load balancing. The difference between the two proxies is that the forward proxy objects are clients, and the reverse proxy objects are serversCopy the code
HTTPS and handshakeRefer to the link
HTTPS = HTTP + SSL HTTPS = HTTP + SSL HTTPS = HTTP + SSL Establish a TCP Handshake connection. 2. Perform SSL Handshake protocol exchange. 3. Communication then begins with a mutually agreed keyCopy the code
Iframe communicates between multiple pages across domainsRefer to the link
Method calls the parent page call child pages method: FrameName. Window. ChildMethod (); Child pages: call the parent page method. The parent window. The parentMethod (); If an iframe is linked to an external page, the security mechanism does not allow you to communicate with the same domain name. The trick of the parent page passing data to child pages is to take the hash value of the Location object and pass communication data through it. Add a data string to the SRC of the iframe in the parent page, and then use some method to retrieve the data in the child page, for example: Set the timer in the child page by setInterval method, listen for changes in location.href to obtain the above data information 2. And then the child page does some logical processing based on that data and the child page passes the data to the parent page and the trick is to use a proxy iframe, which is embedded in the child page and has to stay in the same domain as the parent page, It then makes full use of the implementation principle of the first communication method by passing the data of the sub-page to the proxy IFrame, and since the proxy IFrame and the main page are co-domain, the main page can use the co-domain method to obtain the data. Use window.top or window.parent. Parent to get a reference to the browser's top-level window object.Copy the code
Disadvantages of jSONP cross-domain solutions
JSONP does not solve the problem of how to make JavaScript calls between two pages in different domains. The advantage of JSONP is that it supports older browsers, but its disadvantages are also obvious: Client and server customization is required for development. The data returned by the server is not standard Json data, but callback wrapped data.Copy the code
PostMessage communicates across domains
Typically used to retrieve third-party page data embedded in a page. A page sends a message, and the other page source of judgment and receive messages / / messaging client window. The parent. PostMessage (' message ', 'http://test.com'); Var MC = new MessageChannel(); mc.addEventListener('message', (event) => { var origin = event.origin || event.originalEvent.origin; If (origin = = = 'http://test.com') {the console. The log (' validation by ')}});Copy the code
The CORS configuration allows cross-domain access for several requestsRefer to the link
Access-control-allow-origin allows only one domain name to be set. Therefore, you can only configure the code to determine whether the domain name is allowed. If yes, you can set the permission for cross-domain Access. All ('*', function(req, res, next) { if( req.headers.origin == 'https://www.juejin.com' || req.headers.origin == 'https://www.baidu.com' ){ res.header("Access-Control-Allow-Origin", req.headers.origin); res.header('Access-Control-Allow-Methods', 'POST, GET'); res.header('Access-Control-Allow-Headers', 'X-Requested-With'); res.header('Access-Control-Allow-Headers', 'Content-Type'); } next(); });Copy the code
How many ways can a matrix go from the top left corner to the bottom right corner
Function matrixCount(I, j) {let matrixCount(I, j) {let dpList = []; for (let k = 0; k <= i; k++) { dpList.push([]); for (let y = 0; y <= j; y++) { dpList[k][y] = ''; } } console.log(dpList); function dp(i, j) { if (i === 0 && j === 0) { dpList[i][j] = 0; return 0; } if (i === 0 || j === 0) { dpList[i][j] = 1; return 1; } let tempResult1 = dpList[i][j - 1] ! = = ' '? dpList[i][j - 1] : dp(i, j - 1); let tempResult2 = dpList[i - 1][j] ! = = ' '? dpList[i - 1][j] : dp(i - 1, j); dpList[i][j] = tempResult1 + tempResult2; return dpList[i][j] } dp(i, j); console.log(dpList); return dpList[i][j]; } let result = matrixCount(8, 8); console.log(result);Copy the code
A quick way to shuffle arrays (shuffle algorithm)Refer to the link
1. Fisher-yates Shuffle algorithm 2. Lodash Shuffle methodCopy the code
Template compilationRefer to the link
Var temp = 'I am <%name/%>, I am <%age/%> '; Var obj = {name: 'eason', age: '24'} function compile(temp, obj) {let resultStr = temp; for (let key in obj) { if (obj.hasOwnProperty(key)) { let reg = new RegExp('<%' + key + '/%>', 'g'); resultStr = resultStr.replace(reg, obj[key]); } } return resultStr; } // Return result 'Hello, my name is Eason and I am 24 years oldCopy the code
Underlying implementation of Angular dependency injectionRefer to the link
Dependency injection: I don't want to hold my own stuff. I want someone I depend on to hold it for me and give it to me when I need it. Get module dependencies. 2. Find the object corresponding to the dependency. 3Copy the code
The method by which a VUE component resets dataRefer to the link
Assign (this.$data, this.$options.data()) 2. Regenerating a component can be achieved by forcing a DOM refresh directly, which can reset some of the animation of the component as well as the original data within the component. When Vue updates the Dom, the original component is reused if the key value is the same, and regenerated if the key value is different. Resetting a component to its initial state is a common requirement. There are two recommended practices. One is for the parent component to reset the prop of the child component, and the other is for the child component to expose a reset method for the parent component to call. Sometimes, however, a child component provides neither a way to reset nor a prop to reset its state. More importantly, we can't touch the child component. We need a hack to force the child components to reset to their original state. Parse (json.stringify (...)) If necessary, pass vm.$data to json.parse (json.stringify (...). ) to get a deep copy of the original data object.Copy the code
The essential difference between VUEX and global variables
1) Lack of time travel function 2) VuEX specialized state management, by a unified method to modify data, all variables can be arbitrarily modified 3) log collection, buried point, vuEX is more convenient 4) all variables will cause naming pollution, vuEX does not, at the same time solve the parent component and grandson component, And communication issues between sibling componentsCopy the code
Write a summation function such that sum(1), sum(2) and sum(1, 2) give the same answer.
function sum() { var sumResult = 0; for (let i of arguments) { sumResult += i; } function chain() { for (let i of arguments) { sumResult += i; } return chain; } chain.valueof = function() {return sumResult; } return chain; } var fun = sum(1)(2)(2, 3); console.log(fun.valueOf());Copy the code
Nodejs pressure measurement
Pressure measuring WRK: https://www.jianshu.com/p/dfe1c12ebd2f autocanno for pressure test: https://juejin.cn/post/6844903665166188551Copy the code
Buffer upper limit, stream and buffer comparisonRefer to the link
Note that buffer uses V8 off-heap memory. In general, A single Node.js process is Currently with a maximum memory limit, by default V8 has a memory limit of 512MB on 32-bit systems, And 1.4GB on 64-bit systems. The limit can be raised by setting -- max_old_space_size to a maximum of ~1024 (~1 GB) (32-bit) and ~4096 (~4GB) (64-bit), but it is recommended that you split your single process into several workers if you are hitting memory limits. A buffer is a data buffer object. It is an array-like object into which binary data can be written by specifying the starting position and length of data to be written. A stream is a high-level encapsulation of the buffer object. Streams can be set to read, write, or read as well as write, and inherit the EventEmitter interface from NodeJS to listen for reads and writes. Specific implementation of file flow, httpresponse, etc. ~~Copy the code
Nodejs log management, whether there is a visual interface
Alibaba: Pandora feels a little KPI product. Tencent: TSW code is chaotic. Alibaba Cloud SLS log (used by the company) ELK (built by myself)Copy the code
The redis operation does more than save the Sesson tokenRefer to the link
1. Cache 2. Leaderboards 3. Counters 4. Distributed sessions 5. Social networking 7. Latest list 8. Messaging systemsCopy the code