2021-08-22 21:49 哈尔滨工业大学 Web前端

关注

【前端面经】浙江大华前端（已意向）

大华一面（7.30）

1.自我介绍

2.页面布局用的什么布局？flex布局用了哪些属性呢？怎么垂直居中？justify-content,text-align?

justify-content：center 主轴线居中

text-alin：center 垂直交叉线居中

3.css3新特性了解哪些，说一下？

4.html5有什么新特性？

5.ES6数据类型的变化？不同数据类型的区别？

6.null和undefined的区别？null是什么类型？

7.你用vue做l什么，你的项目用了vue的哪些技术？

8.浏览器缓存（存储）？

9.DOM添加？

大华二面（8.6）

1.自我介绍

2.vue中的diff算法

diff算法的实现过程

初次渲染的时候，将VDOM渲染成真正的DOM然后插入到容器里面。

再次渲染的时候，将新的vnode和旧的vnode相对比，然后之间差异应用到所构建的真正的DOM树上。

在实际代码中，会对新旧两棵树进行一个深度的遍历，每个节点都会有一个标记。每遍历到一个节点就把该节点和新的树进行对比，如果有差异就记录到一个对象中。

渲染的一些不同改变：

1.如果节点类型改变，直接将旧节点卸载，替换为新节点，旧节点包括下面的子节点都将被卸载，如果新节点和旧节点仅仅是类型不同，但下面的所有子节点都一样时，这样做也是效率不高的一个地方。

2.节点类型不变，属性或者属性值改变，不会卸载节点，执行节点更新的操作。

3.文本改变，直接修改文字内容。

4.移动，增加，删除子节点时。

3.conputed和watch的区别

4.浏览器缓存

5.异步promise，async，await

异步编程在js中有三种场景，分别是定时任务，ajax，事件函数，如果不嵌套异步任务，则返回的结果顺序是不能保证的，要想异步任务有序，就需要嵌套多个异步任务，但是这种做法保证了返回结果的顺序却造成了回调地狱的现象，代码可读性也很低，所以用promise来解决。

首先创建promise的实例对象，然后再在它的构造函数中传递一个函数function（resolve，reject），函数体内用来处理异步任务，异步的结果返回来之后触发对应的方法，成功时调用resolve（）方法，失败时调用reject（）方法，最终resolve（）和reject（）的处理结果通过p.then()的方式来获取，p.then的参数有两个，分别对应正常的情况和异常的情况，分别可以获取到resolve（）获取的正常结果和reject（）获取的错误信息。

发送多个ajax请求执行多个异步任务，使用then的方式保证了他们顺序的执行顺序和返回结果

return 的是一个新的promise对象，下一个then调用的就是上一个return返回的这个新的promise实例对象，并且then中的参数data用于接收上一个异步任务的处理结果。

关于then参数中的函数返回值有两种情况，第一种就是返回一个新的promise的实例对象，那这个对象会调用下一个then，从而在下一个then中会得到上一个then中处理结果；第二种情况就是返回一个普通值，那这个普通值会直接传递给下一个then，从而下一个then参数中的函数可以接受这个值，在这种情况下then会默认产生一个promise实例对象，从而保证了下一个then可以进行链式操作。

catch专门用来处理失败情况，相当于接受then的第二个参数信息。

finally方法是不管失败成功与否都一定会执行的方法，可以返回一个信息，比如success。

通过暴露出的全局变量axios直接调用它的api（如get），然后传入url地址就可以发送请求了，通过then的方式获取后台数据，并且通过.data才能获取到实际的数据，这个data属性名称是固定的，属于axiosAPI的一部分，用于获取后台数据。

async/await总结：首先封装一个函数，在函数前面加上async关键字，通过await来处理异步任务，await后面跟上一个promise实例对象，在promise里可以处理具体的异步任务，await前面通过返回值的形式得到异步处理的结果，就不要then做回调函数了，代码比较简洁。async的返回值是一个新的promise实例对象，如果在asyns函数最后返回一个具体的值的话，可以在调用async函数的时候通过then来得到函数的返回值。

6.防抖(debounce)和节流(throttle)

定义：对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。

基于上述场景（滚动事件），首先提出第一种思路：在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：

如果在200ms内没有再次触发滚动事件，那么就执行函数
如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时

