前端面试题

适用于初中级基础面试题

  • 未完待续(不断更新中)
  • 一、js this指向以及apply、call、bind
  • 二、var let const 的区别
  • 三、操作数组的方法以及map和forEach的区别
  • 四、js原型和原型链
      • 原型
      • 原型链
  • 五、前端性能优化以及解决方案
  • 六、css水平垂直居中
  • 七、HTML5,CSS3新特性,ES6新特性
  • 八、promise async和await
  • 九、同步和异步的区别
  • 十、防抖与节流
  • 十一、闭包
  • 十二、深拷贝浅拷贝
  • 十三、http的所有请求方式,post和get的区别
  • 十四、从一个url到最终页面渲染完成,发生了什么?
  • 十五、cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式
  • 十六、vue的原理以及双向绑定的原理
  • 十七、vue中data为什么是一个函数
  • 十八、vue生命周期和执行顺序以及created和mounted的区别
  • 十九、vue路由守卫
  • 二十、重绘与回流
  • 二十一、vue父子组件生命周期执行顺序
  • 二十二、vue组件传值方式 父→子 子→父 兄弟之间
  • 二十三、v-if和v-for的优先级和使用
  • 二十四、v-for中key的作用
  • 二十五、ajax与axios的区别
  • 二十六、http常用状态码作用
  • 二十七、vue中虚拟DOM,diff算法
  • 二十八、js事件流,js中的宏任务与微任务
  • 二十九、js堆和栈
  • 三十、跨域的解决
  • 三十一、HTTP协议
      • 如内容需有补充,请各位卷王们私信或留言,欢迎来搞,感谢支持!

未完待续(不断更新中)

一、js this指向以及apply、call、bind

js this指向

二、var let const 的区别

var let const 的区别

三、操作数组的方法以及map和forEach的区别

js操作数组方法、map和forEach区别

四、js原型和原型链

原型

  • JavaScript 的所有对象中都包含了一个 [proto] 内部属性,这个属性所对应的就是该对象的原型
  • JavaScript 的函数对象,除了原型 [proto] 之外,还预置了 prototype 属性

原型链

  • 当一个对象调用的属性/方法自身不存在时,就会去自己 [proto] 关联的前辈 prototype 对象上去找
  • 如果没找到,就会去该 prototype 原型 [proto] 关联的前辈 prototype 去找。依次类推,直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”

五、前端性能优化以及解决方案

前端性能优化以及解决方案

六、css水平垂直居中

css水平垂直居中

七、HTML5,CSS3新特性,ES6新特性

HTML5,CSS3新特性,ES6新特性

八、promise async和await

promise async和await

九、同步和异步的区别

同步和异步

十、防抖与节流

防抖与节流

十一、闭包

闭包原理和应用

十二、深拷贝浅拷贝

深拷贝浅拷贝

十三、http的所有请求方式,post和get的区别

http请求方式、post和get的区别

十四、从一个url到最终页面渲染完成,发生了什么?

从一个url到页面渲染

十五、cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式

本地存储和cookie

十六、vue的原理以及双向绑定的原理

vue原理和双向绑定原理

十七、vue中data为什么是一个函数

组件中的data写成一个函数,数据以函数返回值定义,这样每复用一次组件,就会返回一份新的data。
如果写成对象形式,就使得所有组件实例共用了一份data,造成了数据污染。

十八、vue生命周期和执行顺序以及created和mounted的区别

vue2生命周期详解、created和mounted的区别

十九、vue路由守卫

vue路由守卫

二十、重绘与回流

  • 重绘:当渲染树中的元素外观(如:颜色)发生改变,不影响布局时,产生重绘
  • 回流:当渲染树中的元素的布局(如:尺寸、位置、隐藏/状态状态)发生改变时,产生重绘回流
  • 注意:JS 获取 Layout 属性值(如:offsetLeft、scrollTop、getComputedStyle 等)也会引起回流。因为浏览器需要通过回流计算最新值
  • 回流必将引起重绘,而重绘不一定会引起回流

二十一、vue父子组件生命周期执行顺序

vue2父子组件生命周期

二十二、vue组件传值方式 父→子 子→父 兄弟之间

vue2组件传值方式

二十三、v-if和v-for的优先级和使用

优先级:vue2中v-for的优先级高于v-if,vue3中v-if的优先级高于v-for。
vue2中 当v-for和v-if一起使用,v-for的优先级高于v-if,v-for会遍历整个列表,所以使用的话,每次v-for都会执行v-if,造成不必要的计算,影响性能。
解决方法:使用计算属性computed过滤数据

二十四、v-for中key的作用

vue组件高度复用增加key可以标识组件的唯一性,为了更好的区别各个组件,key的作用主要是为了高效的更新虚拟 DOM。

二十五、ajax与axios的区别

1.区别:axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。
简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。
axios是ajax ajax不止axios。
2.优缺点:
ajax:
本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务
axios:
从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口(重要,方便了很多的操作)

二十六、http常用状态码作用

http常用状态码

二十七、vue中虚拟DOM,diff算法

什么是虚拟DOM
什么是diff算法
虚拟DOM和真实DOM区别

二十八、js事件流,js中的宏任务与微任务

同步和异步
事件循环、宏任务和微任务

二十九、js堆和栈

js堆和栈的详解

三十、跨域的解决

前端跨域解决

三十一、HTTP协议

HTTP协议面试题

如内容需有补充,请各位卷王们私信或留言,欢迎来搞,感谢支持!

你可能感兴趣的:(前端)