前端面试题

1.画一条0.5的线

<div class="div"></div>

.div{
    height:1px;
    transfrom:scaleY(0.5);
    transfrom-origin:50% 100%;
}

---

2.用css画一个三角形

<div class="box"></div>

.box{
    border:10px solid;
    width:0px;
    height:0px;
    border-color:red transparent transparent transparent;
}

---

3.css中水平垂直居中的方法

        a、margin:0 auto

        b、position:obsolute

        c、文字水平对齐，行高

        d、flex布局

---

4、盒子模型

         (1)、w3c盒模型/标准盒模型

                一个块=content(width,height)+padding+border+margin

        (2)、ie盒模型

                一个块=content(width,height)+margin

---

5、严格模式（use strict）

        (1)、在函数外定义”use strict“ ，在此以下所有代码都有效

        (2)、在函数内定义"use strict" ，在函数内有效

---

6、call、apply、bind的区别

       (1)、相同点：都是改变this的指向

        (2)、不同点

               a、传参不同：call、bind是通过参数序列进行传参   apply是通过数组类型进行传参

                b、使用不同：call、apply能够自动调用   bind需要手动去调用

---

7、px、rem、em、vh、vm各自代表含义

       (1)、px：相对长度单位，相对于显示器屏幕分辨率而言

       (2)、rem：相对于根元素（html），只需要设置根元素大小就可以将整个页面成比例的调整

       (3)、em：相对于父元素的font-size，具有继承的特点

       (4)、vh：指可视窗口的高度

       (5)、vm：相对于可视窗口中宽度或者高度中较小的

---

8、利用递归计算1~100的和

       

function sum(num1,num2){
    let getSum=num1+num2
    if(num2+1>100){
        return getSum
    }else{
        return sum(getSum,num2+1)
    }
}

sum(1,2)

---

9、如何实现深拷贝

       (1)、利用JSON.stringfy和JSON.parse

let arr1=['red','blue']
let arr2=JSON.parse(JSON.stringfy(srr1))

console.log(arr2)   //['red','blue']
arr1.push("qqq")
console.log(arr1)  //['red','blue','qqq']
console.log(arr2)  //['red','blue']

        (2)、利用递归

function deepClone(obj){
      let objClone=obj instanceof Object?{}:[]
      if(obj&& typeof obj==="object"){
            for(key in obj){
                //hasOwnProperty检测属性是否为对象的自有属性
                if(obj.hasOwnProperty(key)){
                    if(obj[key]&&typeof obj[key]==="Object"){
                        objClone[key]=deepClone(obj[key])
                    }else{
                        objClone[key]=obj[key]
                    }
                }
            }
      }
    return objClone
}
let ob={
    x:1,
    y:2
}

d=deepClone(ob)

---

10、js中的闭包

           概念：函数使用了不属于自己的变量（函数套函数，内部函数使用了外部函数的变量）

           作用：避免变量的全局污染

           弊端：使用过多会造成变量释放不掉（内存泄漏）

           解决办法：在内部函数返回前手动的释放掉变量

---

11、promise和async  await的区别

           1、promise是通过链式调用，直接在then中来做成功之后的回调函数，使用catch来做错误处理

           2、async则直接将其变成一个同步的写法，等待await后面的代码执行完后，再进行下一步，async简洁、可读性强，写法更优雅

---

12、作用域与作用域链

           作用域：指程序源代码中定义变量的区域（全局作用域和局部作用域）

           作用域链：当在一个函数内部声明另一个函数时， 就会出现函数嵌套的效果。当函数嵌套时，内层函数只能在外层函数作用域内执行，在内层函数执行的过程中，若需要引人某个变量，首先会在当前作用域中寻找，若未找到，则继续向上一层级 的作用域中寻找，直到全局作用域 

---

13、http和https

       http：超文本传输协议，用于在浏览器和服务器之间传递信息的，是以明文形式发送，不适合传输敏感信息，比如：身份证、账号、密码

       https：安全套接字超文本传输协议，在http的基础上加了ssl协议，ssl是依靠证书服务，对浏览器和服务器之间的通信进行加密，https协议是由ssl+http所构成，是可加密的，身份认证的协议，比http更安全

        区别：http是明文传输，https是加密传输

                   https是需要申请证书，证书需要费用

                   连接方式不同，端口不同，http 80  https 443

                   http连接是无状态连接，https是由ssl+http构成的，是可加密的，身份认证的网络协议

