2020-04-20 15:01 已编辑华南理工大学前端工程师

关注

面向面经之我自己的携程一面

4.16面的
面试官似乎在拖时间哈哈哈，强行问了26分钟
下面的问题没有逻辑，我是想到啥写啥

1.css选择器权重

选择器：
内联样式 1000
#id选择器 0100
.类、伪类、属性 0010
通用、子、相邻 0001
继承的属性没有权重

2.vue框架和别的框架有什么区别

3.css水平居中

对于行内元素，父元素设置text-align
对于块级元素（元素定宽）
1.可以直接设置margin-left和margin-right为auto
2.设置绝对定位，left：50%，margin-left：此元素一半宽度；
3.设置绝对定位：左上右下都设为0，margin：auto；
对于块级元素（元素不定宽）
1.flex布局，父元素设置display：flex，flex-direction：column且align-items为center
2.flex布局，父元素设置display：flex，子元素margin：auto
3.设置父元素为inline-block，左50%，子元素relative，右50%；
4.绝对定位，左50%，transform，tranlateX（-50%）

4.项目相关

5.怎么给一个dom元素添加一个类

我回答的是：js用getElementById获取这个dom元素，然后用setAttribute添加一个类
他一直问，还有吗，然而我不知道了
ans：
图片说明

6.let和var的区别

let在一个块级作用域里，外部不可获取，而var声明在块级作用域里也仍然可以被外部获取
子问题：在函数内部声明一个var的b，在外部访问这个b可以访问到吗
尼玛，可以啊
为什么我会觉得不可以
傻子傻子

let没有变量提升，var有

7.const一个数组，是否能够push一个数据进去

为什么能或不能

可以push
因为const实际保证的不是变量的值不能改变，而是变量指向的那个内存地址不能改动。对于简单类型的数据，值就保存在变量指向的内存地址，所以等同于常量。但是对于复合类型的数据而言，变量指向的内存地址保存的只是一个指针，const只能保证这个指针是固定的。至于它指向的数据结构是不是可变的，这不能控制。

8.vue里的data如果改变了一个数据，是否能在view里显示出来

参考了别人的文章写的笔记，但是忘记了是哪篇文章，如有冒犯，十分抱歉

!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>
<!-- 在vue中，data数据改变了，视图没有改变的常见情况 -->
<!-- 直接通过等号改变数据 -->
<!-- 直接通过等号改变长度 -->
<body>
    <div id="app">
        {{arr}}
        <div class="demo" ref="refDemo">
            方法一:{{arr[2]}}

          <button @click="Add">+</button>
              方法二：obj：{{obj.test[0].testStr}}
              方法三:
              <div  >{{test}}</div>
              <div v-if="test"></div>
        </div>
    </div>


  <script>

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        arr:[1,2,3,4,5,6],
          obj:{
              test:[{testStr:3}],
          },
          test:false
      },
      methods: {
        Add(){
          // 第一种方法  this.$forceUpdate()

          // this.arr[2]+=this.arr[2]

          // console.log('this.arr[2]:'+this.arr[2])
          // this.$forceUpdate()
           //=============================================
          //第二种方法 $set()

          // this.$set(this.obj.test[0],'testStr',this.obj.test[0].testStr+3)

           //=============================================
            // 方法三修改另一个data里面的值主动更新触发渲染

          //this.arr[2]+=this.arr[2]
          // this.test =!this.test
           //=============================================
          //方法三优化版
          this.arr[2]+=this.arr[2]
          this.test=true

         this.$nextTick(() => {
           this.test = false
         })

      }
      }
    });
    // 这些操作是不能实时被检测到的，即不是响应式的
   vm.arr[2]=1;
   vm.arr.length=1;

    //数组，索引，要改成的数据
    Vue.set(vm.arr,1,0);//这个位置为什么会只有两个值？  
    console.log(vm.arr); 
    vm.arr.splice(0,1,2);//添加删除对象

    // 已经创建的实例，不能动态添加根级别的响应式属性
    // 但是可以用vue.set向嵌套对象添加响应式属性
    Vue.set(vm.obj,'age','30');
    console.log(vm.obj);

    // 为已有对象添加多个新的响应式属性
    vm.obj=Object.assign({},vm.obj,{
        laji:13,
        shagua:'chen'
    })
    console.log(vm.obj);


  </script>
</body>

</html>

9.如果一个页面有很多图片，要怎么进行优化

我说的图片懒加载

