前言
这一个我学习前端面试题的笔记。

一、HTML

1、行内元素有哪些？块级元素有哪些？空元素有哪些？

• 行内元素：span、img、input…
• 块级元素：div、footer、header、section、p、h1…h6…
• 空元素：br、hr…
• 元素之间转换问题
  • display: inline；—转换行内元素，不独占一行，并且不能设置宽高
  • display: inline-block; —转换行内块元素，不独占一行，可以设置宽高
  • display: block;— 转换块元素，独占一行，可以设置宽高

2、页面导入样式时，使用link和@import有什么区别？

• link先有，后有@import（兼容性link比@import兼容）
• 加载顺序差别，浏览器先加载link，后加载@import

3、title与h1区别、b和strong的区别、i与em的区别？

• title与h1区别

  • title：网站内容主题，显示在网页标题上
  • h1：文章主题内容，显示在网页内容上
  • title比h1添加的重要（title>h1）对于seo的了解
  • 网站的logo都是用h1标签包裹的

• b和strong的区别

  • b：实体标签，文字加粗，没有实际含义
  • strong：逻辑标签，加强语气，表示比较重要
  • 为了符合css3的规范，b尽量少用改用strong就行了

• i与em的区别

  • i: 实体标签，用来做文字倾斜的，没有实际含义
  • em: 逻辑标签，用来强调文字内容，用来强调的
  • i更多用在字体图标上，em术语上

4、img 标签的title和alt有什么区别？

• title： 鼠标移入到图片显示的值
• alt： 图片无法加载时显示的值
• 在seo的层面上，蜘蛛抓不到图片的内容，所以前端在写img标签时候为了增加seo效果要加入alt属性来描述这张图什么内容或者关键词

5、png、jpg、gif这些图片格式解释一下，分别什么时候用？

• png：无损压缩，尺寸要比jpg大，适合做小图标
• jpg：采用压缩算法，有一点失真，比png体积小，适合做中大图片
• gif：一般是做动图
• webp：同时支持有损或者无损压缩，webp具有更小的体积，兼容性不是特别好

二、CSS

1、CSS选择器有哪些？哪些属性可以继承？

