首页 > Web开发 > 详细

Web前端2019面试总结(东软集团面试题)

时间:2019-07-16 19:56:52      阅读:237      评论:0      收藏:0      [点我收藏+]

一:基础题

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

 

防抖函数。

 

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

1 function debounce(fn,wait){
2      let timer=null;
3      return function(){
4           let args=arguments,that=this;
5           timer&&clearTimeout(timer);
6           timer=setTimeout(function(){fn.apply(that,args)},wait)
7      }        
8 }

节流函数。

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

 1 function throttle(fun, delay){
 2   let timer = null;
 3   let startTime = Date.now();
 4   return function(){
 5     let curTime = Date.now();
 6     let remain = delay - (curTime - startTime);
 7     let that = this;
 8     let args = arguments;
 9     clearTimeout(timer);
10     if(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.深拷贝:完全拷贝一个新对象,修改时原对象不再受到任何影响,请封装一个深拷贝的函数。

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

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

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

例如:arr = [1,6,2,18,9,21,5,32,16]

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

例如:arr = [1,6,2,18,9,21,5,32,16]

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

二:综合题

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

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

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

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

Web前端2019面试总结(东软集团面试题)

原文:https://www.cnblogs.com/jun-qi/p/11197064.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!