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

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⼿写节流和防抖。

防抖函数。

将⼏次操作合并为⼀次操作进⾏。

设置⼀个计时器，规定在延迟时间后触发函数，但是在延迟时间内如果再次触发，就会取消之前的计时器。

如此，只有最后⼀次操作能触发。

代码如下：
1function debounce(fn,wait){
2 let timer=null;
3return function(){
4 let args=arguments,that=this;
5 timer&&clearTimeout(timer);
6 timer=setTimeout(function(){fn.apply(that,args)},wait)
7 }
8 }
节流函数。

⼀定时间内只触发⼀次函数。

并且开始触发⼀次，结束触发⼀次。

代码如下：
1function throttle(fun, delay){
2 let timer = null;
3 let startTime = Date.now();
4return function(){
5 let curTime = Date.now();
6 let remain = delay - (curTime - startTime);
7 let that = this;
8 let args = arguments;
9 clearTimeout(timer);
10if(remain <= 0){
11 fun.apply(that,args);
12 startTime = Date.now();
13 }else{
14 timer = setTimeout(fun, remain);
15 }
16 }
17 }
4.以下代码的运⾏结果是什么？简述⼀下原因。

1 <script>
2 setTimeout(() => {
3 console.log(1)
4 }, 0)
5 const promise = new Promise((resolve, reject) => {
6 console.log(2);
7 resolve()
8 console.log(3);
9 })
10 promise.then(() => {
11 console.log(4);
12 })
13 console.log(5);
14// 输出结果为： 2 3 5 4 1
15 </script>
5.深拷贝：完全拷贝⼀个新对象，修改时原对象不再受到任何影响，请封装⼀个深拷贝的函数。

1//对象及数组深拷贝函数封装
2function deepCopy(objOrArr) {
3var type = objOrArr instanceof Array ? 'arr' : 'obj'
4var newObjOrArr = objOrArr instanceof Array ? [] : {}
5if (type === 'arr') {
6 newObjOrArr = JSON.parse(JSON.stringify(objOrArr))
7 } else {
8for (var key in objOrArr) {
9if (objOrArr.hasOwnProperty(key)) {
10 newObjOrArr[key] = typeof objOrArr[key] === 'object' ? deepCopy(objOrArr[key]) : objOrArr[key]
11 }
12 }
13 }
14
15return newObjOrArr
16 }
6.1XX,2XX,3XX,4XX,5XX,开头的状态码表⽰什么？
答：
1XX类状态码信息表⽰：临时的响应。

客户端在收到常规响应之前，应准备接收⼀个或多个1XX响应
2XX类状态码信息表⽰：服务器成功的接收了客户端请求
3XX类状态码信息表⽰：客户端浏览器必须采取更多操作来实现请求。

例如，浏览器可能不得不请求服务器上的不同页⾯，或者通过代理服务器重复该请求
4XX类状态码信息表⽰：发⽣错误，客户端似乎有问题。

例如：客户端请求不存在的页⾯，客户端为提供有效的⾝份验证信息
5XX类状态码信息表⽰：服务器遇到错误⽽不能完成该请求
7.请简述⼀下TCP三次握⼿的过程。

TCP
在中,提供可靠的连接服务,采⽤三次握⼿建⽴⼀个连接.
第⼀次握⼿：建⽴连接时,客户端发送syn包(syn=j)到服务器,并进⼊SYN_SEND状态,等待服务器确认；
SYN：同步序列编号(Synchronize Sequence Numbers)
第⼆次握⼿：服务器收到syn包,必须确认客户的SYN（ack=j+1）,同时⾃⼰也发送⼀个SYN包（syn=k）,即SYN+ACK包,此时服务器进⼊状态；
第三次握⼿：客户端收到服务器的SYN＋ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进⼊ESTABLISHED状态,完成三次握⼿.
8.请⽤原⽣的js封装⼀个⽅法，对⼀个⽆序数组进⾏排序。

例如：arr = [1，6，2，18，9，21，5，32，16]
1//冒泡排序（从⼩到⼤）
2function bubbleSortSmallToBig(arr){
3for(var i = 1;i < arr.length;i ++){
4for(var j = 0;j < arr.length - i;j ++){
5if(arr[j] > arr[j + 1]){
6var t = arr[j];
7 arr[j] = arr[j + 1];
8 arr[j + 1] = t;
9 }
10 }
11 }
12return arr;
13 }
9.请⽤原⽣的js封装⼀个⽅法，对⼀个有序数组进⾏随机乱序。

例如：arr = [1，6，2，18，9，21，5，32，16]
1function chan(data) {
2for (let i = 0; i < data.length; i++) {
3// ⽣成随机索引，然后将⽣成的随机索引和遍历的a[i]进⾏对调
4 let index = parseInt(Math.random() * data.length);
5 let zancun = data[i];
6 data[i] = data[index];
7 data[index] = zancun;
8 }
9 }
10.请简述⼀下对 token⼂cookie⼂session 三者的理解。

详情：
⼆：综合题
1.假设我们⽬前拥有⼀个产品化的项⽬，但是存在某些客户拥有不同的定制化版本，假设我们为每个⽤户都新建⼀个项⽬，
那么客户越多，项⽬就会越多，如此积累下去项⽬会变得⾮常的难以维护，请问你会⽤什么⽅式去解决该问题？
答：。

2.git的冲突是怎么产⽣的？gitlab如何进⾏分⽀保护策略？
答：多个开发者同时使⽤或者操作git中的同⼀个⽂件，最后在依次提交commit和推送push的时候，第⼀个操作的是可以正常提交的，⽽之后的开发者想要执⾏pull（拉）和pull（推）操作的时候，就会报冲突异常conflict。

3.请简述⼀下在浏览器中输⼊ url 到渲染页⾯的过程。

答：
1.DNS解析 (域名转ip)
2.与服务器建⽴连接 (浏览器获得完整的服务器IP地址后，域名解析环节完成。

之后，浏览器通过IP地址查找到对应的服务器，并将⽤户发起的http请求发送给服务器。

)
3.服务器处理并返回http报⽂
4.浏览器解析渲染页⾯ (浏览器接收到后台返回的HTML字符串后，会依次经历：加载、解析、渲染。

)
详情：。