前端面试小笔记来啦

1.HTML语义化标签有哪些？列举HTML5新标签。

语义化标签：标题标签h1~h5，列表ul，ol标签，强调strong，斜体em，p标签，table标签等

HTML5新标签：1.新增的语义化标签header，footer，nav，content

  2.音频audio 视频video，绘图canvas等

2.CSS盒模型是什么？选择器有哪些？优先级顺序是什么？CSS3新特性有哪些？

CSS盒模型：由content+padding+border+margin组成，其中content包含内容和图片

CSS盒模型有两类，标准盒模型（width和height只包含内容）

IE怪异盒模型(width和height包含了border和padding)

选择器：id选择器，类选择器，标签选择器，伪类选择器，伪元素选择器等

优先级：！Important>内联样式>id选择器>类选择器>标签选择器

CSS3新特性：边框border-radius，阴影box-shadow，文本阴影text-shadow，过度transition， 变换transform，动画animation需要动画帧@keyframes

3.CSS常用的定位方式有哪些？弹性布局Flex及其常用的属性？实现一个元素上下左右居中对齐有哪些方法？

定位方式：固定地位fixed  相对定位relative  绝对定位position

弹性布局flex：容器container 项目：item

             属性：flex-direction：对齐方式  flex-wrap：换行   jusity-content：主轴对齐

                   aligns-items：交叉轴对齐

上下左右居中对齐：margin：auto+定位

                  Text-align：center

  Flex：display：flex  jusity-cintent：center  align-items：center

  Grid：display：grid  jusity-cintent：center  align-items：center

4、响应式布局是什么？实现响应式布局有哪些方法？

一种网页设计布局，它的设计根据用户的行为和设备环境进行响应的调整与布局，同时适配pc端+平板+手机

实现办法：媒体查询 @media处设置viewport

          用%调节

          使用vm/vh相对尺寸

5、重绘和重排是什么？页面的哪些变化会触发重绘和重排？

重绘：计算后各个元素的大小和位置后，绘制到页面上

重排：当dom树某个节点发生改变后，必然会引起页面重新排列dom树

触发重绘：内容变化，元素大小尺寸变化，位置变化，dom树改变

触发重排：dom某个节点的改变，数据的增加删除，页面初识的渲染等

6、localStorage、sessionStorage、cookie分别是什么以及区别？

localStorage：本地存储，保存在服务端，浏览器关闭信息不会消失，只有人为才能删除存储信息，大小5mb

sessionStorage：会话存储，保存在服务端，临时使用，浏览器关闭则信息消失

cookie：保存在客户端，不太安全，最大4kb

7、JS内置对象有哪些？JS的基本数据类型和引用数据类型？JS的类型检测有哪些方法？

内置对象：Math，Date，String等js自身带的

基本数据类型：number，string，boolean，null，undefined

引用数据类型：object，array，function

类型检测：typeOf：返回字符串，不能分别null与object，object与array

  InstantOf：判断具体类型，返回boolean值true和false

  ===：全等，可判断null和undefined

8、ES6常用的新特性？数组常用的方法有哪些？

块级作用域let，const，变量解构赋值，模板字符串${}，promise，proxy，扩展运算符...等

数组常用方法：遍历forEach，map，every全为true返回true，keys()遍历index，values（）遍历值等

9、讲讲对Vue2前端框架的理解。例如：生命周期，组件通信，Vuex等。

(1)生命周期：在beforeCreate（），只有默认的生命周期和事件，数据代理都还未创建，只有初始化实例

Created（），method和data已经初始化完毕

beforeMount：模板以及创建完毕，但还未加载到页面上

Mounted：将模板挂载到页面上，发送请求，启动定时器，绑定自定义事件时都在此进行，(注意：子组件先挂载父组件都挂载，父给子通信时数据还没过去是undefined，要给子组件一个默认值)

beforeDistory：清除定时器，解绑自定义事件等，但还未完成

Distroyed：销毁定时器，自定义事件等

beforeUpdate，updated时更新数据前后的生命周期钩子

NextTick：当dom更新后循环结束后执行回调函数，数据改变后立即执行

路由独有的，用于捕获路由组件的激活状态Actived：激活deactived：失活

（2）组件通信：props  父->子 props接收

  组件自定义事件  子->父

 全局事件总线  任意组件间通信 安装全局事件总线$bus

 Pubsub消息订阅与发布 任意组件

插槽   任意组件

Vuex   任意组件

(3)Vuex

数据集中管理，多组件间共享数据

State 保存数据  actions：处理事件  mutations：唯一能修改state的地方   getters ：简化数据

4个map方法（mapState，mapGetters，mapMutations，mapActions）用来获取数据更方便

使用模块化+命名空间更好管理每个小仓库

10、前端性能优化有哪些方面？防抖和节流是什么？

减少http请求，减少使用闭包，减少页面重排重绘，善用缓存减少重复加载资源

防抖：前面的触发都被取消了，最后一次在规定的事件后才会触发，也就是连续快速触发只会执行一次

节流：在规定的事件内不会触发回调，大于规定的事件才会触发回调，把连续频发的触发变成少数的触发