目录
在下面 链接
一、HTML 区
-
行内标签，块标签，行内块标签
行内 特点：共占一行，不可以设置宽高 例如：em strong i a b
块 特点：独占一行，可以设置宽高 例如：ul ol li h1~h6 div p dl dt
行内块 特点：共占一行，可以设置宽高 例如：img select textarea input
二、CSS 区
1、盒模型
一、相关的知识点：
（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）
（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分
IE盒模型和W3C标准盒模型的区别：
（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding
（2）IE盒模型：属性width，height包含content、border和padding，指的是content
+padding+border。
在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为content-box，即标准盒模型；
如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE
盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。二、回答：
盒模型都是由四个部分组成的，分别是margin、border、padding和content。
标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型的width和height属性的
范围只包含了content，而IE盒模型的width和height属性的范围包含了border、padding和content。
一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。
三、JavaScript 区
-
基本数据类型和引用数据类型
基本：number string undefined null boolean
引用：Object Data Array Fun ction 正则表达式
基本数据类型存放在栈中，引用数据类型存放在堆中
-
监测数据类型
typeof() - 只能检测基本的数据类型
instanceof - 找的不单单是父级，也可能是父级的父级
contrcutor - 直接找的是父级
object.prototype.tostring.call() 什么数据类型都可以
四、React 区
-
animation 和 transition 的区别
animation 可以用 name 设置动画的名称，用 duration 设置动画完成的周期，用 timing-function 设置动画的速度曲线，delay 设置动画什么时候开始，iteration-count 设置动画播放的次数，direction 规定下一个周期是否逆向的播放，play-state 动画是否正在进行或者暂停，fill-mode 设置动画停了之后位置什么状态
transition 用 property 去设置过渡效果的属性名称，duration 设置过渡效果的周期，timing-function 规定速度效果的速度曲线，delay 设定过渡效果什么时候开始；
区别：
1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；
2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；
3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；
4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；
5、在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了；
- 2
- 3
- 4
- 5
- 6
五、Vue 区
1.vue 生命周期
1、beforeCreate（创建前）
表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。
2、created（创建后）
数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在 。
3、beforeMount（挂载前）
vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。
4、mounted（挂载后）
vue 实例挂载完成，data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，DOM 渲染在 mounted 中就已经完成了。
5、beforeUpdate（更新前）
当 data 变化时，会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。
6、updated（更新后）
当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。
7、beforeDestory（销毁前）
组件销毁之前调用 ，在这一步，实例仍然完全可用。
8、destoryed（销毁后）
组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。
2.vue3.0生命周期
beforeCreate => setup()
created => setup()
beforeMount => onBeforeMount
mounted => onMounted
beforeUpdate => onBeforeUpdate
updated => onUpdated
beforeDestroy => onBeforeUnmount
destoryed => onUnmounted
errorCaptured => onErrorCaputed
3.vue中的插槽
插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。
4、Vuex的执行过程
1.state用来存放状态
2.mutations用来修改当前state里面的状态
3.actions通过里面的commit让mutations里面的方法进行触发
4.getter用来返回当前的一个状态值
5.module是将当前的状态转化成一个模块，而且每个模块就是vuex的一个vue对象
这就是stata里面的vuex
6.页面的vuex是引入map actions和mapgetters帮助我们进行触发的
7.首先是mapactions帮助我们把actions里面的方法直接从actions里面拿出来放到methods里面直接去使用
8.mapgetters是帮助我们去从getter里面的把方法取出来放到computed里面直接把它当成属性去使用
29.reudx的执行过程
5、Reudx的执行过程
主入口index.js中 引入react-redux中的 Provider import { Provider } from 'react-redux';
引入store 使用provider组件将所有的组件包裹起来，用绑定属性的形式绑定store到组中
app.js中
引入react-redux中的 connect import { connect } from 'react-redux';
使用connect把所有的组件之间进行连接， connect使用时用两个小括号调用，第一个小括号有两个参数，一个是箭头函数，一个是json,回调中是使用assign将所有的状态合并到一起，第二个json参数是形成一个作用域，作用是传递action中的方法，第二个小括号是把当前组件传递进去
组件中使用时，取出react-redux的connect和在action中的方法，使用this.props.状态名，用来展示， 使用方法时，使用this.props.方法名，用来设置， 然后需要使用connect把所有的组件之间进行连接， connect使用时用两个小括号调用，第一个小括号有两个参数，一个是箭头函数，一个是json,回调中是使用assign将所有的状态合并到一起，第二个json参数是形成一个作用域，作用是传递action中的方法，第二个小括号是把当前组件传递进去 store文件夹中有两个文件， action.js中，定义type，然后返回设置状态的函数和type
index.js中 取出redux中的createStore，以及action中的type 最后需要将createStore返回出去，并且需要传递一个函数，定义这个函数时有两个参数，一个是状态，一个action,使用switch判断action中的type，当前所有条件都不成立时，将所有的状态返回，有条件成立时，就通过扩展运算符将state展开，并且将age进行操作，
6、Vue响应式原理
Vue 的响应式原理核心是通过 ES5 的保护对象的
Object.defindeProperty 中的访问器属性中的 get 和 set 方法，
data 中声明的，属性都被添加了访问器属性，
当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，
自动调用 set 方法，检测到数据的变化，会通知观察者 Wacher，
观察者 Wacher自动触发重新render 当前组件（子组件不会重新渲染）,生成新的虚拟 DOM 树，
Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别，
并记录下来，最后，加载操作，将所有记录的不同点，局部修改到真实 DOM 树上。
六、常见知识点
-
es6新增的方法
1.var和let和const
2.块级作用域let的优点
3.this指向的问题
4.三点运算符
5.promise分为那几个状态
三种状态
pending-进行中
fulfilled-成功
rejected-失败
6.箭头函数的简写
7.反单引号
8.结构赋值
9....new Set
10.map/filter/foreach/reduce都是循环的方法
11.字符串模板
-
前端性能优化
内容方面：
1. 减少 HTTP 请求 (Make Fewer HTTP Requests)
2. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)
3. 使得 Ajax 可缓存 (Make Ajax Cacheable)
针对CSS：
4. 把 CSS 放到代码页上端 (Put Stylesheets at the Top)
5. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
6. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
7. 避免 CSS 表达式 (Avoid CSS Expressions)
针对JavaScript ：
8. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)
9. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
10. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
11. 移除重复脚本 (Remove Duplicate Scripts)
面向图片(Image)：
12. 优化图片
13. 不要在 HTML 中使用缩放图片
14. 使用恰当的图片格式
15. 使用 CSS Sprites 技巧对图片优化
-
js为什么是单线程
JavaScript的单线程，与他的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这就决定了他只能是单线程，否则会带来很复杂的同步问题。
如果JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
-
节流和防抖
防抖（deounce）
给一个固定时间，如果你开始触发动作，并且在这个固定时间内不再有任何动作，我就执行一次，否则我每次都会重新开始计时
节流（throttle）
用户会反复触发一些操作，比如鼠标移动事件，此时只需要指定一个“巡视”的间隔时间，不管用户期间触发多少次，只会在间隔点上执行给定的回调函数
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
