其他 (四) | 前端学习笔记

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

一、HTML
二、CSS
三、JS
四、H5C3
五、ES6
六、VUE
七、HTTP
- 1、浏览器输入url发生了什么
- 2、三次握手
八、微前端
- 1、主子应用通讯
- 2、主子应用样式隔离
九、小程序
十、vue3
十一、webpack
- 1、webpack优化构建速度
十二、在项目中做过的复杂的功能
- 1、放在低代码平台实现的拓展wang富文本图片预览功能

一、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、在哪个阶段有$ $e l 、在哪个阶段有$ 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/$ $e m i t /$ 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/$ $a t t r s /$ 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（动态链接库插件）