前端面试知识点小结

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

答：
语义化标签：header标签；nav标签；footer标签；hgroup标签；section标签；article标签；aside标签；figure标签；time标签；address标签。

html5新增标签有：video，表示一段视频并提供播放的用户界面；audio，表示音频；canvas，表示位图区域；source，表示为video和audio提供数据源；svg，用于定义矢量图等等。

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

答：
CSS盒模型包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。
标准盒模型：盒子总宽度/高度 = width/height + padding + border + margin。（ 即 width/height 只是 内容高度，不包含 padding 和 border 值 ）
IE盒子模型：盒子总宽度/高度 = width/height + margin = (内容区宽度/高度 + padding + border) + margin。

CSS选择器种类有：元素选择器；id选择器；类选择器；分组选择器（并集选择器）；复合选择器（交集选择器）；通配选择器；后代元素选择器；子元素选择；伪类选择器；

CSS选择器优先级顺序：!important > 内联样式 > id选择器 > 类选择器 > 标签选择器 > 默认 >继承 > 通配符

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

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

css的三种定位方式是：固定地位fixed 相对定位relative 绝对定位position

弹性布局的父级属性。display:flex; 弹性布局；flex-deriction 方向；flex-wrap 换行； justify-content 水平对齐方式；align-items 垂直对齐方式； align-content 垂直对齐方式，用于修改；flex-wrap 属性的行为(如果不换行，则无效),
子级属：性align-self 垂直对齐方式； order 排序；flex 分配空间；flex-basis 定义弹性盒子元素的默认基准值；flex-grow 定义弹性盒子元素的扩展比率；flex-shrink 定义弹性盒子元素的默认基准值，

实现上下左右居中对齐有三种方法：
方法一：父相自绝后，子分部向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)）
子元素部分代码：left: 50%; top: 50%; margin-left: -100px; margin-top: -100px;
方法二：父元素设置成弹性盒，子元素横向居中，纵向居中
子元素部分代码：justify-content: center; align-items: center;
方法三：父向子绝，子元素所有定位为0，margin设置auto自适应。
子元素部分代码：left: 0; top: 0; right: 0; bottom: 0; margin: auto;

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

答：
响应式布局就是一个网站能够兼容多个终端，同时适配pc端+平板+手机。
实现方法有：媒体查询；百分比【%】； vw或vh，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度； rem单位是相对于字体大小的html元素； flex弹性布局。

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

答：

• 重绘：重新绘制（repaint）：计算后各个元素的大小和位置后，绘制到页面上
  只改变样式，不会影响网页的布局，只改变样式。改变字体的颜色，字体的粗细，等等…总之， 不会影响页面的布局
• 重排：重新排列（reflow）：当dom树某个节点发生改变后，必然会引起页面重新排列dom树

触发重绘：更新节点，内容变化，元素大小尺寸变化，位置变化，dom树改变
触发重排：dom某个节点的改变，数据的增加删除，添加一个样式表等

通过display: none隐藏一个DOM节点-触发重排和重绘
通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化，只是css发生变化

如何避免？

1. 集中改变样式，不要一条一条地修改 DOM 的样式。
2. 不要把 DOM 结点的属性值放在循环里当成循环里的变量。
3. 为动画的 HTML元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
4. 不使用 table布局。因为可能很小的一个小改动会造成整个 table 的重新布局。
5. 尽量只修改position：absolute或fixed元素，对其他元素影响不大
6. 动画开始GPU加速，translate使用3D变化

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

答：
Cookie 是浏览器访问服务器后，服务器传给浏览器的一段数据。cookie在浏览器和服务器间来回传递，保存在客户端，不太安全，数据不能超过4K。只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭。
sessionStorage：会话存储，保存在服务端，临时使用，浏览器关闭则信息消失。不在不同的浏览器窗口中共享。
localStorage本地存储，保存在服务端，始终有效，保存后数据永远存在不会失效过期，除非用 js手动清除。数据大小一般是5M。
共同点：都是保存在浏览器端、且同源的

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

答：
内置对象：Boolean、String、Data、Array等。
基本数据类型：Number、String、Boolean、Null、 Undefined、Symbol（ES6），这些类型可以直接操作保存在变量中的实际值。
引用数据类型：object，array，function
检测数据类型四种方法：Typeof、instanceof、constructor、Object.prototype.toString.call()

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

答：
新特性：块级作用域let，const，变量解构赋值，模板字符串${}，箭头函数，promise，proxy，扩展运算符、rest参数、Symbol、模块化 模块化、组件化等

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

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

答：
（1）生命周期：在beforeCreate（），只有默认的生命周期和事件，数据代理都还未创建，只有初始化实例
Created（），method和data已经初始化完毕
beforeMount：模板以及创建完毕，但还未加载到页面上
Mounted：将模板挂载到页面上，发送请求，启动定时器，绑定自定义事件时都在此进行，
beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDistory：清除定时器，解绑自定义事件等，但还未完成
Distroyed：销毁定时器，自定义事件等
NextTick：当dom更新后循环结束后执行回调函数，数据改变后立即执行
keep-alive，用于捕获路由组件的激活状态Actived：激活deactived：失活
（2）组件通信：props 父->子 props接收，组件自定义事件 子->父
任意组件间通信：全局事件总线（安装全局事件总线$bus）、Pubsub消息订阅与发布、插槽、Vuex
（3）Vuex
数据集中管理，多组件间共享数据
State 保存数据 actions：处理事件 mutations：唯一能修改state的地方 getters ：简化数据
4个map方法（mapState，mapGetters，mapMutations，mapActions）用来获取数据更方便
使用模块化+命名空间更好管理每个小仓库

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

答：
前端性能优化：减少http请求，减少使用闭包，减少页面重排重绘，善用缓存减少重复加载资源
防抖：前面的触发都被取消了，最后一次在规定的事件后才会触发，也就是连续快速触发只会执行一次
节流：在规定的事件内不会触发回调，大于规定的事件才会触发回调，把连续频发的触发变成少数的触发