字节跳动提前批抖音三面面经 + hr面经(已经意向书)

量化私募招前端工程师，3-5年经验核心技能1. 前端基础：· 精通 HTML5、CSS3、JavaScript 等前端基础技术。· 熟练掌握 Vue.js 等主流前端框架，并有实际项目开发经验。· 熟悉 Element UI 组件库和 ECharts 图形库的使用。2.  UI 设计能力：· 具备 UI 设计经验，熟练使用 Photoshop、Adobe XD 等设计工具。· 能够独立完成界面设计和原型制作。3.  前端工程化：· 了解前端工程化工具（如 Webpack、Gulp），具备构建和优化前端项目的能力。4. 后端基础：· 熟悉 Python，了解 Django、Flask、FastAPI 等后端 Web 框架。· 熟悉 MySQL 数据库设计原理，能够独立完成数据库表结构设计和 SQL 语句编写。5. 部署与优化：· 了解 Gunicorn、Nginx 等服务器的部署、配置与优化。加分项6. 熟悉前端性能优化，能够提升页面加载速度和用户体验。7. 熟悉微信小程序的开发框架、API 及组件，有实际开发经验。8. 具备良好的沟通能力和团队协作精神，能够快速理解业务需求并落地实现。

顺丰前端面经base：武汉一面时长：27min自我介绍实习、负责内容与收获挑一个能体现能力的需求说为什么换实习、不转正如何学习前端项目是否上线、人员配比说说原型和原型链Object.porotype 的父级是什么，porotype 上有什么属性跨域问题如何解决TS 内置映射类型用过哪些一个类型要取出某些字段如何实现说说 TS 的泛型说说哈希表，什么情况使用对顺丰的了解反问面试流程：听 hr 安排部门业务：有许多业务板块，本质都属于物流领域的某个环节，协作关系，app、小程序、微前端、pc、h5、bff、低代码、可视化都有技术栈：React、Vue 为主，看部门二面时长：34min自我介绍说说前...