10.你说当这个页面滑下来再加载，怎么监听这个滑下来

参考链接：https://zhuanlan.zhihu.com/p/55311726

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script> -->
    <style>
        img {
            display: block;
            width: 100%;
            height: 300px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <!-- 图片是img标签，图片的来源是src属性，浏览器是否发出请求就是根据是否有src属性决定的
        那么在没进入可视区域的时候，我们先不给img标签赋src属性，这样就不会发送请求
    -->

    <!-- 因为图片需要很多内存，全部加载的话会影响用户体验，且浪费用户的流量 -->

    <!-- 效果：这样能防止页面一次性向服务器发送大量请求，导致服务器响应页面卡顿崩溃 -->
    <img data-src="./images/dahuangmao-01.png" alt="">
    <img data-src="./images/dahuangmao-02.png" alt="">
    <img data-src="./images/dahuangmao-03.png" alt="">
    <img data-src="./images/dahuangmao-04.png" alt="">
    <img data-src="./images/dahuangmao-05.png" alt="">
    <img data-src="./images/dahuangmao-06.png" alt="">
    <img data-src="./images/dahuangmao-07.png" alt="">
    <img data-src="./images/dahuangmao-08.png" alt="">
    <img data-src="./images/dahuangmao-09.png" alt="">
    <img data-src="./images/dahuangmao-10.png" alt="">
    <img data-src="./images/dahuangmao-11.png" alt="">


    <script>
        // 相关api
        // document.documentElement.clienrHeight获取屏幕可视区域的高度
        // documentElement就是html元素，也就是文档本身
        // clientHeight包括内边距和内容，不包括border和margin

        // element.offsetTop获取元素相对于文档顶部的高度

        // document.documentElement.scrollTop
        // 获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离


        // 所以，当offsetTop==scrollTop+clientHeight时，就即将要显示了
        var imgs = document.querySelectorAll('img');

        //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
        function getTop(e) {
            var T = e.offsetTop;
            while (e = e.offsetParent) {
                T += e.offsetTop;
            }
            return T;
        }

        function lazyLoad(imgs) {
            var H = document.documentElement.clientHeight;//获取可视区域高度
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                if (H + S > getTop(imgs[i])) {
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
            }
        }

        window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
            lazyLoad(imgs);
        }
    </script>
</body>

</html>

11.http他的返回里有什么东西

由响应行、响应头、响应体组成

响应头里有http协议/版本状态码状态
比如 HTTP/1.1 200 OK\n- 响应头里
Server：该响应头是服务器告诉浏览器当前的服务类型和版本
Accept-Ranges：bytes 表明服务器支持range请求，以及服务器只允许使用bytes
ETag被请求变量的实体值
Last-Modified：服务器上文件的最后修改时间
Content-Type服务器告诉浏览器响应的内容是什么类型，以及使用的是什么字符编码
Content-Length服务器告诉浏览器响应实体的大小
Date服务器是在什么时候响应回浏览器

12.http的状态码有哪些

自己查
我累死了

13.同源策略是啥

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方的源

子问题：怎么判断是否同源
协议域名端口三者相同只要有一个不同就不是同源
子问题：同源策略的限制
cookie、localStorage、indexdb无法读取
dom无法获得
ajax请求不能发送

14.怎么跨域

我说了一堆就是没说cors

1.document.domain\n只针对cookie
只针对父域相同，子域不同
2.jsonp
3.location.hash
针对完全不同源的页面
父窗口可以把信息传入子窗口的#后面的部分
4.window.name
针对同一个窗口的页面，前一个网页设置了这个属性，后一个网页可以读取
将信息写入window.name
5.postMesaage\n可以读dom和localstorage
开启window之后，用possMessage直接传到信息
但是要通过监听message来看是否变化
6.cors
7.webSocket
设置origin。
表示该请求的请求源，发自哪个域名
如果该请求源在白名单内，服务器就会有响应。

15.那你知道cors吗

啊该来的还是会来。。我复习就忘了看这个
绝望

参考链接：http://www.ruanyifeng.com/blog/2016/04/cors.html

跨域资源共享
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了ajax只能同源使用的限制
整个cors通信过程，都是浏览器自动完成，不需要用户参与。
对于开发者而言cors通信与同源的ajax通信没有差别，浏览器一旦发现ajax请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，只要服务器实现了cors接口，就可以跨源通信

两种请求

