Web前端2019面试总结3（东软集团面试题）

严禁转载，严禁分享，只供私自鉴赏，请君悉知！

一：基础题

1.什么是margin塌陷？请写出至少三种解决margin塌陷的方法。

答：当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。

解决方法：

（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合  （可以设置成透明：border：1px solid transparent）。

（2）为父盒子添加overflow：hidden；

（3）为父盒子设定padding值；

（4）为父盒子添加position：fixed；

（5）为父盒子添加 display：table；

（6）利用伪元素给子元素的前面添加一个空元素

 

2.当元素的样式发生变化时，浏览器需要触发更新，重新绘制元素。这个过程中有两种类型的操作，即重绘与回流。

请问什么时候会发生重绘（repaint），简述什么时候会发生回流（reflow），在写css和javascript时应该注意哪些可以减少和避免重绘和回流？

答：

什么是回流：

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

什么是重绘：

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

 

区别：

回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流。

当页面布局和几何属性改变时就需要回流。比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

CSS中避免回流、重绘

1.尽可能在DOM树的最末端改变class
2.避免设置多层内联样式
3.动画效果应用到position属性为absolute或fixed的元素上
4.避免使用table布局
5.使用css3硬件加速，可以让transform、opacity、filters等动画效果不会引起回流重绘

JS操作避免回流、重绘

1.避免使用JS一个样式修改完接着改下一个样式，最好一次性更改CSS样式，或者将样式列表定义为class的名称
2.避免频繁操作DOM，使用文档片段创建一个子树，然后再拷贝到文档中
3.先隐藏元素，进行修改后再显示该元素，因为display:none上的DOM操作不会引发回流和重绘
4.避免循环读取offsetLeft等属性，在循环之前把它们存起来
5.对于复杂动画效果,使用绝对定位让其脱离文档流，否则会引起父元素及后续元素大量的回流

 

3.请用原生js手写节流和防抖。

防抖函数。

　　将几次操作合并为一次操作进行。设置一个计时器，规定在延迟时间后触发函数，但是在延迟时间内如果再次触发，就会取消之前的计时器。如此，只有最后一次操作能触发。代码如下：

function debounce(fn,wait){
     let timer=null;
     return function(){
          let args=arguments,that=this;
          timer&&clearTimeout(timer);
          timer=setTimeout(function(){fn.apply(that,args)},wait)
     }        
}

节流函数。

　　一定时间内只触发一次函数。并且开始触发一次，结束触发一次。代码如下：

function throttle(fun, delay){
  let timer = null;
  let startTime = Date.now();
  return function(){
    let curTime = Date.now();
    let remain = delay - (curTime - startTime);
    let that = this;
    let args = arguments;
    clearTimeout(timer);
    if(remain <= 0){
      fun.apply(that,args);
      startTime = Date.now();
    }else{
      timer = setTimeout(fun, remain);
    }
  }
}

 

4.以下代码的运行结果是什么？简述一下原因。

  <script>
    setTimeout(() => {
      console.log(1)
    }, 0)
    const promise = new Promise((resolve, reject) => {
      console.log(2);
      resolve()
      console.log(3);
    })
    promise.then(() => {
      console.log(4);
    })
    console.log(5);
    // 输出结果为： 2 3 5 4 1
  </script>

 

5.深拷贝：完全拷贝一个新对象，修改时原对象不再受到任何影响，请封装一个深拷贝的函数。

//对象及数组深拷贝函数封装
        function deepCopy(objOrArr) {
            var type = objOrArr instanceof Array ? 'arr' : 'obj'
            var newObjOrArr = objOrArr instanceof Array ? [] : {}
            if (type === 'arr') {
                newObjOrArr = JSON.parse(JSON.stringify(objOrArr))
            } else {
                for (var key in objOrArr) {
                    if (objOrArr.hasOwnProperty(key)) {
                        newObjOrArr[key] = typeof objOrArr[key] === 'object' ? deepCopy(objOrArr[key]) : objOrArr[key]
                    }
                }
            }
 
            return newObjOrArr
        }

 

6.1XX,2XX,3XX,4XX,5XX,开头的状态码表示什么？

答：

　　1XX类状态码信息表示：临时的响应。客户端在收到常规响应之前，应准备接收一个或多个1XX响应

　　2XX类状态码信息表示：服务器成功的接收了客户端请求

　　3XX类状态码信息表示：客户端浏览器必须采取更多操作来实现请求。例如，浏览器可能不得不请求服务器上的不同页面，或者通过代理服务器重复该请求

　　4XX类状态码信息表示：发生错误，客户端似乎有问题。例如：客户端请求不存在的页面，客户端为提供有效的身份验证信息

　　5XX类状态码信息表示：服务器遇到错误而不能完成该请求

 

7.请简述一下TCP三次握手的过程。

TCP握手协议 
在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接.
第一次握手：建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认； 
SYN：同步序列编号(Synchronize Sequence Numbers)
第二次握手：服务器收到syn包,必须确认客户的SYN（ack=j+1）,同时自己也发送一个SYN包（syn=k）,即SYN+ACK包,此时服务器进入SYN_RECV状态； 
第三次握手：客户端收到服务器的SYN＋ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手.

8.请用原生的js封装一个方法，对一个无序数组进行排序。

例如：arr = [1，6，2，18，9，21，5，32，16]

//冒泡排序（从小到大）
function bubbleSortSmallToBig(arr){
    for(var i = 1;i < arr.length;i ++){
        for(var j = 0;j < arr.length - i;j ++){
            if(arr[j] > arr[j + 1]){
                var t = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = t;
            }
        }
    }
    return arr;
}

 

9.请用原生的js封装一个方法，对一个有序数组进行随机乱序。

例如：arr = [1，6，2，18，9，21，5，32，16]

function chan(data) {
      for (let i = 0; i < data.length; i++) {
        // 生成随机索引，然后将生成的随机索引和遍历的a[i]进行对调
        let index = parseInt(Math.random() * data.length);
        let zancun = data[i];
        data[i] = data[index];
        data[index] = zancun;
      }
    }

 

10.请简述一下对 token丶cookie丶session 三者的理解。

详情：https://blog.csdn.net/jikeehuang/article/details/51488020

 

二：综合题

1.假设我们目前拥有一个产品化的项目，但是存在某些客户拥有不同的定制化版本，假设我们为每个用户都新建一个项目，

那么客户越多，项目就会越多，如此积累下去项目会变得非常的难以维护，请问你会用什么方式去解决该问题？

答：。。。

 

2.git的冲突是怎么产生的？gitlab如何进行分支保护策略？

答：多个开发者同时使用或者操作git中的同一个文件，最后在依次提交commit和推送push的时候，第一个操作的是可以正常提交的，而之后的开发者想要执行pull（拉）和pull（推）操作的时候，就会报冲突异常conflict。

 

3.请简述一下在浏览器中输入 url 到渲染页面的过程。

答：

1.DNS解析 (域名转ip)
2.与服务器建立连接 (浏览器获得完整的服务器IP地址后，域名解析环节完成。之后，浏览器通过IP地址查找到对应的服务器，并将用户发起的http请求发送给服务器。)
3.服务器处理并返回http报文
4.浏览器解析渲染页面 (浏览器接收到后台返回的HTML字符串后，会依次经历：加载、解析、渲染。)

详情：https://www.jianshu.com/p/308212675adb