前端八股（其他部分）

Echarts

是一个基于 JavaScript 的开源数据可视化工具库，用来绘制交互式、可定制的图表。

常用的组件：

title标题组件：show，text，link等属性。
toolbox工具栏组件：导出图片、数据视图、切换、缩放
tooltip组件：trigger组件
markPoint标注点

markLine图标标线

var chart = echarts.init(document.getElementById('main'));

// 2. 配置项
var option = {
title: { text: 'ECharts 示例' },
tooltip: {},
legend: { data:['销量'] },
xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] },
yAxis: {},
series: [{
    name: '销量',
    type: 'bar',   // 柱状图
    data: [5, 20, 36, 10, 10, 20]
}]
};

// 3. 使用配置项生成图表
chart.setOption(option);

Webpack
- webpack 是一个前端资源打包工具 (module bundler)，本质作用就是：把你写的各种资源（JS、CSS、图片、字体等），当作模块来处理，经过编译打包生成浏览器可用的优化文件。
- 在前端项目中如果用到ES6+、Vue/React组件化、TypeScript、各种资源（图片、字体等）需要用到webpack把它们转换成浏览器能认识的纯JS/CSS/HTML文件
- 打包过程：
  - 从入口文件开始，构建依赖关系图。
  - 遇到 import 或 require，就递归分析依赖。
  - 通过 Loader 转换代码。
  - 把所有模块打包成一个或多个 bundle。
  - 插件做额外优化（压缩、抽离 CSS、生成 HTML）。
- Module、Chunk与Bundle的关系：
  - Module：项目中所有的源码文件都叫模块。可以是 JS、CSS、图片、字体等，webpack把它们都视作“模块”。
  - Chunk：webpack在打包过程中，按照依赖关系，把多个module合并成一个“代码块”。
  - Bundle：chunk经过webpack处理、loader转换、插件优化后，最终生成的实际输出文件。
- Bibel转译器
  - 将高版本语言（ES6+等）转译成兼容性更好的旧版本JS，是一个JS编译器。
  - 原理：
    - 解析（Parsing）：源代码转译为抽象语法树。
    - 转换（Transform）：遍历AST，调用各种插件修改节点。
    - 生成（Generating）：把修改后的 AST 再转成代码字符串。
- Webpack打包和不打包区别：
  - 运行效率：若不打包，写的代码较多需要发送多次http请求，不易维护。
  - 对技术的支持：对于高版本语法可以通过webpack的bable来转化，使得低版本浏览器可以运行。
HTTP协议版本对比
- HTTP/1.0：每次请求都新建连接，效率最低。
- HTTP/1.1：支持长连接，但有队头阻塞。
- HTTP/2：二进制、多路复用、头部压缩，但仍受 TCP 队头阻塞限制。
- HTTP/3：基于 QUIC(UDP)，真正解决队头阻塞，握手更快，更适合移动互联网。
HTTP与HTTPS
- HTTPS (HTTP Secure) = HTTP + SSL/TLS。有身份验证。
- 对比：
  - 端口：HTTP用80，HTTPS用443.
  - 安全性：HTTP明文传输，HTTPS加密传输。
  - 速度：HTTP相对较快。
  - 成本：HTTPS需要SSL/TLS证书。
OSI七层网络模型
1. 应用层：面向用户，有HTTP，FTP，SMTP，DNS等协议。
2. 表示层：负责数据加密、压缩、表示等，把应用层数据转换为标准格式。如SSL/TLS，JPEG/MP3等。
3. 会话层：负责建立、终止和管理会话。
4. 传输层：提供端到端数据传输，保证数据可靠性。使用TCP/UDP。
5. 网络层：负责路由寻址（IP），使用IP/ICMP/BGP等算法和协议。
6. 链路层：在同一局域网内传输数据帧，解决错误检测，错误重传等。通过Ethernet，MAC地址等寻址。在交换机层面沟通。
7. 物理层：比特流传输。