前端面试笔记

1.vuex:store{state, mutations, actions, getters,modules};解决跨组件通信、数据集中式存储

①state用于存储共享数据,mutation用于修改store数据;

state调用方式A. this.$store.state; B. ...mapState(['count'])使用方式为this.count

②mutations用于同步修改state属性调用方式A. this.$store.commit('func',params); B. 在methods中调用...mapMutations(['mutation'])使用方式为this.func()

③actions用于处理异步任务调用mutation来间接修改state数据、使用方式为A. this.$store.dispatch('mutation'); B. 在methods中调用...mapActions(['action']) 使用this.action()

④getters用于包装state值用法类似vue的filters其调用方式为A. this.$store.getters.getter; B. ...mapGetters(['getter'])

⑤modules将store拆分成多个模块,模块化状态管理

2.双向数据绑定:通过数据劫持结合发布者-订阅者模式来实现,通过Object.defineProperty()的get和set来实现数据劫持

3.跨域:①服务端修改CORS ②反向代理 ③JSONP ④WebSocket ⑤postMessage

4.对VUE的理解:vue是一个构建用户界面的渐进式js框架,是一个mvvm框架也就是数据双向绑定,通过尽可能简单的API时间响应的数据绑定和组合的视图组件。

5.父子组件之间互相传值

①props,$emit

②$refs

③$parent,$children

④定义全局事件window.eventBus = new Vue();通过$emit和$on来传递数据

⑤vuex

⑥父组件provide定义数据/子组件inject注入数据

⑦混入mixins

6.vue生命周期:创建、数据初始化、挂载、更新、销毁

7.性能优化:减少IO、CPU计算、减少网络请求;静态资源缓存;减少DOM操作、异步加载;DNS预解析

8.页面卡顿的原因:

①JS线程长时间占用:浏览器包括js线程和GUI线程,而二者是互斥的,当长时间占用js线程时,会导致渲染不及时,出现页面卡顿

②简化DOM结构:当DOM结构越复杂时,需要重绘的元素也就越多

③资源加载阻塞:js资源放在body之前;行内script阻塞;css加载会阻塞DOM树渲染;资源过大阻塞

④内存泄漏导致内存过大

9.内存泄漏:

①意外的全局变量

②闭包

③被遗忘的计时器

④DOM删除或清空时,事件未清除

10.ES6新特性:

①变量声明let和const:块级作用域,不能重复声明,let不具备变量提升

②模板字符串使用反引号,引用变量使用${}

③箭头函数:省略function、单行内容可省略return、单个参数可省略()、this指向继承上下文的this指向

④函数参数可设置默认值

⑤Spread合并数组/Rest析构数组

⑥对象和数组解构

⑦超类super

⑧for...in和for...of

⑨class类 默认有一个构造函数constructor

11.HTTP与HTTPS的区别:

①HTTP 明文传输,数据未加密,安全性差,HTTPS(SSL+HTTP) 数据传输加密,安全性好

②HTTP 页面响应速度比 HTTPS 快

③端口不同

④ HTTPS 比 HTTP 要更耗费服务器资源

12.GET与POST的区别:

①get获取数据、post发送数据

②get通过url传递数据、post数据放在from数据体内提交用户不可见

③get请求有长度限制、post请求对数据长度没要求

④get会被缓存而post不会

⑤get请求会被保留记录、post不会保留记录

⑥post比get更安全

⑦get只允许ASCII字符、post没有限制也允许二进制

13.HTTP请求方法:

GET 向服务器获取数据

POST 向服务器发送数据

HEAD 与 GET 相同,但只返回 HTTP 报头,不返回文档主体。

PUT 上传指定的 URI 表示。

DELETE 删除指定资源。

OPTIONS 返回服务器支持的 HTTP 方法。

CONNECT 把请求连接转换到透明的 TCP/IP 通道。

14.宏任务(macrotask )和微任务(microtask ):

