前端高频面试题 2021年面试小结

基础理论部分

http协议是什么

超文本传输协议,一个简单的请求响应协议,指定了客户端可能发送给服务器什么样白勺消息以及得到什么样的响应

常见状态码

200 请求成功
204 无返回内容
400 服务器未能理解请求
405 服务器找不到请求页面
500 服务器内部错误
504 网关超时

前端性能优化方案

自适应布局

①固定某些宽度,使用一个模式
②flexbox 布局
③百分比+媒体查询(会问媒体查询是什么)
④rem做单位
rem是相对于根元素<html>的字体大小的单位,
em是相对于父元素的字体大小的单位
rem用户改变了手机字体大小页面可能会乱

常见浏览器及内核

1、IE浏览器内核:Trident内核,俗称IE内核;
2、Chrome浏览器内核:统称为Chromium内核或Chrome内核
3、Firefox浏览器内核:Gecko内核,俗称Firefox内核;
4、Safari浏览器内核:Webkit内核;
5、Opera浏览器内核:Presto内核
6、360浏览器、猎豹浏览器内核:IE+Chrome双内核;
7、搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式)

分析三大框架VUE React Angular

(会问当时为什么选用了VUE框架)
①Angular采用MVC的数据划分,另外两个采用模块化方案
②R是单向绑定,另外两个是双向绑定
③A的模板是最强大的,有自带,可自定义,调用的时候只需要一个指令名称就够了,但A的自由度比较小
④A静态路由,V,R是动态路由
⑤现在用V,R的人更多,更好的生态系统

css问题

盒子模型

content内容+padding 内边距+border边框+margin外边距

垂直居中

①flex布局,display:flex;justify-content:center;align-item:content
②定位top left 50% 再相对于自身移动-50 transform:tranlate(-50%,-50%)
③定位,父相子绝 top left right bottom 0 magin:auto

flex的使用

弹性布局 任何一个容器都可以指定为 Flex 布局。display: flex;
flex三个属性 :
flex-grow(定义项目的的放大比例), flex-shrink(定义项目的缩小比例) 和 flex-basis ( 定义在分配多余空间之前,项目占据的主轴空间)
默认值为0 1 auto。后两个属性可选。
flex:1 指flex-grow:1,

清除浮动

①父级定高,必须有精确的高度
②overflow:hidden,影响子级定位超出展示,影响阴影效果
③结尾处加空div clear:both

行元素和块元素的区别

①行元素中设置宽高无效,但可以设置行高(line-height),不会自动换行,
②行元素magin,padding左右有效,上下无效,块元素都有效
③块元素可以容纳内联元素和其他块元素,内联元素只能容纳文本或其他内联元素
互相转换:转行:display:inline 转块:display:block

css绘制一个三角形

通过设置border属性的透明度,宽高100px,border:100px solid transparent;border-bottom:100px solid red 一个向上的三角形

js相关问题

数据类型

基础数据类型:字符串string,数字number,布尔值boolean,空值null,未定义undefined
引用数据类型:对象object,数组array,函数function
基础数据类型可以直接赋值

ES6

var let const 的区别

①var声明的变量存在变量提升,可以提升到当前作用域的最顶端调用,值是undefined
②var允许重复声明变量,Let,const在同一作用域下不允许重复声明
③var不存在块级作用域,let const存在
ES6新增块级作用域,由{ }包括 for和if的也属于
④var和let可以修改声明的变量,const必须初始化赋值,且不可修改

this的指向性

箭头函数[函数的参数=>函数体]

get和post请求的区别

数组的常用方法

数组的循环方式,有什么区别

for,foreach,map

js一个事件可以绑定多个方法吗

js的常用操作

阻止冒泡 父子元素同时有点击事件(事件委托)

cookie localStorage sessionStorage的区别

都是保存在浏览器端、且同源的
1、cookie数据始终在同源的http请求中携带,即cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage仅在本地保存。
2、cookie数据不能超过4K,因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识。
3、有效期,sessionStorage:仅在当前浏览器窗口关闭之前有效;localStorage:只要不清除始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭
4、作用域,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的

setTimeout Promis Async/Await的区别

深拷贝与浅拷贝

VUE相关

VUE双向绑定原理

MVVM模型

页面的生命周期

beforeCreate el选项 和 data 并未初始化,el、data都还是 undefined
created 实例创建成功,完成了 data 数据的初始化,el选项还是是undefined,data已经定义,这里可以调用接口请求数据,为挂载到el选项对应的dom做准备
beforeMount 完成了 el 初始化,date数据还未挂载到el选项对应的dom
mounted date数据挂载到el选项对应的dom,模版中的 data 数据直接显示出来了,完成挂载
beforeUpdate 当 data 数据发生变化调用,发生在对应组件的重新渲染之前
updated 触发对应组件的重新渲染
beforeDestroy 在 vue 实例销毁之前调用,此时实例仍然可用
destroyed 在 vue 实例销毁之后调用,vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁

使用keep-alive 增加:
activated 页面第一次进入的时候,钩子触发的顺序是created->mounted->activated
deactivated 页面退出的时候会触发deactivated,当再次前进或者后退的时候只触发activated

v-if v-show的区别

v-if用来判断是否生成dom节点
v-show已经生成dom,判断显示隐藏
频繁切换用v-show

怎么封装一个组件

组件传值

VUEX和session的区别

VUEX的属性(五大核心)

state 存储数据
mutations 唯一可以修改state数据的场所
actions 进行异步操作
getters 类似于Vue组件中的计算属性,对state数据进行计算(会被缓存)
modules 模块化管理

VUE操作DOM

router和route的区别

$route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。
$router对象是全局路由的实例,是router构造方法的实例。
一个是路由 一个是路径

传参的几种方式

data为什么是一个函数

watch、computed、filter用法与区别

watch:监听属性,属性发生了改变就去自动调用对应的方法,不会缓存数据,每次打开页面都会重新加载一次,

computed:计算属性,通过现有的属性计算出一个新的属性,如果之前进行过计算他会将计算的结果缓存,如果再次请求会从缓存中得到数据

filter:过滤器,对数据进行筛选

分析VUE的优缺点

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值