#大家都开始春招面试了吗# 1. 传统的 CSS 文件（全局样式）传统的 CSS 方案通常是将所有的样式放在一个或多个 CSS 文件中，通过  标签引入。在小型项目或单页面应用中，简单直接。使用场景：- 小型项目- 快速开发和原型设计- 个人项目优点：- 结构简单，易于理解。- 实现快速，适合小项目。缺点：- 不利于维护：当项目增大时，CSS 可能变得冗长且重复。- 样式冲突：没有隔离，容易出现不同组件间的样式污染。2. CSS 预处理器（如 Sass / LESS / Stylus）CSS 预处理器通过扩展 CSS，提供了变量、嵌套规则、混合宏（mixin）等功能，提升了样式的复用性和可维护性。使用场景：- 中型项目- 需要模块化和可扩展性的项目- 需要多次复用样式的项目优点：- 支持变量、嵌套、函数等增强功能，提高代码可维护性。- 提高代码的模块化与复用性。- 代码组织更加清晰，能避免重复的 CSS 代码。缺点：- 编译过程：需要将 Sass 或 LESS 编译成 CSS。- 学习曲线相对较陡（尤其对于初学者）。示例（Sass）：// _variables.scss$primary-color: #3498db;$font-size: 16px;// _layout.scss.container {  width: 80%;  margin: 0 auto;}// main.scss@import 'variables';@import 'layout';body {  font-size: $font-size;}.header {  background-color: $primary-color;}3. BEM（块元素修饰符）命名法BEM 是一种 CSS 类命名方法论，适用于大型项目，帮助前端开发者更好地组织和管理样式。BEM 将样式拆分成更小的、功能化的组件，通过定义明确的命名规范来减少样式冲突和提高代码的可维护性。使用场景：- 大型项目，尤其是前端与后端分离时- 团队协作项目- 需要高度模块化和可复用的项目优点：- 命名规范清晰，避免命名冲突。- 样式组件化，提升可复用性。- 便于多人协作开发。缺点：- 代码量相对较多，类名冗长。- 初学者学习曲线较陡。示例：/* BEM 风格 */.button {  padding: 10px;  background-color: blue;}.button--primary {  background-color: #3498db;}.button__icon {  margin-right: 5px;}4. CSS-in-JSCSS-in-JS 是将 CSS 写在 JavaScript 代码中的一种方法，通常与 React 等框架一起使用。它将 CSS 作为 JavaScript 对象来定义，样式和组件逻辑耦合在一起，从而实现样式的动态计算和管理。使用场景：- React、Vue 等组件化框架项目- 需要根据组件状态动态修改样式- 小型项目或者需要样式和组件解耦的大型项目优点：- 样式与组件逻辑结合，易于管理和维护。- 动态生成样式，支持主题切换、响应式设计等功能。- 减少全局样式冲突，样式范围仅限于组件内部。缺点：- 对性能有一定影响（样式计算和注入）。- 需要配置或使用框架（如 styled-components、emotion）。示例（styled-components）：// React + styled-components 示例import styled from 'styled-components';const Button = styled.button`  padding: 10px;  background-color: ${props => props.primary ? '#3498db' : '#ccc'};  color: white;  border: none;`;const App = () => (      Primary Button    Secondary Button  );5. CSS 模块化（CSS Modules）CSS 模块化方案允许将 CSS 写在独立的文件中，并且通过自动生成的唯一类名避免样式冲突。它通常与 Webpack 一起使用，支持作用域限定的 CSS。使用场景：- 现代前端开发，尤其是使用 Webpack 或 React/Vue 等框架时。- 需要避免全局样式污染的项目。优点：- 避免了全局命名空间污染。- 类名自动生成，保证唯一性和作用域隔离。- 支持组件化，提升可维护性。缺点：- 需要额外的配置和工具（如 Webpack loader）。- 类名经过编译后可能较长。示例（React + CSS Modules）：// App.module.css.button {  padding: 10px;  background-color: #3498db;  color: white;}// App.jsximport React from 'react';import styles from './App.module.css';const App = () => (  Click Me);6. Tailwind CSS（原子化 CSS）Tailwind CSS 是一种实用工具优先（utility-first）CSS 框架，提供了大量的原子类（单一功能的 CSS 类），可以快速构建复杂的布局。使用场景：- 快速开发和原型设计- 喜欢“原子类”方式的开发者- 开发团队需要减少自定义样式的项目优点：- 提供了高度复用的类，减少了自定义 CSS 的需求。- 代码量少，开发速度快。- 通过配置定制化 Tailwind，适应项目需求。缺点：- 类名会非常多，容易使 HTML 代码显得冗长。- 学习成本较高，特别是对于不熟悉原子类概念的开发者。示例：      Click Me  7. Atomic CSS（原子化 CSS）原子化 CSS 和 Tailwind 类似，旨在通过提供小的、独立的 CSS 类来构建样式。每个类只做一件事，组合起来形成完整的样式。使用场景：- 大型项目，尤其是需要高效的布局和样式调整时。- 需要减少样式重复的项目。优点：- 高效的代码复用。- 提高样式的可维护性。- 可以轻松地修改布局和样式，而无需修改整个 CSS。缺点：- 类名较长，HTML 中的样式代码显得冗长。- 学习曲线较高。---用的多的CSS技术Flex典型用途：- 创建水平和垂直居中的布局- 实现响应式设计- 动态调整容器内部元素的排列媒体查询媒体查询是响应式设计的核心工具之一，它使得在不同设备上展示不同样式成为可能。常见用法是根据屏幕尺寸来调整布局。典型用途：- 响应式设计- 根据屏幕宽度调整页面布局或字体大小- 控制不同设备上的显示效果Position（定位）定位是 CSS 中的一个基本概念，通过 position 属性可以控制元素的定位方式。常见的有 static, relative, absolute, fixed 和 sticky 等。典型用途：- 创建浮动元素- 固定元素（如固定导航栏）- 在容器内相对定位元素Transitions（过渡效果）CSS 过渡效果可以让你在元素的属性发生变化时添加平滑的过渡效果，常用于按钮、图片、导航栏等的交互效果。典型用途：- 鼠标悬停时的平滑动画效果- 改变背景色、宽度、透明度等属性时的平滑过渡伪类和伪元素用于在不添加额外 HTML 元素的情况下，对元素的特定状态或部分应用样式。典型用途：- :hover, :focus, :active 等交互状态- ::before, ::after 等用于生成内容和装饰Overflow（溢出处理）overflow 属性用于处理内容溢出的情况，常见用途是创建可滚动的区域或隐藏溢出内容。典型用途：- 创建带滚动条的容器- 隐藏溢出内容

2.6 本初子午 1面 oc1自我介绍2vue中父子组件通信3vue路由传参4vue nexttick5promise 介绍6vue created mounted生命周期7在组件中如何修改vuex中的数据16分钟纯水 vue基本未复习2.6 本初子午 二面1webpack在项目中的配置 模糊2plugin 和 babel 关系 模糊3对接口的处理 对数据结构进行处理了吗 没有处理4多人协作使用git的时候 发生冲突怎么办5把别人代码合并丢失掉怎么办6如何对axios进行二次封装的7对h5的理解 不全8不同权限如何展示不同菜单 ？？？9用户登录状态失效 让用户重新登录 怎么做10项目上线了吗 无后续：挂 项目基本了解不深入若有收获，就点个赞吧