Content provider: Jinniu District Wudi Software Development Studio
Preface:
Today, I would like to share with my friends the most comprehensive interview questions in one to three years (including HTML, CSS, JS, React, Vue, NodeJS, version repository use, Internet basics).
One, when choosing work matters needing attention
See this link: the author’s personal experience in choosing a job to share
Second, interview process, telephone interview, HR interview simulation questions and interview etiquette
Check out this link: A complete analysis of the interview process and techniques (no matter how many years of experience you’ve read it will improve your chances of success)
3, HTML,CSS
- Every HTML file has a very important thing called Doctype. Do you know what that is? 【 Very old interview question, can ignore 】
Answer: The declaration is first in the document, before the < HTML > tag. This tag tells the browser which HTML or XHTML specification the document uses. 2. Please talk about the features of HTML5. Answer: www.h5course.com/a/201505029… 3. What semantic tags do you know? Answer: this link is not only told a few common H5 new semantic elements, also introduced how to make at the end is not compatible with these labels browser can also be in the shape of a we expected to display (if you want to see more semantic label please baidu 】 : www.runoob.com/html/html5-… 4. What are the new features in CSS3? 5. Please talk about the advantages of CSS3 animation. Answer: The code is simple, and the performance is good, and the browser will optimize it. 6. Please talk about the Grail layout and the Twin wing layout. The Grail layout and the twin wing layout are both fixed width, adaptive layouts in the middle. 7. How to write an APP with adaptive width and height? 8. How do I change the style of my input? 9. What are the advantages of the div+ CSS layout over the table layout? Answer: It is more convenient to change the version, just change the CSS file. The page load speed is faster, the structure is clear, and the page is displayed briefly. Expression is separated from structure. Easy to optimize (SEO) search engines are friendlier and easier to rank high. 10. Grid layout? Answer: new CSS layout display: grid; What are the similarities and differences between Alt and title of img? The similarities and differences between strong and EM? Answer: Alt: used to specify alternative text [image load failed to show]. Title: Used to provide suggested text [move in display]. Strong: bold to emphasize the label. Em: italic emphasis label. 12. Describe progressive enhancement and graceful degradation. Answer: Progressive enhancement is forward compatibility. Graceful downgrading is backward compatibility. 13. Know what microformats are? Talk about understanding. Microformats are a machine-readable collection of semantic XHTML vocabulary that is an open standard for structured data. A special format for a particular application. Advantages: Add smart data to web pages, allowing web content to display additional prompts in search engine results. 14. Why is it more effective to use multiple domain names to store website resources? Answer: CDN cache is more convenient; Breaking the browser concurrency limit; Save cookie bandwidth; Save the connection number of the main domain name, optimize the corresponding speed of the page; Prevent unnecessary security problems; 15. There are a large number of pictures on a page (large e-commerce website), and the loading is very slow. What methods do you have to optimize the loading of these pictures to give users a higher experience? Answer: Use sprites to consolidate small images into one Sprite to reduce browser requests. Http2.0 can ignore this problem: lazy loading with images. 16. Picture lazy loading principle? 17. What are the selectors for CSS? 18. What attributes can be used in CSS to keep a DOM element from being visible to the browser? Answer: display: none; visibility: hidden; opacity: 0; 19. Why use SEMANTIC tags in HTML5? Answer: Removing or losing styles allows the page to retain its basic style and present a clear structure. Good for SEO. Reduce team differentiation. 20. What is the difference between an inline element and a block-level element? Can the padding and margin of the inline elements be set? Answer: Block-level elements always have a single row. Width, height, padding, margin can be controlled. Padding -bottom; margin-top; margin-bottom; margin-bottom; margin-bottom; margin-bottom; margin-bottom; margin-bottom; margin-bottom; margin-bottom 21. What is the problem with hover style not appearing after a hyperlink is visited? How to solve it? Answer is: click the hyperlink to visit style not in hover and active, the solution is to change the order CSS properties: L – V – H – A (link, visited, hover, active). 22. What is the difference between rgba() and opacity? Opacity child elements follow opacity, while rgba() transparent child elements do not. 23. Please describe display:none; Visibility: hidden; opacity:0; The difference between the three; 24. What do you know about the ways to center elements vertically and horizontally in CSS? 25. How do I vertically center a floating element? Answer: Calculate top and left with position, which can be calculated with CSS function calc(). Please explain the difference between PX and EM. Answer: Px and em are both units of length. But px is fixed, whatever you specify. Em varies according to the size of the parent element. Extension: The browser default font size is 16px. So all untuned browsers follow the rule: 1em=16px. 27. What are SASS and LESS? Why use them? Answer: CSS preprocessor, through the way of programming to develop CSS, can achieve code shorthand and reuse, etc. They are used because: the structure is clear, and can be expanded, reduce meaningless mechanical labor, can easily achieve multiple inheritance. 28. What is the difference between CSS link and IMPORT? Answer: Baidu a lot, oneself search. Please talk about the box model. Answer: THERE are two types of CSS box models: IE box model and standard box model. In the standard box model, width and height refer to the width and height of the content area. Increasing margins, borders, and margins does not affect the size of the content area, but does increase the overall size of the element box. In the IE box model, width and height refer to the width and height of the content area +border+padding. 30. What is BFC? Answer: A BFC is when a browser creates a separate rendering area and has a set of rendering rules that determine how its children are positioned and how they interact with other elements. Understanding and understanding of WEB standards and W3C. The answer: Closing tags, labels lowercase, not disorderly nested, increases the chances of a search robots, using CSS and js scripts outside the chain, the structure behavior of separation, with the page file download faster, content can be more users access, access by a device that can be more, less code and components, easy to maintain, easy to change, No need to change page content, provide a printed version without copying content, improve site usability. 32. What are the three layers of the front page? What are they? What does it do? Answer: Structure layer (HTML – set the basic structure of the page), style layer (CSS – modify the style of the page presented to the user and add some small interaction), behavior layer (JS – user and page perfect interaction). What are block-level elements? What are the empty elements? 34. What are the CSS selectors? Which attributes can be inherited? How is the priority algorithm calculated? What are the new pseudo classes in the CSS? Answer link as above. 35. Name the attribute values of position. The characteristics of each value function. Answer link as above. 36. What are the attributes of display? What can be done? Answer link as above. (blog.csdn.net/weixin_4360…). 37. Which CSS properties can be inherited? Answer link as above. 38. How is the CSS style priority algorithm calculated? Answer:! Important > id > class > tag! Important takes precedence over inline style; Priority nearest principle, style definition nearest prevail; Whichever style is loaded last; 39. Tell us about the rules you know about z-index weights in CSS. Answer: CSS z-index weight problem [most concise, no talk] 40. What are the most difficult HTML and CSS issues you have encountered during development? Reference answer: I met the most difficult is to be on the left side of the sidebar navigation, specific to see: on the left side of the sidebar and integral separate rolling, and display the secondary menu in X axis normal 41. The HTML/CSS page redrawn and return the answer: www.cnblogs.com/leetom/arch… 42. ** implementation: the left element has a fixed width, and the right element is adaptive
4, JS basic questions:
- What are the outputs and inputs of JS?
2. What are the data types of JS? 3. How to determine the data type of the JS variable? 1. The typeof () 2. Instanceof 3. Constructor 4. ToString 5. Object. The prototype. The toString on one of the most important Object. The prototype. ToString watch: Blog.csdn.net/weixin_4360… 4. What are the possible values of TypeOF solution? 1. “number” 2. “string” 3. “boolean” 4. “undefined” 5. “object” 6. “symbol” 7. “function” 5. What do you know about automatic and implicit conversions to data types? -implicit type conversion: -1 == ‘1’ – ‘1’ + 1 – ‘1’ – 1 – display type conversion: -Parseint (STR,radix)/parseFloat(STR,radix)/Number() converts to numbers. – Boolean(param) converts to a Boolean value. – subString() converts to a string
6. “==” and “===” and “! = “and”! == “difference? Answer: “==” and “! = “will do data implicit conversion, after conversion data type comparison. And “===” and “! Return false if the data type is different from that of the other two. 7. Something about “| |” and “&”. Answer: please visit: thorough understanding of “| |” and “&” 8. “i++” and “+ + I” distinction. Answer: I ++ refers to the value of I and then increments I by one. ++ I increments the value of I by 1 and then references it. 9. Break, renturn, continue A little bit about recursion. The function itself calls itself. ① Recursive ② Using recursion to iterate 11. Which algorithm do you know? 12. How do you debug bugs? Answer: Please visit: front-end debugging bug method 13. Common APIS for arrays do you know what? 14. Explain the difference between an array and a pseudo-array. Answer: Visit: What is a pseudo-array? 15. Explain your understanding of object-oriented programming. Answer: Visit: Concepts of Object-oriented Programming (OOP) 16. Talk about prototype chains. 17. Please talk about the method of inheritance. 18. Please talk about JavaScript scopes. Answer: JS scope and name enhancement 19. What are the methods for creating objects? Answer: blog.csdn.net/weixin_4360… 21. Talk about ECMAScript built-in objects. Answer: blog.csdn.net/weixin_4360… 22. Array added the traversal API in ES5 to use each of them, return values, and parameters. 23. What are the new things in ES5/ES6 that you usually use in your development? 24. List at least four common objects in the browser object model BOM and at least five common methods on the Window object. 25. Tell us what you know about performance optimization. Answer: 12 tips for improving JS performance How to find performance bottlenecks 28. Common tools for performance tuning 29. Tell me how you did performance tuning in a project 30. What is the difference between event binding and normal events? Answer: The difference between event binding and normal events 31. The difference between IE and other browser event streams. Answer: IE is event bubbling, other browsers are event capture (the standard DOM event stream). 32. What are the compatible writing methods under the IE standard? 33. Please say something about the direction of this. 34. What are some ways to change the direction of this? 35. Please explain the differences between bind(),call(), and apply(). 36. Handwritten Call method. 38. Talk about JavaScript closures. What are the characteristics? What is the impact on the page? 39. What is event delegate/event delegate? 40. How do I prevent event bubbling and browser default events? The default behavior of browser events is introduced and blocked. The method of JS event flow is introduced and prevented from bubbling. Methods of adding, deleting, replacing, and inserting into a node. 42. Document. load and jquery.ready. 43. Please talk about JavaScript’s same-origin policy. 44. What cross-domain methods do you know? Which one is most commonly used? How does it work? 45. What kind of language is JavaScript? What are its features? Answer: weakly typed languages, type implicit conversions, scope, reputation enhancement… 46. How is the regular expression constructor var reg = new RegExp(‘ XXX ‘) different from the regular expression literal var reg = / XXX /? Answer: When using the RegExp() constructor, not only do you need to escape quotes (i.e. \’ represent ‘), but you also need a double backslash to represent a backslash. So we use regular expression literals more efficiently. 47. What are the roles of callee and Caller in JavaScript? 答案 : the difference between callee and caller in JavaScript A brief description of JavaScript DOM document node access method, and say the corresponding role. 49. Briefly describe several ways to create functions. 50. What is the difference between placing a script tag before and after the body closing tag? How will the browser parse them? Answer: If the body is closed before, it will block the loading of other resources. If you place it after the body tag, it does not affect the loading of elements inside the body. 51. Describe the advantages and disadvantages of iframe. 52. Please talk about the differences and characteristics of cookie, localStorage and SessionStorage. 53. JS lazy loading methods: Answer: 1. Defer and async properties of the script tag. 2. Dynamic DOM creation method (create script, insert into DOM, after loading callback). 54. Which operations cause memory leaks? Answer: A memory leak is any object that exists when you no longer own or need it. 1. Using a string instead of a function as the first argument to setTimeout causes a memory leak. 2. The closure. 3. Console logs. 4. Loop (a loop is created when two objects refer to each other and keep each other). 55. Talk about garbage collection in JavaScript. Answer: The garbage collector periodically scans objects and counts the number of other objects that refer to each object. If the number of references to an object is zero (no other object references the object), or the only references to the object are cyclic, then the object’s memory is reclaimed. 56. What is 0.1+0.2 in JS? How do I get it to the right answer? Answer: equal to 0.30000000000000004. The reason is errors in floating-point arithmetic. The best solution:
This is a problem with addition, subtraction, multiplication and division, so we can pass in an extra parameter and then add a switch to determine which calculation to use, which is a universal calculator.
function add(param1, param2) {
return parseFloat((param1 + param2).toFixed(10));
}
add(0.1.0.2); / / 0.3
Copy the code
5. React
React 1 to 3 Years Summary of interview Questions and Advanced questions
Dvajs:
- Differences between Reducers and Effects:
Answer: Reducers are operations that deal with synchronization. Effects deals with asynchrony. Effects is a generator function. 2.
Vi. Vue interview questions sorting:
Because the content is too much, so the author sorted out an article separately, please click on the link: Vue one to three years of interview summary
Seven, NodeJS:
- Describe the pros and cons of NodeJS, and what development scenarios do you think it fits into?
Answer: Because Node is event-driven and non-blocking, it is ideal for handling concurrent requests. In addition, the client code that interacts with the Node proxy server is written in JS, and both the client and server are written in the same language, which is a wonderful thing. Disadvantages: single process, single thread, only supports single-core CPU, can not make full use of multi-core CPU server. Once the process crashes, the entire Web service crashes. Application scenario: Real-time application, such as online chat, real-time notification push, etc. Distributed applications that use existing data efficiently and I/O. There are tons of tools, ranging from front-end compression deployment (grunt) to desktop graphical interface applications. Game applications, the game field has high requirements for real-time and concurrent. Improve Web rendering capabilities with stable interfaces. Unified front-end and back-end programming language, front-end personnel can be very fast into the server development. (Such as the famous pure JS full stack MEAN architecture.) 2. Requirement: To implement a site that does not refresh page actions overnight and responds correctly when the browser moves forward and backward. Give your technical implementation plan. Answer: at least give the idea (url-hash, use existing history.js, etc.) Talk about Route, Middleware, Cluster, Nodemon, PM2, Server-side Rendering, etc. 4. What is front-end routing? When is it appropriate to use front-end routing? What are the advantages and disadvantages of front-end routing? Answer: Front-end routing is a way to jump to a page without making a back-end request. Front-end routing is typically used in single-page applications. Advantages: Good user experience, no need to obtain from the server every time, quickly show to users. Cons: Use the browser’s forward and back keys to resend requests, doesn’t make good use of caching 5. Benefits of using NodeJS as middleware: What are the benefits of Using Node as a middle tier? [Personally, I think the disadvantages outweigh the advantages in most cases.]
Eight, Webpack:
- Webpack principles, and common plug-ins.
- How does webpack package cache, not updated package how does it not repack
Ix. Use of version Warehouse:
- Do you know Git?
2. Do you know SVN? SVN introduction and use method 3. Git common commands do you know what? 4. How do you resolve code conflicts with Git? 5. How do you back up your version of git? 6. Command line commands What do you know about git? Answer: Common command 7.
Ten, computer related knowledge [HTTP also here] :
- The difference between HTTPS and HTTP?
The difference between HTTP and HTTPS 2. TCP/IP three-way handshake and four-way wave What is the point of its existence? The TCP/IP three-way handshake and the four-way wave are all understood by anyone who has ever used a mobile phone: an error is generated in case an invalid connection request segment is suddenly sent to the server. What do you know about common request headers and response headers? Answer: Common request headers and response headers introduction 4. Common status codes and the meaning of which do you know? Answer: Common status codes in development 5. How do you debug on a real machine when actually developing a mobile project? 6. Please talk about long connection and short connection. Answer: www.cnblogs.com/gotodsp/p/6… 7. How to do SEO optimization for the website. Answer: baike.baidu.com/item/%E6%90… In addition to those described above, the most important thing is to spend money… 8. Please explain how browser rendering works. Answer: blog.fundebug.com/2019/01/03/… 9. What is the difference between GET and POST in HTTP? What are the applicable scenarios? Answer: The length of data transmitted by GET is limited, because it is placed in the URL to transmit parameters. If Chinese parameters are transmitted, they need to be encoded by themselves, which is less secure. Post is placed in a message without restriction. If the server has made a restriction, it can be changed. Application scenario: POST is used for data submission. Get is generally used for simple data queries in scenarios with less stringent requirements. 10. What happens when a page is loaded and displayed from the time the URL is entered?
The answer: 1. User input When the user enters the keyword and presses Enter, it means that the current page is about to be replaced with a new page, but the browser also gives the current page a chance to execute the beforeUnload event once before the process continues. Beforeunload events allow the page to perform some data cleansing operations before exiting and also ask the user if they want to leave the current page. 2. The URL request first checks the local hosts file to see if there is any cache. If there is no cache, the browser will start a thread to process the request and start a DNS query on the remote DNS server. This enables the browser to obtain the IP address corresponding to the request.
The browser establishes a TCP/IP connection with the Web server through TCP three-way handshake negotiation. The handshake consists of a synchronization message, a synchro-reply message, and a reply message, which are transmitted between the browser and the server. In this handshake, the client first attempts to establish a communication, then the server responds and accepts the client’s request, and finally the client sends a message that the request has been accepted. Once a TCP/IP connection is established, the browser sends an HTTP GET request to the remote server over the connection. The remote server finds the resource and returns it with an HTTP response, and an HTTP response status of 200 indicates a correct response. At this point, the Web server provides the resource service and the client starts to download the resource.
By default, Chrome assigns a render process to each page, meaning that a new render process is created for each new page opened. 4. In the rendering stage, the rendering process will start after the successful decoding of files. DOM tree will be created according to HTML first, and CSSOM tree will be constructed if CSS is available. If a script tag is encountered, it will determine whether async or defer, the former will download and execute JS in parallel, and the latter will download the file first and wait for HTML parsing to complete and then execute sequentially. If none of the above is present, the process will be blocked until js execution is complete. After the CSSOM tree and DOM tree are built, the Render tree is produced, which determines the layout, style, and many other aspects of the page elements. During the Render tree generation, the browser starts to invoke GPU rendering, compose layers, and display the content on the screen.
- Why is it more efficient to use multiple domain names to store website resources?
Answer: Make sure that users can access the site as quickly as possible in different regions, that users can access the site from other domains when one domain crashes, and that different resources are placed on different servers to reduce the stress on a single server. 12. The difference between threads and processes. Answer: a program must have at least one process and a process must have at least one thread. The scale of thread partition is smaller than that of process, which makes the concurrency of multithreaded program high. In addition, the process has an independent memory unit during execution, and multiple threads share the memory, thus greatly improving the efficiency of the program. Threads are different from processes in their execution. Each independent thread has an entry point for program execution, a sequential execution sequence, and an exit point for the program. However, threads cannot execute independently and must depend on the application, which provides multiple thread execution control. From a logical point of view, the meaning of multithreading is that multiple parts of an application can be executed simultaneously. However, the operating system does not treat multiple threads as multiple independent applications to achieve process scheduling and management and resource allocation. This is an important difference between a process and a thread. Tell me about strong caching and protocol caching. What are the features of HTTP/2.0? How does head compression work? 15. Does Nginx understand? What do you do with it? 16. Last-modified, if-modified-since why ETag, if-none-match? CDN supplier will optimize and adjust TCP and other protocols, so that the normal TCP three handshake is reduced to one, so as to reduce the link of information transmission between computers and computers and routes, so as to achieve the purpose of acceleration 18.
Xi. Safety related:
- SQL injection
What it is: An SQL command is passed to the server disguised as normal HTTP request parameters, and the server executes the SQL command to cause an attack on the database.
Principle: THE SQL statement forges the parameter, and then forms the destructive SQL statement after concatenating the parameter model, and finally causes the database to receive the attack. Defense: a. Escape parameters b. Passwords in the database are not stored in plain text. Passwords can be encrypted using MD5.Copy the code- CSRF attack cross-site request Forgery
What it is: An attacker steals your identity and sends malicious requests on your behalf;
Harm: send emails in your name, steal accounts, buy things, etc. Principle: first log in a website, and generate cookies locally; Then, without logging out, visit the offending site. Defense: You can consider both server and client. But it works well on the server side. A. Random cookie b. Add a verification code c. Different forms contain a different pseudo-random value Note: If a user opens two different forms on a site at the same time. CSRF safeguards should not affect his submission of any form.Copy the code- XSS attack cross-site scripting Attack
What it is: An attacker injects malicious JS code into a site with an XSS vulnerability, which is automatically executed when the site is viewed by its browser. (Theoretically, all the places where the input data is not processed, there will be XSS attacks);
Harm: steal users' cookies, destroy the page structure, redirect to other websites; Defense: Processing the information entered by the user. Only valid values are allowed.Copy the code- DDOS attack Distributed denial of service attack
What it is: Simply put, ifasong is overloaded with requests that crash the server.
Attack cause: The bandwidth of the server is insufficient to block the attack traffic. Defense: a. The most direct method is to increase bandwidth b. Use hardware firewall C. Optimize resource usage to increase web Server load capacityCopy the code- Server communication security attack and Defense a. HTTPS mechanism analysis b. HTTPS degrade attack
参 考 答 案 :
- Are you familiar with front-end development specifications?
2. Considering the overall performance of the Web front-end, what is your idea of optimization? Answer examples:
[See Yahoo optimization rules]
- Reduce HTTP requests (Sprite, proper caching, resource consolidation, compression) and lazy loading of images
- Bottom the external JS file
- Place CSS at the top of the page
- Avoid using Expressions in CSS
- Reduce the number and size of critical resources (webpack unpacking, lazy loading, etc.)
- Reduce the RTT [round-trip delay] time of key resources (Gzip compression, edge node CDN)
- JS code should not occupy the main thread for too long. Scripts that are irrelevant to the first screen will be given to the Web Worker with async/defer attributes.
- CSS uses pair selectors (bound to Class or Id if possible), otherwise iterated multiple times.
- How long is the mobile click event delayed? Why the delay?
Answer: There is a 300ms delay. In order to implement Safari’s double click event design, the browser needs to know if you are going to double click. 4. How do you manage your projects? How do you design large-scale concurrent architecture? Answer: The early team must identify global styles (global.css), coding patterns (UTF-8), etc., and writing habits must be consistent [identify team development code specification documents]. Write comments for each module responsible [module function, parameter description, writing time, writer]. Do a good job of sorting documents. 5. Talk about what you think could be done to make the project better. Answer: Consider the depth of the problem, in the development of the task is not only to complete, to think carefully to find the problem in time. Keep improving and be responsible for the code you write. 6. Difficulties encountered in the project and solutions. 7. Have you made any plan for reporting buried data? 8. Thinking about the front-end architecture, how do you consider the technology stack of the department? 9. Thinking about front-end reconstruction, how to weigh the weight of old projects between new business urgency and technical debt of reconstruction?
13, TS interview questions
- How can JS projects be upgraded to TS? What is the impact?
- What functions can TSLint configure? What is the impact on the development process?
- What are the basic types of TS? How do they differ from JS
- Why is TS popular? The relationship with the new ECMA specification?
- How to understand interfaces, generics?
- Type and interface in TS
Answer: The difference between type and interface in TS 7.
Xiv. Engineering related
- How do you understand and break down requirements prototypes
- Explain your understanding of functional requirements
- Explain your understanding of non-functional requirements
- What interactions and improvements do you suggest for the product
- How do you understand user pain points
- Tell me about a UML diagram you used in a project
- How do you think about componentization
- How do you think about servitization
- How do you model your domain
- How do you draw domain boundaries
- Tell me about domain modeling in your project
- Talk about schematic design
- Which design patterns have you used? Describe the scenarios and themselves
- Describe the use of design patterns in common open source frameworks
- Talk about your understanding of the design principles of 23 design patterns
- Similarities and differences between design patterns, such as policy patterns versus state patterns
- The combination of design patterns, such as the policy pattern + simple factory pattern practice
- Design patterns for performance, such as which singleton patterns perform better.
- How do you do front-end and back-end separation in your system
- Tell me about your development process
- How do you communicate with your team
- How do you conduct code reviews
- Tell me about your understanding of technology and business
- Tell me about the exceptions you often encounter in your project
- Tell me about the most difficult Bug you encountered in the project. How did you solve it
- Tell me what impressed you most and what was the most difficult part in the project. How did you solve it
- What do you think are the shortcomings of your project
- Have you ever encountered 100% CPU, how to check and solve
- Have you ever encountered OOM? How to check and solve it
- Tell me about your agile development practices
- Tell me about your practice in shipping maintenance
- Describe one of the most valuable projects in your job and your role in that process
15. Soft power
- Tell me your highlights
- What book have you been reading recently
- Tell me about the technical books that you found most interesting
- What do you do outside of work
- Say something about your personal development direction
- Tell me what skills you think a server/front-end developer should have
- Tell me what you think an architect is. What does an architect do
- Tell me what you understand as a technologist
Sixteen, the front three to five years of advanced questions:
See: The first three to five years of the interview questions to share (examples)
Continuously updated…