前端面试题-联想-Seo优化-塔城地区网站建设公司

1. 介绍一下javascript的原型链
  Give an introduction to JavaScript's prototype chain
2. 解决这个代码问题 Untitled （不要提示用原型链方法解决。如果不懂原型链也不需要问）
3. typeof和instanceof的区别是什么？
  What’s the difference betweentypeofandinstanceofin JavaScript?答：
  答： typeof: 基本类型判断,返回值是一个字符串，比如 "number", "string", "boolean", "undefined", "object", "function", "symbol", "bigint"。
  instanceof: 原型链判断, 判断一个对象是否是某个构造函数的实例（即是否在其原型链上）。返回值是布尔值 (true或false)。
4. typeof [1, 2, 3] 的结果是什么？
  What is the result of typeof [1, 2, 3]?
5. 如何判断一个对象是不是数组？
  How to determine if an object is an array?
6. 数组的常用方法有哪些？
  What are the common methods of arrays?
7. 给出一个数组[3, 22, 10, 43, 7, 22, 43, 88, 22, 16]，写一段代码：
  Given an array [3, 22, 10, 43, 7, 22, 43, 88, 22, 16], write a piece of code to:
  1.让返回所有大于等于 10 的数字并对结果中的所有数字求和；
  Return all numbers greater than or equal to 10 and sum all the numbers in the result;
  2.找出所有有重复的数字
  Find all duplicate numbers.
8. 找出数组中出现次数最多的元素[1,2,2,3,3,3,4]
9. 什么是NaN？如何检测一个值是否为NaN？
  What isNaNin JavaScript? How can you check whether a value isNaN?
10. Event Loop的工作原理是什么？
  How does the JavaScript Event Loop work?
11. 深拷贝和浅拷贝的区别是什么？What is the difference between shallow copy and deep copy?
  - 浅拷贝（Shallow Copy）：拷贝对象的第一层属性，对于引用类型的值，仅拷贝引用地址，不会复制内部结构。
  - 深拷贝（Deep Copy）：不仅拷贝对象本身，还递归地拷贝其所有嵌套对象，生成完全独立的一份数据。
  - Shallow Copy: Copies only the first level of properties of an object. For reference types, it copies the reference, not the actual nested objects.
  - Deep Copy: Copies the object and all nested objects recursively, creating a completely independent copy.
12. TypeScript 中interface与type的区别是什么？
  What’s the difference betweeninterfaceandtypein TypeScript?
  interface和type都可以用来定义对象的类型，但它们在语法能力和使用场景上有一些区别：
  1. 扩展能力（Extensibility）：
    - interface可以通过extends进行继承，也可以被多次声明合并（声明合并）。
    - type不能被重复声明，但可以通过交叉类型（&）扩展。
  2. 联合类型与交叉类型（Union / Intersection）：
    - type可以定义联合类型、交叉类型、基本类型别名。
    - interface只能定义对象结构，不能用于联合或交叉类型。
  3. 声明合并（Declaration Merging）：
    - interface支持多次声明同一个名，会自动合并属性。
    - type不支持，会报错。
  4. 推荐使用场景：
    - 如果是描述对象的结构，优先使用interface。
    - 如果需要定义更复杂的类型表达式，如联合类型、函数类型等，使用type。
  Bothinterfaceandtypecan be used to define the shape of objects in TypeScript, but they have some differences in capability and use cases:
  1. Extensibility:
    - interfacecan be extended usingextendsand supports declaration merging (can be defined multiple times and automatically merged).
    - typecannot be re-declared, but can be extended using intersection types (&).
  2. Union & Intersection Types:
    - typecan define union types, intersection types, and primitive type aliases.
    - interfaceis limited to describing object shapes only.
  3. Declaration Merging:
    - interfacesupports declaration merging (multiple declarations of the same name will merge).
    - typedoes not support this and will throw an error if declared more than once.
  4. Usage Recommendation:
    - Useinterfacewhen describing object structures.
    - Usetypefor more complex type expressions, such as unions, intersections, or function types.
13. TypeScript 中联合类型（Union Types）和交叉类型（Intersection Types）的区别？
  What’s the difference between Union Types and Intersection Types in TypeScript?
14. 介绍下 TypeScript 中泛型（Generics）的定义与使用
  Explain how generics are defined and used in TypeScript.
✅ React 深入问题：（可以使用 https://codepen.io/pen?template=emmOvza 或者 React Playground - Online React Editor & Compiler Free 在线写代码（playcode.io有行数限制））
1. React 的key属性有什么作用？（在数组循环之外可以使用key吗？作用是什么？）
  What is the purpose of thekeyprop in React?
2. React 的useMemo和useCallbackHook 有什么区别？
  What’s the difference betweenuseMemoanduseCallbackin React?
3. useEffect的作用是什么？它在什么时间执行？
  What is the purpose of useEffect? When does it execute?
4. React 的Error Boundaries是什么？
  What are Error Boundaries in React?
5. React 的Portals是什么？
  What are Portals in React?
6. React 的Concurrent Mode是什么？
  What is Concurrent Mode in React?
7. React 提倡的 “One Single Source of Truth” 是什么意思？
  What does React mean by “One Single Source of Truth”?
8. React 的函数组件中，如何区分源状态（source state）和派生状态（derived state）？
  In a React function component, how do you distinguish between source state and derived state?
