前端八股Day5——XHS某中厂实习前端一面

没写完，睡醒补

CSS盒模型

//出现频率好高，感觉每次写面经都遇到

W3C标准盒模型(content-box)：盒子宽高=width/height+padding+border+margin

IE怪异盒模型(border-box)：盒子宽高=width/heigth(包括padding和border)+margin

默认标准切换怪异：box-sizing:border-box

对BFC有了解吗

BFC全称Block Formatting Context，块级格式化上下文，具有隔离性，BFC内部元素完全与外部隔离不会互相影响布局，内部默认垂直排布间距由margin决定，BFC会自动包裹浮动元素，不会造成高度塌陷问题，不同BFC间外边距不会合并

/* 常用触发方式 */
.element {
  display: flow-root;        /* 最干净的BFC触发方式 */
  overflow: hidden/auto;     /* 非visible值（慎用可能造成内容裁剪） */
  float: left/right;         /* 非none值 */
  position: absolute/fixed;  /* 绝对定位 */
  display: inline-block;     /* 行内块元素 */
  contain: layout/content/paint; /* CSS Containment规范 */
}

CSS选择器，优先级

！important > 内联 > id > 类 = 伪类 = 属性 > 标签 = 伪元素 = 后代  > 子 = 相邻 > 通配

用到过哪些布局

 1. 文档流布局（Normal Flow）

特点：元素按HTML顺序自然排列

痛点：难以实现复杂布局

2. 浮动布局（Float）

应用场景：早期多栏布局

缺陷：需手动清除浮动（clearfix hack）

3. 定位布局（Position）

典型应用：悬浮元素、模态框

1. Flexbox（弹性盒子）

核心优势：

• 一维布局（主轴方向控制）

• 动态分配剩余空间

• 完美垂直居中方案

  2. Grid（网格布局）

  核心优势：

  • 二维布局（行列双向控制）

  • 精准控制网格轨道尺寸

  • 支持命名网格区域

    3. 多列布局（Multi-column）

    应用场景：报纸式文本排版

    Flex布局有哪些属性

     

    响应式怎么实现的

     

    水平垂直居中的方法

    //出现过好多次
    //#1 绝对定位
    .container{
    position: absolute,
    left: 50%,
    top: 50%,
    transform: translate(-50%,-50%),
    }
    //#2 flex
    .container{
    display: flex,
    justify-content: center,
    align-items: center,
    }
    //#3 grid
    .container{
    display: grid,
    place-items: center,
    }
    //#4 行内块
    .parent{
    display: inline-block,
    .child{
    text-align: center,
    vertical-align: center,
    }
    }
    //#5 水平 margin
    .container{
    margin: 0 auto,
    }

    闭包

    函数嵌套，内层函数变量可访问外层函数变量，并于内层函数返回接口，导致外层函数变量一直存在，未被销毁，主要应用场景为防抖节流，滥用易造成内存泄漏

    闭包使用场景

    防抖节流

    防抖和节流

    防抖：触发事件回调，n秒后执行，若n秒内再次触发则重新计时

    节流：频繁触发事件回调，单位时间内只执行一次，适用于滚动条

    箭头函数和普通函数的区别

     语法简洁，无构造函数，不能调用

    箭头函数this指向

    父级作用域，无父级指向Windows

    无论普通函数还是箭头函数this指向机制

    普通函数，构造即隐式绑定this指向自己

    箭头函数，指向外层作用域

    事件监听回调函数，即谁动指向谁

    显示绑定： call apply bind

    显示绑定指向箭头函数本身，无效

    深拷贝和浅拷贝

    一、核心概念对比

    浅拷贝（Shallow Copy）

    • 定义：仅复制对象的一层属性

    • 引用处理：嵌套对象复制引用地址（新旧对象共享嵌套层）

    • 内存占用：较少（仅复制第一层）

    • 修改影响：修改嵌套对象会影响原对象

      深拷贝（Deep Copy）

      • 定义：递归复制对象的所有层级属性

      • 引用处理：嵌套对象完全新建独立副本

      • 内存占用：较多（全层级独立存储）

      • 修改影响：新旧对象完全独立，互不影响

        ---

        四、使用场景对比

        1. 简单对象且无嵌套引用

           • 推荐方案：浅拷贝

           • 原因：性能高效，实现简单

           • 配置对象/状态管理

             • 推荐方案：深拷贝

             • 原因：避免意外修改原始数据

             • 含函数/特殊类型（如Date、RegExp）的对象

               • 推荐方案：Lodash.cloneDeep

               • 原因：第三方库处理复杂类型更完善

               • 需要极致性能的大数据操作

                 • 推荐方案：不可变数据结构（如Immutable.js）

                 • 原因：深拷贝成本过高时，通过结构共享优化性能

                   //浅拷贝
                   // 方法1：Object.assign
                   const obj = { a: 1, b: { c: 2 } };
                   const shallowCopy1 = Object.assign({}, obj);
                   // 方法2：展开运算符
                   const shallowCopy2 = { ...obj };
                   // 方法3：数组浅拷贝
                   const arr = [1, { d: 3 }];
                   const shallowArr = arr.slice(); // 或 arr.concat()

                   //深拷贝
                   // 方法1：JSON序列化（有局限性）
                   const deepCopy1 = JSON.parse(JSON.stringify(obj));
                   // 方法2：递归实现（基础版）
                   function deepClone(source) {
                     if (typeof source !== 'object' || source === null) return source;
                     const target = Array.isArray(source) ? [] : {};
                     for (const key in source) {
                       if (source.hasOwnProperty(key)) {
                         target[key] = deepClone(source[key]);
                       }
                     }
                     return target;
                   }
                   // 方法3：使用第三方库 lodash
                   import _ from 'lodash';
                   const deepCopy3 = _.cloneDeep(obj);

        基本数据类型和引用数据类型指的哪些

        基本：String Number Boolean Null Undefined Symbol BigInt

        引用：Object

        事件循环

        宏任务和微任务

        console.log('Script Start'); // 同步任务（宏任务）
        setTimeout(() => { 
          console.log('setTimeout'); // 宏任务回调
        }, 0);
        Promise.resolve()
          .then(() => {
            console.log('Promise 1'); // 微任务1
          })
          .then(() => {
            console.log('Promise 2'); // 微任务2
          });
        console.log('Script End'); // 同步任务（宏任务）
        /* 输出顺序：
        Script Start
        Script End
        Promise 1
        Promise 2
        setTimeout
        */

        

        怎样处理跨域

        http缓存策略

        响应式原理

        组件通信

        从url输入到页面渲染的过程