效果：如果短时间内大量触发同一事件，只会执行一次函数。

实现：既然前面都提到了计时，那实现的关键就在于setTimeout这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：

/* * fn [function] 需要防抖的函数 * delay [number] 毫秒，防抖期限值 */ function debounce(fn,delay){ let timer = null //借助闭包 return function() { if(timer){ clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中， //并且又触发了相同事件。所以要取消当前的计时，重新开始计时 timer = setTimeout(fn,delay) }else{ timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时， //那么就开始一个计时 } } }

当然上述代码是为了贴合思路，方便理解，写完会发现其实

time = setTimeout(fn,delay)是一定会执行的，所以可以稍微简化下：

function debounce(fn,delay){ let timer = null //定义一个定时器 //借助闭包 return function() { if(timer){ clearTimeout(timer) //清除这个定时器 } timer = setTimeout(fn,delay) // 简化写法 } } // 处理函数 function showTop () { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 　　console.log('滚动条位置：' + scrollTop); } //滚动事件 window.onscroll = debounce(showTop,1000) // 为了方便观察效果我们取个大点的间断值，实际使用根据需要来配置

防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行

我们可以设计一种类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活（类似于技能冷却时间）。

效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

实现这里借助setTimeout来做一个简单的实现，加上一个状态位valid来表示当前函数是否处于工作状态：

7.知识图谱数据量比较大节点特别多的时候是怎么优化的？

8.知识图谱用echarts画的关系图吗？

9.响应式布局的几种方法

https://www.daidaiseo.com/seozt/1439.html

响应式定义：

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够。

优点：面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题。

缺点：仅适用布局、信息、框架并不复杂的部门类型网站；兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间加长；其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果；一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

响应式与自适应区别:

响应式：只需要开发一套代码。响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。

自适应：需要开发多套界面。通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面。

（1）多媒体查询@media

使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。举例来说：

@media screen and (max-width: 960px){ body{ background-color:#FF6699 } } @media screen and (max-width: 768px){ body{ background-color:#00FF66; } } @media screen and (max-width: 550px){ body{ background-color:#6633FF; } } @media screen and (max-width: 320px){ body{ background-color:#FFFF00; } }

上述的代码通过媒体查询定义了几套样式，通过max-width设置样式生效时的最大分辨率，上述的代码分别对分辨率在0～320px，320px～550px，550px～768px以及768px～960px的屏幕设置了不同的背景颜色。

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

（2）百分比%

比如当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。height,width属性的百分比依托于父标签的宽高。但是，padding、border、margin等属性的情况又不一样？子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，同样，子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度。子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width。border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度。

缺点：计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。

各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

不建议用%来做响应式布局。

（3）vw/vh

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的1%。

（4）rem

rem单位是相对于字体大小的html元素，也称为根元素。默认情况下，html元素的font-size为16px。所以此时1rem = 16px。

//第一版 @media screen and (max-width: 414px) { html { font-size: 18px } } @media screen and (max-width: 375px) { html { font-size: 16px } } @media screen and (max-width: 320px) { html { font-size: 12px } }

利用rem和媒体查询，在分辨率发生变换时，给它不同的font-size。

//优化版 //动态为根元素设置字体大小 function init () { // 获取屏幕宽度 var width = document.documentElement.clientWidth // 设置根元素字体大小。此时为宽的10等分 document.documentElement.style.fontSize = width / 10 + 'px' } //首次加载应用，设置一次 init() // 监听手机旋转的事件的时机，重新设置 window.addEventListener('orientationchange', init) // 监听手机窗口变化，重新设置 window.addEventListener('resize', init)

理解：上面代码实现了，无论设备可视窗口如何变化，始终设置rem为width的1/10。即实现了百分比布局。就没有第一版的媒体查询那样僵硬。以上代码需在dom之前写入（可放在head里面第一个script标签）。

（5）UI框架

现在的主流UI框架都会考虑到响应式布局这个问题，比如elementUI，iview等框架提供了栅格系统，<row>搭配<col>来实现响应式布局。

（6）移动端响应式布局 viewport

width=device-width: 是自适应手机屏幕的尺寸宽度。

maximum-scale:是缩放比例的最大值。

minimum-scale:是缩放比例的最小值。

inital-scale:是缩放的初始化。

user-scalable:是用户的可以缩放的操作。