---

14、xss攻击

           概念：跨站脚本攻击，网web页面中插入恶意的html代码，用户请求该页面时，该代码将会执行，从而达到攻击用户的目的

          三种攻击类型：存储型、反射型、DOM型

           解决方式：

                1、对用户输入进行过滤，过滤所有的非法字符

                2、采用html转义（局限性）

                3、对于链接跳转，要进行内容检测

                4、限制输入长度

                5、数据进行加密

---

15、vue中scoped原理

           作用：让样式只在当前组件中生效，不影响其他组件

           原理：给节点新增自定义属性，css根据属性选择器添加样式

---

16、vue中v-if和v-show的区别

           v-if是通过添加和删除元素的方式来控制元素进行显示和隐藏的，有更高的切换消耗

           v-show是通过控制css样式中的display修改成none来控制元素的显示和隐藏，有更高的初始消耗

---

17、vue中data为什么是一个函数

其实就是提供作用域，vue为我们提供了数据驱动视图，数据驱动原理是观察者模式，观察者模式需要发布者，data就是充当发布源，它是函数时，保证了只有当前页面使用其中的数据会随之改变，其他地方不受影响。

---

18、vue中computed、methods、wath的区别

        1、computed和methods的区别

                computed具有缓存机制，而methods没有

        2、computed和watch的区别

                computed是计算某一个属性的改变，当所依赖的属性发生改变时，计算属性会监听到并返回

                watch是监听，他可以监听到data中的数据、computed、$router、props、$emit，所依赖的数据发生改变后才执行

---

19、vuex

        vuex是用来对状态进行集中式管理，可以进行复杂的组件之间的传值

        vuex有state、getters、actions、mutations、modules五个属性

                state:是用来存放数据的

                getters：类似于组件中的computed

                actions:在组件中通过this.$store.dispatch触发，在此一般用来进行异步处理，actions是一个对象，对象中有多个属性，每个属性值为函数，接受一个参数（state）

                mutations:在actions中通过commit进行触发，也可以在组件中通过this.$store.commit触发，在此处可以进行对state中的属性进行操作

---

20、浏览器兼容性问题及解决办法（部分）

        兼容性问题：指的是ie和浏览器之间的问题

常见的兼容性问题：

1、不同浏览器的标签默认的margin 和padding不同

        解决方案： css 里增加通配符 * { margin: 0; padding: 0; }

2、图片默认有间距

        解决方案:设置float为img布局

3、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；

        解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

4、事件对象兼容

        var e = e || window.event

5、阻止事件冒泡兼容

        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true

6、阻止默认行为兼容

        e.preventDefult ? e.preventDefult() : e.returnValue = false

7、事件监听兼容

        obj.addEventListener("事件去掉on",function(){},布尔值)

        obj.attachEvent("事件带on"，function(){}) //IE

---

21、z-index 在哪些场景下有效，在哪些场景下会失效

有效：通常使用在两个重叠的标签下，控制一个标签在另一个标签上方或者下方，需配合定位使用

失效：父元素position为relative时，子元素的z-index失效

​ 元素在设置z-index时，又设置了float浮动

---

22、width: 120% 和 transform: scaleX(1.2) 有什么区别

       

---

23、浅拷贝和深拷贝的区别

       深拷贝递归地复制新对象中的所有值或属性，而浅拷贝只复制引用关系

        深拷贝中新对象的修改不会影响旧对象的，而浅拷贝会影响

        深拷贝不与旧对象共享相同的属性，而浅拷贝会

---

24、Vue中key是用来做什么的？为什么不推介使用index作为key

 使用 index 做 key，破坏顺序操作的时候， 因为每一个节点都找不到对应的 key，导致部分节点不能复用,所有的新 vnode 都需要重新创建

       

---

25、vue父子组件通信方式哪几种

     

---

26、如果应用的性能不太好，怎么去排查和改进