宏任务:计时器、ajax、读取文件.

微任务:Promise.then.

执行顺序:同步任务>process.nextTick>微任务>宏任务>setImmediate

15.vue权限控制:

①接口权限:通过axios对请求拦截将登录时获取到的token带入请求头;如果返回token失效或错误请求则跳转到登录界面

②路由权限:先注册基本路由,然后获取路由权限表、借助vue-router将有权限的路由动态注册到路由规则上


1.html5和html4有什么区别?

①DOCTYPE声明

②字符编码指定

③新增元素:

A.其他元素:video audio canves embed mark progress meter time ruby  rt rp wbr command details datalist datagrid keygen output source  menu

B.结构元素:section(内容块)、article(博客中的一篇文章)、aside(辅助信息)、header(标题)、hgroup(标题的结合)、footer(作者姓名)、nav (导航)、figure(文档主体中的一个单元)

C.input元素的类型: email(地址)、  url、  number、  range、  Date Pickers(日历)

④废除元素

2.css3和css2的区别?

①内减模式:box-sizing:border-box;

②新增属性选择器:

A.元素[属性^=值]: 选择以指定字符开头的属性值的元素

B.元素[属性$=值]: 选择以指定字符结尾的属性值的元素

③新增伪类选择器:

:root 可以理解为根

li:first-child 代表找出父元素中第一个li子元素

li:last-child 代表找出父元素中最后一个li子元素

li:nth-child(n) 找出父元素中的第n个li子元素

li:nth-child(even) 代表找出父元素中奇数的li子元素

li:nth-child(odd) 代表找出父元素中偶数的li子元素

li:empty 代表找出父元素中li子元素内容为空的标签

li:nth-of-type(n) 找出li标签中第几个

li:first-of-type 找出li标签中第一个

li:last-of-type 找出li标签中最后一个

li:only-child 唯一子元素

④2d变换效果:transform:值

transform:translate(值1,值2); |移动

transform:rotate(角度);transform-origin:横向坐标 纵向坐标; |旋转

transform:scale(值); |缩放

⑤过渡效果:

transition:动画css属性 过渡时间秒数 速度类型 延迟的秒数

3.实现旋转有哪些方法?

canvas rotate:

let c = canvas.getContext("2d");

c.rotate(90 * Math.PI / 180);

c.drawImage(img, 0, -img.height);

CSS3 transform: transform: rotate(90deg);

4.flex:1是什么意思? (代表均匀分配元素)

flex-grow: 1; (用来“瓜分”父项的“剩余空间”)当父元素的宽度大于所有子元素的宽度的和时(即父元素会有剩余空间),子元素如何索取分配父元素的剩余空间。值越大,索取的越厉害。

flex-shrink: 1; (“吸收”超出的空间)父元素的宽度小于所有子元素的宽度的和时(即子元素会超出父元素),子元素如何缩小自己的宽度的。值越大,减小的越厉害。

flex-basis: 0%; (设置子项的占用空间)该属性用来设置元素的宽度,其实,width也可以设置宽度。如果元素上同时设置了width和flex-basis,那么width 的值就会被flex-basis覆盖掉。

5.this指向有哪几种?

①作为函数调用,非严格模式下,this指向window,严格模式下,this指向undefined;

②作为某对象的方法调用,this通常指向调用的对象。

③使用apply、call、bind 可以绑定this的指向。

④在构造函数中,this指向新创建的对象

⑤箭头函数没有单独的this值,this在箭头函数创建时确定,它与声明所在的上下文相同。

6.对比一下for、for..in、for..of、foreach、map的区别、返回值是什么?

①for…in以原始插入顺序访问对象的可枚举属性,包括从原型继承而来的可枚举属性

