1.回流和重绘
这里的回流相当于重排，就是重排重绘，页面的dom节点发生改变之后会引起重新排列元素，重排肯定要重新绘制，但是重绘不一定会重排，如果只是里面的内容改变了，就不会重新排列dom。
2.浏览器的渲染过程
从我们在地址栏输入了url之后浏览器就会调动多个进程参与页面绘制（浏览器进程、渲染进程、GPU进程、网络进程、插件进程）
输入到页面渲染分为两个阶段1.导航阶段2.渲染阶段
检测输入的url-->组装协议构成完整的地址-->发给网络进程检测本地是否有请求缓存-->准备ip和端口-->进行DNS解析-->等待tcp建立联系（三次握手四次挥手-->服务器收到并处理-->客户端处理相应（比如400，401，302之类的））-->开始渲染-->构建dom树（节点）-->预解析-->构建cssom-->计算样式-->布局-->分层-->图层绘制-->完成
具体看别人网站
一文摸透从输入URL到页面渲染的过程 juejin.cn/post/684490…
不会回答从输入url到页面显示发生了什么juejin.cn/post/695056…
3.js的基本类型和引用类型
基本数据类型：undefined、null、string、number、boolean、symbol（ES6新增的数据类新，表示独一无二的值，他是一个函数，但是不能用new，直接symbol（）去建立它） 引用数据类型：object（对象）、数组（array）、date、function、RegExp
引用类型可以添加属性和方法，但是基本类型不可以。基本类型是存在栈内存里面的，引用类型在堆内存里面。
4.null和undefined的区别
null和undefined都是表示没有，null是定义了但是监测到值为空返回的就是null，如果从开始压根就定义返回的就是undefined。所以在判断一个值存在与否要用它==undefined？来判断。
5.判断数据类型的方法
typeof 只能判断基本数据类型
const a=123
console.log(typef(a))
instanceof 用来判断a是否是b的实例（检测的是原型）
const a=[1,2,3]
console.log(a instanceof Array)
//内部的检测过程判断a是否是b的实例对象,就是判断a的—proto—和b的prototype相等与否
tostring.call()最准确的可以检测到引用类型
6.选择器的优先级
！important最高级>内联元素（就是html标签内的style去）>id选择器>class>类、伪类、属性>标签选择器、伪元素>通配符*、子元素、兄弟>继承没有
7. css可以继承的样式
继承可以用Inherited: Yes来选择继承。 默认继承的属性
8. call、apply、bind区别
都是改变this指向问题。箭头函数没有this指向。在ES6中this永远指向最后调用他的对象。
apply 和 call 的区别是 call 方法接受的是若干个参数列表，而 apply 接收的是一个包含多个参数的数组。都可以接收多个参数。bind是一个绑定函数，当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。
调用call/apply/bind的必须是个函数 call、apply和bind是挂在Function对象上的三个方法,只有函数才有这些方法
9.BFC与IFC
BFC是块级格式上下文，是页面上一个独立的容器，规定容器内的子元素不会影响到外界。版心！
应用 ：自适应两栏的布局，解决浮动塌陷、解决margin重叠问题
IFC没有块级元素，在一个环境中将里面的元素设置为行内块，就可以居中了。
GFC网格布局，利用display：grid。
FFC 只有谷歌和火狐可以用，利用display：flex、inline-flex就可以获得一个伸缩容器。
10.清除浮动的方法
老司机：overflow：heidden clear：both 伪元素 空盒子
11.盒模型
盒模型分为怪异盒模型和普通盒模型，可以用box-sizing来设置content-box是普通盒子。border-box是怪异盒子
怪异盒模型width=border+padding+content
普通盒模型width=content
12.居中的方法
水平居中行内的用text-ailgn
垂直的话，子绝父相 left：50% top：50% magrin-left-自身一半 magrin-top-自身一半 /或者上下左右全给0，margin：auto
或者用flex布局，display：felx
13.SSR服务器端渲染
为了良好的用户体验和前后端分离，大多前端项目都是单页应用通常情况下，负责在浏览器中输出组件，进行生成 DOM 和操作 DOM 来实现用户交互。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序，这就是服务器端渲染。更好的SEO优化，搜索引擎可以直接抓取页面，用框架 nuxt.js。
14.Event Loop 事件循环！！！
www.bilibili.com/video/BV1kf… b站的讲解视频
js代码一行一行执行，遇到函数调用就压入执行栈，遇到settimeout也压入执行站，但是回调会被放在消息队列中，遇到promise会把它也放入执行栈，但是回调方法在微任务队列中，执行栈全部执行完之后会先执行promise的回调清空微任务队列，在执行消息队列，这就是为什么一个0时间的settimeout的值会比promise打印的晚的原因。
15.H5、ES6、CSS3新增的东西
一、H5
1.语义化的标签 header、footer、nav、aside、content、
2.增强了表单元素 email、date
3.音频视频 audio、radio
4.地理定位 Golocation
5.拖拽 drop、drag
6.画图canvas 首先要创建一个画图工具才可以绘制。
7.离线存储功能。www.jianshu.com/p/30aa3922b…
8.web存储 cookie、localstorage、sessionstroage
· cookie很小4k，可以存50条。 后面俩可以5MB（兆）。
· cookie需要自己分装写方法，没有现成的api，过期时间可以自己设置。
· localstroage一直存在，seesionstroage关闭浏览器清空。
· getitem拿数据、setitem存数据、removeitem删数据
· localstroage clear()删除所有清空。
二、CSS3新增
1.伪类选择器
nth-child（）从0开始计算
first-child（）第一个
last-child （）最后一个
2.属性选择器
a[attr] 匹配这个单词
a[^attr=val] val这个单词打头
a[*attr=val] val 全词匹配
a[~attr=val] 包含val
3.颜色的rgba 直接可以设置透明效果
4.边框的圆角 border-radius
5.阴影 box-shadow 、text-shadow
6.渐变
7.盒子模型 box-sizing 属性：content-box（普通）、border-box（怪异）
8.媒体查询 meta，有很多配置。
9.动画 animation transition transfrom translate 以及他们之间的区别
animation是做动画的，比较大的，配合名字@keyfames{}按照百分比表述样式，或者from到to。
transition ：后面的属性，直接写样式，过渡的时间、速度曲线、延迟时间。
transfrom： 是用来做图形的变形。
translate 专门做移动。
三、ES6新增
- const 、let、以及var
const、let是新增的，现在用的比较多，因为var有变量提示。
const、let受到{}的限制，前面没定义后面不能用，且不能定义重复的值。
var收到函数的限制 function(){}，会产生暂时性死区。
2.箭头函数（）=>{}
箭头函数没有this指向，也没有arguments对象
3.扩展运算符...（可以合并数组）
a.push(...b)
4.模板字符串
5.call、apply改变this指向也是新增的 区别在上面写到过
6.解构赋值
7.JOSN.parse()和JOSN.stringify()
8.数组方法 set、reduce、filter、some、every、map、sort
16.数组的方法
比较全的数组方法www.bilibili.com/video/BV1BZ…
平常正常的数组，类数组是一个对象，比如arguments对象有length，但是没有数组方法。还有ul下面的li（dom的list）、字符串（用array的方法不能改变长度只能用Array.prototype.foreach.call(str,function(item){ console.log(item) })）
const a = [1,2,3,4,5]
//当你多写了一个逗号或者删除其中的一个值，它就会变成，
delete a[1]
//打印出来就是
[1,empty,3,4,5]
consolelog(a[0])
//这时这个值为undefined
数组的方法非常多 用 console.dir(Array)/console.log([])
<1>toString方法（数组、对象、函数都有这个方法）
数组的toString可以把数组的[]去掉，变成字符串，多少维度的数组都可以去除。但是对于里面是object就不行，
a.简单的类型，数组扁平化。
b.还可以用join方法和string的split是互相逆转的
join把数组的每一项拿出来按照规定的字符拼接。
spilt把字符串，按照规定的字符转换成数组
<2>push、pop、unshift、shift。（堆栈方法）
push在后面添加一个，返回值是length，就是console.log(array.push())=length
pop在后面删除一下，返回的是删除的值，就是console.log(array.pop())=value
unshift在后面添加一个，返回值是length，就是console.log(array.unshift())=length
shift在后面删除一下，返回的是删除的值，就是console.log(array.shift())=value
//push可以传多个进去，用push和扩展运算符做数组拼接
const a = [1,2,3]
const b = [4,5,6]
a.push(4)
a.push(5,6,7)
a.push(...b)
<3>正序倒序reverse、sort
他俩只是正反颠倒，不会排序。
reverse倒序排列 ，操作原数组，返回原数组
sort正序排列，操作原数组，返回原数组 底层是冒泡和插入排序一起。
sort排序用法 www.cnblogs.com/panax/p/110…
乱序
<4>concat数组拼接方法，用...也可以
里面嵌套了数组就没办法拼接了，多维数组拼接用递归遍历拼接。
<5>删改方法slice、splice都是用来截取数组的
slice 第一个是截取的位置，第二个是截取停止的位置 包前不包后。返回的是个数，这个里面可以写负值，就是从后面计算位置，还可以将字符串变成一个新的数组。不会修改原数组
splice 第一个是截取的位置，截取几个，第三个是替换的值。截取的位置那个元素也包含。全包含 返回的是数组，会修改原数组。
<6>找索引 indexof、lastindexof、includes、find、findindex
搜索这个元素返回他的索引 （下标）
不同在于indexof正着查找，lastindexof反着查找
includes 查找元素，直接返回布尔值
find也是查找，里面接受的是一个函数，返回的是第一个符合条件的成员
findindex是查找，里面接受的是一个函数，返回的是第一个符合条件的成员的下标
<7>数组新增的静态方法，和原型上的方法。在课程4-6分钟左右有讲到。
fill 三个参数，起始位置，结束位置，用什么，去覆盖数组中一段。填充方法
<8>.遍历方法
a. for of方法
17.magrin塌陷问题以及解决
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合 （可以设置成透明：border：1px solid transparent）。
（2）为父盒子添加overflow：hidden
（3）为父盒子设定padding值
（4）为父盒子添加position：fixed
（5）为父盒子添加 display：table
（6）利用伪元素给子元素的前面添加一个空元素
18.解构赋值
完全匹配的解构赋值
当你给了默认值，解构的时候先看，有没有值没有才会运行默认值
这里，对象里面的key与value名字一样可以简写，里面有方法也可以简写
对象的结构式不存在顺序的。
