Javascript 全局作用域

作用域

Javascript 作用域为嵌套结构。
最外层作用域为全局

全局变量种类

全局声明变量（普通变量）	const、let、class	❌ 不可以 (undefined)
全局对象变量	var、function	✅ 可以访问

1 2	const a = 1; // 全局声明变量 (window.a 为 undefined) var b = 2; // 全局对象变量 (window.b 为 2)

全局对象

浏览器环境下，全局对象为 window
Node.js 环境下，全局对象为 global
所有环境下，全局对象为 globalThis

1
2
3

var x = 10;
console.log(window.x); // 10
console.log(globalThis.x); // 10

最佳实践

不推荐使用 var 声明全局变量。
荐使用 const 和 let 减少全局污染。

show all >>

1. Classification of important knowledge points and key points list

It is recommended to organize the knowledge into the following modules, and each module lists common “eight-part essay” test points for quick review:

1. HTML and CSS Basics

CSS box model: Understand the composition of the box (content, padding, border, margin) and its impact on element size.
CSS selector priority: Master the priority calculation rules when styles conflict (inheritance < element inline style < !important, etc.).
Element horizontal and vertical centering: Familiar with a variety of centering layout methods, such as using positioning + margin, positioning + transform, or using Flexbox to achieve centering.
Rearrangement and redrawing: Understand the difference and triggering conditions between rearrangement (reflow) and redrawing. Rearrangement is caused by layout changes (such as size and position changes), and the layout needs to be recalculated; redrawing is when the appearance style changes but the layout remains unchanged, and only the pixels are redrawn.

2. JavaScript and ES6

Prototype and prototype chain: Understand the mechanism of JavaScript prototype chain to implement inheritance. The prototype is essentially an object used to share properties and methods; the instance is linked to the constructor’s prototype through __proto__ to implement property lookup.
Closure: Master the concept and function of closure. A closure is a function that can access variables in the scope of another function, often created by creating another function inside a function. Closures can be used to encapsulate private variables and avoid global variable pollution.
this binding: Understand the pointing rules of this in different scenarios (functions point to the global object when called directly; method calls point to the object that calls it; constructor calls point to new instances; call/apply can explicitly change this). Note that arrow functions do not have their own this and will capture the outer this.
Event loop and asynchrony: Understand the browser’s JavaScript Event Loop (Event Loop) mechanism and distinguish between macrotasks and microtasks. JavaScript uses a single thread to run, and through the event loop, it continuously checks and executes tasks in the task queue. Master the execution order of asynchronous mechanisms such as setTimeout, Promise, and async/await.
ES6+ New Features: Familiar with common ES6/ES7 features and usage, such as the scope difference between let/const, arrow function binding lexical this, Set/Map container types, Promise and async/await to achieve asynchrony, class (Class) syntax sugar and inheritance, etc. These features are often high-frequency topics in interviews, and their uses and advantages and disadvantages should be explained.

3. Browser Principles

Browser Rendering Process: Understand the basic process from input HTML to page rendering: build DOM tree -> build CSSOM tree -> merge to generate rendering tree -> layout (Reflow) -> drawing (Paint). Know how CSS affects rendering (such as external CSS loading will block rendering tree construction), etc.
Browser multi-process architecture: Understand the process division of modern browsers (such as browser main process, rendering process, network process, etc.) and the difference between process and thread. Processes have independent memory space and crashes do not affect each other; threads are execution units within processes and share memory. Understand that the rendering process in Chrome browser is multi-threaded (including GUI rendering thread, JS engine thread, etc.).
DOM event mechanism: Master the three stages of browser event flow: capture → target → bubbling. Event capture propagates downward from ancestor nodes, while event bubbling propagates upward from targets. Understand how to use the third parameter of addEventListener to control the binding phase, and use stopPropagation() to stop bubbling.
Script loading strategy: Understand the difference between the async and defer attributes in the <script> tag: when there is no attribute, the browser parses and executes the script synchronously; async means that the script is downloaded asynchronously and executed immediately after downloading (not guaranteed in order); defer means that the script is downloaded asynchronously but delayed until HTML parsing is completed and then executed in order.
Browser storage: Understand the differences between several front-end storage methods: Cookies, localStorage, sessionStorage, IndexedDB, etc. For example, Cookies will be automatically attached to the request, with a small capacity and mostly used to save session identifiers, localStorage has a large capacity and persists, and sessionStorage is cleared after the session ends.
Browser cache mechanism: Master HTTP cache strategies, such as the principles of strong cache (Expires/Cache-Control) and negotiated cache (Last-Modified/Etag). Be able to explain how the browser determines that the cache is valid and returns 304.

4. Network and protocol

Differences between GET and POST: Clarify the differences in semantics and implementation between HTTP GET and POST. For example: GET is generally used to obtain resources, and the parameters are attached to the URL and have a length limit; POST is used to submit data, placed in the request body, and has no length limit; GET requests can be cached by the browser while POST will not be automatically cached; POST is relatively safer in terms of security, etc.
HTTP1.1 and HTTP2: Understand the main improvements of HTTP/1.1 over HTTP/2. For example, HTTP/2 uses binary framing transmission, supports multiplexing (one connection with multiple requests concurrently, no head-of-line blocking of the HTTP layer, but the head-of-line blocking of the TCP layer still exists), header compression, etc. Know the further optimization of HTTP/3 based on QUIC (can be briefly mentioned).
Network Communication Basics: Master the basic process of TCP three-way handshake and four-way handshake, and understand the role of TLS/SSL handshake in HTTPS. Although it is not a pure front-end scope, the interview may involve simple questions and answers.
Other protocols/mechanisms: Understand the difference between WebSocket and HTTP (full-duplex communication, handshake upgrade protocol, etc.) and common application scenarios. Familiar with the meaning of HTTP status codes (especially 2xx, 3xx redirection, 4xx client errors such as 401/403/404, 5xx server errors). These are prepared and can be mentioned when answering HTTP-related questions.
Request process and optimization: Be familiar with the whole process from entering the URL in the browser address bar to loading the page, including DNS resolution, TCP connection, sending requests, receiving responses, and browser rendering. Be able to explain methods to improve network loading performance in combination with cache, CDN, etc. (such as enabling CDN nearby access, reducing request size, etc.).

5. Security

XSS Cross-site Scripting Attack: Understand the principle of XSS - attackers inject malicious script code into the target website and execute it on other users’ browsers to steal user data (such as cookies), etc. Master common preventive measures: Input filtering and escaping (HTML escape filtering of special characters for user input), Content Security Policy (CSP), sensitive cookie settings HttpOnly to prevent script reading, etc.
CSRF Cross-site Request Forgery: Understand the attack mechanism of CSRF - using the user’s logged-in status to send malicious requests in the user’s name without the user’s knowledge. Defense methods include: requesting to attach an anti-counterfeiting random token and verifying it, using SameSite strict cookies, adding verification code confirmation to key operations, etc.
Same-origin policy and cross-domain: Understand the browser Same-Origin Policy restrictions on JavaScript, and know that the same origin means the same protocol, domain name, and port. Master several cross-domain solutions: such as setting CORS response headers on the server to allow cross-domain resource sharing, JSONP using <script> without same-origin restrictions (only supports GET), and reverse proxy forwarding mechanisms.
Other security: Understand ClickJacking protection (disabling iframe nesting through X-Frame-Options), and how the front end can prevent crashes caused by malicious input (such as regular denial of service ReDoS), etc. When answering security questions, you can combine the security reinforcement measures encountered in actual projects to reflect your experience.

6. Front-end framework principles (mainly React)

Virtual DOM and Diff: Understand the role of virtual DOM: add an abstract DOM tree cache between JS and real DOM, compare the new and old virtual DOMs through the Diff algorithm to efficiently update the real DOM, and avoid unnecessary DOM operations. Know React’s Diff strategy (same-layer comparison, list nodes require unique key, etc.) and the performance improvement it brings.
React Fiber Architecture: Understand the reasons and principles for the introduction of Fiber in React16. React15’s coordinator uses recursive processing of component trees, and updates cannot be interrupted. Long-term updates will block the UI. Fiber splits update tasks into small, interruptible units (linked list form), uses browser idle time to execute, avoids long tasks blocking rendering, and realizes interruptible scheduling and rendering.
React Lifecycle: Familiar with each stage of the React component lifecycle (Mounting -> Updating -> Unmounting) and the main lifecycle methods. For example, componentDidMount/Update/WillUnmount, etc., understand their calling order and typical uses. At the same time, understand the equivalent writing of Hooks for function components (such as the corresponding part of the life cycle of useEffect).
Synthetic event mechanism: Understand how the React synthetic event model works. React does not bind event handlers directly to DOM nodes, but uses an event delegation mechanism to bind them uniformly to the root node (document), which can improve performance and achieve consistent event behavior across browsers. Clarify the difference between this mechanism and native DOM events, such as event pools, syntheticEvent objects, etc.
Error Boundary: Know how to capture errors in React, such as using componentDidCatch or getDerivedStateFromError to define an Error Boundary component to uniformly handle runtime errors of subcomponents to prevent errors from causing the entire application to crash (this can be mentioned briefly).
Basic understanding of Vue: Although Vue is not actually used, you should have a rough understanding of the core principles of Vue to deal with comparison problems. For example: Vue achieves responsiveness through data hijacking (Vue2 uses Object.defineProperty, Vue3 uses Proxy); Vue templates will parse instructions and interpolation during the compilation phase, generate virtual DOM and update; the difference between Vue’s two-way data binding (v-model) and React’s one-way data flow, etc.
React vs Vue: can compare the similarities and differences of the two frameworks. Similarities: Both use componentization and data-driven views, both use virtual DOM+Diff algorithm to optimize updates, and both have supporting routing and state management solutions. Differences:
Core concept: Vue is a progressive framework, the core is responsive MVVM data binding; React is a library for building UI, emphasizing one-way data flow and functional UI.
Syntax style: Vue recommends SFC single-file components (template+script+style, intuitive and easy to use), and also supports directive syntax and JSX; React forces the use of JSX, writing HTML and CSS in JavaScript with JSX/Inline Style (“All in JS”).
Data update mechanism: Vue automatically tracks dependencies and efficiently updates DOM when data changes (a lot of built-in optimizations and syntax sugar), and developers do not need to handle it manually; React needs to trigger updates through setState, and may need to deal with performance issues (such as manually using shouldComponentUpdate or Memo to optimize), and many functions (such as global state management) rely on community libraries.
Others: Vue2 is more declarative programming, and Vue3 begins to introduce a combination API close to React’s Hooks idea; Vue has built-in two-way binding to facilitate form processing, while React defaults to one-way data flow, and needs to write event processing to update the state. In general, both have their own advantages and disadvantages, and need to be selected according to the scenario. If you talk about it in the interview, you can first point out their common ideas and then explain the above differences.

7. Performance optimization

