面经学习-7-30-万集前端一面

72 阅读6分钟

面经学习 7-30 万集前端一面

面经链接:www.nowcoder.com/discuss/998…

1.vue和react区别 (会)

  1. vue是双向绑定,而react是单向数据流

  2. vue的API比较多,复杂,react的API比较简单,更多的是操纵虚拟DOM

2.深拷贝,浅拷贝区别,实现方式 (会)

深拷贝是拷贝数据,而浅拷贝只是拷贝引用对象的引用地址。

实现深拷贝:递归函数,第三方库,JSON,Object.create(),Object.assign()

function deepClone (obj) {
  if (typeof obj !== 'object' || obj == null) {
    return obj
  }
  let result
  if (obj instanceof Array) {
    result = []
  }
  else result = {}
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      result[key] = deepClone(obj[key])
    }
  }
  return result
}

3.vue路由的两种模式 (半会,不懂两者的区别)

哈希路由和历史路由

哈希路由:

  • 是vue的默认模式
  • url中带有#
  • hash值不会被包含在http请求中,改变hash值也不会重新加载
  • hash的改变会触发hashChange事件,可以导致前进和后退

历史路由:

  • history模式开发的SPA项目,需要服务器端做额外的配置,否则会出现刷新白屏(链接分享失效)。原因是页面刷新时,浏览器会向服务器真的发出对这个地址的请求,而这个文件资源又不存在,所以就报404。处理方式就由后端做一个保底映射:所有的请求全部拦截到index.html上。

4.vue响应式原理 (不会)

5.ajax同步异步区别,使用场景(会)

同步:代码会阻塞进程,后面的代码需要等待当前代码执行完成

异步:使任务同时进行,在需要等待的时候,JS可以先执行其他代码

使用场景:请求接口,定时任务,请求图片,DOM渲染

6.requirejs核心原理 (不会)

  1. 概念requireJS是基于AMD模块加载规范,使用回调函数来解决模块加载的问题。

  2. 原理 requireJS是使用创建script元素,通过指定script元素的src属性来实现加载模块的。

  3. 特点

    1. 实现js文件的异步加载,避免网页失去响应
    2. 管理模块之间的依赖,便于代码的编写和维护

4,项目优化

r.js 是基于requirejs模块化的基础上进一步的压缩和打包成一个js,请求数大大减少,便于优化

7.document.write和innerHTML区别 (不会)

1.write是DOM方法,向文档写入HTML表达式或JavaScript代码,可列出多个参数,参数被顺序添加到文档中 ;innerHTML是DOM属性,设置或返回调用元素开始结束标签之间的HTML元素。

2.两者都可向页面输出内容,innerHTML比document.write更灵活。

当文档加载时调用document.write直接向页面输出内容,文档加载结束后调用document.write输出内容会重写整个页面。通常按照两种的方式使用 write() 方法:一是在使用该方在文档中输出 HTML,二是在调用该方法的的窗口之外的窗口、框架中产生新文档(务必使用close关闭文档)。

在读模式下,innerHTML属性返回与调用元素的所有子节点对应的HTML标记,在写模式下,innerHTML会根据指定的值创建新的DOM树替换调用元素原先的所有子节点。

3.两者都可动态包含外部资源如JavaScript文件

通过document.write插入<script>元素会自动执行其中的脚本;

大多数浏览器中,通过innerHTML插入<script>元素并不会执行其中的脚本。

8.编写高性能js代码需要注意哪些事项 (会一些)

  • script标签放在body最下面
  • 合并script脚本
  • 减少使用全局变量
  • 减少DOM的访问次数(缓存DOM查询)
  • 合并DOM插入(使用Fragment一次插入)

9.es6新特性

箭头函数

遍历方法

let const

展开语法

Promise等等

10.computed和watch使用场景 (会)

computed:计算变量,他实际上返回的是一个变量,当我们需要实时通过变量计算某个变量的时候,就可以使用

wathc:监听一个变量,定义一个函数,这样在这个函数名的变量发生变化时就会触发这个函数

11.v-bind和v-model区别 (不会)

1、v-bind是单向绑定,用来绑定数据和属性以及表达式,只能将vue中的数据同步到页面。

2、v-model是双向绑定,不只能将vue中的数据同步到页面,而且可以将用户数据的数据赋值给vue中的属性。

3、v-bind可以给任何属性赋值,v-model只能给具备value属性的元素进行数据双向绑定。

12.vue通信方式 (不会)

这个篇幅较大,开一个新的博客

13.微任务和宏任务区别 (会)

  • 执行时机不同,微任务要早于宏任务

14.什么是跨域,怎么解决跨域问题 (会)

跨域:必须保证:协议、端口、域名三者相同,才能进行接口的请求

解决:前端:JSONP,后端:CORS

15.事件委托是什么? (会)

事件委托是在DOM中,利用事件冒泡的机制,通过在父级元素触发事件得到子集元素对子集元素做统一的事件处理。

17.tcp和udp区别 (会)

1、udp是无连接的,tcp是面向连接的;

2、udp是不可靠传输,tcp是可靠传输;

3、udp是面向报文传输,tcp是面向字节流传输。

4、UDP往往比TCP延迟低

18.水平垂直居中实现 (会)

flex布局 transform margin:0 auto

19.重绘重排区别,什么属性引起重绘,什么属性引起重排(会)

1、引起重排的属性和方法

改变元素几何信息(大小和位置),都会引起,如:

    添加或删除可见的DOM元素

    元素位置改变,或者使用动画

    元素的尺寸改变(外边距、内边距、边框厚度、宽高等几何属性)

    内容改变(例如:文本改变或图片被另一个不同尺寸的图片替代、在input框输入内容)

    浏览器窗口尺寸改变(resize事件发生时)

    页面渲染初始化

    设置style属性的值

    计算offsetWidth、offsetHeight、offsetTop和offsetLeft等布局信息

    激活CSS伪类(如 :hover)

    查询某些属性或调用某些方法(如:getComputedStyle()、getBoundingClientRect())

引起重绘的属性:

外观属性包括界面、文字等可用状态向量描述的属性,如:

    界面:appearance、outlinebackgroundmaskbox-shadow、box-reflect、filteropacityclipborder-radiusbackground-sizevisibility

    文字:text、font、word