面试高频版

1.盒子模型

标准盒模型：元素宽度 = content + padding + border
IE（怪异）盒模型：元素宽度 = content（包含 padding + borde
box-sizing: content-box; 默认的标准(W3C)盒模型元素效果，元素的 width/height 不包含padding
box-sizing: border-box; 触发怪异(IE)盒模型元素的效果，元素的 width/height 包含 padding

`2.BFC`（块级格式化上下文）

定义：BFC 是页面上的一个独立渲染区域，内部元素的布局不会影响外部元素。
触发方式：overflow: hidden/auto/scroll、float、position: absolute/fixed、display: inline-block/flex/grid。
作用：清除浮动、解决 margin 重叠问题、实现两栏自适应布局

3.选择器权重计算

内联样式：1000
id 选择器：100
class、伪类、属性选择器：10
标签、伪元素：1

4.清除浮动

父元素设置 overflow: hidden/auto 触发 BFC；
父元素使用伪元素 ::after { content:""; display:block; clear:both; }（最推荐）；
在浮动元素后加空标签并 clear: both

5.垂直居中的方案

line-height:200px(父元素高度)；text-align：center
定位+transform position:absolute; top:50%; transform:translateY(-50%)
display:flex; align-items:center; justify-content:center
display:grid; place-items:center

6.css3新特性

过渡 transition、动画 animation、2D/3D 变换 transform
阴影 box-shadow、圆角 border-radius、渐变 gradient
弹性盒子 flexbox、网格布局 grid
多列布局 columns

7.css3动画和过度

transition（过渡）：需要触发条件（如 hover），不能自动执行。
animation（动画）：定义关键帧，可自动循环播放。

8.隐藏页面元素

display: none → 元素不渲染，不占空间；
visibility: hidden → 元素不可见，但仍占空间；
opacity: 0 → 元素透明，占空间，仍可交互；
绝对定位移出屏幕（position: absolute; left:-9999px;）；
z-index: -1 或 clip-path 等视觉隐藏

9.rem / px / em / vw / vh 区别

px：绝对单位
em：相对父元素字体大小
rem：相对根元素字体大小
vw：相对视口宽度（1vw = 1% 宽度）
vh：相对视口高度（1vw = 1% 高度）

10.flex 布局

主轴方向：flex-direction
主轴：justify-content 控制对齐
交叉轴：align-items / align-content 控制对齐
是否换行：flex-wrap
子项：flex-grow、flex-shrink、flex-basis

11.如果要做优化css提高性能的方式

减少层级：避免过度嵌套选择器，尽量用类选择器。
合并与复用：复用样式，使用继承、变量，减少重复代码。
减少无效样式 ：删除没用的规则，避免使用 !important。
文件优化：压缩 CSS、合并文件，减少 HTTP 请求。
渲染优化 ：避免使用影响性能的属性（如 box-shadow、复杂动画），动画尽量用 transform 和 opacity，开启 GPU 加速。
缓存与加载优化：合理使用缓存，关键 CSS 内联，非关键 CSS 异步加载。

12.画一条0.5px的线

用 1px 高度再 transform: scaleY(0.5)；
在高分屏下直接用 0.5px + 媒体查询；
或用伪元素实现

13.如何画一个三角形

边框法：设置一个宽高为 0 的元素，用透明边框 + 实心边框组合出三角形；
clip-path：用多边形裁剪；
伪元素 / SVG：也能实现。

复制代码

  .triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red; /* 显示的那条边 */
  }

  .triangle {
    width: 100px;
    height: 100px;
    background: red;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
  }



  .box::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: red transparent transparent transparent;
  }

14.俩栏布局：左边定宽右边自适应方案

浮动 + margin ：左边 float:left +固定宽度;右边 margin-left；
绝对定位 ：父元素 position：relative; 左边 position:absolute; 固定宽度，右边 margin-left；
Flex 布局（推荐 ✅） ：父元素 display:flex;，左边定宽，右边 flex:1；
Grid 布局 ：父元素 display:grid; grid-template-columns: 定宽 auto;

`15.typeof类型判断`

typeof 可判断基本类型（string/number/boolean/undefined/symbol/bigint/function）。
缺点：对象、数组、null 都会返回 "object"。
补充：更精确可用 Object.prototype.toString.call(x)

`16.类型转换`

显式转换 ：Number()、String()、Boolean()、parseInt()。
隐式转换 ：+ 拼接字符串，== 会触发转换，if 判断触发布尔转换。
补充：JS 常有"假值"：0、NaN、''、null、undefined、false

`17.闭包`

一个函数内部可以访问其外部函数的所有变量，即使外部函数已经执行完毕
使用场景：创建私有变量、延长变量的生命周期

`18.原型与原型链`

每个函数都有一个prototype属性，这个属性指向一个对象，我们称之为"原型对象
原型对象包含可以由该函数创建的所有实例共享的属性和方法。
当访问一个对象的属性时，如果该对象自身没有这个属性，JavaScript会沿着原型链向上查找，直到找到该属性或到达原型链的末端(null)。

`19.原型继承和class继承`

原型继承 ：通过 Child.prototype = new Parent() 实现。
class 继承 ：用 extends + super，语法更清晰，实际也是基于原型链。

`20.模块化`

早期：IIFE、全局变量。
CommonJS （Node）：require/module.exports，同步。
AMD/CMD（浏览器）：异步加载。
ES Module ：import/export，静态分析，浏览器和 Node 都支持

`21.事件机制`

DOM 事件流分三阶段：捕获 → 目标 → 冒泡。
绑定事件可选择在捕获或冒泡阶段触发。
补充：event.stopPropagation()阻止冒泡，preventDefault() 阻止默认行为

`22.箭头函数`

没有 this，this 静态绑定到定义时的作用域。
没有 arguments，不能作为构造函数。
常用于回调函数，避免 this 丢失。

`23.js内存泄漏如何检测？场景有哪些`

检测：Chrome Performance/Memory 工具，观察堆快照。
常见场景：

全局变量未释放；
定时器/事件监听未清理；
闭包过度使用；
DOM 引用未移除

`24.async/await异步总结`

async 函数返回 Promise；
await 会阻塞后续代码，等待 Promise 结果；
实际是 Promise + generator 的语法糖；
错误处理需配合 try/catch

`25.eventLoop执行机制过程`

宏任务：script 整体、setTimeout、setInterval、I/O。
微任务：Promise.then、MutationObserver、queueMicrotask。
流程：

执行同步代码；
执行所有微任务；
执行一个宏任务 → 再清空微任务 → 循环

26.this对象的理解

this 的指向取决于函数的调用方式：

全局函数里是全局对象（严格模式下是 undefined）
作为对象方法调用时，指向该对象
构造函数中，指向实例
箭头函数不绑定 this，而是继承外层作用域的 this
还可以通过 call / apply / bind 显式修改 this

27封装组件的目的

复用、解耦、提高维护性和扩展性。通过抽象公共逻辑和 UI，我们能减少重复代码，保证项目风格一致

28.Monorepo

它指的是：把多个项目（应用 / 包 / 库）放在一个 Git 仓库里统一管理，而不是每个项目都独立开一个仓库。

不同的应用/模块/包共享一个仓库。
可以共享依赖、代码和工具链。
通过统一的构建工具（如 Turborepo、Nx、Lerna、Rush）来管理它们的依赖关系、构建流程和发布

29.ts的优势

1.类型检查-提前发现错误

2.智能提示更强，比js更安全

3.代码更易维护更可读，长期项目中尤其能体现出ts的价值

4.更安全的重构，对多人协作项目及其友好

5.提示与后端对接的准确性

30.tailwind的优势

Tailwind 是一个原子化 CSS 框架，它最大的优势是开发效率高、命名负担小、响应式简洁、风格统一。通过配置文件可统一主题样式，同时 JIT 模式让打包体积更小，非常适合现代前端框架（如 React 和 Vue）的组件化开发。

31.h5新增了哪些内容

语义化标签

标签	用途
`<header>`	页面或区块的头部
`<footer>`	页面或区块的底部
`<nav>`	导航栏
`<section>`	页面的一个区块 / 章节
`<article>`	独立的内容块，如文章
`<aside>`	侧边栏 / 附加内容
`<main>`	页面主要内容
`<figure>` 和 `<figcaption>`	图片/图表与标题组合
`<h1>` ~ `<h6>`（当然包括 `<h5>`）	仍是标题，但更强调语义化使用

新的表单控件和输入类型

HTML5 为 <form> 和 <input> 新增了很多类型，比如：

<input type="email">
<input type="number">
<input type="date">
<input type="range">
<input type="color">
并提供了表单验证功能（如 required、pattern）

多媒体支持（无需 Flash）

<video>：原生嵌入视频
<audio>：原生嵌入音频
<canvas>：画布，用于绘图、图表、游戏等
<svg>：矢量图形支持更好