导图社区 前端面试
- 486
- 34
- 3
- 举报
前端面试
这是一篇关于前端面试的思维导图。知识点涉及：HTML、CSS、JS、DOM、 HTTP等。
编辑于2021-03-09 23:10:57
- 相似推荐
- 大纲
前端
HTML
HTML语义化
含义: 根据内容的结构,选择合适的标签
优点
便于阅读
代码更优雅
有利于SEO
提高: 我平时写的都是语义化的代码,标题h1-h5,文章article,header,main,footer,aside
meta viewport
含义: 浏览器用来显示网页的区域
width: 定义viewport的宽度
height: 定义viewport的高度
initial-scale: 定义设备宽度和viewport之间的缩放比例
maxium-scale: 定义缩放的最大值
minimum-scale: 定义缩放的最小值
user-scalable: 控制页面是否可以缩放
浏览器渲染的主要流程
解析HTML,构建HTML树
解析CSS,构建CSSOM树
根据HTML树和CSSOM树生成渲染树
根据渲染树,计算节点的样式和位置,渲染到屏幕
回流(重拍)和重绘
回流(重拍): 当删除或者增加元素,修改元素的盒模型,或者设置display:none,浏览器会重新计算元素的位置,
重绘: 当修改颜色或者背景的时候,不需要计算位置,只要重新绘制
优化: 修改样式的时候一次性需改,给动画增加绝对定位或者transform
CSS
两种盒模型
content-box
border-box
垂直居中
flex align-items justify-content
flex margin
position:absolute
grid
水平居中
fle align-items justify-content
flex margin
position:absolute
grid
flex怎么用
display:flex
flex-direction
flex-wrap
flex-grow
flex-shink
flex-basis
order
align-self
BFC是什么
定义: 块级格式化上下文,规定内部块级元素格式的一个独立环境
触发条件: 浮动,绝对定位,display:inline-block,
作用: 清除浮动,阻止父子元素外边距合并
CSS选择器优先级
!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承
越具体优先级越高
同一等级,后面写的会覆盖前面写的
清除浮动
.clearfix::after{content:''; display:block; clear:both}
媒体查询
根据设备的参数来修改网页的样式
max-width:500px
transition和animation的区别
transition需要触发一个事件才能改变属性
transition:属性名 时常 过渡方式 延迟
animation: 不需要任何事件的触发,会随着事件改变
animation: 动画名 时长 过渡方式 延迟 次数 等等
position的几个值
static:呆在文档流中
relative: 相对定位,浮动起来但是不脱离文档流
absolute: 绝对定位,脱离文档流,定位基准是祖先的非static元素
fixed: 根据视口固定定位
sticky: 粘滞定位
grid布局
display:grid
grid: 行 行 行 / 列 列
grid-column grid-row
层叠上下文触发条件
根元素HTML
z-index不为auto的绝对定位和相对定位元素
fixed定位元素和sticky定位的元素
opacity不为0的元素
transform不为none的元素
子主题
JS
es6语法
Promise,Promise.all,Promise.race
防抖和节流
手写Ajax
axios
call apply bind
手写bind
闭包
立即执行函数
跨域,CORS,JSONP
async,await怎么用,捕获异常
手写深拷贝
正则实现trim
继承,class继承
数组去重
手写Promise
TS和JS的区别
原型和原型链
异步任务
TCP三次握手和四次挥手
前端页面优化
减少HTTP请求
合理设置HTTP缓存
多图片网页使用图片懒加载
合并css,js文件
减少对DOM的操作
用事件委托来处理事件绑定的操作
手写EventBus
DOM
事件委托
可拖拽的div
HTTP
HTTP状态码
200-299成功
200 成功
300-399 重定向
301 永久重定向
302 临时重定向
304 从缓存加载
400-499 客服端出错
403 无权限
404 路径不存在
500-599 服务器出错
500 服务器代码出错
503 服务器无法提供服务
HTTP缓存
强制缓存
Catch-Control的max-age没有过期,获取Expires的缓存事件没有过期,会直接使用浏览器的缓存数据,不再向服务器发送请求
HTTP状态码:200
协商缓存
第一次请求服务器返回的响应头中没有Catch-Control和Expires或他们已经过期,就是没有设置强制缓存,那么第二次请求就会与服务器进行对比判断资源是否被修改
没有修改,返回状态码为304,有修改,返回状态码为200
服务器根据E-Tag和Last-Modified的数据来判断浏览器的缓存是否失效
GET和POST的区别
参数
GET请求参数在URL中,POST参数在请求体中
缓存
GET请求会被浏览器缓存,POST不会
后退
GET后退无害,POST后退会再次提交请求
长度限制
GET请求有长度限制，POST请求没有
刷新
子主题
Cookie Localstorage Session Sessionstorage
容量
cookie:4kb,sessionStorage:5MB,LocalStorage:5MB
交互
cookie每次都会和后台交互,sessionStorage本地储存,不会每次和后台交互,localStorage:本地储存,不会每次和后台交互
缓存
cookie可设置过期事件,sessionStorage窗口关闭,缓存失效,localStorage除非手动删除,否则一直存在
储存地点
cookie存在客户端,session存在服务端,session依赖session id,session id存在cookie中
子主题
输入URL地址到页面响应发生了什么
浏览器先查找当前的url是否存在缓存,并比较缓存是否过期
没有缓存,浏览器将当前的url发送给DNS服务器解析URL对应的IP地址
根据IP建立TCP链接
HTTP发起请求
服务器处理请求,浏览器接收HTTP响应
渲染页面,构建DOM树
关闭TCP连接
TCP三次握手和四次挥手
Vue
watch和computed的区别
watch是监听,监听到某个属性变化了,就执行里面的函数
immediate: 在第一次渲染的时候要不要执行监听
deep: 监听一个对象,是否要监听这个对象里面属性的变化
computed是计算属性,是用来计算一个值的,这个值在调用的时候可以当成属性一样使用,他会根据依赖自动缓存,如果依赖不变,computed不会自动计算
Vue的声明周期钩子,作用
beforecreate
data,methods,computed,watch都无法访问
created
可以访问data,methods,还没有挂载到DOM
beforemount
可以访问data,methods,是虚拟DOM挂载前
mounted
Vue实例挂载到真实DOM上
beforeupdate
响应式数据更新前,发生在虚拟DOM打补丁之前
updated
虚拟DOM重新渲染和打补丁之后,当前组件的DOM已经完成更新,可以获取到当前的最新数据
beforedestroy
实例销毁前调用,用于销毁定时器,解绑事件
destroyed
实例销毁收调用,所有事件监听会被移除,所有的子实例会被销毁
v-show和v-if
v-show: 通过设置DOM元素的display属性控制显隐
v-if: 是动态向DOM树添加或者删除元素,开销大
列表遍历key的作用
v-for更新已经渲染过的元素列表的时候,它默认用'就地复用'策略,如果没有key,vue就不能准确的知道那个元素被修改了,会出现bug
key的作用是为了更高效的更新虚拟DOM
组件通信
props $emit
provide inject
vuex
eventBus
$attrs $listeners
$parent $children
data为什么是函数
因为如果使用的是对象,那么每个实例使用的data数据是可以相互影响的
使用函数之后,data()函数中的this指向的是当前实例本身
Vue数据响应式
把一个普通js对象传入传入vue实例作为data选项,vue会遍历这个对象的所有属性,使用Object.defineproperty把这些属性转为getter,setter.每个组件实例都会对应一个watcher实例,组件在渲染的过程中把接触过的数据记录为依赖,当依赖的setter触发时,会通知watcher,使它关联的组件重新渲染
Vuex是什么,重要概念
vuex是专门为vue开发的状态管理模式
核心概念
state: shore中储存的各个状态
getter: 根据依赖的state和getter自动缓存,计算其返回值
mutation: 一组方法,用来更新store中的状态 , 只能包含同步操作
action: action是提交的mutation,不是直接变更store的状态,可以包含异步操作
modules: 将store分割成模块
Vue.set作用
如果用到了一个没有在data中生命的变量,那么这个操作将不会触发视图的更新,Vue.set就是让Vue来监听这个数据,让它在变化的时候进行视图更新
VueRouter
Vue官方的路由管理器
动态路由匹配: 把某种模式匹配到的所有路由,全都映射到同一个组件,路径参数用:标记,当匹配到路由,参数值会设置到this.$route.params
用redirect重定向
路由守卫
是路由跳转过程中的一些钩子函数
全局的
全局前置守卫: router.beforeEach(to,from,next)
全局后置钩子: router.afterEach(to,from)
路由独享的
beforeEnter(to,from,next)
组件内的守卫
beforeRouteEnter(to,from,next)
beforeRouterUpdate(to,from,next)
beforeRouterLeave(to,from,next)
v-model .sync
v-model 本质上是语法糖,用v-bind:value绑定数据,v-on:input添加事件监听,监听用户的输入事件来更新数据
.sync 用v-bind:value绑定数据, v-on:update:value来添加事件监听
Vue 和 React 的区别
相同点
都是对视图的封装
不同点
React用类和函数表示一个组件,Vue通过构造选项构造一个组件
React提供jsx,Vue提供模板写法
React数据不可变,Vue数据可变
$route 和 $router 的区别
$route是路由信息对象,包含path,params,hash等路由信息参数
$router是路由实例对象,包含路由的跳转方法和钩子函数
vue.extend 和 vue.component
extend是构造一个vue的子类
React
React生命周期
constructor: 初始化state
shouldComponentUpdate: 手动判断是否进行组件更新
render: 返回值就是虚拟DOM
componentDidMount: useEffect(()=>{},[])元素插入页面后执行的钩子,首次渲染会执行,可以发起Ajax请求
componentDidUpdate: useEffect(()=>{},[n]) 在视图更新后执行的钩子,首次渲染不会执行
componentWillUnmount: useEffect(()=>{return ()=>{}}) 组件在销毁时执行的钩子
列表渲染为什么加key
减少没必要的diff算法的对比
react用key来标记列表哪些元素被修改删除或添加
setState异步更新
react会维护一个state的更新队列,每次调用setState都会把当前修改的state推进这个队列,在最后,react会对这个队列进行合并处理,然后再去执行回调,因为这样对性能优化有极大好处
受控组件和非受控组件
受控组件: state属性和表单元素的值建立依赖关系,再通过onChange事件和setState结合更新state属性的表单输入元素
用ref从表单元素获取数据
shouldComponentUpdate的作用
它允许我们手动判断是否要进行组件更新,返回true表示不阻止更新,返回false表示阻止UI更新
虚拟DOM
render执行的结果并不是得到真正的DOM节点,是js对象
优点是可以减少不必要的DOM操作,减少DOM操作的次数
高阶组件
可复用逻辑的组件,它接受一个组件,返回一个新组件
组件懒加载
子主题
Redux
React Hooks 怎么用, useEffect返回值, 依赖值
React组件通信
webpack
常见的loader和plugin
loader和plugin和区别
按需加载
如何提高构建速度
打包文件过大如何解决
算法
快排
计数
冒泡
选择
归并
插入
二分法
反转二叉树