Web page performance indicators: Understand the concepts of common page performance indicators such as first screen rendering time, white screen time, TTFB, FPS, etc., so as to facilitate discussion of performance experience with the interviewer. But more importantly, master the optimization methods.
Resource loading optimization: Master the image lazy loading principle (delayed loading of off-screen images, users scroll to the visible area and then set the real src to trigger loading) and implementation methods (such as `<i- Others: Vue2 is more declarative programming, while Vue3 begins to introduce a combinational API close to React’s Hooks idea; Vue has built-in two-way binding to facilitate form processing, while React defaults to a one-way data flow, and you need to write your own event processing to update the state. In general, both have their advantages and disadvantages, and you need to choose according to the scenario. When talking about it during the interview, you can first point out their common ideas, and then use the above differences to explain.

7. Performance optimization

Web page performance indicators: Understand the concepts of common page performance indicators such as first screen rendering time, white screen time, TTFB, FPS, etc., so that you can discuss performance experience with the interviewer. But more importantly, master the optimization method.
Resource loading optimization: Master the image lazy loading principle (delayed loading of off-screen images, users scroll to the visible area and then set the real src to trigger loading) and implementation methods (such as <img> using data-src + listening to scroll events or IntersectionObserver). Understand code splitting and on-demand loading, and use Webpack and other methods to split bundles by route or component to reduce the size of first-screen resources.
Function throttling and debounce: Understand the application of throttling and debounce technologies in the optimization of high-frequency events such as scrolling and input. Throttling allows a function to execute at a fixed frequency under continuous triggering (at most once in n seconds); debounce combines multiple triggers into the last execution (wait for n seconds after the trigger is completed). Be able to give examples of usage scenarios, such as throttling for scrolling event processing, debounce for input box search to prevent continuous requests, etc.
Reduce reflow and redrawing: Optimize DOM operations to minimize the number and scope of Layout/Reflow. Specific measures include: avoid frequent direct style changes, prioritize batch changes or use class switching; avoid frequent insertion and deletion of nodes in the DOM tree. If necessary, you can first display:none the element (trigger a reflow first), and then display it after the operation is completed; use transform or opacity to trigger the synthesis layer for large animations to avoid repeated reflow; avoid using table layout, etc.
Cache and resource optimization: use browser cache (strong cache/negotiation cache) to reduce requests; enable Gzip/Brotli compression to transmit resources; place commonly used static resources on CDN to increase access speed; use browser offline storage (such as Service Worker cache) to improve revisit performance, etc.
Build package optimization: optimize front-end code performance through build tools. Typical methods include: Code compression obfuscation (reduce file size), Tree-Shaking (tree-shaking optimization deletes unreferenced code), SplitChunks split code, lazy loading by route, extracting public libraries, enabling package cache, etc. In addition, using production mode to build and remove development and debugging code, and properly configuring the optimization option of webpack are also common interview points.
Performance monitoring: Familiar with basic performance monitoring methods, such as using Chrome DevTools Performance to record and analyze frame rate and call stack, and using Lighthouse for performance scoring. Although the interview may not ask about the use of tools in detail, it will be a plus if you can show your ability to monitor and locate performance problems.

8. Front-end engineering and modularization

Version control (Git): Understand common Git commands (such as clone, branch, add, commit, push, etc.) and team collaboration processes. In particular, you need to master the difference between merge and rebase in the branch merge strategy: merge will generate a new merge commit and retain the historical fork of the branch; rebase will replay the branch commits sequentially at the top of the target branch without generating additional fork points. Large companies may pay attention to your understanding of team collaboration and code management.
Building tools (Webpack): Frequently tested Webpack principles and configurations. Need to know the difference between Loader and Plugin: Loader is essentially a file converter, used to process non-JS resources and convert them into modular JS; Plugin is hooked into the Webpack life cycle to extend Webpack functions, such as packaging optimization. Be familiar with several typical Loaders/Plugins (such as babel-loader converting ES6 to ES5, file-loader processing images, HtmlWebpackPlugin automatically generating HTML, etc.).
Webpack hot update HMR: Understand the principle of Webpack hot module replacement (Hot Module Replacement). That is, in development mode, Webpack-dev-server establishes a WebSocket connection, and when it detects changes in the source code, it pushes the new module code to the browser through WebSocket and replaces the old module without refreshing the entire page. Can briefly describe the process and benefits of HMR (preserving application status and improving development efficiency).
Babel Transpilation: Master the process of Babel converting ES6+ code to backward compatible JS. Including: Parsing – Parsing the source code into an abstract syntax tree (AST); Transforming – Transforming AST nodes according to the configured plugin presets (such as arrow functions to ordinary functions, etc.); Generating – Regenerate JS code based on the converted AST. This process reflects the compilation mechanism of front-end engineering, and senior interviews may ask in depth.
Lint and Unit Testing: Understand code quality tools such as ESLint rule customization, and understand how to encapsulate custom ESLint plug-ins (know its basic mechanism of traversing AST, which can be briefly mentioned). Familiar with the meaning of front-end unit testing and common frameworks (Jest, etc.). Although it is not necessary to ask about the implementation in detail, it is beneficial to demonstrate engineering literacy.
Modular Specification: Master the differences between mainstream JS modular solutions. CommonJS module is used in Node.js, and uses synchronous require() to load the module, which loads the module’s output object (value copy); ES6 Module standard determines module dependencies and output interfaces at compile time, supports import/export, is static analysis loading, and exports read-only references. Therefore, ES6 modules can perform Tree-shaking optimization of unused code. You can also learn about historical solutions such as AMD and CMD and why they are gradually replaced by ES6 modules (AMD asynchronous loading is suitable for browsers but the syntax is not intuitive, and the ES6 module syntax is more concise and unified).

The above classification almost covers the high-frequency knowledge points of front-end interviews. It is recommended to go through the list one by one during the review, and check the unfamiliar concepts in time to deepen your understanding.

2. Key content that needs to be mastered in depth (combined with preferences and background)

Interview preparation time is limited, so you should focus on it. According to Kuaishou interview preferences and candidates’ own background, the following modules and knowledge are worth investing more effort in in-depth mastery:

React principles and framework comparison: As a candidate’s strength, React-related principles need to be mastered in depth so that you can show a deeper understanding than ordinary candidates in the interview. Kuaishou and other large companies often ask in-depth questions about framework implementation, such as virtual DOM, Diff algorithm, or ask you to compare the differences between React and Vue. Make full use of your practical experience with React and study its underlying mechanisms (such as Fiber architecture, synthetic events, etc.) in depth to make your answer more brilliant. Since you have not used Vue, you should also understand the basic concepts of Vue in advance to prevent comparison questions - the depth does not need to be too great, but you need to ensure that you do not leave a blank when answering.
Performance optimization (especially the first screen and interactive performance): This is an area where you have practical experience, and it is also an aspect that platforms with a huge number of users like Kuaishou attach great importance to. In the interview, you may be asked how to optimize a performance bottleneck scenario, such as how to improve the slow loading of the first screen or make a product smoother in a weak network environment. You should have a deep understanding of performance optimization techniques at all levels (loading, rendering, encoding, etc.) and be prepared to combine case studies with your own projects. Kuaishou directly asked candidates what performance optimizations they made in their mini-programs during the interview, which shows how much they value this. Make full use of your practice in performance tuning, sort out a set of systematic optimization ideas, and talk about it in the interview will be a big plus.
Browser principles and JS basics: These are the foundation of front-end interviews, and often determine the interviewer’s evaluation of your depth and breadth. Interviews at large companies like to extend the basic concepts to ask tricky questions (for example, using examples to examine the event loop instead of asking about the concept directly). In view of this, you need to be familiar with the basics (event loop, scope closure, prototype chain, DOM/CSS mechanism, etc.) and understand them thoroughly. Combined with your full-stack background, you can have a deeper understanding of some browser mechanisms (such as the relationship between the rendering thread and the JS thread), which will make your answers more convincing. When reviewing, focus on understanding the principles instead of memorizing the conclusions, so that no matter how the interview changes, you can cope with it with ease.
Security knowledge: You have practical development experience in security, which is your advantage. Front-end interviews at large companies often ask security questions such as XSS/CSRF prevention measures, and many fresh graduates are weak in this area. If you can give a rich and detailed answer (such as explaining output encoding, various means of defending CSRF and combining back-end verification mechanisms, etc.), it will surely impress the interviewer. Since you have a back-end development background, you can explain the security solution from a full-stack perspective (such as how the server cooperates with protection), reflecting a comprehensive security awareness. It is recommended to focus on memorizing the causes and defense strategies of common Web vulnerabilities, and appropriately demonstrate your security sensitivity in the interview.
Engineering and project practice: Considering that your background involves back-end and deployment technologies such as Go and Docker, Kuaishou interviewers may be interested in your engineering thinking and full-stack capabilities. Although campus recruitment front-end positions do not necessarily test back-end knowledge in depth, front-end engineering is a common test point. You should have a deep understanding of the principles of the build tool chain (Webpack, Babel, etc.) to deal with difficult questions. For example, Kuaishou has interviewed questions about Babel transcoding process, custom ESLint plug-ins and other engineering-oriented questions. You can use your own learning and project experience to give in-depth answers to these questions. At the same time, you can prepare some insights on topics such as how to use Docker to deploy front-end applications and front-end and back-end collaboration optimization, and show your maturity in engineering during the free question session or resume discussion.

Focusing on the above points will maximize your advantages. In these two days, spend more time digging into the details of the above content and organizing the output framework. At the same time, you don’t need to make special preparations for algorithms and handwritten code questions (the requirements of the questions have been clearly stated that they will not be tested), and focus your energy on the knowledge section. For Vue framework details, you can just try them briefly and have a good idea of them: after all, it is difficult to master Vue from scratch in two days. It is better to use the time to strengthen React and common principles, and be prepared to show your willingness to quickly learn new frameworks.

3. Review order and time arrangement (two-day plan)

Overall idea: First consolidate the foundation and then sprint to the key points, and allocate time reasonably to ensure breadth coverage while highlighting the depth of key points. In the only two days, divide each day into several time periods and review different modules alternately to maintain efficiency. The specific arrangement is as follows:

Day 1 Morning: Basic consolidation (HTML/CSS & JavaScript)
Use the clearest time in the morning of the first day to quickly review the basic knowledge of the front-end. First spend about 2 hours to sort out the HTML/CSS basics: review the box model, layout techniques, common style problems, etc. (You can quickly browse the relevant questions and answers by browsing the summary of front-end interview questions). Then spend about 2 hours to strengthen the JavaScript core: focus on high-frequency test points such as scope, closure, prototype chain, this, event loop, etc., and combine code snippets to deepen understanding. If you encounter vague concepts, check the MDN documents or notes in time to clarify the principles. This basic module review is not only a preparation for individual test points, but also a prerequisite for subsequent understanding of advanced topics (such as framework principles).

Day 1 Afternoon: Framework Principles (React as the main, Vue as a side)
In the afternoon, when you are energetic, focus on React working principles. Spend about 1 hour to sort out knowledge points such as React life cycle, state update mechanism, synthetic event model, etc. It is recommended to summarize while drawing a structure diagram (such as the React Fiber architecture diagram). Next, focus on Virtual DOM & Diff algorithm for about 1 hour: you can find information to read the outline of React Diff principle and practice the virtual DOM diff process on paper. Then spend about 0.5~1 hour to understand Vue core principles: focus on clarifying the implementation of responsive data binding and virtual DOM in Vue, and take a look at the name of Vue life cycle in case you are asked. Finally, leave about 0.5 hours Compare React and Vue: summarize a list of differences between the two (you can directly compare the similarities/differences sorted out before) so that the interview answers are organized. After completing this afternoon review, you will be confident in answering framework questions.

Day 1 Evening: Network and Security
At night, attention is slightly reduced, suitable for reading and memory review. First, spend about 1 hour browsing Computer Network Related knowledge: Focus on the key points of HTTP protocol (methods, status codes, caching mechanisms, HTTP2 features, etc.), and you can use notes or question banks to quickly test yourself in the form of QA. Some places that need to be remembered (such as the meaning of HTTP status codes) can be consolidated by quickly reciting + memorizing the key points. Next, spend about 1 hour to concentrate on studying Web Security Module: It is recommended to read the typical cases and protection solutions blogs of XSS and CSRF to deepen your impression, and then close the materials and try to repeat the complete attack process and defense measures by yourself. If you have extra time, you can also learn about common- Others: Vue2 is more declarative programming, while Vue3 begins to introduce a combinational API close to React’s Hooks idea; Vue has built-in two-way binding to facilitate form processing, while React defaults to a one-way data flow, and you need to write your own event processing to update the state. In general, both have their advantages and disadvantages, and you need to choose according to the scenario. When talking about it during the interview, you can first point out their common ideas, and then use the above differences to explain.

7. Performance optimization

Web page performance indicators: Understand the concepts of common page performance indicators such as first screen rendering time, white screen time, TTFB, FPS, etc., so that you can discuss performance experience with the interviewer. But more importantly, master the optimization method.
Resource loading optimization: Master the image lazy loading principle (delayed loading of off-screen images, users scroll to the visible area and then set the real src to trigger loading) and implementation methods (such as <img> using data-src + listening to scroll events or IntersectionObserver). Understand code splitting and on-demand loading, and use Webpack and other methods to split bundles by route or component to reduce the size of first-screen resources.
Function throttling and debounce: Understand the application of throttling and debounce technologies in the optimization of high-frequency events such as scrolling and input. Throttling allows a function to execute at a fixed frequency under continuous triggering (at most once in n seconds); debounce combines multiple triggers into the last execution (wait for n seconds after the trigger is completed). Be able to give examples of usage scenarios, such as throttling for scrolling event processing, debounce for input box search to prevent continuous requests, etc.
Reduce reflow and redrawing: Optimize DOM operations to minimize the number and scope of Layout/Reflow. Specific measures include: avoid frequent direct style changes, prioritize batch changes or use class switching; avoid frequent insertion and deletion of nodes in the DOM tree. If necessary, you can first display:none the element (trigger a reflow first), and then display it after the operation is completed; use transform or opacity to trigger the synthesis layer for large animations to avoid repeated reflow; avoid using table layout, etc.
Cache and resource optimization: use browser cache (strong cache/negotiation cache) to reduce requests; enable Gzip/Brotli compression to transmit resources; place commonly used static resources on CDN to increase access speed; use browser offline storage (such as Service Worker cache) to improve revisit performance, etc.
Build package optimization: optimize front-end code performance through build tools. Typical methods include: Code compression obfuscation (reduce file size), Tree-Shaking (tree-shaking optimization deletes unreferenced code), SplitChunks split code, lazy loading by route, extracting public libraries, enabling package cache, etc. In addition, using production mode to build and remove development and debugging code, and properly configuring the optimization option of webpack are also common interview points.
Performance monitoring: Familiar with basic performance monitoring methods, such as using Chrome DevTools Performance to record and analyze frame rate and call stack, and using Lighthouse for performance scoring. Although the interview may not ask about the use of tools in detail, it will be a plus if you can show your ability to monitor and locate performance problems.

8. Front-end engineering and modularization

Version control (Git): Understand common Git commands (such as clone, branch, add, commit, push, etc.) and team collaboration processes. In particular, you need to master the difference between merge and rebase in the branch merge strategy: merge will generate a new merge commit and retain the historical fork of the branch; rebase will replay the branch commits sequentially at the top of the target branch without generating additional fork points. Large companies may pay attention to your understanding of team collaboration and code management.
Building tools (Webpack): Frequently tested Webpack principles and configurations. Need to know the difference between Loader and Plugin: Loader is essentially a file converter, used to process non-JS resources and convert them into modular JS; Plugin is hooked into the Webpack life cycle to extend Webpack functions, such as packaging optimization. Be familiar with several typical Loaders/Plugins (such as babel-loader converting ES6 to ES5, file-loader processing images, HtmlWebpackPlugin automatically generating HTML, etc.).
Webpack hot update HMR: Understand the principle of Webpack hot module replacement (Hot Module Replacement). That is, in development mode, Webpack-dev-server establishes a WebSocket connection, and when it detects changes in the source code, it pushes the new module code to the browser through WebSocket and replaces the old module without refreshing the entire page. Can briefly describe the process and benefits of HMR (preserving application status and improving development efficiency).
Babel Transpilation: Master the process of Babel converting ES6+ code to backward compatible JS. Including: Parsing – Parsing the source code into an abstract syntax tree (AST); Transforming – Transforming AST nodes according to the configured plugin presets (such as arrow functions to ordinary functions, etc.); Generating – Regenerate JS code based on the converted AST. This process reflects the compilation mechanism of front-end engineering, and senior interviews may ask in depth.
Lint and Unit Testing: Understand code quality tools such as ESLint rule customization, and understand how to encapsulate custom ESLint plug-ins (know its basic mechanism of traversing AST, which can be briefly mentioned). Familiar with the meaning of front-end unit testing and common frameworks (Jest, etc.). Although it is not necessary to ask about the implementation in detail, it is beneficial to demonstrate engineering literacy.
Modular Specification: Master the differences between mainstream JS modular solutions. CommonJS module is used in Node.js, and uses synchronous require() to load the module, which loads the module’s output object (value copy); ES6 Module standard determines module dependencies and output interfaces at compile time, supports import/export, is static analysis loading, and exports read-only references. Therefore, ES6 modules can perform Tree-shaking optimization of unused code. You can also learn about historical solutions such as AMD and CMD and why they are gradually replaced by ES6 modules (AMD asynchronous loading is suitable for browsers but the syntax is not intuitive, and the ES6 module syntax is more concise and unified).

2. Key content that needs to be mastered in depth (combined with preferences and background)

React principles and framework comparison: As a candidate’s strength, React-related principles need to be mastered in depth so that you can show a deeper understanding than ordinary candidates in the interview. Kuaishou and other large companies often ask in-depth questions about framework implementation, such as virtual DOM, Diff algorithm, or ask you to compare the differences between React and Vue. Make full use of your practical experience with React and study its underlying mechanisms (such as Fiber architecture, synthetic events, etc.) in depth to make your answer more brilliant. Since you have not used Vue, you should also understand the basic concepts of Vue in advance to prevent comparison questions - the depth does not need to be too great, but you need to ensure that you do not leave a blank when answering.
Performance optimization (especially the first screen and interactive performance): This is an area where you have practical experience, and it is also an aspect that platforms with a huge number of users like Kuaishou attach great importance to. In the interview, you may be asked how to optimize a performance bottleneck scenario, such as how to improve the slow loading of the first screen or make a product smoother in a weak network environment. You should have a deep understanding of performance optimization techniques at all levels (loading, rendering, encoding, etc.) and be prepared to combine case studies with your own projects. Kuaishou directly asked candidates what performance optimizations they made in their mini-programs during the interview, which shows how much they value this. Make full use of your practice in performance tuning, sort out a set of systematic optimization ideas, and talk about it in the interview will be a big plus.
Browser principles and JS basics: These are the foundation of front-end interviews, and often determine the interviewer’s evaluation of your depth and breadth. Interviews at large companies like to extend the basic concepts to ask tricky questions (for example, using examples to examine the event loop instead of asking about the concept directly). In view of this, you need to be familiar with the basics (event loop, scope closure, prototype chain, DOM/CSS mechanism, etc.) and understand them thoroughly. Combined with your full-stack background, you can have a deeper understanding of some browser mechanisms (such as the relationship between the rendering thread and the JS thread), which will make your answers more convincing. When reviewing, focus on understanding the principles instead of memorizing the conclusions, so that no matter how the interview changes, you can cope with it with ease.
Security knowledge: You have practical development experience in security, which is your advantage. Front-end interviews at large companies often ask security questions such as XSS/CSRF prevention measures, and many fresh graduates are weak in this area. If you can give a rich and detailed answer (such as explaining output encoding, various means of defending CSRF and combining back-end verification mechanisms, etc.), it will surely impress the interviewer. Since you have a back-end development background, you can explain the security solution from a full-stack perspective (such as how the server cooperates with protection), reflecting a comprehensive security awareness. It is recommended to focus on memorizing the causes and defense strategies of common Web vulnerabilities, and appropriately demonstrate your security sensitivity in the interview.
Engineering and project practice: Considering that your background involves back-end and deployment technologies such as Go and Docker, Kuaishou interviewers may be interested in your engineering thinking and full-stack capabilities. Although campus recruitment front-end positions do not necessarily test back-end knowledge in depth, front-end engineering is a common test point. You should have a deep understanding of the principles of the build tool chain (Webpack, Babel, etc.) to deal with difficult questions. For example, Kuaishou has interviewed questions about Babel transcoding process, custom ESLint plug-ins and other engineering-oriented questions. You can use your own learning and project experience to give in-depth answers to these questions. At the same time, you can prepare some insights on topics such as how to use Docker to deploy front-end applications and front-end and back-end collaboration optimization, and show your maturity in engineering during the free question session or resume discussion.

3. Review order and time arrangement (two-day plan)

一、重要知识点分类及重点清单

建议将知识梳理为以下几个模块，每个模块列出常见的“八股文”考点以备速览复习：

1. HTML 与 CSS 基础

CSS盒模型：了解盒子的组成（内容content、内边距padding、边框border、外边距margin）及其对元素尺寸的影响。
CSS选择器优先级：掌握样式冲突时优先级计算规则（继承 < 元素内联样式 < !important 等）。
元素水平垂直居中：熟悉多种居中布局方法，如利用定位 + margin、定位 + transform，或使用弹性盒（Flexbox）等实现居中。
重排与重绘：理解重排(回流)和重绘的区别及触发条件。重排是布局改变（如尺寸、位置变化）引起，需要重新计算布局；重绘是外观样式改变但布局未变，只重新绘制像素。

2. JavaScript 与 ES6

原型与原型链：理解 JavaScript 原型链实现继承的机制。原型本质是一个对象，用于共享属性和方法；实例通过 __proto__ 链接至构造函数的 prototype 实现属性查找。
闭包：掌握闭包概念及作用。闭包是指能够访问另一个函数作用域中变量的函数，常通过在一个函数内部创建另一个函数产生。闭包可用于封装私有变量、避免全局变量污染等。
this 绑定：搞清 this 在不同场景下的指向规则（函数直接调用时指向全局对象；方法调用指向调用它的对象；构造函数调用指向新实例；call/apply 可以显式改变 this）。注意箭头函数没有自身 this，会捕获外层 this。
事件循环与异步：理解浏览器的 JavaScript 事件循环 (Event Loop) 机制，区分宏任务(macrotask)和微任务(microtask)。JavaScript 采用单线程运行，通过事件循环不断检查并执行任务队列中的任务。掌握如 setTimeout、Promise、async/await 等异步机制的执行顺序。
ES6+ 新特性：熟悉常见ES6/ES7特性及用法，例如 let/const 的作用域区别、箭头函数绑定词法this、Set/Map容器类型、Promise 及 async/await 实现异步、类（Class）语法糖及继承等。这些特性往往是面试高频话题，应能说明其用途和优劣。

3. 浏览器原理

浏览器渲染流程：理解从输入HTML到页面呈现的基本过程：构建DOM树 -> 构建CSSOM树 -> 合并生成渲染树 -> 布局（Reflow）-> 绘制（Paint）。知道CSS如何影响渲染（如外部CSS加载会阻塞渲染树构建）等。
浏览器多进程架构：了解现代浏览器的进程划分（如浏览器主进程、渲染进程、网络进程等）以及进程和线程的区别。进程有独立内存空间，崩溃互不影响；线程是进程内执行单元，共享内存。理解Chrome浏览器中渲染进程是多线程的（包含GUI渲染线程、JS引擎线程等）。
DOM 事件机制：掌握浏览器事件流的三个阶段：捕获 → 目标 → 冒泡。事件捕获从祖先节点向下传播，事件冒泡则从目标向上传播。了解如何使用addEventListener的第三个参数控制绑定阶段，以及使用stopPropagation()阻止冒泡。
脚本加载策略：理解<script>标签中 async 和 defer 属性的区别：没有属性时浏览器同步解析并执行脚本；async表示脚本异步下载且下载完成后立即执行（不保证按顺序）；defer表示脚本异步下载但延迟到HTML解析完成后按顺序执行。
浏览器存储：了解几种前端存储方式：Cookie、localStorage、sessionStorage、IndexedDB 等区别。例如，Cookie会被自动附带在请求中、容量小多用于保存会话标识，localStorage容量较大且持久存在，sessionStorage在会话结束后清空等。
浏览器缓存机制：掌握HTTP缓存策略，如强缓存(Expires/Cache-Control)和协商缓存(Last-Modified/Etag)的原理。能解释浏览器如何判断缓存有效以及返回304的过程。

4. 网络与协议

GET 和 POST 区别：明确 HTTP GET 与 POST 在语义和实现上的差异。例如：GET一般用于获取资源，参数附在URL且有长度限制；POST用于提交数据，放在请求体，无长度限制；GET请求可被浏览器缓存而POST不会自动缓存；安全性上POST相对更安全一点等。
HTTP1.1 和 HTTP2：了解HTTP/1.1相对于HTTP/2的主要改进点。如HTTP/2采用二进制分帧传输、支持多路复用（一个连接并发多个请求，无队头阻塞HTTP层，但TCP层队头阻塞仍存在）、头部压缩等。知道HTTP/3基于QUIC的进一步优化（可简单提及）。
网络通信基础：掌握TCP三次握手、四次挥手的基本过程，了解TLS/SSL握手在HTTPS中的作用。虽非纯前端范畴，但面试可能涉及简单问答。
其他协议/机制：了解WebSocket相对HTTP的区别（全双工通信、需握手升级协议等）和常见应用场景。熟悉HTTP状态码含义（尤其2xx、3xx重定向、4xx客户端错误如401/403/404、5xx服务器错误）。这些有备无患，回答HTTP相关问题时可顺带提及。
请求过程和优化：熟悉从浏览器地址栏输入URL到页面加载的全过程，包括DNS解析、TCP连接、发送请求、接受响应、浏览器渲染的各个阶段。能够结合缓存、CDN等说明提高网络加载性能的方法（如启用CDN就近访问，减少请求体积等）。

5. 安全

XSS 跨站脚本攻击：理解 XSS 的原理——攻击者向目标网站注入恶意脚本代码，使之在其他用户浏览器上执行，从而窃取用户数据（如Cookie）等。掌握常见防范措施：输入过滤和转义（对用户输入进行HTML转义过滤特殊字符）、内容安全策略(CSP)、敏感Cookie设置HttpOnly防止脚本读取等。
CSRF 跨站请求伪造：了解 CSRF 的攻击机制——利用用户已登录状态，在用户不知情情况下冒用其身份发送恶意请求。防御方法包括：请求附加**防伪随机令牌(token)**并验证、使用SameSite严格的Cookie、关键操作增加验证码确认等。
同源策略与跨域：理解浏览器同源策略(Same-Origin Policy)对JavaScript的限制，知道同源指协议、域名、端口均相同。掌握几种跨域解决方案：如服务端设置 CORS 响应头允许跨域资源共享、JSONP 利用 <script> 不受同源限制（仅支持GET）、以及反向代理转发等机制。
其他安全：了解点击劫持(ClickJacking)防护（通过X-Frame-Options禁用iframe嵌套），以及前端如何防范恶意输入导致的崩溃（如正则拒绝服务ReDoS）等。安全类问题回答时可以结合实际项目中遇到的安全加固措施来体现经验。

6. 前端框架原理（React 为主）

Virtual DOM 与 Diff：理解虚拟DOM的作用：在JS和真实DOM之间加了一层抽象的DOM树缓存，通过Diff算法比较新旧虚拟DOM高效更新真实DOM，避免不必要的DOM操作。知道React的Diff策略（同层对比、列表节点需唯一key等）和其带来的性能提升。
React Fiber 架构：掌握React16引入Fiber的原因和原理。React15的协调器采用递归处理组件树，更新不可中断，长时间更新会阻塞UI。Fiber将更新任务拆分为可中断的小单元（链表形式），利用浏览器空闲时间执行，避免长任务阻塞渲染，实现可中断的调度与渲染。
React 生命周期：熟悉React类组件生命周期各阶段（挂载Mounting -> 更新Updating -> 卸载Unmounting）及主要生命周期方法。如componentDidMount/Update/WillUnmount等，了解其调用顺序和典型用途。同时了解函数组件的Hooks等价写法（如useEffect对应部分生命周期）。
合成事件机制：了解React合成事件模型的工作方式。React并没有将事件处理器直接绑定在DOM节点上，而是采用事件委托机制**统一绑定在根节点(document)**上，这样可以提高性能并实现跨浏览器一致的事件行为。明晰这一机制与原生DOM事件的区别，如事件池、syntheticEvent对象等。
错误边界：知道React中捕获错误的方式，例如使用componentDidCatch或getDerivedStateFromError定义Error Boundary组件来统一处理子组件的运行时错误，以防止错误导致整个应用崩溃（这一点可以简单提及）。
Vue 基础了解：尽管未实际使用Vue，但应粗略了解Vue的核心原理以应对比较类问题。如：Vue通过数据劫持实现响应式（Vue2用Object.defineProperty，Vue3用Proxy）；Vue模板会在编译阶段解析指令和插值，生成虚拟DOM并更新；Vue的双向数据绑定(v-model)和React单向数据流的区别等。
React vs Vue：能比较两大框架的相同点和差异。相同点：二者都采用组件化、数据驱动视图，都使用虚拟DOM+Diff算法优化更新，也都有配套的路由和状态管理方案。差异：
- 核心理念：Vue是渐进式框架，核心是响应式的MVVM数据绑定；React是用于构建UI的库，强调单向数据流和函数式 UI。
- 语法风格：Vue推荐SFC单文件组件（template+script+style，直观易上手），也支持指令语法和JSX；React强制使用JSX，将HTML和CSS以JSX/Inline Style写在JavaScript中（“All in JS”）。
- 数据更新机制：Vue自动追踪依赖并在数据变化时高效更新DOM（大量内置优化和语法糖），开发者无需手动处理；React需通过setState触发更新，可能需要应对性能问题（例如手动使用shouldComponentUpdate或Memo来优化），很多功能（如全局状态管理）依赖社区库提供。
- 其他：Vue2偏声明式编程，Vue3开始引入组合式API接近React的Hooks思想；Vue内置双向绑定方便表单处理，而React默认单向数据流，需要自行编写事件处理来更新状态等。总体来说，二者各有优劣，需根据场景选择。面试中谈及时，可以先指出它们的共同理念，再举上述差异点加以阐述。

7. 性能优化

网页性能指标：了解页面性能常用指标如首屏渲染时间、白屏时间、TTFB、FPS等概念，便于和面试官讨论性能体验。但更重要是掌握优化方法。
资源加载优化：掌握图片懒加载原理（延迟加载屏幕外图片，用户滚动到可视区域再设置真实src触发加载）和实现方式（如<img>使用data-src+监听scroll事件或IntersectionObserver）。了解代码分割和按需加载，通过Webpack等实现按路由或组件拆分bundle，减少首屏资源体积。
函数节流与防抖：理解节流 (throttle) 和防抖 (debounce) 技术在滚动、输入等高频事件优化中的应用。节流是让函数在连续触发情况下以固定频率执行（n秒至多执行一次）；防抖是将多次触发合并为最后一次执行（等待触发完n秒后执行）。能举例说明使用场景，如节流用于滚动滚动事件处理、防抖用于输入框搜索防止连续请求等。
减少重排重绘：优化DOM操作，尽量减少Layout/Reflow次数和影响范围。具体措施如：避免直接频繁修改样式，优先批量修改或使用class切换；避免在DOM树中频繁插入删除节点，必要时可以先将元素display:none（先触发一次重排），操作完成后再显示；对大型动画使用transform或opacity触发合成层，避免反复回流；避免使用table布局等。
缓存和资源优化：利用浏览器缓存（强缓存/协商缓存）减少请求；开启 Gzip/ Brotli 压缩传输资源；将常用静态资源放置CDN提高访问速度；使用浏览器离线存储（如Service Worker缓存）提升重访性能等。
构建打包优化：通过构建工具优化前端代码性能。典型方法包括：代码压缩混淆（减小文件体积）、Tree-Shaking（摇树优化删除未引用代码）、SplitChunks拆分代码、按路由懒加载、提取公共库、开启打包缓存等。另外，利用生产模式构建去除开发调试代码，合理配置webpack的optimization选项等也是常见面试点。
性能监测：熟悉基本性能监测手段，如使用Chrome DevTools Performance记录分析帧率、调用栈，用Lighthouse进行性能评分等。虽然面试不一定细问工具使用，但体现出对性能问题的监测和定位思路会有加分。

8. 前端工程化与模块化

版本控制 (Git)：了解常用的 Git 命令（如clone、branch、add、commit、push等）和团队协作流程。尤其需掌握分支合并策略中 merge 和 rebase 的区别：merge会产生一次新的合并提交，保留分支的历史分叉；rebase则将分支提交在目标分支顶端顺序重放，不产生额外的分叉点。大厂可能关注你对团队协作和代码管理的理解。
构建工具 (Webpack)：常考 Webpack 原理及配置。需要清楚 Loader 和 Plugin 的区别：Loader本质是文件转换器，用于处理非JS资源，将其转为可模块化JS；Plugin则是在Webpack运行生命周期中挂钩执行，扩展Webpack功能，如打包优化等。熟悉几个典型Loader/Plugin（如babel-loader将ES6转ES5、file-loader处理图片、HtmlWebpackPlugin自动生成HTML等）。
Webpack 热更新 HMR：了解Webpack热模块替换（Hot Module Replacement）的原理。即在开发模式下，Webpack-dev-server建立WebSocket连接，检测到源码变动时，将新的模块代码通过WebSocket推送到浏览器并替换旧模块，而不刷新整个页面。能简单描述HMR的流程和好处（保留应用状态、提高开发效率）。
Babel 转译：掌握 Babel 将ES6+代码转换为向后兼容JS的流程。包括：解析(Parsing)–将源码解析成抽象语法树(AST)；转换(Transforming)–按照配置的插件预设对AST节点进行变换（比如箭头函数转普通函数等）；生成(Generating)–根据转换后的AST重新生成JS代码。这一流程体现前端工程的编译机制，高级面试有可能深入问到。
Lint与单测：了解代码质量工具如ESLint规则定制，理解如何封装自定义ESLint插件（知道其遍历AST的基本机制，可简单提及）。熟悉前端单元测试的意义和常用框架（Jest等），虽不一定细问实现，但展示工程化素养有利。
模块化规范：掌握主流JS模块化方案的区别。CommonJS模块用于Node.js，采用同步require()加载模块，加载的是模块的输出对象（值拷贝）；ES6 Module标准在编译时确定模块依赖与输出接口，支持import/export，是静态分析加载，导出的是只读引用。因此ES6模块可以进行Tree-shaking优化未使用代码。还可了解AMD、CMD等历史方案及它们为何逐渐被ES6模块取代（AMD异步加载适合浏览器但语法不直观，ES6模块语法更简洁统一）。

以上分类几乎涵盖了前端面试高频知识点。建议在复习中对照清单逐一过一遍，对于不熟悉的概念及时查阅加深理解。

二、需要深入掌握的重点内容（结合偏好与背景）

面试准备时间有限，应有所侧重。根据快手面试偏好和候选人自身背景，以下几个模块和知识值得投入更多精力深度掌握：

React 原理及框架比较：作为候选人的强项，React相关原理需深入掌握，以便在面试中展现出比一般候选人更深的理解。快手等大厂常会深入追问框架实现，比如虚拟DOM、Diff算法或让你对比React和Vue的区别。充分利用你对React的实践经验，深入研究其底层机制（如Fiber架构、合成事件等）能让你的回答更有亮点。由于你未使用过Vue，也应提前了解Vue的基本理念以防比较类问题——深度不必过大，但需保证回答时不至于一片空白。
性能优化（尤其是首屏和交互性能）：这是你有实际经验的领域，也是快手这样用户量巨大的平台非常看重的方面。面试中很可能被问到如何优化某个性能瓶颈场景，例如如何改善首屏加载过慢的问题或者让某产品在弱网环境下更流畅。你应当深入掌握各层面的性能优化技巧（加载、渲染、编码等）并准备好结合自己项目的案例说明。快手面试中曾直接询问候选人在小程序中做了哪些性能优化，可见对此的重视。充分利用你在性能调优上的实践，整理出一套系统的优化思路，在面试时娓娓道来将非常加分。
浏览器原理与 JS 基础：这些是前端面试的地基，往往决定了面试官对你深度和广度的评价。大厂面试喜欢从基础概念引申出有坑的提问方式（例如用实例考察事件循环而非直接问概念）。鉴于此，你需要对基础知识（事件循环、作用域闭包、原型链、DOM/CSS机制等）烂熟于心并融会贯通。结合你的全栈背景，可以更深入理解一些浏览器机制（如渲染线程与JS线程的关系），这会让你的回答更具说服力。在复习时着重理解原理而非死记结论，这样无论面试怎么变形问，你都能应对自如。
安全知识：你在安全方面有实际开发经验，这是你的优势领域。大厂前端面试经常会问到XSS/CSRF的防范措施等安全问题，而许多应届生在这方面比较薄弱。如果你能够给出丰富且细致的回答（例如说明输出编码、防御CSRF的多种手段并结合后端验证机制等）势必让面试官眼前一亮。由于你有后端开发背景，可以从全栈视角阐述安全方案（例如服务端如何配合防护），体现出全面的安全意识。建议重点熟记常见Web漏洞的成因及防御策略，在面试中适当展现你的安全敏感度。
工程化与项目实践：考虑到你的背景涉及Go、Docker等后端和部署技术，快手面试官可能会对你工程化思维和全栈能力感兴趣。虽然校招前端岗位不一定深入考察后端知识，但前端工程化是常考点，你应深入理解构建工具链原理（Webpack、Babel 等）以应对高难度提问。例如快手有面试过 Babel 转码流程、自定义 ESLint 插件等偏工程化的问题，你可以利用自己的学习和项目经验，在这些问题上给出有深度的回答。同时，你可以准备一些关于如何利用Docker部署前端应用、前后端协作优化等话题的见解，在面试自由提问环节或简历详聊时展现你工程化方面的成熟度。

聚焦上述重点将使你的优势最大化。在这两天里，对以上内容多花时间深挖细节、整理输出框架。同时，对于算法和手写代码类题目可以不做特别准备（题目要求已明确不考），把精力专注在知识版块上。对于Vue框架细节则可浅尝辄止，做到心中有数即可：毕竟两天很难从零精通Vue，不如把时间用于强化React和共通原理，并准备好说明愿意快速学习新框架的态度即可。

三、复习顺序与时间安排（两天规划）

总体思路：先夯实基础再冲刺重点，合理分配时间，以确保广度覆盖的同时突出重点深度。在仅有的两天内，每天划分几个时段，交替复习不同模块以保持效率。具体安排如下：

Day 1 上午：基础巩固（HTML/CSS & JavaScript）
利用第一天清晨头脑最清醒的时段，快速复习前端基础知识。先花约2小时梳理 HTML/CSS 基础：回顾盒模型、布局技巧、常见样式问题等（可通过浏览前端面试题总结快速浏览相关问答）。然后用约2小时强化 JavaScript核心：专注作用域、闭包、原型链、this、事件循环等高频考点，结合代码片段加深理解。如果遇到模糊的概念，及时查MDN文档或笔记搞清原理。这个基础模块复习既是单独考点准备，也是后续理解高级专题（比如框架原理）的前提。

Day 1 下午：框架原理攻坚（React 为主，兼顾 Vue）
下午精力充沛时段，重点突破 React 工作原理。花约1小时整理React生命周期、状态更新机制、合成事件模型等知识点，建议边画结构图边总结（如React Fiber架构示意）。接下来约1小时专攻 Virtual DOM & Diff算法：可以找资料阅读React Diff原理概要并在纸上演练一次虚拟DOM diff过程。然后用约0.5~1小时了解 Vue核心原理：重点弄清响应式数据绑定和虚拟DOM在Vue中的实现，顺带看看Vue的生命周期名称，以防被问及。最后留出约0.5小时对比React和Vue：总结一份两者区别的清单（可以直接对照之前整理的相同/不同点），以便面试回答有条理。下午这段复习完成后，框架类问题你将胸有成竹。

Day 1 晚上：网络与安全
晚上注意力稍下降，适合阅读和记忆类复习。首先用约1小时浏览 计算机网络 相关知识：重点看HTTP协议要点（方法、状态码、缓存机制、HTTP2特性等），可以通过笔记或题库快速QA形式自测。一些需要记忆的地方（如HTTP状态码的意义）可以采取快速背诵+默写要点的方式巩固。接下来用约1小时集中学习 Web安全 模块：建议阅读XSS和CSRF的典型案例和防护方案博客，加深印象，然后合上资料尝试自己复述完整的攻击过程和防御措施。如果时间富余，也可以了解下常见浏览器安全策略（如同源策略、CORS原理）等。Day1晚上结束前，可简单回顾一下当天内容，加深记忆的同时列出尚存疑惑的点，准备第二天解决。

Day 2 上午：性能优化专项
第二天早上精力恢复，投入到 性能优化 模块的复习。用约1小时学习 页面加载优化：包括资源打包优化策略（文件拆分、懒加载）、缓存利用等，可通过阅读性能优化最佳实践文章获取要点，并对照自己项目看用了哪些手段。然后用约1小时复习 渲染性能优化：重点关注如何减少重排重绘、提升动画流畅度等，必要时把浏览器渲染原理再过一遍以理解优化背后的原因。接下来约0.5小时复习 算法优化和内存优化（虽不考算法题，但理解DOM操作耗时、JS大数据处理优化如Web Worker等，可防面试讨论到相关场景）。最后留约0.5小时，整理一套性能优化方案清单：按加载优化、渲染优化、代码优化分类写下关键词和措施。这套清单既是知识点总结，也可在面试问到性能时作为答题提纲瞬时调用。

Day 2 中午/下午前段：工程化与模块化
利用中午或下午早些时候的时间段（约1.5小时），复习 前端工程化 相关内容。首先回顾Webpack的核心概念和常见配置项，着重理解Loader/Plugin机制和构建流程，可结合网上的Webpack面试题整理快速浏览问答。然后花0.5小时看 Babel/Polyfill 相关知识，确保能解释 Babel 转码流程和常用的转译插件。接下来0.5小时熟悉 Git流程和工具：重点看团队协作中的分支管理、多人冲突解决等，理清rebase和merge区别以及语义化提交等概念，以防面试官顺带提及。再用0.5小时回顾 模块化演进：将CommonJS、ES6 Module差异点认真看一遍，记忆关键区别（同步/异步、值拷贝/引用等），想象如果被问到如何回答简练。经过这一中段时间，你对工程化的知识会成体系，不至于在相关问题上语焉不详。

Day 2 下午后段：综合串讲与模拟
在最后半天里，进行综合冲刺和查漏补缺。首先用约1小时时间快速串讲之前所有笔记：可以尝试闭卷回忆每个模块的要点，然后对照清单补充遗忘处。这种主动回忆有助于将知识从短期记忆转为长期记忆，便于第二天面试调用。接着，用约1小时进行模拟问答练习：可以找到一套前端八股文题库，随机抽取问题，快速在脑中组织答案并口述出来。这一步非常重要，它能暴露出哪些知识你虽然看了但讲不出来。对于发现的薄弱点，立即翻看资料再次理解，确保面试时能流畅表述。最后半小时左右，浏览常见面试总结博客或题单，获取一些流行高频题的信息（例如最近流行问AST的可以瞄一眼，但不要深陷新知识），做到心中有数。收尾时调整心态，整理好纸质/脑图版的知识框架，至此你已经最大程度地覆盖了面试知识点。晚上尽量保证休息，为面试保持良好精神状态。

两天的紧凑复习后，你应该对核心知识了然于胸。面试中若遇到没准备到的问题，也不必紧张，尽量根据相关基础知识现场分析应答。通过上述计划的高效复习，你将以更沉稳自信的姿态迎接快手前端面试。

四、参考资料

在复习过程中，可借助一些优质题库和博文来高效获取要点知识和典型问答。推荐参考以下资源：

GitHub仓库：wangwenjie1314/webQd – 前端高频面试题合集，按照模块（HTML&CSS、JS、Vue、React、工程化、网络等）整理了2024年最新常考知识要点。该仓库汇总了掘金优秀文章和网友面经，是刷题背题的极佳索引。
稀土掘金「前端八股文」系列 – 作者wakaka378等的专题文章，涵盖浏览器、网络、性能、工程化等各方面八股文要点。例如其中的**《前端铜九铁十面试必备八股文——浏览器》深入总结了XSS/CSRF、防抖节流、事件机制等，《网络相关》**篇则整理了HTTP各版本特点等。这些系列文章语言精炼、要点突出，非常适合考前速览复习。
CSDN博客：「2024年Web前端最新面试八股文」 – 综合性前端面试知识大全。该博文按章节详细列出了前端各领域典型题目和参考答案，从CSS、JS基础到框架、性能、安全一应俱全。内容更新至2024年末，涵盖面广且附有解释，适合作为知识盲点查漏和答案表述学习的参考。
知乎专栏：《2024年面试必问的Web前端面试八股文及答案整理》 – 综合整理了一份前端核心考点宝典，涵盖JavaScript、CSS、ES6、Vue2/3、React、Node.js、小程序、HTTP、TypeScript等几乎所有类别。每个知识点都有详解答案，可用于在理解基础上背诵关键表述。这类知乎回答集合凝练了大量面经精华，质量较高。
MDN Web Docs（Mozilla开发者文档） – 权威技术细节参考。当遇到概念模糊时，MDN上的相关页面通常提供权威而清晰的解释。例如查看“事件循环(Event Loop)”条目可了解JS运行时模型的准确描述。MDN文档多为英文，但内容可信且细节充分，查阅具体概念（如HTTP缓存、CSS属性等）时非常有价值。
牛客网 NowCoder 前端面试版块 – 聚集了大量实时更新的面试经验帖和真题讨论。可以搜索“快手前端面经”获取往届真实问答情境，了解快手面试官爱问的问题类型。利用碎片时间翻阅几篇高赞面经，有助于掌握面试侧重点和应答技巧。不过需注意面经内容良莠不齐，切忌被他人负面经历影响心态。

show all >>

42

2025-03-27

字数统计: 1k字 | 阅读时长: 5min

QUESTION：

42.md

My Think：

滚瓜烂熟的一道题, 全部靠背诵. 但是昨天又理解了一下, 画了一个GIF图供我自己理解, 代码如下,

图片举例: [0,1,0,2,1,0,1,3,2,1,2,1]
该题的核心思想其实就是木桶原理, 我们将最外面的两个柱子视作玛丽亚之墙, 这个时候我们忽略玛丽亚之墙内部的城墙, 那么最多是不是可以装min(leftmax, rightmax)这么高的水呢?
也就是最短的柱子的水决定了它的”高度”. 但是我们想知道最多能装多少水, 还需要一个宽度. 于是这个时候我们就一根一根柱子看, 也就是说我们计算每”1”个宽度能装多少水, 然后加起来即可.
我们的左指针为left, 右指针为right, 我们再维护一个左边最高和右边最高.
当我们到达最外面的玛丽亚之墙的时候, 左最高即为leftmax, 右最高即为rightmax, 这个时候我们是无法判断可以装多少水的.
一直到leftmost!=rightmost的时候, 我们就可以判断了.

比如这一帧, 我们最多能装的是leftmax的水量, 即2, 但是因为我们这个时候左指针所在的柱子有一定高度1, 所以是2-1=1, 也就是我们能装1的水.
如果我们比较的不是leftmost和rightmost, 而是leftmax和rightmax, 我们就无法确定说这一个柱子为什么能够兜得住水, 它之所以能兜住水,必然是<=leftmax的

This is a problem I’ve memorized inside out — totally muscle memory. But I revisited it yesterday and tried to actually understand it. I even made a GIF to help myself visualize what’s happening. Here’s the code:

Let’s use the example: [0,1,0,2,1,0,1,3,2,1,2,1]

The core idea of this problem is basically the “bucket theory”:
We treat the two outermost bars as the “Walls of Maria” — and ignore the inner ones for now.
If that’s the case, then the max height of water we can hold is min(leftmax, rightmax).
In other words, the shorter wall decides the water level.

But height alone isn’t enough — we also need width to compute the actual amount of water.
So we look at each bar one by one, and calculate how much water we can trap on top of it, then sum it all up.

We use two pointers: left and right, and also keep track of the highest wall on the left (leftmax) and the highest wall on the right (rightmax).

When our pointer reaches the end of the string (or the two walls meet), that means we’ve gone through all the characters — that’s when we know we have a valid answer.

Take this specific frame as an example:

At this point, the max water we can hold is leftmax = 2, but the current column has height 1, so we can trap:

2 - 1 = 1 unit of water.

If we were comparing leftmax and rightmax directly, we wouldn’t know why this particular column can hold water. The only reason it can trap water is because its height is less than or equal to leftmax.

Code：

class Solution:
    def trap(self, height: list[int]) -> int:
        ans = leftmost = rightmost = 0
        left, right = 0, len(height) - 1
        while left < right:
            leftmost = max(leftmost, height[left])
            rightmost = max(rightmost, height[right])
            if leftmost <= rightmost:
                ans += leftmost - height[left]
                left += 1
            else:
                ans += rightmost - height[right]
                right -= 1
        return ans

import matplotlib.pyplot as plt
import matplotlib.animation as animation
import numpy as np

# Given height list for illustration
height = [0,1,0,2,1,0,1,3,2,1,2,1]

# Initialize variables as in the function
left, right = 0, len(height) - 1
leftmax = rightmax = 0
ans = 0

# For animation, store each frame's water level and pointers
frames = []

# Simulate the logic and capture frames
while left < right:
    leftmax = max(leftmax, height[left])
    rightmax = max(rightmax, height[right])
    water = [0] * len(height)
    if leftmax <= rightmax:
        trapped = max(0, leftmax - height[left])
        ans += trapped
        water[left] = trapped
        frames.append((height.copy(), water.copy(), left, right))
        left += 1
    else:
        trapped = max(0, rightmax - height[right])
        ans += trapped
        water[right] = trapped
        frames.append((height.copy(), water.copy(), left, right))
        right -= 1

# Create animation
fig, ax = plt.subplots(figsize=(10, 5))

def update(frame):
    ax.clear()
    heights, water, l_ptr, r_ptr = frame
    indices = np.arange(len(heights))
    ax.bar(indices, heights, color='grey', edgecolor='black')
    ax.bar(indices, water, bottom=heights, color='blue', edgecolor='blue', alpha=0.6)
    ax.axvline(l_ptr, color='green', linestyle='--', label='Left Pointer')
    ax.axvline(r_ptr, color='red', linestyle='--', label='Right Pointer')
    ax.set_ylim(0, max(height) + 3)
    ax.set_title("Trapping Rain Water Animation")
    ax.legend()

ani = animation.FuncAnimation(fig, update, frames=frames, interval=500, repeat=False)

from IPython.display import HTML
ani.save("trapping_rain_water.gif", writer="pillow", fps=2)  # 保存为 GIF

show all >>

93. Restore IP Addresses

2025-03-25

字数统计: 500字 | 阅读时长: 2min

QUESTION：

93. Restore IP Addresses

My Think：

This MiHoYo coding test question is very similar to LeetCode 46 (Permutations), and both rely on the backtracking approach.

As shown in the code, during the first traversal, we may get something like ['2', '5', '5', '2'] as our initial parts, but at this point, we haven’t traversed the entire string yet.

When we enter the next level of DFS, the pointer moves forward by +length, so it effectively moves to the far right of the current segment.
If the pointer has reached the end of the string, it means we’ve visited all characters — in this case, we’ve found one valid answer and can add it to the result list.

One important note: parts + [part] is pass-by-value, not by reference like in LeetCode 46.
This means we don’t need to manually undo changes (i.e., no need to backtrack with pop()), because each recursive call creates a new list.

现在在做的是MiHoyo的笔试题, 这个和46.permutation非常相似, 都是回溯思想.

如代码所示, 在第一遍遍历中, 我们会得到['2','5','5','2'] 作为第一个parts, 但是我们并没有遍历完整个字符串.

这个时候如果我们进入新的dfs的时候, 我们的指针因为刚刚+length, 所以我们实际上
指到的是最右边,所以当当前指针已经指到最右边的时候, 说明我们遍历完了所有字符, 那么这就是答案之一.

parts + [part] 是值传递而不是46的引用传递, 所以不用手动撤销更改

Code：

from typing import List

class Solution:
    def restoreIpAddresses(self, s: str) -> List[str]:
        res = []

        def backtrack(start: int, parts: List[str]):
            # 终止条件：正好4段且用完所有字符
            # Stop condition: exactly 4 segments and all characters used up
            if len(parts) == 4:
                if start == len(s):
                    res.append(".".join(parts))
                return

            for length in range(1, 4):  # 每段长度1~3 Each segment length 1~3
                if start + length > len(s):
                    break
                part = s[start:start+length]

                # 前导0非法，但0本身合法
                # Leading 0 is illegal, but 0 itself is legal
                if len(part) > 1 and part[0] == '0':
                    continue

                if int(part) <= 255:
                    backtrack(start + length, parts + [part])  # 注意用 + 避免污染 We need to use + to avoid pollution

        backtrack(0, [])
        return res

show all >>

46.permutations

2025-03-24

字数统计: 362字 | 阅读时长: 2min

Description:

Given an array nums of distinct integers, return all the possible permutations. You can return the answer in any order.

Example 1:

Input: nums = [1,2,3]
Output: [[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]
Example 2:

Input: nums = [0,1]
Output: [[0,1],[1,0]]
Example 3:

Input: nums = [1]
Output: [[1]]

Thinking:

This question is more like a tree problem.
like the tree below:

dfs(0): nums = [1,2,3]
|
|-- i=0: swap(0,0) -> [1,2,3]
|   |
|   |-- dfs(1)
|       |-- i=1: swap(1,1) -> [1,2,3]
|       |   |-- dfs(2): append [1,2,3]
|       |-- i=2: swap(1,2) -> [1,3,2]
|           |-- dfs(2): append [1,3,2]
|
|-- i=1: swap(0,1) -> [2,1,3]
|   |
|   |-- dfs(1)
|       |-- i=1: swap(1,1) -> [2,1,3]
|       |   |-- dfs(2): append [2,1,3]
|       |-- i=2: swap(1,2) -> [2,3,1]
|           |-- dfs(2): append [2,3,1]
|
|-- i=2: swap(0,2) -> [3,2,1]
    |
    |-- dfs(1)
        |-- i=1: swap(1,1) -> [3,2,1]
        |   |-- dfs(2): append [3,2,1]
        |-- i=2: swap(1,2) -> [3,1,2]
            |-- dfs(2): append [3,1,2]

We swap the current position index with each possible candidate i from index to the end. They can be seen as left and right pointers: index determines which position we’re filling, and i tries different numbers to place there.

Before the recursive call, we swap nums[i] and nums[index] to try placing a new number at position index. If we reach the last position (index == len(nums) - 1), we add the current permutation to the answer list.
After recursion, we swap back to restore the original state (backtracking).

Code:

class Solution:
    def permute(self, nums: List[int]) -> List[List[int]]:
        # index
        def dfs(index):
            # Reach the last element
            if index == len(nums) - 1:
                res.append(list(nums))
                return
            for i in range(index, len(nums)):
                nums[i], nums[index] = nums[index], nums[i]
                dfs(index + 1)
                nums[i], nums[index] = nums[index], nums[i]

        res = []
        dfs(0)
        return res

show all >>

9021_TUT_3_25T1

2025-03-07

字数统计: 2.2k字 | 阅读时长: 13min

Exercise 1

Problem Description:

You are given two integers, m and n, where:

m represents the number of repeated units (patterns).
n represents the number of elements (underscores) within each unit.

The goal is to generate a string where:

Each unit contains n underscores (_), separated by |.
These units are then concatenated together, separated by *.

My Solution:

def generate_struct(n):
    return '|'.join(n * ['_'])

def f1(m, n):
    return ' * '.join(m * [generate_struct(n)])

My Thought Process:

I think of each unit as a separate structure. So, I decompose the problem by breaking down the smallest unit, which is the structure made of underscores joined by |.
After constructing each unit, I use join() to combine them together using *.

Helper Function generate_struct(n):

This function generates the basic structure.
It creates a list of underscores (_) of length n and joins them with |.
Example: If n = 2, the result will be “_|_“.

Standard Solution:

1 2	def f1(m, n): return ' * '.join('\|'.join('_' for _ in range(n)) for _ in range(m))

Concise Expression:

The inner join creates a string of n underscores joined by | using a generator expression ('_' for _ in range(n)).
The outer join repeats this process m times and concatenates the units using *.

In summary, my solution focuses on modularity by breaking down the problem into smaller parts (like creating a structural unit), whereas the standard solution compresses everything into one line using list comprehensions.

Exercise 2

Problem Description:

The goal is to generate a pattern based on the digits of a given number n. Specifically:

If a digit is odd, it should be represented by a black square (⬛).
If a digit is even, it should be represented by a white square (⬜).
The program takes a number n as input and prints a string of squares corresponding to the digits of n.

My Solution:

def f2(n):
    ans = ''
    for i in str(n):
        if int(i) % 2 == 0:
            ans += '⬜'
        else:
            ans += '⬛'
    print(ans)

My Thought Process:

Loop through each digit:
Convert the number n to a string to iterate over each digit individually.
Check if the digit is even or odd:
Convert each digit back to an integer and use the modulus operator (% 2) to check if the digit is even or odd.
Append the corresponding square:
- If the digit is even, append a white square (⬜) to the result string.
- If the digit is odd, append a black square (⬛).
Print the final string:
After processing all the digits, print the final string containing black and white squares.

Standard Solution:

1 2	def f2(n): print(''.join({0: '\u2b1c', 1: '\u2b1b'}[int(d) % 2] for d in str(n)))

Dr.Martin’s solution is:

More compact and Pythonic.
Uses a dictionary and list comprehension for brevity and efficiency.
The Unicode characters for the squares are referenced directly using their escape sequences (\u2b1c for white, \u2b1b for black).

Exercise 3

Problem Description:

In this task, the number n is treated as a number expressed in different bases (ranging from 2 to 10), and we aim to convert it into its corresponding base 10 value for each of these bases, where the conversion is valid.

For n = 2143:

2143 in base 5 is equivalent to 298 in base 10.
2143 in base 6 is equivalent to 495 in base 10.
And so on.

The goal is to iterate over different base systems from 2 to 10, treat the input number n as if it is expressed in each base, and then convert it to base 10.

My Solution:

def f3(n: int):
    for i in range(2, 11):
        try:
            # Treat n as a number in base i and convert it to base 10
            value = int(str(n), i)
            print(f'{n} is {value} in base {i}')
        except ValueError:
            pass

My Thought Process:

Iterating over Bases (2 to 10):
- We loop through the base values i ranging from 2 to 10.
Conversion Using int():
- For each base i, we treat the number n as a number in that base. To do this, we first convert n to a string (str(n)) and then use int() to interpret it as a base i number.
- If the digits of n are valid for base i, this conversion succeeds, and the result is the base 10 equivalent of n.
- If the digits of n are not valid for base i (for example, if base 2 is used and n contains digits greater than 1), a ValueError is raised, and we skip the invalid base.
Handling Errors with try-except:
- The try-except block ensures that invalid bases are skipped, allowing us to handle cases where the digits in n are not valid for a particular base.

Standard Solution:

def f3(n):
    n_as_string = str(n)
    min_base = max(2, max({int(d) for d in n_as_string}) + 1)
    for b in range(min_base, 11):
        print(f'{n} is {int(n_as_string, b)} in base {b}')

It skips the bases where the digits in n are not valid, and it uses a set comprehension to extract the unique digits from n_as_string. The maximum digit is then used to determine the minimum base to start iterating from.

Exercise 4

Problem Description:

The task is to create a function f4(n, base) that returns a dictionary D, where:

Keys are integers from 0 to n.
Values are tuples that represent the base base representation of each key, converted from base 10.

My Solution:

def convert_to_base(n, base):
    if n == 0:
        return '0'
    digits = []
    while n:
        digits.append(str(n % base))
        n //= base
    return ''.join(digits[::-1])

def f4(n: int, base: int):
    D = {}
    for i in range(0, n + 1):
        D[i] = tuple(map(int, convert_to_base(i, base)))
    return D

My Thought Process:

Helper Function convert_to_base(n, base):
- This function converts a number n from base 10 to the specified base.
- We use a while loop to repeatedly take the modulus (n % base) and append the remainder to the list digits.
- We then divide n by base (n //= base) to reduce it for the next iteration.
- After collecting all digits, we reverse the list and return it as a string.
Main Function f4(n, base):
We initialize an empty dictionary D.
For each number i from 0 to n, we convert i to the given base using convert_to_base().
The converted base digits are then mapped to integers and stored in a tuple as the value for each key i in the dictionary.

Explanation of Why `map()` is not Pythonic:

In the function f4, the use of map(int, convert_to_base(i, base)) applies the int function
to each element of the result from convert_to_base, effectively converting each character to an integer.

However, it’s worth noting that the map() function, which originates from functional programming,
has largely been superseded by more Pythonic constructs such as list comprehensions.

These comprehensions are generally considered superior for several reasons:

They are more elegant and concise.
They tend to be shorter in terms of syntax, making the code easier to read.
They are easier to understand for most people, especially those who are more familiar with Python’s
standard syntax rather than functional programming constructs.
In many cases, they are also more efficient in terms of performance.

For example, instead of using map(int, ...), the same functionality could be achieved with a
list comprehension, like so:

D[i] = tuple([int(digit) for digit in convert_to_base(i, base)])

This list comprehension achieves the same result but follows a more modern Pythonic style.

Standard Solution:

def f4(n, base):
    D = {0: (0,)}
    for m in range(1, n + 1):
        digits = []
        p = m
        while p:
            digits.append(p % base)
            p //= base
        D[m] = tuple(reversed(digits))
    return D

Both solutions are valid and achieve the same result. My approach uses a helper function for base conversion, which adds modularity,
whereas the standard solution is more concise and directly integrates the conversion logic into the main function.

Exercise 5

At the first, try to run this:

1	print(0.1 + 0.2)

What happened? The result is not 0.3, but 0.30000000000000004. Why?

Problem Description:

The approach we are using in this exercise is designed to expose the limitations of floating-point arithmetic in computers. Let’s break down why this approach leads to precision inaccuracies and why other methods might not reveal these issues as clearly.

This problem can seem complex, and it’s designed to highlight the subtleties of floating-point arithmetic. Let’s walk through the logic using the test cases to figure out what the function does.

Key Concepts:

Floating-point numbers: Computers store floating-point numbers using a binary format, which often introduces precision errors.
Precision: We’re working with two types of precision in this function—simple precision (same as the length of the fractional part) and double precision (twice that length).

Solution:

def f5(integral_part, fractional_part):
    # Calculate the number of digits in the fractional part
    precision = len(str(fractional_part))
    
    # Concatenate the integral and fractional parts as strings, then convert to a float
    a_float = float(str(integral_part) + '.' + str(fractional_part))
    
    # Format the float with precision equal to the number of digits in the fractional part (simple precision)
    simple_precision = f'{a_float:.{precision}f}'
    
    # Append a number of zeros equal to the fractional part length to the simple precision value (extended precision)
    extended_simple_precision = simple_precision + '0' * precision
    
    # Format the float with precision equal to twice the number of fractional digits (double precision)
    double_precision = f'{a_float:.{precision * 2}f}'
    
    # Print the first part of the output
    print('With', precision * 2, 'digits after the decimal point, ', end='')
    
    # Compare if extended precision and double precision values are the same
    if extended_simple_precision == double_precision:
        # If they are the same, it means the float is precise and has trailing zeros
        print(simple_precision, 'prints out with', precision, 'trailing',
              precision == 1 and 'zero,' or 'zeroes,', 'namely, as',
              extended_simple_precision
             )
    else:
        # If not, there is a precision error, and no trailing zeros
        print(simple_precision, 'prints out as', double_precision)

Our function attempts to check and display this floating point error with simple precision (simple_precision) and double precision (double_precision). The error becomes more obvious when we represent floating point numbers with higher precision (double the number of decimal places). So in this way, we show that floating point numbers are not always actually stored as we expect them to be with more precise representation.

Exercise 6

Problem Description:

In this task, we are given:

A list L, which contains multiple sub-lists of integers, and all sub-lists have the same length n.
A list fields, which is a permutation of {1, ..., n}.

We are required to sort the list L by using a multi-key sorting mechanism, where:

First, the elements in L are sorted based on the position given by the first element of fields.
If two sub-lists are equal based on the first field, we move to the second field, and so on.
Finally, if required, the sorting proceeds up to the last field in fields.

Example of Fields Explanation:

If fields = [2, 1], it means:

First, sort based on the second element of each sublist.
If there are ties (same values in the second position), sort based on the first element.

My Solution:

1 2	def f6(L, fields): return sorted(L, key=lambda x: [x[i-1] for i in fields])

Sorting with sorted():
The sorted() function is used to sort the list L.
The key parameter defines how the sorting will be performed.
Lambda Function:
The lambda function defines how the sublists will be sorted. It generates a list of values for each sublist based on the positions specified in fields.
For example, if fields = [2, 1], the lambda function will extract the second and first elements from each sublist in that order, and sorting will be done based on this new list.
Key Structure:
The key is a list of elements from each sublist, indexed by the positions specified in fields. We use x[i - 1] because fields is 1-based, and list indexing in Python is 0-based.
What is Lambda Function?

For example:

We have:

1	f = lambda x: x * x

This is equivalent to:

1 2	def f(x): return x * x

And lambda function in a sorted function is used to define a custom sorting key.

L = [(1,2), (3,1), (5,0)]

SortedL = sorted(L, key=lambda x: x[1])

print(SortedL)

The result is: [(5, 0), (3, 1), (1, 2)], it sorts the list based on the second element of each tuple.

Standard Solution:

1 2	def f6(L, fields): return sorted(L, key=lambda x: tuple(x[i - 1] for i in fields))

Why Use a Tuple?:

Tuples are often preferred for multi-key sorting because they are immutable, and Python’s built-in sorting functions can efficiently compare tuples.
Each sublist is transformed into a tuple of its elements based on the order defined by fields. The sorted() function then uses these tuples to sort the list.

show all >>

9021_TUT_2

2025-03-03

字数统计: 2.8k字 | 阅读时长: 17min

Exercise 1:

This exercise focuses on input validation and formatting floating-point numbers. The goal is to prompt the user to enter a floating-point number between -1 and 1 (exclusive). If the input is valid, the program rounds the number to two decimal places and prints it. Otherwise, it keeps prompting the user until a valid input is provided.
Key Points:

The program uses a try-except block to catch invalid inputs (e.g., strings that cannot be converted to floats).
The input() function is wrapped in an infinite while loop to continuously ask for input until the correct condition is met.

In the updated version of Exercise 1, we use the formatting :.2f instead of round(). Here’s the key difference between the two:

round(): This is a Python built-in function that rounds a number to a specified number of decimal places. For example, round(1.236, 2) will return 1.24. However, the output of round() is still a float, but it does not guarantee a fixed number of decimal places when printed. For instance, round(1.0001, 2) would return 1.0 and only display one decimal place, not two.
:.2f: This is part of Python’s string formatting and ensures the number is displayed with exactly two decimal places, no matter what the number is. It also rounds the number appropriately. For instance, number = 1.0 formatted as f”{number:.2f}” will print 1.00. This makes :.2f particularly useful for consistent display of decimal places, which is important for formatting output for users.

while True:
    try:
        i = input('Enter a floating point number between -1 and 1 excluded: ')
        number = float(i)
        if '.' not in i:
            raise ValueError
        if -1 < number < 1:
            # not using round() here because it rounds to the nearest even number
            print(f'\nUp to +/-0.005, you input {number:.2f}')
        else:
            raise ValueError
        break
    except ValueError:
        print("You got that wrong, try again!\n")

Exercise 2:

This exercise involves processing a block of text and formatting it into sentences. Each sentence should have its first word capitalized, and the remaining words should be in lowercase. The task is to handle spaces and punctuation properly.

Key Points:

A regular expression (re.sub) is used to replace multiple spaces with a single space.
Another regular expression (re.split) is used to split the text into sentences while preserving punctuation marks.
After splitting, the sentences are processed: the first word is capitalized, and all other words are made lowercase.
Finally, the processed sentences are recombined into a single formatted text.

Why use re in Exercise 2, and what is re?

In Exercise 2, we use re (Python’s regular expression module) to process and format the text input. Let’s break down why re is used and what it is:

What is re?

re stands for regular expressions, which are powerful tools for matching patterns in strings. The re module in Python allows you to work with regular expressions to search, split, and manipulate text based on specific patterns. Regular expressions are highly flexible and efficient for handling complex string operations.

Why use re in Exercise 2?

In this exercise, we need to handle several complex text manipulations:

Replace multiple spaces with a single space: Sentences in the text may have irregular spaces between words, so we need to normalize these spaces. Instead of writing loops or conditions to handle each case, we use re.sub() with a pattern r’\s+’ to easily match all occurrences of one or more spaces and replace them with a single space.
Split sentences while preserving punctuation: We need to split the text into individual sentences, where each sentence is followed by punctuation (e.g., ‘.’, ‘!’, or ‘?’). The function re.split(r’([.!?])’, text) allows us to split the text based on punctuation while keeping the punctuation marks, which is crucial for proper sentence reconstruction.

Regular expressions allow us to:

Efficiently match patterns like spaces or punctuation.
Perform complex text transformations with minimal code.
Handle edge cases that would otherwise require more manual handling.

# Assume that the argument text is a string that denotes a text,
# defined as one or more sentences, two successive
# sentences being separated by at least one space,
# the first sentence being possibly preceded with spaces,
# the last sentence being possibly followed by spaces,
# a sentence being defined as at least two words,
# two successive words in a sentence being separated by
# at least one space, a word being defined as a sequence
# of (uppercase or lowercase) letters,
# - possibly followed by a comma for a word that is
#   not the last one in its sentence,
# - definitely followed by a full stop, an exclamation mark
#   or a question mark for a word that is the last one
#   in its sentence.
import re


def f2(text):
    # Use regular expression to replace multiple spaces with a single space
    text = re.sub(r'\s+', ' ', text.strip())

    # Correct way to split sentences while preserving delimiters
    sentences = re.split(r'([.!?])', text)

    # Process sentences and punctuation separately
    new_text = []
    i = 0
    while i < len(sentences)-1:
        sentence = sentences[i].strip()
        if sentence:
            sentence =' '.join(sentence.capitalize().split())
            # Rebuild the sentence and add back the punctuation
            new_text.append(sentence +sentences[i +1])
        i += 2
    return ' '.join(new_text)

Exercise 3:

This exercise works with lists of integers and aims to repeatedly remove the first and last elements of the list as long as they are equal. The list is treated as a double-ended queue (deque) for efficient removal of elements from both ends.

Key Points:

The deque data structure is used because it provides O(1) operations for popping elements from both ends, which is more efficient than using lists.
The program checks if the first and last elements of the deque are equal and removes them until this condition is no longer met.
The deque is converted back to a list before being returned.

Why is `deque` more efficient than `list` in Exercise 3?

In Exercise 3, we are frequently removing elements from both the front (left) and the back (right) of the list. This is where using a deque (double-ended queue) from Python’s collections module becomes more efficient compared to using a standard list.

Here’s why:

List Behavior: When you use a standard list and call list.pop(0) to remove the first (leftmost) element, it requires shifting all the remaining elements one position to the left. This shift operation takes linear time—O(n), where n is the number of elements in the list. This means that for every removal from the front, the larger the list, the slower the operation becomes.
- Removing from the right side of a list using list.pop() is an O(1) operation (constant time) because no elements need to be shifted, making it efficient only when working from the end of the list.
Deque Behavior: A deque (double-ended queue) is specifically designed to support efficient append and pop operations from both ends. In a deque, both popleft() and pop() operations take constant time—O(1)—because the deque is implemented as a doubly linked list. This means no elements need to be shifted when popping from the left or right.
- In Exercise 3, where we need to frequently remove elements from both ends of the list, using a deque ensures that both the removal from the left (popleft()) and the right (pop()) are performed in constant time. This makes the entire process much more efficient, especially for large lists where repeated operations would slow down if we used a standard list.

What is a `deque`?

A deque (short for “double-ended queue”) is a data structure that allows for fast appending and popping of elements from both ends. It is part of the collections module in Python and is optimized for scenarios where you need to efficiently add or remove elements from both ends of the sequence.

Key Features of `deque`:

O(1) time complexity for operations on both ends (append, pop, appendleft, popleft).
It is implemented as a doubly linked list, meaning each element contains a reference to both the previous and next elements, allowing efficient traversal in both directions.
deque is ideal for scenarios where you need frequent and efficient insertions and removals from both the front and back of a sequence, unlike a standard list where such operations are costly at the front.

Standard Solution:

def f3(L):
# Remove the list as long as it has at least two elements and the first and last elements are equal
    while len(L) > 1 and L[0] == L[-1]:
        L.pop(0) # Remove the first element
        L.pop(-1) # Remove the last element
    return L

My Solution:

from collections import deque

def f3(L):
    L = deque(L)  # Convert the list to a deque for efficient popping from both ends
    # Continue removing elements while there are at least two elements and the first and last are equal
    while len(L) > 1 and L[0] == L[-1]:
        L.popleft()  # Efficiently remove the first element (O(1) operation)
        L.pop()      # Efficiently remove the last element (O(1) operation)
    return list(L)   # Convert the deque back to a list and return it

Exercise 4:

This exercise deals with lists of integers that are in increasing order. The goal is to remove any element whose value is equal to its index in the list. The program iterates over the list and removes such elements, ensuring the index is correctly adjusted after each removal.

Key Points:

The program uses a while loop and checks if the element at index i is equal to i. If true, it removes the element and does not increment i, so that the next element at the same position is checked.
The remove() function is used to delete the element, which is appropriate for this task.
Care is taken to ensure that index adjustments are handled correctly.

The reason we use remove() instead of pop(0) or popleft() in a deque is that we need to specifically remove the value that matches the number we reached. pop() and popleft() remove elements by position, without considering the value, which isn’t suitable for our case.

# Assume that the argument L is a list of integers
# that forms an increasing sequence.
#
# For as long as some member of the list is equal to its index
# in the list, pop out the leftmost such member of the list.

def f4(L):
    i = 0
    while i < len(L):
        if L[i] == i:
            L.remove(L[i])  # Using remove() here since popleft() removes from the left only
        else:
            i += 1  # Only increment i if no element was removed
    return L

Exercise 5:

This exercise works with a circular list of integers. The task is to identify elements that are both larger than one of their adjacent elements and smaller than the other. The result is returned as a dictionary where each key is such an element, and its value is a pair of the adjacent elements (one smaller and one larger).

Key Points:

The list is treated as circular, meaning the first element is considered adjacent to the last element.
The program iterates through the list, compares each element with its neighbors, and stores those that meet the criteria.
For each valid element, the adjacent smaller and larger elements are stored in a dictionary.

To solve this problem, we need to create a dictionary D where each key is an element in the list L that satisfies a certain condition, and the value is a tuple of two elements. The first element of this tuple is the adjacent element that is smaller than the current key, and the second element is the adjacent element that is larger than the current key.

Steps:

Loop structure: Check each element.
Processing of adjacent elements: Since the list is cyclic, the previous element of the first element is the last element, and the next element of the last element is the first element.
Condition check: Find the adjacent elements that are smaller and larger than the current element, and add them to the result dictionary.

# Assume that the argument L is a list of at least 3 distinct integers.
#
# Returns a dictionary D whose keys are those of the members e of L,
# if any, that are
# - smaller than the element right before or right after, and
# - larger than the element right before or right after.
# It is considered that
# - the first member of L is right after the last member of L, and
# - the last member of L is right before the first member of L
# (as if making a ring out of the list).
# For a key e in D, the associated value is the pair whose
# first element is the member of L that is right before or right after
# e and smaller than e, and whose second element is the member of L
# that is right before or right after e and greater than e.

def f5(L):
    D = {}
    for i in range(len(L)):
        m = L[i - 1]
        n = L[(i + 1) % len(L)]
        if n < m:
            m, n = n, m
        if m < L[i] < n:
            D[L[i]] = m, n
    return D

Exercise 6:

This exercise deals with factorizing an integer n into the form 2^k * m, where m is an odd number. If n is negative, the program adds a negative sign to the output. If n is zero, it prints a special message.

Key Points:

The program uses a loop to divide n by 2 until n is no longer divisible by 2, counting the number of divisions (k).
The absolute value of n is used to ensure correct handling of negative numbers, and a sign is added to the final result if the original number was negative.
The program handles the special case where n = 0 by printing a unique message.

More Details:

You need to express the given integer n as n = 2^k * m.
- k represents the number of times n can be divided by 2. In other words, it is the power of 2 in the factorization of n.
- m is the remaining odd part after dividing out all factors of 2.
If n is negative, the output should include a negative sign.
Special case: If n = 0, a specific message should be printed.
The result is printed directly, not returned.

# Assume that the argument n is an integer.
#
# The output is printed out, not returned.
#
# You might find the abs() function useful.
def f6(n):
    if n == 0:
        print("0 = 2^k * 0 for all integers k!")
    else:
        k = 0
        ori = n
        if n < 0:
            sign = '-'
            n = -n
        else:
            sign = ''
        while n % 2 == 0:
            n //= 2
            k += 1
        print(f"{ori} = {sign}2^{k} * {n}")
    return

FOR VERY VERY VERY VERY VERY BIG NUMBER:

When dealing with very large integers, the method of continuously dividing the number by 2 to factor out powers of 2 (2^k) can become inefficient. This is because each division can be costly in terms of computational time, especially for very large numbers with millions or billions of digits. Each division involves recalculating the entire integer, which is slow for large integers.
Using Bit Manipulation:

A much more efficient approach is to use bit manipulation to determine how many times a number can be divided by 2 (i.e., how many factors of 2 it has). This method avoids division altogether and instead directly analyzes the binary representation of the number to count the number of trailing zeros, which correspond to the powers of 2 in the factorization.

Why?

Bitwise operations are much faster than arithmetic operations like division, especially for large integers. Counting the trailing zeros in a number’s binary representation can be done in constant time.
Extracting the lowest set bit of a number allows us to quickly find how many times a number can be divided by 2 without having to repeatedly divide the number. This provides the power of 2 (k) directly.

def f6(n):
    if n == 0:
        print("0 = 2^k * 0 for all integers k!")
        return
    
    # Handle negative sign
    sign = '-' if n < 0 else ''
    n = abs(n)
    
    # Using bit manipulation to count how many trailing zeros (powers of 2)
    k = (n & -n).bit_length() - 1  # Count trailing zeros by isolating the lowest set bit
    
    # Remove 2^k factor from n
    m = n >> k  # Equivalent to n // 2^k, shifting right by k bits
    
    # Print the result
    print(f"{sign}{n} = {sign}2^{k} * {m}")

show all >>

9021_TUT_1_25T1

2025-03-03

字数统计: 952字 | 阅读时长: 5min

Introduction How Labs work

We can see the structure of the lab is like this:

1
2
3

%%run_and_test python3 -c "from exercise_1_1 import f1; print(f1(0, 0))"

'\n'

Which means run_and_test ? It is a Magic Command, run python file which is exercise_1_1.py and test the output of f1(0, 0).

And at the top of this Jupyter notebook, we can see the following code:

1	load_ext run_and_test

This is a magic command that loads the run_and_test extension, which allows us to run and test Python code in the notebook.

And if you run %pycat exercise_1_1_template.py, you will get a new file exercise_1_1.py which is the template of the exercise.

You can write your code inside the exercise_1_1.py file and run the test code in the notebook to check if your code is correct. Or directly write your code after %%writefile exercise_1_1.py command block.

Exercise 1

Finding the pattern, we can see that the first parameter m means how many structures there are, and the second parameter n means how many underscores there are.

So we can assume the structure is like:

|____|

And if we have m = 3 and n = 4, the output would be:

1	\|____\|\|____\|\|____\|

My solution

In Python, we can use multiplication to repeat a string. So we can use the following code to solve this problem:

1 2	def f1(m, n): return ('\|' + '_' * n + '\|') * m

Exercise 2

Same way to find the pattern, n rows and n columns, and each row contains the digit n repeated n times.

And you can find, the input n is a digit, which means it is an integer. While we use “*” with the integer, it is the mathematical multiplication.

So we need to convert the integer to a string, and then multiply it with the integer, and add a newline at the end of each row.

My solution

1 2	def f2(n): return (str(n)n + "\n")n

And… in case you want to use a for loop:

def f2(n):
    result = ""
    for i in range(n):
        result += str(n) * n + "\n"
    return result

Exercise 3

This problem is a bit complex to understand, so let’s break it down step by step. Based on Eric’s reply in Ed, we can see that the problem requires us to traverse from the rightmost side, removing all elements that are ≤ the last element (x) until we encounter a number that is ≥ the last element (y). It is important to note that if there are any elements to the left of y that were previously removed, they should also be removed.

This Exercise needs us use only 1 loop.

My solution

def f3(L):
    # You can use [] list here, but set is more effective
    num_remove = set()
    # Check ED of Eric's reply
    i = len(L)-2
    flag = 0
    while i >= 0:
        if L[i] < L[-1] and flag == 0:
            num_remove.add(L[i])
            L.pop(i)
            # reset the length in case it have nothing
            i = len(L) - 2
        elif L[i] >= L[-1]:
            i -= 1
            flag = 1
        elif L[i] in num_remove:
            L.pop(i)
        else:
            i -= 1
    print(L)

You can full screen, change speed, and change quality of the video.

Standard Solution

I have to say Eric is a genius:

def f3(L):
    while len(L) > 1 and L[-2] < L[-1]:
        L.remove(L[-2])
    print(L)

You can full screen, change speed, and change quality of the video.

Exercise 4

The fourth function, f4, works with dictionaries:

def f4(D, n):
    if n not in D:
        return []
    ans = [n]
    while n in D and D[n] > n:
        ans.append(D[n])
        n = D[n]
    return ans

This function takes a dictionary D and an integer n. It generates a strictly increasing sequence of integers based on the relationships defined in the dictionary.
Starting from n, it appends D[n], D[D[n]], and so on to the list, as long as each subsequent value is greater than the previous one.
For example, if D = {1: 2, 2: 3, 3: 5} and n = 1, the function will return [1, 2, 3, 5].

Standard Solution

def f4(D, n):
    L = [] if n not in D else [n]
    while n in D and n < D[n]:
        L.append(D[n])
        n = D[n]
    return L

Exercise 5

The fifth function, f5, reads from a file and processes each line:

def f5(filename):
    with open(filename) as f:
        for i in f:
            name, number = i.split(',')
            number = int(number) * 1000
            print(f"{number} people named {name}")

This function reads a text file, where each line consists of a name and a count separated by a comma.
The function multiplies the count by 1000 and prints the result in the format: “X people named Y”.
For example, if the file contains a line “John,5”, it will print:

1	5000 people named John

Standard Solution

def f5(filename):
    with open(filename) as file:
        for line in file:
            name, count = line.split(',')
            print(int(count) * 1_000, 'people named', name)

Exercise 6

The final function, f6, also reads from a text file, but with a different format:

def f6(filename):
    with open(filename) as f:
        for i in f:
            # Check if the line is not empty
            if not i.isspace():
                number, charactor = i.split()
                print(int(number) * charactor)

This function reads lines that contain an integer followed by a symbol (e.g., “5 *”).
It multiplies the symbol by the integer and prints the result.
For example, if the file contains the line “3 # “, the function will print:

###

show all >>

9021_TUT_2_25T1

2025-02-03

字数统计: 2.8k字 | 阅读时长: 17min

Exercise 1:

The program uses a try-except block to catch invalid inputs (e.g., strings that cannot be converted to floats).
The input() function is wrapped in an infinite while loop to continuously ask for input until the correct condition is met.

In the updated version of Exercise 1, we use the formatting :.2f instead of round(). Here’s the key difference between the two:

round(): This is a Python built-in function that rounds a number to a specified number of decimal places. For example, round(1.236, 2) will return 1.24. However, the output of round() is still a float, but it does not guarantee a fixed number of decimal places when printed. For instance, round(1.0001, 2) would return 1.0 and only display one decimal place, not two.
:.2f: This is part of Python’s string formatting and ensures the number is displayed with exactly two decimal places, no matter what the number is. It also rounds the number appropriately. For instance, number = 1.0 formatted as f”{number:.2f}” will print 1.00. This makes :.2f particularly useful for consistent display of decimal places, which is important for formatting output for users.

My Solution

while True:
    try:
        i = input('Enter a floating point number between -1 and 1 excluded: ')
        number = float(i)
        if '.' not in i:
            raise ValueError
        if -1 < number < 1:
            # not using round() here because it rounds to the nearest even number
            print(f'\nUp to +/-0.005, you input {number:.2f}')
        else:
            raise ValueError
        break
    except ValueError:
        print("You got that wrong, try again!\n")

Standard Solution

while True:
    try:
        x = input('Enter a floating point number between -1 and 1 excluded: ')
        if '.' not in x:
            raise ValueError
        x = float(x)
        if not (-1 < x < 1):
            raise ValueError
        break
    except ValueError:
        print('You got that wrong, try again!\n')
print(f'\nUp to +/-0.005, you input {x:.2f}')

Exercise 2:

In other words: Modify the sentence to conform to English grammar

Standard Solution

Split text into a list of words.
Iterate through the words and apply the following rules:
- If the word is the first word of the sentence (i.e., the first word or follows a sentence-ending punctuation mark), capitalize it.
- If the word is not the first word of the sentence, make it lowercase.

def f2(text):
    words = text.split()
    for i in range(len(words)):
        # Ternary Expression
        words[i] = words[i].title() if i == 0 or words[i - 1][-1] in '.!?'\
            else words[i].lower()
    return ' '.join(words)

Key Points:

A regular expression (re.sub) is used to replace multiple spaces with a single space.
Another regular expression (re.split) is used to split the text into sentences while preserving punctuation marks.
After splitting, the sentences are processed: the first word is capitalized, and all other words are made lowercase.
Finally, the processed sentences are recombined into a single formatted text.

Why use re in Exercise 2, and what is re?

In Exercise 2, we use re (Python’s regular expression module) to process and format the text input. Let’s break down why re is used and what it is:

What is re?

Why use re in Exercise 2?

In this exercise, we need to handle several complex text manipulations:

Replace multiple spaces with a single space: Sentences in the text may have irregular spaces between words, so we need to normalize these spaces. Instead of writing loops or conditions to handle each case, we use re.sub() with a pattern r’\s+’ to easily match all occurrences of one or more spaces and replace them with a single space.
Split sentences while preserving punctuation: We need to split the text into individual sentences, where each sentence is followed by punctuation (e.g., ‘.’, ‘!’, or ‘?’). The function re.split(r’([.!?])’, text) allows us to split the text based on punctuation while keeping the punctuation marks, which is crucial for proper sentence reconstruction.

Regular expressions allow us to:

Efficiently match patterns like spaces or punctuation.
Perform complex text transformations with minimal code.
Handle edge cases that would otherwise require more manual handling.

# Assume that the argument text is a string that denotes a text,
# defined as one or more sentences, two successive
# sentences being separated by at least one space,
# the first sentence being possibly preceded with spaces,
# the last sentence being possibly followed by spaces,
# a sentence being defined as at least two words,
# two successive words in a sentence being separated by
# at least one space, a word being defined as a sequence
# of (uppercase or lowercase) letters,
# - possibly followed by a comma for a word that is
#   not the last one in its sentence,
# - definitely followed by a full stop, an exclamation mark
#   or a question mark for a word that is the last one
#   in its sentence.
import re


def f2(text):
    # Use regular expression to replace multiple spaces with a single space
    text = re.sub(r'\s+', ' ', text.strip())

    # Correct way to split sentences while preserving delimiters
    sentences = re.split(r'([.!?])', text)

    # Process sentences and punctuation separately
    new_text = []
    i = 0
    while i < len(sentences)-1:
        sentence = sentences[i].strip()
        if sentence:
            sentence =' '.join(sentence.capitalize().split())
            # Rebuild the sentence and add back the punctuation
            new_text.append(sentence +sentences[i +1])
        i += 2
    return ' '.join(new_text)

Exercise 3:

Key Points:

The deque data structure is used because it provides O(1) operations for popping elements from both ends, which is more efficient than using lists.
The program checks if the first and last elements of the deque are equal and removes them until this condition is no longer met.
The deque is converted back to a list before being returned.

Why is `deque` more efficient than `list` in Exercise 3?

Here’s why:

List Behavior: When you use a standard list and call list.pop(0) to remove the first (leftmost) element, it requires shifting all the remaining elements one position to the left. This shift operation takes linear time—O(n), where n is the number of elements in the list. This means that for every removal from the front, the larger the list, the slower the operation becomes.
- Removing from the right side of a list using list.pop() is an O(1) operation (constant time) because no elements need to be shifted, making it efficient only when working from the end of the list.
Deque Behavior: A deque (double-ended queue) is specifically designed to support efficient append and pop operations from both ends. In a deque, both popleft() and pop() operations take constant time—O(1)—because the deque is implemented as a doubly linked list. This means no elements need to be shifted when popping from the left or right.
- In Exercise 3, where we need to frequently remove elements from both ends of the list, using a deque ensures that both the removal from the left (popleft()) and the right (pop()) are performed in constant time. This makes the entire process much more efficient, especially for large lists where repeated operations would slow down if we used a standard list.

What is a `deque`?

Key Features of `deque`:

O(1) time complexity for operations on both ends (append, pop, appendleft, popleft).
It is implemented as a doubly linked list, meaning each element contains a reference to both the previous and next elements, allowing efficient traversal in both directions.
deque is ideal for scenarios where you need frequent and efficient insertions and removals from both the front and back of a sequence, unlike a standard list where such operations are costly at the front.

Standard Solution:

def f3(L):
# Remove the list as long as it has at least two elements and the first and last elements are equal
    while len(L) > 1 and L[0] == L[-1]:
        L.pop(0) # Remove the first element
        L.pop(-1) # Remove the last element
    return L

My Solution:

from collections import deque

def f3(L):
    L = deque(L)  # Convert the list to a deque for efficient popping from both ends
    # Continue removing elements while there are at least two elements and the first and last are equal
    while len(L) > 1 and L[0] == L[-1]:
        L.popleft()  # Efficiently remove the first element (O(1) operation)
        L.pop()      # Efficiently remove the last element (O(1) operation)
    return list(L)   # Convert the deque back to a list and return it

Exercise 4:

Key Points:

The program uses a while loop and checks if the element at index i is equal to i. If true, it removes the element and does not increment i, so that the next element at the same position is checked.
The remove() function is used to delete the element, which is appropriate for this task.
Care is taken to ensure that index adjustments are handled correctly.

The reason we use remove() instead of pop(0) or popleft() in a deque is that we need to specifically remove the value that matches the number we reached. pop() and popleft() remove elements by position, without considering the value, which isn’t suitable for our case.

Standard Solution:

def f4(L):
    i = 0
    while i < len(L):
        if L[i] == i:
            L.pop(i)
        else:
            i += 1
    return L

My Solution:

def f4(L):
    i = 0
    while i < len(L):
        if L[i] == i:
            L.remove(L[i])  # Using remove() here since popleft() removes from the left only
        else:
            i += 1  # Only increment i if no element was removed
    return L

Exercise 5:

Key Points:

The list is treated as circular, meaning the first element is considered adjacent to the last element.
The program iterates through the list, compares each element with its neighbors, and stores those that meet the criteria.
For each valid element, the adjacent smaller and larger elements are stored in a dictionary.

Steps:

Loop structure: Check each element.
Processing of adjacent elements: Since the list is cyclic, the previous element of the first element is the last element, and the next element of the last element is the first element.
Condition check: Find the adjacent elements that are smaller and larger than the current element, and add them to the result dictionary.

Standard Solution:

def f5(L):
    D = {}
    for i in range(len(L)):
        m = L[i - 1]
        L[i]
        # Treat it as a head-tail circular array
        n = L[(i + 1) % len(L)]
        # we don't care about the order of m and n [0,1,2,4] L[3%4==3]
        if n < m:
            m, n = n, m
        # If L[i] is between m and n, store it in the dictionary:
        if m < L[i] < n:
            D[L[i]] = m, n
    return D

L[i-1] help us to get the previous element of the current element, 0 - 1 is len(L) - 1.
and L[(i+1) % len(L)] help us to get the next element of the current element. The modulo operation (i+1) % len(L) ensures that the index wraps around to the beginning of the list when it reaches the end.

Exercise 6:

This exercise deals with factorizing an integer n into the form 2^k * m, where m is an odd number. If n is negative, the program adds a negative sign to the output. If n is zero, it prints a special message.

def f6(n):
    if not n:
        print('0 = 2^k * 0 for all integers k!')
        return
    k = 0
    m = n
    sign = '-' if n < 0 else ''
    while m % 2 == 0:
        m //= 2
        k += 1
    print(f'{n} = {sign}2^{k} * {abs(m)}')

If n is negative, it keeps track of the sign.
It repeatedly divides n by 2 while it remains even (n % 2 == 0), counting how many times this happens (k).
The remaining number, m, must be odd, because we divide out all possible factors of 2.
Finally, it prints the equation:
"n = sign * 2^k * m"

FOR VERY VERY VERY VERY VERY BIG NUMBER:

Why?

Bitwise operations are much faster than arithmetic operations like division, especially for large integers. Counting the trailing zeros in a number’s binary representation can be done in constant time.
Extracting the lowest set bit of a number allows us to quickly find how many times a number can be divided by 2 without having to repeatedly divide the number. This provides the power of 2 (k) directly.

def f6(n):
    if n == 0:
        print("0 = 2^k * 0 for all integers k!")
        return
    
    # Handle negative sign
    sign = '-' if n < 0 else ''
    n = abs(n)
    
    # Using bit manipulation to count how many trailing zeros (powers of 2)
    k = (n & -n).bit_length() - 1  # Count trailing zeros by isolating the lowest set bit
    
    # Remove 2^k factor from n
    m = n >> k  # Equivalent to n // 2^k, shifting right by k bits
    
    # Print the result
    print(f"{sign}{n} = {sign}2^{k} * {m}")

show all >>

Windows7+SSH

2025-01-24

字数统计: 266字 | 阅读时长: 1min

How to solve the problem of UNPROTECTED PRIVATE KEY FILE?

F:\> ssh -i "id_rsa" -p 2251 ??@??.com
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions for 'id_rsa' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "id_rsa": bad permissions
??@??.com: Permission denied (publickey).

So I went home and tested it with my old computer:

An error message appeared: ssh: The term 'ssh' is not recognized as the name of a cmdlet, function, script file, or operable program
Checked whether OpenSSH was installed through Get-WindowsCapability -Online | ? Name -like 'OpenSSH*', and found that Windows7 system does not natively support OpenSSH
Tried to solve it by installing Git Bash, but Unable to locate the program input point GetSystemTimePreciseAsFileTime on the dynamic link library KERNEL32.dll
Tried Release on the OpenSSH official website, and found that it could not be compiled because the api-ms-win-core-file-l1-1-0.dll file was missing in the computer
Cygwin official website found that it supports unsupported Windows version, https://cygwin.com/install.html
Win+R->cmd->setup-x86_64.exe --allow-unsupported-windows --site http://ctm.crouchingtigerhiddenfruitbat.org/pub/cygwin/circa/64bit/2024/01/30/231215 --no-verify
Successfully run Cygwin, set up the Tsinghua University mirror source, https://mirrors.tuna.tsinghua.edu.cn/cygwin/, select openssh, and install various C++ packages
It still failed, and then I found that the key file can be used after it is removed from the USB drive. . .

show all >>

Javascript 全局作用域

作用域

全局变量种类

全局对象

最佳实践

1. Classification of important knowledge points and key points list

1. HTML and CSS Basics

2. JavaScript and ES6

3. Browser Principles

4. Network and protocol

5. Security

6. Front-end framework principles (mainly React)

7. Performance optimization

7. Performance optimization

8. Front-end engineering and modularization

2. Key content that needs to be mastered in depth (combined with preferences and background)

3. Review order and time arrangement (two-day plan)

7. Performance optimization

8. Front-end engineering and modularization

2. Key content that needs to be mastered in depth (combined with preferences and background)

3. Review order and time arrangement (two-day plan)

一、重要知识点分类及重点清单

1. HTML 与 CSS 基础

2. JavaScript 与 ES6

3. 浏览器原理

4. 网络与协议

5. 安全

6. 前端框架原理（React 为主）

7. 性能优化

8. 前端工程化与模块化

二、需要深入掌握的重点内容（结合偏好与背景）

三、复习顺序与时间安排（两天规划）

四、参考资料

QUESTION：

My Think：

Code：

QUESTION：

My Think：

Code：

Description:

Thinking:

Code:

Exercise 1

Problem Description:

My Solution:

My Thought Process:

Helper Function generate_struct(n):

Standard Solution:

Concise Expression:

Exercise 2

Problem Description:

My Solution:

My Thought Process:

Standard Solution:

Exercise 3

Problem Description:

My Solution:

My Thought Process:

Standard Solution:

Exercise 4

Problem Description:

My Solution:

My Thought Process:

Explanation of Why map() is not Pythonic:

Standard Solution:

Exercise 5

Problem Description:

Key Concepts:

Solution:

Exercise 6

Problem Description:

Example of Fields Explanation:

My Solution:

Standard Solution:

Exercise 1:

Exercise 2:

Why use re in Exercise 2, and what is re?

What is re?

Why use re in Exercise 2?

Exercise 3:

Explanation of Why `map()` is not Pythonic:

Why is `deque` more efficient than `list` in Exercise 3?

What is a `deque`?

Key Features of `deque`:

Why is `deque` more efficient than `list` in Exercise 3?

What is a `deque`?

Key Features of `deque`: