前端小知识点总结

typeof与instanceof

typeof返回string、Boolean、number、function、object、undefined6种
注意null类型返回object
instanceof意为实例，及返回对象的构造函数。

懒加载和预加载区别

懒加载：使用到的时候在加载
预加载：提前加载
所以懒加载是减少前端压力，预加载增加前端压力，但优化用户体验。
懒加载：一开始为空，不请求资源，但是占位当图片等进入视图后从其他属性里取src，开始请求。通过选择器循环添加监听器
预加载：原理是利用缓存，当图片已经加载完成了，再次使用该路径，就会从缓存中调用。减少网络请求。可通过css（背景图片或加载但不显示完成）也可以通过js的new Image() .src =“路径”来加载等

token为什么就比cookie安全

xss攻击来说，cookie和token没有什么区别。但是对于csrf来说就有区别

• 客户端以后每次请求都会自动带上这个sessionid
• 每次客户端请求都需要开发者手动将token放在header中带过去
  因为csrf是通过假传命令完成的，无论做什么都会自动带上cookie，但是token只有特定的api才会手动带上token

SSL加密技术

SSL 的英文全称是 “Secure Sockets Layer” ，中文名为 “ 安全套接层协议层 ”
SSL会话主要分为三步：
1.客户端向服务器端索要并验正证书；
2.双方协商生成“会话密钥”；对成密钥
3.双方采用“会话密钥”进行加密通信；

前端性能优化

浏览器两大核心：渲染引擎+JavaScript引擎
浏览器将HTML解析成DOM，CSS解析成CSSOM，一边下载文件一边解析，遇到script元素时候把网页渲染的权力转交给JavaScript引擎，处理完毕后再恢复到渲染引擎上

• 优化 DOM
• 优化 CSSOM
• 优化 JavaScript
• 减少回流（形状改变），多重绘（颜色）（实质上是减少重渲染数量）
• 合理使用css选择器
• 事件委托
• 多次触发事件用防抖（固定输出）和节流（等比例输出）
• 懒加载
• 预加载

webpack原理

一个入口，多个出口，加载文件，根据依赖关系，生成依赖树，根据预处理器处理文件，通过插件扩充功能，打包生成文件。

sass

css扩展语言，也是css预处理器，最终的结果是生成css文件
1定义属性
2嵌套
3父选择器&
4import（一开始就加载（cssimport遇到时加载））
5混入（解构）定义一个@mix{}，然后include
6继承（继承选择器+样式）
7各种函数

混入mixin

混入类似于类的继承与sass的混入，也很类似但是也有不同
混入的特点如下

• 混入的原型是对象（组件）A，被混入的也是组件B
• 两个组件的属性和方法会累加（1层）
• 相同的属性方法，b会替换a
• 对于相同的钩子函数，会将内部的事件形成数组，a的钩子函数执行在b前面
• 混入也可以进行全局注册Vue.mixin（{}）

directive

插槽

修饰符

• 事件修饰符
  .stop .preven .capture .self .once .passive
• v-model的修饰符
  .lazy .number .trim
• 键盘事件的修饰符
  别名：.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right
  修饰键：.ctrl.alt.shift.meta
• elementUI的修饰符
  最后面加.native才可触发
• .sync

props

父子间传递的是引用地址
对于正常情况下，props正常单向向下传递。如果在子组件修改props会报错。

• 但是如果props是引用型，只修改部分内容，则不报错，但是会导致父组件改变。
• 子组件通过this.$emit()，调用父组件的函数。
• 子组件通过this.$emit()，调用父组件通过.sync生成的修改函数。
• 子组件通过this.$emit()，调用父组件v-model语法糖的改变值的一部分

this

this是只读属性的

switch作用域

case：起条件选择的作用，但不是单独的作用域，而整个switch是一个作用域
所以不能重复使用let和const，编译不通过，但是也会出现在某个case里声明，但是执行其他case报未定义错误。
示例链接

目标对象本身的捕获和冒泡时间事件的处理程序的执行顺序是否也是按照定义顺序

在事件捕获和冒泡阶段，事件的处理程序的执行顺序是按照定义顺序的。即先定义的处理程序先执行，后定义的处理程序后执行。
在事件捕获阶段，从window对象开始往目标元素对象传递事件，依次执行经过的每个元素的捕获事件处理程序，直到达到目标元素。处理程序的执行顺序是按照定义顺序的，即先定义的处理程序先执行，后定义的处理程序后执行。
在事件冒泡阶段，从目标元素对象开始往window对象传递事件，依次执行经过的每个元素的冒泡事件处理程序，直到达到window对象。处理程序的执行顺序也是按照定义顺序的，即先定义的处理程序先执行，后定义的处理程序后执行。