简单请求
请求方法：head、get、post
头信息不超过：accept、content-language，last-event-id，content-type
浏览器直接发出cors请求，在头信息中添加一个origin字段，用来说明本次请求来自哪个源。
服务器根据这个值，决定是否同意这次请求。
如果origin指定的源，不在许可范围内，服务器会返回一个正常的http回应，浏览器发现，这个头信息没有包含Access-Control-Allow-Origin字段就知道错误了。从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。无法通过状态码识别，因为可能是200
如果是在许可范围内，返回的响应会多几个头信息字段

cors请求默认不发送cookie和http认证信息，如果要把cookie发送到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials为true\n另一方面，开发者要在ajax请求中打开withCredentials属性
非简单请求
请求方法是put或delete或者content-type为application/json

1.预检请求---使用options，表示这个请求是用来询问的

关键字段是origin\n- 会在正式通信前增加一次http查询请求，称为预检请求
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些http动词和头信息字段，得到肯定答复浏览器才会发出正式的XMLHttpRequest请求，否则就报错
除了origin字段，预检请求的头信息包括下面两个特殊字符
Access-Control-Request-Method必须，列出会用到的http方法
Access-Control-Request-Headers指定浏览器cors请求会额外发送的头信息字段
预检请求的回应\n服务器收到以后，检查了origin，Access-Control-Request-Method和Access-Control-Request-Headers后，确认允许，则会返回

如果否认，则返回正常http回应，但是没有任何cors相关的头信息字段。

2.正常请求和回应
通过了预检，就都跟简单请求一样

16.学了多久前端，为啥想做前端

17.vue的生命周期

初始化啥的都没开始
beforeCreate
初始化事件、开始数据的绑定，所以在created之后就能取到data属性的值
created
判断是否有el选项，判断是否有template，如果有的话就按template的内容编译，如果没有的话，就编译外部的html代码
beforemount
给vue实例对象添加el成员，替换挂载的dom元素，所以在mounted之后整个页面就渲染完成了
mounted
数据改变才会触发
beforeUpdate
updated要离开这个页面才会触发
beforeDestroy
destroyed

18.每个生命周期是有什么用处？一般的应用场景

beforeCreate可以在这加loading

created：初始化完成时的事件写在这，在这里结束loading，异步请求也在这里调用
mounted：挂载元素，获取dom节点
updated：对数据处理
beforeDestroy：可以做一个确认停止事件的确认框

19.jsonp是怎么实现跨域的，他返回的是一个什么东西

只能发get请求
网页通过添加一个script元素，向服务器请求json数据，这种方法不受同源政策的限制，服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

动态插入一个script元素，由它向跨源网址发出请求
服务器收到这个请求之后，会将数据放在回调函数的参数位置返回

所以返回的是回调函数

20.箭头函数和别的函数有什么区别

外形不同：箭头函数使用箭头定义，普通函数不一样
箭头函数全都是匿名函数，普通函数可以匿名也可以具名
箭头函数不能用于构造函数，不能用new
箭头函数中的this的指向不同，捕获上下文的this值
箭头函数不具有arguments对象，而用rest参数...解决，每一个普通的函数调用后都具有一个arguments
箭头函数通过call（）或apply（）方法调用一个函数时，只传入一个，对this并没有影响
箭头函数没有原型属性
箭头函数不能当做generator函数，不能使用yield关键

21.this指针指向有什么情况

作为函数进行调用
作为函数进行调用时为了区分函数的其他调用方式
函数通常（）操作符进行调用，此时函数内的this指针指向的是window对象
默认this指针指向调用函数的对象，此时函数实际上是window对象的一个方法。

2.作为方法进行调用
一个方法所属的对象在该方法体内可以以this的形式进行引用，因此当一个函数以方法的形式被调用时，this指针指向该方法的所有者

3.作为构造器进行调用
当函数作为构造函数进行调用，this指针的指向解释就略复杂。
在js中，构造函数被用来构造对象
构造函数的调用，返回值即为一个对象，而这个对象即为构造函数作用域内this指针的引用对象，即“函数上下文”

22.html的语义化标签

header
nav
aside
footer
article

23.forEach和map有什么

1.相同点: 1.都是循环遍历数组中的每一项 2.每次执行匿名函数都支持三个参数,参数分别为item(当前每一项),index(索引值),arr(原数组) 3.匿名函数中的this都是指向window 4.只能遍历数组
2.不同点 1.map()会分配内存空间存储新数组并返回,forEach()不会返回数据。 2.forEach()允许callback更改原始数组的元素。map()返回新的数组。