• CSS选择符:
  • 通配(*)
  • id选择器(#)
  • 类选择器(.)
  • 标签选择器(div、p、h1…)
  • 相邻选择器(+)
  • 后代选择器(ul li)
  • 子元素选择器(>)
  • 属性选择器(a[href])
• css属性哪些可以继承:
  • 文字系列：font-size、color、line-height、text-align…
• 不可继承属性:
  • boeder、padding、margin…

2、CSS优先级算法如何计算？

• 优先级比较
  • ！important > 内联样式 > id > class > 标签 > 通配
• CSS权重计算:
  • 第一：内联样式(style) 权重值：1000
  • 第二：id选择器 权重值：100
  • 第三：类选择器 权重值：10
  • 第四：标签&伪元数据选择器 权重值：1
  • 第五： 通配、 >、 + 权重值：0

3、用CSS画一个三角形

• 用边框画(border)
• div{
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 100px solid transparent;
  border-bottom: 100px solid #ccc;
  }

4、一个盒子不给宽度和高度如何水平垂直居中？

• 方式一：
  .container{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  border: 5px solid #ccc;
  }
  .main{
  background: red;
  }

• 方式二：
  .container{
  position:relative;
  width: 300px;
  height: 300px;
  border: 5px solid #ccc;
  }
  .main{
  position: absolute;
  background: red;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  }

• 回答：

• 行内元素居中：

  • 水平居中：text-align: center;
  • 垂直居中：行内元素line-height等于父元素的高度

• 块内元素居中1(定位，需要有固定宽高)：

  • 子块 margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  • 父块 position: relative

• 块内元素居中2(flex)：

  • 父块 display: flex;
  • justify-content: center; 水平居中
  • align-items: center; 垂直居中

• 块内元素居中3(transform，CSS3特性)：

  • 子块 position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  • 父块 position: relative

详细：https://juejin.cn/post/7088272829300342798#heading-8

5、对BFC规范（格式块上下文）的理解。

• BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
• 了 解BFC： 块级格式化上下文
• BFC原则： 如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响外面的元素
• 如何触发BFC：
  • float的值非none
  • overflow的值非visible
  • display的值为：inline-block、table-cell…
  • position的值为：absoute、fixed

6、清除浮动有哪些方式？

• 触发BFC
• 多创建一个盒子，添加样式:clear： both;
• 常用：after方式，
  ul:after{
  content: ‘’;
  display: block;
  clear: both;
  }

7、在网页中的应该使用奇数还是偶数的字体？为什么？

• 偶数：让文字在浏览器上表现更好看
• 另外说明：UI给前端一般设计图都是偶数的，这样不管是布局也好，转换PX也好，方便一点

8、position有哪些值？分别是根据什么定位的？

• static【默认】 没有定位
• fixed 固定定位，相对于浏览器的窗口进行定位
• relative 相对于自身定位，不脱离文档流(相对定位)
• absolute 相对于第一个有relative的父元素，脱离文档流(绝对定位)
• relative和absolute区别
  • relative不脱离文档流，absolute脱离文档流
  • relative相对于自身，absolute相对于第一个有relative的父元素
  • relative如果有left、right、top、bottom == 》left、top
  • absolute如果有left、right、top、bottom == 》left、right、top、bottom

9、写一个左中右布局占满屏幕，其中左、右两块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。

• 双飞翼布局

10、什么是CSS reset？

• reset.css 是一个css文件，重置CSS样式的（冗余，公司用的少）
• normalize.css 为了增强跨浏览器渲染的一致性，一个CSS重置库

11、css sprite是什么，有什么缺点

• 把多个小图标合并成一张大图片（雪碧图）
• 优点：减少了http请求的次数，提升了性能
• 缺点：维护比较差（例如图片位置进行修改或者内容宽高修改）

12、display: none;与visibility: hidden;的区别

• 占用位置的区别：
  • display: none; 是不占位置的
  • visibility: hidden; 虽然隐藏了，但是占位置
• 重绘和回流的问题
  • display: none; visibility: hidden;都会产生重绘
  • display: none; 还会产生一次回流
• 产生回流一定会造成重绘，但是重绘不一定会造成回流
• 产生回流的情况：改变元数据的位置(left、top…)、显示隐藏元素
• 产生重绘的情况：样式改变(backgroud、color…)

13、opacity 和rgba区别

• 共同性：实现透明效果
• opacity 取值范围0到1之间，0表示完全透明，1表示不透明
• rgba r表示红色，g表示绿色，b表示蓝色，取值可以在正整数或者百分数。a表示的透明性，也是在0到1之间
• 区别： opacity会继承父元素的opacity属性，而rgba设置的元素的后代元素不会继承不透明属性

14、line-height和height区别

• line-height是每一行文字的高，如果文字换行则整个盒子高度会增大（行数*行高）
• height是一个死值，就是这个盒子的高度

15、介绍一下CSS的盒子模型

• CSS的盒子模型有哪些：标准盒子模型、IE盒子模型
• CSS的盒子模型区别：
  • 标准盒子模型：margin 、border、padding、content
    • 计算：width + 左右padding +左右border
  • IE盒子模型：margin、content（border + padding + content）
    • 计算： width （假设width和左右padding宽度加一起一致，那么会额外加左右border的宽度）
• 通过CSS如何转换盒子模型：
  • box-sizing： content-box； 标准盒子模型
  • box-sizing： border-box； IE盒子模型

16、flex

• flex-grow是如果有剩余空间，是否扩大，0为不扩大
  flex-shrink是如果剩余空间不够，是否缩小，1为缩小
  flex-basis为项目本身的大小，默认值是auto
• flex: 1
  • 对应的是1 1 0%, 相当于可扩大，可缩小，flex-basis为0%
  • 解释：不管内容多少，一般都是平分空间，空间大小都一致
• flex: auto
  • 对应的是1 1 auto, 相当于可扩大，可缩小，flex-basis为auto
  • 解释： 是根据内容的大小来分，不是均分的（除非内容都是一样，才均分）
• flex: 0
  • 对应的是0 1 0%, 相当于不可扩大，可缩小，flex-basis为0%
  • 解释：不可扩大，可缩小,表现形式为最小内容宽度, 上图你可以看到div的宽度就是一个字的宽度
• flex: none
  • 对应的是0 0 auto, 相当于不可扩大，不可缩小，flex-basis为auto
  • 解释：不可扩大，不可缩小，内容本身的宽度是多少就是多少

三、JS

1、延迟加载JS有哪些方式？

• async：async是和html同步执行的，不是顺次执行JS脚本（谁先加载完就谁先执行）
• defer：等html全部解析完成，才会执行JS代码，顺次执行JS脚本的

2、JS数据类型有哪些？

• 基本类型：string、number、boolean、undefined、null、symbol
• 引用类型：object

3、JS数据类型考题

• NaN是一个数值类型，但是不是具体数字
• null是object类型
• 字符串加任何都是字符串 ‘1’+true = 1true
• 数字+Boolean是数字 1+true = 2
• typeof(NaN) 是 number
• typeof(undefined) 是 undefined
• typeof(null) 是 object

4、null和undefined的区别

• 作者在设计JS的时候都是先设计的null（为什么设计了null，因为借鉴了Java语言）
• null会被隐示转换为0，不容易发现错误
• 先有null后有undefined，出现undefined是为了填补之前的坑
• 具体区别：null是一个表示“无”的对象（空对象指针），转为数值为0；undefined是一个表示"无"的原始值，转为数值为NaN

5、== 和===有什么区别？

• ==：比较值
• ===：除了比较值还比较数据类型
  
• == 执行结果都是true
• string == number || Boolean…都会隐式转换，通过valueOf转换（方法是JavaScript后台运行的，不显示）

6、JS微任务和宏任务

• JS是单线程的语言
• JS代码执行流程：同步==》事件循环
  • 同步的任务执行完了，才会执行事件循环，进入事件循环：请求、定时器、事件…
• 事件循环包含【宏任务、微任务】
• 微任务：promise.then
• 宏任务：setTimeout…
• 要执行宏任务的前提是清空了所有的微任务
  • 流程：同步==》事件循环【宏任务、微任务】 -> 微任务 -> 宏任务 -> 微任务…

7、JS作用域考题

• 除了函数外，JS是没有块级作用域
• 作用域链：内部可以访问外部的变量，但是外部不能访问内部的变量
  • 注意：如果内部有，优先查到内部，如果内部没有就查找外部
• 注意声明变量是var还是没有写（window. 全局变量）
• 注意：JS有变量提升的机制【变量悬挂声明】
• 优先级：声明变量 > 声明普通函数 > 参数 > 变量提升
• 面试的时候怎么看
  • 本层作用域有没有此变量（注意变量会提升）
  • 注意：JS除了函数外没有块级作用域
  • 普通声明函数是不看写函数的时候顺序

8、JS对象考题

• JS对象注意点：
  • 对象是通过new操作符构建出来的，所以对象直接不相等（除了引用外）
  • 对象注意：引用类型（共用一个地址）
  • 对象的key都是字符串类型
  • 对象如何找属性|方法
    • 先在对象本身找->构造函数中找->对象原型找->构造函数原型中找->对象上一层原型查找
• 考题
  • 
  • 
  • 

9、JS作用域+this指向+原型的考题

• 考题
  • 
  • 
  • 
  • 

10、JS判断变量是不是数组，你能写出哪些方法？

11、slice是干嘛的、splice是否会改变原数组

12、找出多维数组的最大值

13、给字符串新增方法实现功能

14、找出字符串出现最多次数的字符以及次数

15、new操作符具体做了什么

• 创建了一个空的对象
• 将空对象的原型，指向于构造函数的原型
• 将空对象作为构造函数的上下文（改变this指向）
• 对构造函数有返回值的处理判断
• 

16、闭包

• 闭包是什么
  • 闭包是一个函数加上到创建函数的作用域的连接，闭包“关闭”了函数的自有变量
• 闭包可以解决什么问题【闭包的优点】
  • 内部函数可以访问到外部函数的局部变量
  • 
• 闭包的缺点
  • 变量会驻留在内存中，造成内存损耗问题
    • 解决：把闭包的函数设置为null
  • 内存泄漏【ie低版本】

17、原型链

• 原型可以解决什么问题
  • 对象共享属性和共享方法
• 谁有原型
  • 函数拥有prototype
  • 对象拥有__proto__
• 对象查找属于或者方法的顺序
  • 先在对象本身查找->到构造函数查找->对象的原型->构造函数的原型中->当前原型的原型中查找
• 原型链
  • 是什么？就是把原型串联起来
  • 原型链的最顶端是null

18、JS继承有哪些方式

• 方式一：ES6
  • 
• 方式二：原型链继承
  • 
  • 优点：父类方法可以复用
  • 缺点：引用类型的属性被所有实例共享，子类型实例不能给父类型构造函数传参
• 方式三：借用构造函数
  • 
  • 优点：1.避免了引用类型的属性被所有实例共享、2.可以在子类构造函数中向父类传参数
  • 缺点：方法都在构造函数中定义，每次创建实例都会创建一遍方法。
• 方式四：组合式继承
  • 
  • 优点：融合原型链继承和构造函数的优点，是 JavaScript 中最常用的继承模式。

19、call、apply、bind的区别

• 共同点：功能一致
  • 可以改变this指向
  • 语法 函数.call() 、函数.apply()、函数.bind()
• 区别
  • call 、apply可以立即执行。bind不会立即执行，因为bind返回的是一个函数需要加入()执行
  • 参数不同：apply第二个参数是数组。call和bind有多个参数需要挨个写
• 场景
  • 
  • 
  • 其他可call

20、sort背后的原理是什么？

• v8引擎sort函数只给出了两种排序 InsertionSort和QuickSort，数量小于10的数组使用InsertionSort，比10大的数组使用QuickSort
• 之前的版本是：插入排序和快速排序，现在是冒泡排序

21、深拷贝和浅拷贝

• 共同点：复制
• 浅拷贝：只复制引用，而未复制真正的值
  • 直接赋值
  • Object.assign 方法
  • ES6 扩展运算符
  • jQuery 中的 $.extend
• 深拷贝：是复制真正的值（不同引用）
  • JSON.parse(JSON.stringify(待拷贝对象)) ，但是这种方式有一个缺点，那就是里面的函数无法被拷贝。
  • 手写递归的方式来实现深拷贝!
  • jQuery 中的 $.extend，上面已经说过了，加上true就可以实现深浅拷贝

22、localStorage、sessionStorage、cookie的区别

• 公共点：在客户端存放数据
• 区别
  • 数据存放的有效期
    • sessionStorage：仅在当前浏览器窗口关闭之前有效，关闭就没了
    • localStorage：始终有效，窗口或者浏览器关闭也一直保存，所以叫持久化存储
    • cookie：只在设置的cookie过期时间之前有效，即使窗口或者浏览器关闭也有效
  • localStorage、sessionStorage不可以设置过期时间，cookie有过期时间，可以设置过期(把时间调整到之前的时间)
  • 存储大小的限制
    • cookie存储量不能超过4K
    • localStorage、sessionStorage不能超过5M
    • 根据不同的浏览器存储大小是不同的

四、H5C3

1、什么是语义化标签

• 易读性和维护性更好
• seo成分会更好，蜘蛛抓取会更好
• IE8不兼容HTML5标签的。解决：可以通过html5shiv.js去处理

2、::before和:after中双冒号和单冒号有什么区别？解释一下这2个伪元素的的作用

• 区别
  • :是伪类，::伪元素 是为了做区分
• 是什么？作用
  • 元素 before之前，元素after之后
  • 作用：清除浮动、样式布局上也有作用

3、如何关闭IOS键盘首字母自动大写

4、怎么让Chrome支持小于12px的文字？

• Chrome默认字体大小是12px(不同浏览器不同)
• 

5、rem和em的区别

• 相对于font-size
  • em针对于父元素的font-size
  • rem针对于根(html)元素的font-size

6、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉？

7、webkit表单输入框placehold颜色值能修改吗？

8、禁止ios长按时触发系统的菜单，禁止ios&Android长按时下载图片

9、禁止ios和Android用户选中文字

10、自适应

• 淘宝无限适配【移动端】:淘宝无限适配+布局单位使用rem

11、响应式

• 是什么
  • 一个url响应多端
• 语法结构
  • 
• 响应式图片【性能优化】
  • 

12、网页布局方案

• 什么情况下采用自适应布局
  • 数据不是特别多，用户量不是特别大，纯展示类项目适合响应式布局，例如公司的官网、专题页面
  • 特别追求性能的项目，不太适合响应式，因为如果添加了很多响应式会造成加载速度变慢
• pc+移动端应该做什么样的布局方案
  • 注意： 访问量还可以或者比较大，类似淘宝网
  • pc是一套，会加入一点点响应式，移动端是一套，会使用自适应的布局方式
• pc的设计图
  • ui:1980，笔记本电脑:1280，UI图的宽度和电脑宽度不对应该怎么办
    • 把UI图进行等比缩放，缩放成和电脑一样的尺寸
    • 换1980电脑
• 移动端的设计图
  • 宽度：750，因为750设计图/2就是375，正好是iPhone6尺寸，把iPhone6座位基准点

五、ES6

1、var、let、const区别

• 共同点都是可以声明变量
• 区别
  • var具有变量提升的机制，let和const没有变量提升机制
  • var可以多次声明同一个变量，let和const不可以多次声明同一个变量
  • var、let声明变量的、const声明常量
  • var和let声明的变量可以再次赋值，但是const不可以再次赋值
  • var声明的变量没有自身作用域，let和const声明的变量有自身的作用域

2、作用域考题

• 
• 考题二
• 可以修改

3、将下列对象进行合并

4、箭头函数&普通函数有什么区别？

• this指向的问题
  • 箭头函数中的this是在箭头函数定义时就决定了，而且是不可修改的(call、apply、bind)
    • 箭头函数的this指向定义的时候，外层第一个普通函数的this
• 箭头函数不能new(不能当做构造函数)
• 箭头函数没有prototype
• 箭头函数没有arguments

5、promise有几种状态

• 三种状态：pending进行中、fulfilled已成功、rejected已失败

6、find和filter的区别

• 区别一：返回的内容不同
  • filter返回是新数组
  • find返回具体的内容
• 区别二：
  • find：匹配到第一个即返回
  • filter：返回整体(每一个匹配到的都返回)

7、some和every的区别

• some如果有一项匹配则返回true
• every全部匹配才会返回true

8、forEach、for in、for of、set、map区别

• for in：可以遍历对象，可以遍历出数组的原型对象，可以遍历出数组的属性，遍历出来的值是key，不可以遍历set/map，不可以遍历具有iterator的数据对象，ie支持，推荐循环对象时用in
• for of：不可以遍历对象，不可以遍历出数组的原型对象，不可以遍历出自身的属性，遍历出来的值是value，可以遍历set/map，遍历具有iterator的数据对象 ，ie不支持，推荐循环数组时用of
• Set：任何类型，唯一值
• Map：键值对，记住插入顺序，任意值作为键
• map：返回一个处理后的新数组，不改变原来数组的值。
• forEach：没有返回值，不能确保数组的不变性。

六、VUE

1、vue生命周期

• 系统自带8个生命周期
  • beforeCreate、created、beforeMount、mounted、beforeUpdate、update、beforeDestroy、destroyed
• 一旦进入页面或者组件，会执行哪些生命周期，顺序。
  • beforeCreate、created、beforeMount、mounted
• 在哪个阶段会有$el、在哪个阶段有$data
  • beforeCreate 啥也没有
  • created 有data没有el
  • beforeMount 有data没有el
  • mounted 都有
• 加入keep-alive生命周期多了2个
  • activated
  • deactivated
• 如果加入了keep-alive，第一次进入组件会执行哪些生命？
  • beforeCreate、created、beforeMount、mounted、activated
• 如果加入了keep-alive，第二次或者地N次进入组件会执行哪些生命周期？
  • 只执行一个生命周期：activated
• 加载渲染过程
  父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
• 更新过程
  父beforeUpdate->子beforeUpdate->子updated->父updated
• 销毁过程
  父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

2、谈谈你对keep-alive的了解

• 是vue系统自带的一个组件，功能：用来缓存组件的，提示性能
• 使用场景
  • 就是来缓存组件，提升项目的性能

3、v-if和v-show区别

• 展示形式不同
  • v-if创建一个dom节点
  • v-show是display：none、block
• 使用场景不同
  • 初次加载v-if要比v-show好，页面不会做加载盒子
  • 频繁切换v-show要比v-if好，创建和删除的开销太大了，显示和隐藏开销较小

4、 v-if和v-for优先级

• v-for的优先级比v-if高
  • 是在源码体现：function genElement

5、ref是什么？

• 来获取dom的

6、nextTick是什么？

• 获取更新后的dom内容

7、scoped原理

• 作用：让样式在本组件中生效，不影响其他组件
• 原理：给节点新增自定义属性，然后css根据属性选择器添加样式

8、vue中如何做样式穿透

9、vue的组件通讯

• 方式一：props/$emit
• 方式二：$emit/$on
  • var Event=new Vue();
    Event.$emit(事件名,数据); Event.$on(事件名,data => {});
• 方式三：vuex
  • 通过vue的this.$store来获得state，this.$store.state.count
  • 修改：this.$store.commit(‘countAdd’,num)
• 方式四：$attrs/$listeners
  • $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。
  • $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
• 方式五：provide/inject
  • 
• 方式六：$parent / $children与 ref
  • 无法在跨级或兄弟间通信

10、computed、methods、watch有什么区别？

• computed vs methods区别
  • computed是有缓存的
  • methods没有缓存
• computed vs watch区别
  • watch是监听，数据或者路由发生了改变才可以响应(执行)
  • computed计算某一个属性的改变，如果某一个值改变了，计算属性会监听到进行返回
  • watch是当前监听到了数据改变了，才会执行内部代码

11、props和data优先级谁高？

• props -> methods -> data -> computed -> watch

12、vuex有哪些属性？

• State：类似组件中data，存放数据
• Getters：类似于组件中computed
• Mutations：类似组件中methods
• Actions：提交Mutations的
• Modules：把以上4个属性再细分，让仓库更好管理
• Mutations和Actions区别
  • Mutations：都是同步事物
  • Actions：可以包含任意异步操作

13、vuex是单向数据流还是双向数据流？

• vuex是单向数据流
• 只能通过Mutations来改变

14、vuex如何做到持久化存储

• vuex本身不是持久化存储
• 使用localStorage自己写
• 使用 npm install --save vuex-persist插件

15、vue路由history、hash

• hash：路由上有#，不会发请求，hash变化会触发页面跳转，即浏览器的前进、后退，hash变化不会刷新页面，不会提交到server端
  • 原理： 浏览器地址栏url的hash值发生变化时，触发onhashchange事件
  • 再通过window.location.hash获取到hash值，然后进行相应的处理去除#
  • 再将url和相应的组件函数进行映射，根据不同的hash值执行不同的回调函数
  • 加载相应的组件来实现页面跳转 window.onhashchange = （event）=> {}
• history：会发请求，跳转时不刷新页面
  • 原理：将url通过pushState()或replaceState()填入到history和地址栏中
  • 再通过onpopstate事件响应执行相应的回调函数，实现前端组件间的切换
• 区别
  • 

16、介绍一下SPA以及SPA有什么缺点

• SPA是什么？单页面应用
• 缺点
  • seo优化不好
  • 性能不是特别好

17、vue路径传值

• 显式，query
• 隐示，params

18、路由导航守卫有哪些

• 全局
• 路由独享
• 组件内

19、vue动态路由

• 场景：详情页（文章、商品）
• 

20、双向绑定原理

• 通过object.defineProperty劫持数据发生的改变 + 发布者订阅者模式，它能检测到属性的变化，如果数据发生改变了(在set中进行赋值的)，就通知dom更改数据。
• vue3是通过proxy来实现数据劫持的，因为defineProperty拦截单纯的对象的key的值，而proxy它可以拦截对象，数组几乎一切对象包装类型，但是 Proxy 没法兼容 IE，所以 Vue3.0 底层还是采用 Object.defineProperty
• 发布订阅模式需要三种角色，发布者、调度中心和订阅者，二者是解耦的
• 观察者模式需要两种角色，观察者和被观察者，耦合在一起

21、diff算法

• 功能：提升性能
• 虚拟dom ->其实就是数据(把dom数据化)

七、HTTP

1、浏览器输入url发生了什么

• 首先，浏览器会对url进行解析，拿到协议、域名、query请求参数等
• 因为浏览器并不能直接通过域名找到对应的服务器，所以需要根据域名进行dns解析，找到服务端ip地址
• 知道服务器的ip地址后，浏览器所处的客户端与服务端进行tcp三次握手，来建立可靠的网络连接，确保后续双方能正常接收/发送http请求
• 浏览器根据http协议，向服务端发送http请求报文
• 服务端收到请求后，程序会进行数据处理，得到客户端所需要的数据
• 服务端根据http协议，将客户端所需的数据打包成http响应报文，发送给客户端
• 客户端会对收到的数据进行加工，进行页面渲染，最后，页面就有变化了

2、三次握手

• 第一次握手 (SYN=1, seq=x)，发送完毕后，客户端进入 SYN_SEND 状态
• 第二次握手 (SYN=1, ACK=1, seq=y, ACKnum=x+1)， 发送完毕后，服务器端进入 SYN_RCV 状态。
• 第三次握手 (ACK=1，ACKnum=y+1)，发送完毕后，客户端进入 ESTABLISHED 状态，当服务器端接收到这个包时

八、微前端

1、主子应用通讯

• qiankun内部提供了iniGlobalState方法用于注册MicroAppStateActions用于通信，该实例有3个方法分别是：
  • setGlobalState：设置globalState设置新值时，内部将执行浅检查，如果检查到globalState发生改变则触发通知，通知到所有的观察者函数
  • onGlobalStateChange：注册观察者函数，响应globalState变化，在globalState发生改变时出发该观察者函数
  • offGlobalStateChange：取消观察者函数，该实例不再响应globalState变化

2、主子应用样式隔离

• 设置sandbox
• 设置css prefix

九、小程序

十、vue3

十一、webpack

1、webpack优化构建速度

• 可用于生产环境
  • 优化babel- loader（使用include和exclude来明确范围）
    
  • lgnorePlugin（避免引用无用模块），不引入，代码中没有
    
• 不用于生产环境
  • 自动刷新
    • 配置了devServer时会默认开启此功能，无需自己配置watch
      
    • noParse（避免重复打包，如react.min.js这种文件是采用模块化处理过的）引入，但不打包
      
    • happyPack（多进程打包）
      
    • ParallelUglifyPlugin（多进程压缩js）
      
    • 热更新
      
    • DllPlugin（动态链接库插件）
      

十二、在项目中做过的复杂的功能

1、放在低代码平台实现的拓展wang富文本图片预览功能

• 1、在富文本组件里面根据dom节点获取到图片元素
  2、在图片元素上绑定双击事件
  3、双击事件触发图片预览图层子组件的显示功能，子组件里面用了el-image组件的图片预览功能
  4、通过ref获取到图片组件的实例，调用源码里面的viewer属性将预览图层打开