一面面试题1. 说说对重绘和重排的理解 js获取宽高会触发重排操作吗 ‌transform不会直接触发重绘，而是通过GP

1. 说说对重绘和重排的理解 js获取宽高会触发重排操作吗

‌transform不会直接触发重绘，而是通过GPU加速在合成层处理，从而避免主线程的重排和重绘。

js获取宽高以及滚动等相关信息都会触发浏览器重排计算，因此在制作动画时候，应尽力服用已经获取的值

a. 核心原理

‌独立合成层‌
当使用transform时，浏览器会为元素创建独立的复合层，并将其交给GPU处理。这意味着动画或变形操作在单独的图层中进行，不会影响主文档流，因此无需触发主线程的重排或重绘。
‌GPU加速优势‌

- 传统CSS属性（如left、top）修改时会触发主线程计算布局（重排），进而导致重绘。
- transform的变形操作（如旋转、缩放）直接在合成层完成，仅需合成线程和GPU参与，避免了主线程阻塞。

‌性能对比示例‌

- 使用position: absolute+left实现动画：每帧触发重排和重绘，性能较差。
- 使用transform: translateX()实现动画：仅触发合成层更新，性能更高。

2. 开发一个位移效果，我用left和transform哪个效果更好，为什么

原因同题一

3. margin塌陷问题怎么解决的

bfc盒问题

overflow:hidden，绝对定位，float浮动

4. css3单行省略怎么实现

text-overflow: ellipsis;overfloe:hidden;white-space:nowrap;

5. css3变量你了解吗

适用于主题切换，以及开发通用ui组件

声明: --width: 10px;

使用: width:var(--width);

6. em,rem,vw,vh

em基于自身元素的font-size或者父级往上最接近的一个font-size缩放

rem基于html跟结点缩放

vw基于可视窗口宽度

vh基于可视窗口高度

7. typeof和instanceof的区别

typeof用于判断基础数据类型，如number，string，object，function等，除去typeof还可以通过Object.prototype.toString.call(1)判断

instanceof用于判断引用类型，如果[] instanceof Array

8. 怎么实现instanceof

function myInstanceOf(item, target) {
    while (item.__proto__) {
      if (item.__proto__ === null) {
        break;
      }
      if (item.__proto__ === target.prototype) {
        return true;
      }
      return myInstanceOf(item.__proto__, target)
    }
   return false;
}

myInstanceOf([], Array);

class A1 {
    constructor(params) {
        
    }
}
class A2 extends A1 {
    constructor(params) {
        
    }
}
const _a2 = new A2();
myInstanceOf(_a2, []);
myInstanceOf(_a2, A2);
myInstanceOf(_a2, A1);

9. 类数组怎么转成真正数组

const $all = document.querySelectorAll('a');
Array.from($all);
[...$all];
Array.prototype.slice.call($all);

10. 怎么修改函数的this对象指向如果不通过call,apply,bind还有别的方式吗

function test() {
 console.log(this.a)
}
const obj = {
 a: 1,
 test
}

11. 箭头函数和普通函数的区别是什么

无法实例化，没有arguments，没有this作用域，无法修改this指向，没有作用域提升

12. script标签defer和async的区别(可以跳过，对方厉害就问)

defer异步加载，加载完之后，在$(body).ready/DOMContentLoaded事件触发之前执行

async异步加载，加载完立即解析，会阻碍dom渲染

13. forEach和map的区别

都是遍历函数，map会返回一个新的数据

14. for of和for in的区别

for of遍历可迭代对象

for in遍历对象key

15. 怎么让对象可以支持for of遍历

Object.prototype[Symbol.iterator] = function (params) {
    return Object.keys(this)[Symbol.iterator]()
}
Object.prototype[Symbol.iterator] = function *(params) {
    return yield *Object.keys(this)
}
Object.prototype[Symbol.iterator] = function (params) {
  const keys = Object.keys(this)
  let index = 0;
  return {
    next() {
      const value = keys[index];
      const done = index >= keys.length;
      index++
      return {
        value,
        done,
      }
    }
  }
}

16. ==和===的区别,Object.is

== 不判断数据基础类型，

=== 先判断类型，进行类型转换判断值

Object.is与===功能基本一致，但是Object.is对NaN和-0/+0的处理与===不一致，Object.is(NaN,NaN) 等于true，Object.is(-0, 0) 等于false

17. cookie、localStorage，sessionStoreage js可以修改cookie吗

可以修改cookie

18. array.reverse是返回新数组还是改变老数组

修改老数组

19. Promise/A+ 规范

这里只列举一些比较核心的

promise状态必须是这三个状态中的一种：等待态pending，解决态fulfilled或拒绝态rejected
promise状态是不可逆的，状态的变更是单向的，只能从Pending -> Fulfilled 或 Pending -> Rejected
Promise必须提供一个then方法来访问当前或最终的值或原因。

Promise的then方法接受俩个参数：

promise.then(onFulfilled, onRejected)

20. 跨窗口通信

可以先不问

juejin.cn/post/707746…

21. 强缓存，协商缓存，cdn

可以先不问

22. react 里为什么要有useEffect

23. useEffect监听一个state，state变化时候，如果给他定义了一个返回函数，那它的return函数会执行吗 useEffect可以放到if判断里吗

会执行

24. useEffect如果监听一个useRef的值，我改变这个值时候，会触发变化吗

不会

25. React.memo，你了解吗，它接收的第二个函数可以用来做什么

用来组组件渲染优化，默认是浅对比props，第二个参数接收一个函数，可以自定义是否渲染，false不渲染，true渲染

26. 说说看useCallback

保证function指针不变，比如useEffect，如果配置React.memo，可以有效避免函数重复渲染

27. React 错误边界 react组件如果任何一个组件崩溃都会导致页面空白，怎么处理这个问题

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你也可以将错误日志上报给服务器
    console.error("Caught an error:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;
使用错误边界

28. const [a, setA] = useState(0); setA(a+1);setA(a+1);setA(a+1)

页面输出1

29. 开发弹窗组件，按照规范应该将弹窗dom渲染到body下，react18中新增了一个api，可以指定react组件渲染到某个dom下面，api是什么

import { createPortals } from 'react-dom';

createPortals(<div>111</div>, document.querySelector('#app'))

30. hook component 如果设置接受一个ref


React.forwardRef(Page);

31. 虚拟dom是什么作用

32. 什么是受控组件和非受控组件？

33. console输出多少

下面，当面在某个时候我执行了下setA(a+1)，这时候定时器里输出多少，

答案0，

为什么拿不到最新值你有了解过吗

怎么可以拿到最新值

const [a, setA] = useState(0);

useEffect({
  setInterval(() => {
      console.log(a)
  }, 1000)
}, [])
return <div>
  {a}
  </div>

function useLatest(value) {
  var ref = (0, _react.useRef)(value);
  ref.current = value;
  return ref;
}

一面面试题