9. 写一个React组件，显示浏览器窗口当前尺寸大小，并且当窗口大小变化时显示的值能同步更新
  Write a React component that displays the current size of the browser window and updates the displayed value in real - time when the window size changes.
10. 写一个React组件，实现下图的效果（宽320px，高180px）
  Write a React component to achieve the effect shown in the following figure.
✅ CSS 与布局问题：
1. 什么是 CSS 盒模型？它包含哪些部分？
  What is the CSS box model, and what parts does it include?
2. 解释一下 CSS 选择器的类型，以及它们之间的区别
  What are the different types of CSS selectors, and how do they differ?
3. CSS 生效的优先级规则是怎么样的？
  What are the CSS specificity rules, and how are they calculated?
4. box-sizing: border-box;和box-sizing: content-box;的区别是什么？
  What’s the difference betweenbox-sizing: border-boxandcontent-box?
5. 如何计算元素的总宽度和高度？
  How do you calculate the total width and height of an element?
6. CSS 样式如何继承？有哪些属性默认不会继承？
  How does CSS inheritance work? Which properties are not inherited by default?
7. 根据下面的html写一段css，让子元素相对父元素居中
  <div id="parent">
  <div id="sub">Sub content</div>
  </div>
8. 解释一下这段css是什么意思border: 1.4px solid var(--Theme-Text-Text-Secondary, rgba(102, 112, 133, 1))
React 如何避免函数重复创建
How can you avoid redundant function creation in React?
1.Use useCallback
2.Define Functions Outside the Component (if they don’t depend on props/state)
3.Use class fields or static functions (for class components)
类组件和函数组件的区别
What are the differences between class components and function components in React?
请说说在复杂表单中，如何处理表单项之间的联动？比如当用户选择不同的任务类型时，显示不同的表单项
In complex forms, how do you handle interactions between form fields? For example, showing different fields based on the selected task type.
当表单项很多时如何避免不必要的重渲染？特别是使用 Form.useWatch 时
When there are many form fields, how do you avoid unnecessary re-renders, especially when usingForm.useWatch?
解释下 React Fiber 的工作原理
Explain how React Fiber works.
解释一下闭包（closure）及其常见用途
What is a closure, and what are its common use cases?
什么是重排（reflow）和重绘（repaint）
What are reflow and repaint in the browser rendering process?
如何优化前端页面的加载速度
How do you optimize frontend page loading speed?
介绍一下 React 虚拟 DOM
What is the Virtual DOM in React?
讲一下对 Flex 布局和 Grid 布局的理解
Describe your understanding of Flexbox and CSS Grid layout.
Webpack 的核心原理和常用配置
What are the core principles of Webpack and its commonly used configurations?
介绍一下你对前端安全（如 XSS、CSRF）的理解和防护措施
Explain your understanding of frontend security (e.g., XSS, CSRF) and how to defend against them.
是否使用过微前端框架，在实际应用中遇到过哪些坑？比如样式隔离、状态共享、路由管理等问题是如何解决的？
Have you used any micro frontend frameworks? What issues have you encountered in practice, such as style isolation, state sharing, or route management, and how did you solve them?
项目体积比较大，有很多重型依赖，你们是如何做代码分割和懒加载的？如何确保首屏加载性能？
In large projects with heavy dependencies, how do you implement code splitting and lazy loading? How do you ensure good first-screen performance?
在多人协作的大型项目中，如何确保代码风格一致性？如何处理不同开发者对技术方案的分歧？
In large projects with multiple developers, how do you ensure code style consistency? How do you handle disagreements over technical decisions?

高级版：

简单描述从输入网址到页面显示的过程

Briefly describe the process from entering a URL to the page being displayed.

2.nodejs里common.js和es6中模块引入的区别

What are the key differences between module imports in Node.js using CommonJS and those in ES6 modules?

3.使用promise实现红绿灯交替重复亮

function red() {

console.log('red'};

}

function green() {

console.log('red'};

}

function yellow() {

console.log('red'};

}

4.React 的虚拟 DOM 和真实 DOM 有什么区别？如何提升渲染性能？

What are the differences between React’s Virtual DOM and the real DOM? How can rendering performance be improved?

5.说说你对微前端架构的理解，主流方案有哪些？优缺点？

Can you share your understanding of micro-frontend architecture? What are the mainstream solutions, and what are their pros and cons?

问：在微前端架构中，不同子应用之间如何进行状态共享和通信？有哪些常见实现方式？
English:In a micro-frontend architecture, how can different sub-applications share state and communicate with each other? What are the common implementation approaches?

6问：Promise、async/await 与事件循环（Event Loop）之间的关系是什么？
English:What is the relationship between Promise, async/await, and the Event Loop in JavaScript?

问：你如何看待 Webpack 与 Vite 的差异？在什么场景下选择哪一个？
English:How do you compare Webpack and Vite, and in what scenarios would you choose one over the other?

问：前端如何防止 XSS 和 CSRF 攻击？
English:How can you prevent XSS and CSRF attacks on the frontend?

问：你如何看待服务端渲染（SSR）和客户端渲染（CSR）的优缺点？在什么场景下更适合使用 SSR？
English:What are the advantages and disadvantages of Server-Side Rendering (SSR) compared to Client-Side Rendering (CSR)? In what scenarios is SSR more suitable?