Advanced Front End -- Web Orientation Questions
Published: 2023-07-14 15:18:32

### Algorithm related
* This article does not involve algorithmic interviews. If there is a need, just go crazy on LeetCode;
* Friendly reminder: If you want to go to a company like Microsoft for an interview, please try to use an understanding way to brush up the algorithm questions. It is difficult to use only the back questions, because they have 4 or 5 rounds of interviews from written tests to remote collaborative codes. Exams and face-to-face communication are all about algorithms. Even if you pass the previous test by brushing the questions and memorizing the questions, the final round of face-to-face communication and inspection of the algorithm is likely to be cleared;

### Html related
* What is the role of meta tags? What are meta tags used for?
* Where should the script tag be placed in the html? Why?
* What is the box model?
* What is BFC? What are the characteristics of BFC? `-- Hint: BFC stands for Block Formatting Contexts (Block Formatting Context)`
* Principle of events in html? `-- Key points of the answer: explain the bubbling process and capture process of the event, and how to control only one of them.`
* Do you know anything about shadow dom? In what scenario would you use it? Let's illustrate with an example -- data: [shadow-root](https://juejin.cn/post/7034143443681181703)
* For example, what are the new additions to Html5?
* Do you understand **MutationObserver**? Explain
* How to implement resource preloading? (In some cases, we want some resources to be downloaded by the browser first, so that users can see them first)
* How to add watermark to a web page? `-- Key point of answer: First explain that there are two types of front-end implementation and back-end implementation. Let’s answer the front-end implementation specifically. The focus of front-end implementation is to hide the watermark element to avoid being removed, so the solution is to create a canvas through js to dynamically create a watermark and the canvas must be based on content If you want to remove the watermark, you can only delete the div, but the div contains content, and if you remove the div, the content will also be removed, which realizes the purpose of binding the content and the watermark`
* How to realize the screenshot function for the current page or the html of a specified area? `-- Key point of answer: through canvas, the canavs API has the function of converting html to pictures (html2canvas), but there are certain compatibility issues (especially ios browsers), if you want to be absolutely perfect, I am afraid you need to hand it over to the backend Realized, such as passing a piece of html content to the back-end python to process it into a picture`

### Css related
* Name several ways to achieve horizontal and vertical centering?
* Explain the adaptation scheme of the mobile terminal? `-- Key points of the answer: set \<meta\> in the header, rem unit (determined by the font-size of html) and vh, vw unit, @media screen, width and height setting of the pop-up window box (the width and height of the box should be Determined by its child elements, the adaptation effect is better)`
* For example, what are the new additions of Css3?
* Weight comparison of several ways of writing css? Why avoid styles? -- Key points of the answer: the difference between external links, inlines, and inlines. The inline style writing will block rendering, so it should not be too much

### Javascript basic related
* What is scope?
* What is variable hoisting?
* Briefly explain the understanding of closures?
* What are side effects? What are pure functions?
* Know about EventLoop? `-- Answer mentions: microtasks and macrotasks`
* Principle of Array.isArray (how to judge whether an object is an array)? -- Key points of answer: Principle of Object.prototype.toString.call() [>>>References<<<](https://juejin.cn/post/7110766254280933389)
* What are the new features of ES6 and above? -- [>>>New features of ES6<<<](http://wed.xjx100.cn/news/18684.html?action=onClick) ||--|| [>>>New features of ES7~ES12 Features<<<](https://blog.csdn.net/weixin_53791978/article/details/131443351) ||--|| [>>>11 new features in ES13<<<](https:// mp.weixin.qq.com/s?__biz=MzIxODQxMjc0MA==&mid=2247521904&idx=1&sn=388339f49e756c29fd76e7e9114c904a&chksm=97e835dba09fbccd92c820e1d0d4e39e1 e84d8247af64d790f58100f4115ce2aec8964d5f797&scene=27)
* What is the difference between set map weakset weakmap?
* Do you know the usefulness of viod 0? Why do we use viod 0 instead of undefined? `-- Key points of the answer: undefined can be declared, var undefined = 'xxx' will affect the keyword undefined in an internal scope, so using viod 0 can avoid this problem, because the result of void 0 is undefined`
* What is the ambiguity of the function? How to control that a function cannot be called by new? `-- Key point of answer: The ambiguity of a function means that a function can be called directly or be called by new as a constructor. This is a historical problem left over from js. ES6 class is used to solve this problem, but We can also use new.target to judge whether new is used to call the function, such as function getName() { if(new.target) { throw Error('can not invoke with new'); } }`
* How to initiate multiple asynchronous tasks at the same time? This question will also extend to how many concurrent ways does Promise have? `-- Key points of the answer: the respective functions of Promise.all Promise.allSettled Promise.any Promise.race`
* Do you know about Symbol, what are the characteristics of Symbol, have you used it in actual projects?
* What is the iterable protocol of js? `-- Key points of the answer: { [Symbol.iterator]: function { return iterator} }, as long as an object has [Symbol.iterator]: function {return iterator} here, it is an iterable object, which is Iterable Protocol`
* Why Array is iterable, but Object is not iterable? Can Object be made iterable? `-- Key points of the answer: combined with iterable protocol answer`
* How to make this piece of code "const [a,b] = {a:1, b:2, c:3}" (that is, make this piece of code not report an error) `-- Answer hint: Make Object an iterable Object, the iteration of the current object is implemented in the iterable function; that is, Object.prototype[Symbol.iterator]=function(){ Object.values(this)[Symbol.iterator](); }`
* How to upload large files? `-- Key points of the answer: The overall solution is to use the input tag to store the File object into FormData; the specific operation is to implement slice uploading of the Blob (File is a subclass of Blob), and divide it into multiple chunks through file.slice(). Store the chunk after splitting into the FormData object and transfer it to the backend`
* How to realize the burying point to collect the user's stay time on the page? `-- Key points of the answer: The visibilitychange event, the visibleStateState state value, and the pagehide event are used in combination. To ensure compatibility, you need to use document.addEventListener to register the listener. Record the timestamp when the tab is displayed, and record it when the tab is hidden. Timestamp, subtract the two to get the duration of this browsing page`
* Ever heard of zero-width characters? What does it do? [>>>Reference link<<<](https://juejin.cn/post/7103383705535643679)
* Speaking of understanding of Web Components? Have you used it in an actual project? Briefly explain
* How to implement lazy loading of resources?
* How to monitor the loading progress of all resources in the entire browser?

-------------------------------------------------- ---------------------------------------
### Design pattern related
* What are the seven principles of design patterns?
* What design patterns are used in actual projects? Give an example?
* Know about dependency injection? What is Dependency Injection? Is it useful in actual projects?
* What is the difference between "publish-subscribe mode" and "observer mode"? `-- Key point of answer: This design pattern is useful in the source code of vue, so while telling the difference, we must mention the knowledge points related to vue`
* Can the "publisher" and "subscriber" in the "publish-subscribe model" communicate directly? `-- Key point of answer: No. Mention the vue MVVM pattern`
* Can "observer" and "observed" communicate directly in "observer mode"? `-- Key point of answer: Yes. Describe the implementation of the observer pattern`
* What is the difference between "publisher" and "subscriber" in "publish-subscribe pattern"? Briefly explain `-- Key point of answer: mention the above two points [5] and [6]`

-------------------------------------------------- ---------------------------------------
### webpack related
* What is the difference between loader and plugin of webpack? How to implement a plugin, what is the core of the plugin? `-- Key point of answer: plugin is a compiler object (in this regard, it is best to write a plugin to experience it yourself)`
* Understanding of global functions, namespaces, IIFE, CommonJS, AMD to ES6 modularity? -- [>>>Recommended explanation video<<<](https://www.bilibili.com/video/BV17g4y1F7Xx/?spm_id_from=333.1007.top_right_bar_window_custom_collection.content.click&vd_source=70eab574cc508f954057839eef5f52b6)
* What is the principle of import in webpack?
* How does webpack implement dynamic import?
* What is the difference between require and import? How does the current import dynamically introduce components or files?
* When webpack requests a js file asynchronously, how does it get the js bundle?
* In what scenarios is the dynamic import of webpack generally used?

-------------------------------------------------- ---------------------------------------
### React related
* [>>>react 2023 interview questions reference link<<<](https://blog.csdn.net/beifeng11996/article/details/129253758)
* What is HOC?
* What is the difference between class components and function components?
* What are the advantages of hooks?
* What is the function of the key of the react component?
* What are the life cycles of class components and function components?
* Which react hooks do you know? And briefly explain their respective functions or applicable scenarios
* How to write css in react? How does react's css achieve component isolation to avoid global pollution (css modularization)? `--Key points of the answer: xxx.moudle.css realizes CSS modularization, and styled-components can also do it. Now the popular tailwind`
* How are React events different from normal HTML events?
* setState is synchronous asynchronous? Why? Implementation principle?
* Why does useState use an array instead of an object? (A question like a brain teaser, but I still have to record it for fear of not being able to respond) `--Answer hint: Array deconstruction can be named at will; object deconstruction must follow the property name, if such useState will have this effect{ state:UserName, setState:setUserName}=useState() Why bother, so useState returns an array, which is convenient for naming as needed during deconstruction`
* What method is often used in react for state management? Or how to share data across components? `--Key points of the answer: Redux Toolkit (redux redux-thunk)`
* What is the creation and use of redux, and what is redux-thunk used for?

-------------------------------------------------- ---------------------------------------
### Vue related
*** (now vue2 has stopped maintenance, and the focus is on vue3, but some of the principles are still related to vue2, so the sorted questions also mentioned vue2)***
* Vue's two-way binding principle (is there any difference between vue2/3's two-way binding)`--Answer focus: hijacking and publish-subscribe`
* What is the process of computing from departure to response to view? The difference between computed and watch (and the difference between vue3 watchEffect, what aspect of vue3's computed watch has been upgraded and optimized)`--Answer focus: analyze and explain from the perspective of source code`
* Why is the data attribute in vue's component object a function instead of an object? `-- Key points of the answer: The data of vue2 focuses on the knowledge points about passing by reference`
* Common communication methods between vue2/3 parent-child components (brother components)? (Including some tool libraries that are commonly used to simplify communication between grandfathers and children or even across components can also be mentioned, such as vuex, pinia, mitt.js)
* Responsive principle of vue2/3`-- The answer mentioned: vue3 upgrades the Object.defineProperty used in vue2 to Proxy, which can realize the monitoring of array changes`
* Vue2/3's diff algorithm (upgrade and optimization of vue3's diff algorithm), and what is the difference with react's diff algorithm?
* Setting css attributes to tags will trigger redrawing or rearrangement (understand the difference between "redraw" and "reflow")? For example, which css attributes will trigger redrawing and rearrangement, and which attributes will trigger redrawing and rearrangement at the same time
* Which readings in the document will also trigger redrawing or rearrangement? For example
* What is the underlying principle of v-if and v-show? Is there any other way to hide elements besides this way? What is the difference between opacity:0 and visibility:hidden and display:none?
* What are the application scenarios for the key life cycle of vue? `-- Probably answer: beforeCreate, beforeMount initialize unrelated UI data, created, onMounted initialize responsive related data, onBeforeDestroy, onDestroy clean up data or remove events, etc`
* What are the common component s attributes of vue2/3? `-- Answer mentioned: data, methods, computed, watch, setup(vue3)`
* In which scenarios is the name attribute of vue2/3 components mandatory? `-- Key point of answer: When creating a component through Vue.component in vue, the name must be passed as the first parameter`
* How is the v-model two-way binding of vue2/3 implemented at the bottom? `-- Key point of answer: analyze and explain from the perspective of source code`
* How does vue2 allow a property to support the .sync modifier on the component, and how to make .sync update synchronously?
* How does vue3's custom component implement two-way binding (how to customize the property of a v-model function)
* The function of nextTick, what is the underlying implementation? `-- Analyze and explain from the perspective of source code`
* How to implement a nextTick easily?
* For the understanding of vue3's Composable (combined API), what are the advantages of using this method?
* What does the key attribute do when the list is rendered? (What is the difference between vue and react in their key functions)
* How is the vue function component defined? What is the difference between a function component and a normal component?
* Have you ever used jsx to develop vue, why did you choose to use jsx to develop (what scenario is it suitable for?)
* What is the jsx implementation principle of vue2/3 (how does vue implement jsx support)?
* What are the parameters of createElement in vue's render?
* When encapsulating third-party components for others to use, how to transparently transmit attributes and methods?
* Do you know the bottom layer of vue3 setup? Analyze and explain the implementation principle of setup from the perspective of source code

-------------------------------------------------- ---------------------------------------
### Browser related
* Chrome has updated a new attribute samesite Do you understand? How does this affect our development? (This question requires us to pay more attention to the relevant attributes of Chrome, especially those key attributes related to actual development) `-- Key points of answer: tell the specific impact of samesite on iframe, and require sufficient iframe understand`
* Why limit the number of static resources on the first screen? `-- Key points of answer: It may be relevant knowledge points about http 1.0 and 2.0`
* What mode does http 2.0 use to solve the problem of "limiting the number of static resources on the first screen"? `-- Key point of answer: It may be related knowledge points of http2 long connection`
* How many storage methods does the browser have? `-- Answer key points: the respective characteristics of sessionStorage, localStorage, cookie, IndexedDB storage methods, such as validity period, maximum storage capacity, etc.`
* What is the difference or relationship between session, cookie, and sessionStorage?
* What is the difference or relationship between the state storage of vuex, redux, pinia and the storage method of the browser?
* Explain the rendering process of the browser?
* What is the difference between fetch and ajax, axios, request? `- Key point of answer: XmlHttpRequest is a common object provided by the browser to interact with the backend. Ajax is implemented based on the XmlHttpRequest package. Fetch is also provided by the browser, but fetch returns a Promise object, and the fetch request corresponds to In contrast, it is simpler and has a relatively single function. The fetch request cannot be interrupted and can only be ignored by the front end (that is, once the fetch request is initiated, the back end will inevitably receive it, and the front end can only ignore the feedback given by the back end through AbortController); and Axios is also a secondary encapsulation based on XmlHttpRequest. It just combines ES6 Promise to make the code more usable. The request is nodejs, which belongs to the backend and is encapsulated based on http requests`
* What is the browser's maximum number of concurrent requests? How to optimize too many concurrent requests? `--Answer hints: When using the http1 protocol, the chrome browser can request up to 6 resources for the same domain name. When using http2.0, unlimited requests can be sent on the same TCP connection. It has nothing to do with this limitation of the browser`
* How to monitor the browser's page close event? How to listen to the browser close event in the Safari browser?

### Browser performance optimization related
* What are the key parameters in the chrome performance test?
* What are the common problems that a website freezes when opening the page? Give a few examples and explain common solutions
* Have you ever encountered a situation where the screen freezes when scrolling down on an official website? What kind of problem may generally cause this kind of stuck situation? How to optimize it?

-------------------------------------------------- ---------------------------------------
### Front-end architecture related
* Has the front-end unit test been written? What unit test frameworks are there (vue2/3, react related unit test framework)
* What are the front-end security issues?
* Do you know about the first screen SSR?
* What is the difference between SSR and SSG?
* Have you used those SSR frameworks? (Nuxt3 for vue3, NextJs for react)
* What is the difference between Nuxt3 and NextJs in the SSR implementation architecture? Give a brief example
* How to test the default duration of the rendering UI of react and vue3? If the same component we wrote renders slower than vue3 in react, how to troubleshoot and optimize it?
* What is a Restful API, and what request types does it specify?
* Have you ever done a burying point? Which buried point frameworks do you know or have used? If you have practical experience, give an example to illustrate a buried point plan

### Nuxt3 -- (optional)
* Nuxt3's SSR implementation principle
* How to render asynchronous data on the server side in Nuxt3?
* useRequestHeaders cannot be used on the client side, so how can we use it to implement ssr to obtain headers information? `-- const {data} = useAsyncData(()=>Promise(useRequestHeaders())) In this way, wrapping it with useAsyncData can ensure that the headers information can be obtained from the server to the client`

### NextJs -- (optional)
* SSR implementation principle of Next.js
* How to render asynchronous data on the server side in Next.js?

-------------------------------------------------- ---------------------------------------
### Business related
* What happens after user login credentials fail? `-- Key point of answer: Prompt to the user the reason for the failure, and redirect to the login page (here different login schemes have different processing methods, single sign-on, non-sensing login, OAuth2.0 need to understand)`
* Do you know about single sign-on, senseless login, OAuth2.0? briefly explain
* How does the front end get the user's openId, explain the understanding of the OAuth protocol

-------------------------------------------------- ---------------------------------------
### Actual project related
* Have you encountered any difficulties in the projects you have experienced recently? How did you solve it? For example
* Have you ever led a team development independently? How does an actual project land? Briefly explain
* What norms do we need to set during the team development process to ensure collaborative development? `-- The answer mentions these: submission specification (git flow), branch strategy, review, CICD code quality inspection, privacy security scanning, etc.`
* How to coordinate the development of the front and back ends to improve the success rate of joint debugging? `-- The answer mentioned these: determine the scheme and design documents, and focus on the key interface data entities of the front and back ends, try to ensure that there are few changes in the actual development process, so that the front and back ends can be developed for the interface documents, and try to avoid the back-end Interface changes lead to the problem that the front-end needs to be changed repeatedly; for example, Apifox can be used to provide mock interface instances and their descriptions first, so that the front-end and back-end can be developed collaboratively according to interface requirements, and avoid the front-end’s strong dependence on the back-end interface; agile development mode is also required , collect the development situation in time during the development process, and hold regular morning meetings so that if any problems are exposed as soon as possible, they can be resolved as soon as possible`
* Understanding of agile development model (Scrum)? Sprint > Story > ticket(task)
* How to learn the front end? How do you overcome new technologies or difficulties encountered in actual projects? `-- Communicate and learn with colleagues, watch related source codes, documents, videos, and Google search, etc. Of course, the key to the difficult functions of many new technologies is to find solutions from the source code; And start to realize it. If you are interested in new frameworks and new technologies, you will focus on exploring new technologies to develop a simple project to learn;