1、h5新特性
1.1语义化
概念：
合理正确的适用语义化来创建页面结构
新增标签：
页头 <header></header>
导航 <nav></nav>
主体 <main></main>
侧栏 <aside></aside>
文章 <article></article>
页脚 <footer></footer>
独立区域 <section></section>
特点：
在没有css代码的时候也能呈现良好的布局效果
代码结构清晰，易于阅读
利于开发和维护
方便SEO(搜索引擎优化)
1.2新增媒体元素
多媒体标签：
音频：
<audio src="" controls="controls" autoplay loop>
//<source src="">
</audio>
controls是控件；当属性和值相同时只需要编写属性,autoplay是自动播放
如果有多个source，会按顺序解析是否支持
loop是循环
视频：
<video src="" controls width="" poster="海报图片">
//<source src="">
</video>
多媒体标签：
<embed src=""></embed>
embed支持音频、视频、图片的引入，不需要控件
1.3新增表单属性
新增的表单属性值：
form：
<form novalidate autocomplete="on/off"></form>
novalidate设置表单不做验证
autocomplete设置是否打开输入提示
input：
<input type="" name="" value="" placeholder="占位符" autofocus minlength="最小长度"
maxlength="最大长度" multiple required checked>
autofocus:自动获取焦点
multiple：设置成多选
required：设置成必填
disabled：设置禁用按钮
readonly：设置成只读
checked：只有单选和复选有这个属性，实现默认选中该选项
表单新增的标签：
数据列表datalist：
<input list="对应的datalist的id值">
<datalist id="">
<option value="值">内容</option>
</datalist>
有值就会显示值和内容，没有就显示内容，有value没有值都不显示
输出：
<output></output>
1.4画布Canvas
2、css新特性
2.1新增属性
文字阴影：
text-shadow：x的偏移 y的偏移 模糊程度 图形颜色;
盒子阴影：
box-shadow：x的偏移 y的偏移 模糊程度 延伸半径 图形颜色 inset;
inset不写是外阴影，写上是内阴影
圆角边框(以值为半径画圆，分在四角)：
border-radius:*px | *%;
圆：保证宽高一样，半径是50%
胶囊状：半径是高度的一半
背景图大小：
background-size：宽度 高度;
英文大小写转换：
text-transform：lowercase小写| uppercase大写| capitalize首字母大写
word-break：break-all; 单词是否打断
word-wrap:break-word; 单词是否换行
2.2选择器
选择器
id选择器(#myid)
类选择器(.myclass)
属性选择器(a[rel="external"])
伪类选择器(a:hover, li:nth-child)
标签选择器(div, h1,p)
相邻选择器（h1 + p）
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)
优先级：
!important
内联样式（1000）
ID选择器（0100）
类选择器/属性选择器/伪类选择器（0010）
元素选择器/伪元素选择器（0001）
关系选择器/通配符选择器（0000）
带!important 标记的样式属性优先级最高； 样式表的来源相同时：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
2.3动画
过渡：
transition：过渡的属性1 执行时间 延迟时间 变化曲线,过渡的属性2 执行时间 延迟时间 变化曲线;
变化曲线:匀速linear
动画：
定义动画:
@keyframes 动画名{
0%{
开始状态
}
50%{
中间状态
}
100%{
结束时状态
}
}
绑定动画：
animation：动画名1 动画执行时间 延迟时间 执行次数 变化曲线 执行的方向，动画名2;
infinite是无穷次
alternate是正逆向重复(执行方向)
动画的执行状态：
animation-play-state:paused暂停 | running运行
2.4弹性盒子
Flex 布局
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些 特殊布局非常不方便，比如，垂直居中就不容易实现。
Flex 是 Flexible Box 的缩写，意为"弹性布局",用来为盒状模型提供最大的灵活性。指定容器 display: flex 即可。 简单的分为容器属性和元素属性。
容器的属性：
flex-direction：决定主轴的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse;
flex-wrap：决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow： .box { flex-flow: || ; }
justify-content：对其方式，水平主轴对齐方式
align-items：对齐方式，竖直轴线方向
align-content
项目的属性（元素的属性）：
order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0
flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大
flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果 定义个 item 的 flow-shrink 为 0，则为不缩小
flex-basis 属性：定义了在分配多余的空间，项目占据的空间。
flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。
align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖
align-items，默认属 性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局
2.5BFC
概念：
BFC 是 Block Formatting Context 的缩写，即块级格式化上下文。BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局， 并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算。
特性：
块级元素会在垂直方向一个接一个的排列，和文档流的排列方式一致。
在 BFC 中上下相邻的两个容器的 margin 会重叠，创建新的 BFC 可以避免外边距重叠。
计算 BFC 的高度时，需要计算浮动元素的高度。
BFC 区域不会与浮动的容器发生重叠。
BFC 是独立的容器，容器内部元素不会影响外部元素。
每个元素的左 margin 值和容器的左 border 相接触。
利用这些特性，我们可以解决以下问题：
利用 4 和 6 ，我们可以实现三栏（或两栏）自适应布局。
利用 2 ，我们可以避免 margin 重叠问题。
利用 3 ，我们可以避免高度塌陷。
触发方式：
浮动
定位position的值为fixed或者absolute
overflow的值不为默认值visible的时候 auto |scroll |hidden
display的值为flex | inline-flex | inline-block
元素水平居中：
text-align：center
对于确定宽度的块级元素：
width和margin实现。margin: 0 auto;
绝对定位和margin-left: (父width - 子width）/2, 前提是父元素position: relative
对于宽度未知的块级元素：
table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为 display:table），再通过给该标签添加左右margin为auto。
inline-block实现水平居中方法。display：inline-block和text-align:center实现水平居中。
绝对定位+transform，translateX可以移动本身元素的50%。
flex布局使用justify-content:center
垂直居中：
利用 line-height 实现居中，这种方法适合纯文字类
通过设置父容器 相对定位 ，子级设置 绝对定位，标签通过margin实现自适应居中
弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中
父级设置相对定位，子级设置绝对定位，并且通过位移 transform 实现
table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。
2.6重排和重绘
概念：
重排：
无论通过什么方式影响了元素的几何信息(元素在视口内的位置和尺寸大小)，浏览器需要重新计算元素在视口内的几何属性，这个过程叫做重排。
重绘：
通过构造渲染树和重排（回流）阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(元素在视口内的位置和尺寸大小)，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘。
如何触发：
添加，删除，更新DOM节点
通过display：none隐藏一个DOM节点
通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
移动或者给页面中的DOM节点添加动画
添加一个样式表，调整样式属性
用户行为，例如调整窗口大小，改变字号，或者滚动。
如何避免重绘或者重排？
集中改变样式，不要一条一条地修改 DOM 的样式。
不要把 DOM 结点的属性值放在循环里当成循环里的变量。
为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。
尽量只修改position：absolute或fixed元素，对其他元素影响不大
动画开始GPU加速，translate使用3D变化
提升为合成层：
将元素提升为合成层有以下优点：
合成层的位图，会交由 GPU 合成，比 CPU 处理要快
当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
对于 transform 和 opacity 效果，不会触发 layout 和 paint
提升合成层的最好方式是使用 CSS 的 will-change 属性：
#target {
will-change: transform;
}
隐藏页面中某个元素的方法
1.opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定 一些事件，如click 事件，那么点击该区域，也能触发点击事件的
2.visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已 经绑定的事件 ，隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
3.display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素。 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
3、ES6新特性
数据类型：
Number、String、Boolean、Null、undefine、Object、Symbol、Bigint
Symbol 代表独一无二的值，最大的用法是用来定义对象的唯一属性名。
BigInt 可以表示任意大小的整数。
数据类型判断：
typeof：可以判断基本数据类型，但是不能判断Null、Object、Array，都会返回Object
instanceof：可以准确判断Object、Array和function，但是不能判断基本数据类型
Object.prototype.toString.call():可以准确判断所有数据类型
let、const：
var可以先使用后声明，因为有变量提升，let和const必须先声明后使用
var不能跨函数访问，但是没有块的概念，let和const不能跨函数也不能跨块访问
const声明的是一个常量，声明的时候必须赋值
var允许在相同作用域重复声明
let和const会产生暂时性死区，所有typeof判断数据类型会有问题
箭头函数
自身不绑定this，会捕获上下文的this，作为自己的this
箭头函数作为匿名函数，没有构造方法，所以不能通过new命令
箭头函数不绑定arguments，但是可以通过拓展运算符获取传入的参数；
没有super方法，这些都由外围最近一层非箭头函数决定
函数默认参数
数组，对象解构和...拓展运算符
promise
是一种更优雅的异步编程方式
有三种状态:等待（pedding）、成功（fulfilled）、失败（rejected）,这些状态一经改变不能再改变,这些状态不受外界影响
有三个实例方法：then(),catch(),finally()
then（）方法:
then是实例添加状态改变时的回调函数，第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数
then方法返回的是一个新的Promise实例，也就是promise能链式书写的原因
catch（）方法:
处理错误信息，需要catch方法进行捕获， 作用等同于then的第二个参数
finally（）方法:
不管Promise对象最后状态如何都会执行的函数
继承
原型链继承：子类的原型对象指向父类的的实例
function Parent() {
this.parentName = '父类';
}
Parent.prototype.getParentName = function() {
return this.parentName;
};
function Child() {
this.childName = '子类';
}
Child.prototype = new Parent();
Child.prototype.getChildName = function() {
return this.childName
};
var c = new Child();
console.log(c.getParentName()); // '父类'
构造函数继承：借用构造函数的基本思想就是利用 call 或者 apply 把父类中通过 this 指定的属性和方法复制（借 用）到子类创建的实例中。
function Parent(name) {
this.name = name;
this.hobbies = ["sing", "dance", "rap"];
}
function Child(name) {
Parent.call(this, name);
this.age = 24
}
组合式继承
共享式继承：只能继承父类原型属性方法，不能继承构造函数属性方法
function Parent(){}
Parent.prototype.hobbies = ["sing", "dance", "rap"];
function Child(name, age){
this.name = name;
this.age = age;
}
Child.prototype = Parent.prototype;
var c1 = new Child("c1", 20);
var c2 = new Child("c2", 24);
c1.hobbies.push("coding");
console.log(c1.hobbies); // ["sing", "dance", "rap", "coding"]
console.log(c2.hobbies); // ["sing", "dance", "rap", "coding"]
console.log(c1.name); // "c1"
console.log(c2.name); // "c2"
原型继承
寄生继承
class继承
原型链
原型关系：
每个 class都有显示原型 prototype
每个实例都有隐式原型 _ proto_
实例的_ proto_指向对应 class 的 prototype
• 原型:
在 JS 中，每当定义一个对象（函数也是对象）时，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象。
原型链：
函数的原型链对象constructor默认指向函数本身，原型对象除了有原型属性外，为了实现继承，还有一个原型链指针__proto__,该指针是指向上一层的原型对象，而上一层的原型对象的结构依然类似。因此可以利用__proto__一直指向Object的原型对象上，而Object原型对象用Object.prototype.__ proto__ = null表示原型链顶端。如此形成了js的原型链继承。同时所有的js对象都有Object的基本防范
特点:
JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
闭包
在js中变量的作用域属于函数作用域, 在函数执行完后,作用域就会被清理,内存也会随之被回收,但是由于闭包函数是建立在函数内部的子函数, 由于其可访问上级作用域,即使上级函数执行完, 作用域也不会随之销毁, 这时的子函数(也就是闭包),便拥有了访问上级作用域中变量的权限,即使上级函数执行完后作用域内的值也不会被销毁。
闭包的特性：
1、内部函数可以访问定义他们外部函数的参数和变量。(作用域链的向上查找，把外围的作用域中的变量值存储在内存中而不是在函数调用完毕后销毁)设计私有的方法和变量，避免全局变量的污染。
1.1.闭包是密闭的容器，，类似于set、map容器，存储数据的
1.2.闭包是一个对象，存放数据的格式为 key-value 形式
2、函数嵌套函数
3、本质是将函数内部和外部连接起来。优点是可以读取函数内部的变量，让这些变量的值始终保存在内存中，不会在函数被调用之后自动清除
闭包形成的条件：
函数的嵌套
内部函数引用外部函数的局部变量，延长外部函数的变量生命周期
闭包的用途：
模仿块级作用域
保护外部函数的变量 能够访问函数定义时所在的词法作用域(阻止其被回收)
封装私有化变量
创建模块
闭包应用场景
闭包的两个场景，闭包的两大作用：保存/保护。 在开发中, 其实我们随处可见闭包的身影, 大部分前端JavaScript 代码都是“事件驱动”的,即一个事件绑定的回调方法; 发送ajax请求成功|失败的回调;setTimeout的延时回调;或者一个函数内部返回另一个匿名函数,这些都是闭包的应用。
闭包的优点：延长局部变量的生命周期
闭包缺点：会导致函数的变量一直保存在内存中，过多的闭包可能会导致内存泄漏
this指向
1.普通函数执行，this指向window
2.函数作为对象方法被调用，this指向调用的对象
3.构造器调用，this指向返回的对象
4.箭头函数this取决于函数定义的最近一层的对象
5.基于Function.prototype上的 apply 、 call 和 bind 调用模式，这三个方法都可以显示的指定调用函数的 this 指向。apply接收参数的是数组，call接受参数列表，`` bind方法通过传入一个对象，返回一个 this 绑定了传入对象的新函数。这个函数的 this指向除了使用new `时会被改变，其他情况下都不会改变。若为空默认是指向全局对象window。
深浅拷贝
浅拷贝：
只复制对象的指针，指向的还是同一个堆内存
实现方式：
Object.assign()(对象只有一层时是深拷贝)
...拓展运算符
深拷贝：
重新开辟一块堆内存，复制相同的堆里的值
实现方式：
用JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象
缺点：
如果obj里有RegExp(正则表达式的缩写)、Error对象，则序列化的结果将只得到空对象；
如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失；
如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null
使用Object.create()方法
函数库lodash的_.cloneDeep()
节流防抖
节流：事件触发后，规定时间内，事件处理函数不能再被调用(只执行第一次)（定义一个状态）
防抖：事件在短时间内多次触发，事件只执行一次，且是最后一次（重复执行就清除前一个定时器）
使用场景：
节流：滚动加载更多、搜索框的搜索联想功能、高频点击、表单重复提交……
防抖：搜索框搜索输入，并在输入完以后自动搜索、手机号，邮箱验证输入检测、窗口大小 resize 变化后，再重新渲染
MVVM
视图模型双向绑定，是Model-View-ViewModel的缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。以前是操作DOM结构更新视图，现在是数据驱动视图。
MVVM的优点：
1.低耦合。视图（View）可以独立于Model变化和修改，一个Model可以绑定到不同的View上，当View变化的时候Model可以不变化，当Model变化的时候View也可以不变；
2.可重用性。你可以把一些视图逻辑放在一个Model里面，让很多View重用这段视图逻辑。
3.独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计。
4.可测试。
4、React
4.1React事件机制
React并不是将click事件绑在该div的真实DOM上，而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅减少了内存消耗，还能在组件挂载销毁时统一订阅和移除事件。另外冒泡到 document 上的事件也不是原生浏览器事件，而是 React 自己实现的合成事件（SyntheticEvent）。因此我们如果不想要事件冒泡的话，调用 event.stopPropagation 是无效的，而应该调用 event.preventDefault。
4.2React路由原理
原理：
在dom渲染完成之后，给window 添加 “hashchange” 事件监听页面hash的变化，并且在state属性之中添加了 route属性，代表当前页面的路由。
1、当点击连接，页面hash改变时，触发绑定在window 上的 hashchange 事件，
2、在 hashchange 事件中改变组件的 state中的 route 属性，（react组件的state属性改变时，自动重新渲染页面）
3、页面 随着 state 中的route属性改变自动根据不同的hash 给 Child 变量赋值不同的组件，进行渲染
4.3redux
redux核心包括store，action，reducer。store可以理解为一个前端数据库，里面存储了需要的数据，我们可以通过dispatch函数去发起一个action，action里面包含了两个参数，一个是type，这个参数可以是说要对store进行怎样的修改，还有一个参数是要修改的值，但是action不能直接修改store，只有reducer才能对store进行修改，reducer是一个纯函数，有两个参数，第一个参数是旧的store，第二个参数是action，reducer会对旧的store进行修改，同时返回一个新的store，这样就可以通过store.getState来获取到新的store里面的值。store还有一个subscribe()方法，可以监听store的变化。
4.4hooks
4.5diff算法以及key的作用
4.6fiber
5、git
git add 提交到暂存区
版本回退：
git reset --hard 版本号
git reset --hard HEAD^(^代表上个版本，HEAD~100)
git commit -m 添加到历史区
创建分支:
git branch 分支名
查看全部分支：
git branch
切换分支：
git checkout 分支名
合并分支(要先切换到合并到的分支上)：
git merge 分支名
删除分支：
git branch -d 分支名
暂存代码：
git stash
git stash pop
合并分支某些内容：
git cheery pick
