美文网首页
前端面试题总结

前端面试题总结

作者: 追梦丶墨染 | 来源:发表于2020-05-18 18:03 被阅读0次
    1.请介绍下回流和重绘

    回流:当我们对DOM的修改引起了DOM几何尺寸的变化(比如修改宽高和隐藏元素)时,浏览器需要重新计算元素的几何属性(其它元素的几何属性和位置也会因此受到影响),然后将计算结果重新绘制出来。这个过程就是回流也叫重排。

    重绘:当我们对DOM的样式进行了修改,但是并没有其几何属性(比如修改背景和颜色)时,浏览器不需要重新计算元素的几何属性,直接为该元素重绘样式,这个过程叫做重绘。

    回流一定会导致重绘,但是重绘却不一定导致回流。在代码优化过程中,要尽量减少回流和重绘的次数。

    2.react、vue中key值的作用

    1、diff算法中,通过判断key和tag判断是否同一节点
    2、减少渲染次数,提升渲染性能

    3.setState异步问题

    有时异步(普通使用)、有时同步(DOM事件、setTimeout)
    有时合并(对象形式)、有时不合并(函数形式)

    4.Object.hasOwnProperty和"in"运算符有什么区别

    hasOwnProperty()方法返回一个布尔值,指示对象自身属性中是否具有指定的属性,因此这个方法会忽略掉那些从原型链上继承到的属性。

    "in"运算符,如果指定的属性在指定的对象或其原型链中,则in 运算符返回true

    5.Object.freeze() 和 const 的区别是什么

    const声明一个只读变量,一旦声明,常量的值就不可以改变,如:
    const person={name:"Tom"};此时的name属性值还是可以改变的;

    Object.freeze()更适用于对象值,它使对象不可变,也不能更改其属性,如Object.freeze(person)

    6.Object.seal()

    Object.seal()方法封闭一个对象,阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要可写就可以改变。

    7.!!运算符能做什么

    !!运算符可以将右侧的值强制转换为布尔值,这也是将值转换为布尔值的一种简单方法;如:

    console.log(!!null);//false
    console.log(!!undefined);//false
    
    8.闭包

    闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量

    var sMessage = "hello world";
    
    function sayHelloWorld() {
      alert(sMessage);
    }
    
    sayHelloWorld();
    
    9.手写一个深度拷贝
    function deepClone(obj={}){
      if(obj===null || typeof obj !=='object'){
        return obj;
      }
      let result={};
      if(result instanceof Array){
        result=[];
      }
      for(let key in obj){
        if(obj.hasOwnProperty(key)){
          result[key] = deepClone(obj[key])
        }
      }
      return result;
    }
    
    10.js事件循环机制

    这边给出一个地址,作者解释的很详细:https://www.jianshu.com/p/667a20d008cf

    11.数据结构中数组和链表

    数组:数组是可以再内存中连续存储多个元素的结构,在内存中的分配也是连续的,数组中的元素通过数组下标进行访问,数组下标从0开始。
    优点:
    1、按照索引查询元素速度快
    2、按照索引遍历数组方便

    缺点:
    1、数组的大小固定后就无法扩容了
    2、数组只能存储一种类型的数据
    3、添加,删除的操作慢,因为要移动其他的元素。

    适用场景:
    频繁查询,对存储空间要求不大,很少增加和删除的情况。

    链表:链表是物理存储单元上非连续的、非顺序的存储结构,数据元素的逻辑顺序是通过链表的指针地址实现,每个元素包含两个结点,一个是存储元素的数据域 (内存空间),另一个是指向下一个结点地址的指针域。根据指针的指向,链表能形成不同的结构,例如单链表,双向链表,循环链表等。
    优点:
    链表是很常用的一种数据结构,不需要初始化容量,可以任意加减元素;
    添加或者删除元素时只需要改变前后两个元素结点的指针域指向地址即可,所以添加,删除很快;

    缺点:
    因为含有大量的指针域,占用空间较大;
    查找元素需要遍历链表来查找,非常耗时。

    适用场景:
    数据量较小,需要频繁增加,删除操作的场景

    12.Js的垃圾回收机制

    1.标记清除
    案例:

    function fn(){
      var a=10;//被标记"进入环境"
    }
    fn();//执行完毕,a又被标记"离开环境",被回收
    

    2.计数清除
    案例:

    var arr=[1,2,3];//数组[1,2,3]是一个值,会占用内存,变量arr是对值得一个引用,所以引用次数为1;
    arr=null;//arr被重置为null,解除了对数组的引用,所以数组[1,2,3]会被回收清除
    

    相关文章

      网友评论

          本文标题:前端面试题总结

          本文链接:https://www.haomeiwen.com/subject/jdnvwhtx.html