②for…of(根据值遍历): 在可迭代对象(Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,正确响应break,continue,return语句

③forEach:只能遍历数组,不能中断,没有返回值

④map(根据index遍历):只能对元素进行加工处理,产生一个新的数组对象

⑤for: 常规语句遍历,可循环数字,字符串,数组

7.数组方法forEach、map、filter、sort的用法?

①forEach: 多用于对数组自身的改变和各元素相关统计性的计算

②map: 新建一个数组,需要有承载对象,将不改变原数组

③filter: 对数组过滤,返回过滤数据

④sort: 对数组的元素进行排序

8.promise、async\await、setTimeout三个有什么区别?

①Promise本身是同步但回调是异步;

②async 函数返回一个 Promise 对象,一旦遇到 await 就会先返回,等到触发的异步操作完成,再执行函数体内后面的语句

③await含义为等待,通过返回一个Promise对象来实现同步的效果

9.什么是微任务什么是宏任务?

①每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)

②macrotask主要包含:script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)

③在当前 task 执行结束后立即执行的任务,在当前task任务后,下一个task之前,在渲染之前。

④microtask主要包含:Promise.then、MutaionObserver、process.nextTick(Node.js 环境)

运行机制:

执行一个宏任务(栈中没有就从事件队列中获取)

执行过程中如果遇到微任务,就将它添加到微任务的任务队列中

宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)

当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染

渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取)

10.什么叫原型链?

原型链:通过隐式原型把一些构造函数层层的串起来

①每个函数都有一个原型属性(prototype) , 这个属性是一个指针,指向构造函数的原型对象( CreateObj.prototype)

②在默认情况下,所有原型对象都会自动获得一个constructor属性,该属性包含一个指向prototype属性所在的函数

③所有的实例( 通过构造函数new出来的,都包含一个隐式原型(__proto__),该指针指向实例的构造函数的原型对象

④写在构造函数中, 为this赋值的属性和方法

⑤写在原型对象上的方法或者属性

⑥当一个对象访问属性和方法的时候,他的访问规则叫(就近原则)

11.TypeScript了解吗?

Typescript并不直接在浏览器上运行,需要编译器编译成纯Javascript来运行

TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译

12.简单说下vue生命周期、双向数据绑定在vue3.0和vue2.0之间的区别

vue2.x实现双向数据绑定的原理是利用了 Object.defineProperty()

Vue3.x是用ES6的语法 Proxy对象来实现

相比于vue2.x,使用proxy的优势如下:

  ①defineProperty只能监听某个属性,不能对全对象监听

  ②可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)

  ③可以监听数组,不用再去单独的对数组做特异性操作

vue3.x可以检测到数组内部数据的变化

13.为什么在vue2.0里对数组或对象里单个属性赋值不会引起视图改变?

如果监测得属性是值类型,当值改变就会触发set;如果是引用类型,只有当引用改变得时候才会触发set

14.简单说下echarts图标类型有哪些?

Line折线图、Bar柱状图、Pie饼图、Scatter散点图、Map地图、CandlestickK线图、Radar雷达图、Boxplot盒须图、Heatmap热力图、Graph关系图、Tree树图、Treemap矩形树图、Sunburst旭日图、Parallel平行坐标图、Sankey桑基图、Funnel漏斗图、Gauge仪表盘、PictorialBar象形柱、ThemeRiver主题河流图、日历坐标图

15.centos和Ubuntu的区别?

图形化外观上、软件的安装方面、关于sudo权限、应用场景上

16.如何解决跨域问题?

1、 通过jsonp跨域

2、 document.domain + iframe跨域

3、 location.hash + iframe

4、 window.name + iframe跨域

5、 postMessage跨域

6、 跨域资源共享(CORS)

7、 nginx代理跨域

8、 nodejs中间件代理跨域

9、 WebSocket协议跨域

17.nginx如何设置请求头、设置过期时间?

expires 过期时间

proxy_set_header是Nginx设置请求头信息给上游服务器,add_header是Nginx设置响应头信息给浏览器

你可能感兴趣的:(前端面试笔记)