Lavender's blog

计算机网络的各层协议及作用计算机网络体系可以大致分为一下三种，OSI七层模型、TCP/IP四层模型和五层模型。 OSI七层模型：大而全，但是比较复杂、而且是先有了理论模型，没有实际应用。 TCP/IP四层模型：是由实际应用发展总结出来的，从实质上讲，TCP/IP只有最上面三层，最下面一层没有什么具体内容，TCP/IP参考模型没有真正描述这一层的实现。 五层模型：五层模型只出现在计算机网络教学过程中，这是对七层模型和四层模型的一个折中，既简洁又能将概念阐述清楚。 七层网络体系结构各层的主要功能： 应用层：为应用程序提供交互服务。在互联网中的应用层协议很多，如域名系统DNS，支持万维网应用的HTTP协议，支持电子邮件的SMTP协议等。 表示层：主要负责数据格式的转换，如加密解密、转换翻译、压缩解压缩等。 会话层：负责在网络中的两节点之间建立、维持和终止通信，如服务器验证用户登录便是由会话层完成的。 运输层：有时也译为传输层，向主机进程提供通用的数据传输服务。该层主要有以下两种协议： TCP：提供面向连接的、可靠的数据传输服务； UDP：提供无连 ...

微前端介绍 什么是微前端？微前端是一种多个团队通过独立发布功能的方式，来共同构建现代化 web 应用的技术手段及方法策略。 不同于单纯的前端框架/工具，微前端是一套架构体系，这个概念最早在2016年底由 ThoughtWorks 提出。 微前端是一种类似于后端微服务的架构，它将微服务的理念应用于浏览器端，将 Web 应用从整个的「单体应用」转变为多个小型前端应用的「聚合体」。 各个前端应用「原子化」，可以独立运行、开发、部署，从而满足业务的快速变化，以及分布式、多团队并行开发的需求。 微前端的特点 技术栈无关 主框架不限制接入应用的技术栈，子应用可自主选择技术栈 独立开发/部署 各个团队之间仓库独立，单独部署，互不依赖 增量升级 当一个应用庞大之后，技术升级或重构相当麻烦，而微应用具备渐进式升级的特性 独立运行时 微应用之间运行时互不依赖，有独立的状态管理 提升效率 应用越庞大，越难以维护，协作效率越低下。微应用可以很好拆分，提升效率 解决问题的理念有了，那要通过怎样的技术去实现呢？ iframe 最早也是最熟悉的解决方案就是通过iframe，因为它可 ...

深入理解JS事件循环机制同步任务和异步任务（微任务和宏任务）JavaScript是一门单线程语言 分为同步任务和异步任务 同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务。 异步任务指的是，不进入主线程、而进入”任务队列”的任务；只有等主线程任务全部执行完毕，”任务队列”的任务才会进入主线程执行。 异步任务分为宏任务和微任务 new promise()、console.log()属于同步任务 宏任务（macrotask） 微任务（microtask） 谁发起的 宿主（Node、浏览器） JS引擎 具体事件 1. script (可以理解为外层同步代码) 2. setTimeout/setInterval 3. UI rendering/UI事件 4. postMessage，MessageChannel 5. setImmediate，I/O（Node.js） 1. Promise 2. MutaionObserver 3. Object.observe（已废弃；Proxy 对象替代） 4. proce ...

webpack简介简介本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。 webpack的核心概念为以下模块，后续会对以下概念针对性输出文章。 入口（entry） 输出（output） loader 插件（plugin） 安装webpack 对操作系统没有要求，使用 Windows、Mac、Linux 操作系统均可，它唯一的依赖是 Node.js，所以使用 webpack 前需要先安装 Node.js，安装地址为 [Nodejs]](http://nodejs.cn/download/) 推荐安装TLS（长期维护）版本。node 安装完成后，在命令行输入 node -v，可显示版本号即安装成功。接下来，我们需要使用 Node.js 的包管理器 npm 来安装 webpack ，安装模块的方式有两种：一种是全局安装，一种是 ...

概述React 是用于构建用户界面的 JavaScript 库，React 核心只关注视图，不断优化算法，改进性能，提高开发和交互体验。 React 迭代稳定，重视兼容和过渡，在国内外，尤其是南方，都有相当多的公司在使用 React。 渐进式的思想同样表现在 React 的学习曲线上，能够与传统的 Web 技术共存，灵活的 JSX 语法等都会让 React 上手很快， 而庞大生态赋予了 React 更强能力的同时，也让开发者感叹花费了更多时间在社区里遨游。 React 应用React 在前端开发领域应用广泛，使用 React 可以构建 Web，插件，单页应用，App，小程序，桌面端，服务端等，微服务，Serverless，低代码，虚拟现实等都有 React 的用武之地。 React 面试注意事项React 面试题可以分为以下 4 个方面 基础：ES5+ 作用域，class，箭头函数，this 指向，异步编程，高阶函数的循环等常问 会用：state，副作用，Hook，加载渲染过程，路由、测试、调试、TS、Redux 等常问 原理：Virtual DOM，Diff 算法，设计组件，优化性 ...

git常用命令git init初始化一个 Git 仓库，它将创建一个 .git 文件夹，后续的操作记录都会在此文件夹里，相当于 Git 的数据库。 git remote add origin 远程仓库地址将本地仓库和远程仓库关联，origin 是远程仓库的名字，是 Git 的默认叫法。关联之后，我们就可以将本地的提交历史推送到远程仓库，完成和其他人的协同工作了。 git remote -v查看关联的远程仓库列表，返回远程仓库名和 URL： 12git remote -vorigin https://github.com/schacon/ticgit (fetch) git status显示当前工作目录和暂存区的状态，例如创建了一个文件，此时 git status 就会在 Untracked files 里显示该未追踪的文件，如果将该文件 add 了之后，就会在 Changes to be committed 看到，即已经加到缓存区，等待提交。最后，当我们 commit，就会发现没有任何修改和未提交的文件了。 git add [file] 、git add .用于将已修改或未跟踪的文 ...

HTML / CSS / JavaScript 基础学习 《Web 入门》 MDN 权威入门指南，HTML / CSS / JavaScript 快速上手 《CSS 世界》 讲解细腻，拓展延伸对 CSS 的认识 《现代 JavaScript 教程》 线上教程，简单明了，时效性强 《JavaScript 高级程序设计》 传说中的红宝书 《JavaScript 权威指南》 传说中的犀牛书 jQuery / ES6+ / 正则 / Canvas 进阶学习 《jQuery 中文文档》 翻译完整，结构清晰 《ES6 入门教程》 线上教程，很多前端学习 ES6 的起点和字典 《正则表达式 30 分钟入门教程》 30 分钟从入门到掌握正则的使用 《Web 前端开发精品课 HTML5 Canvas 开发详解》图文并茂，代码示例丰富 《前端通关手册：JavaScript》 大量面试真题检测 JavaScript 掌握水平 工程化及框架应用学习 《Node.js 中文文档》 《Webpack 中文文档》 《Vue.js 中文文 ...

数组扁平化ES6的flat方法flat() 方法将以指定的深度递归遍历数组，并将所有元素与遍历的子数组中的元素合并到一个新数组中以返回。 1234const arr = [1,[2,[3,[4,5]]],6]const res = JSON.stringify(arr).replace(/\[|\]/g,'')const res2 = JSON.parse('[' + res + ']')console.log(res2) 使用正则首先是使用 JSON.stringify 把 arr 转为字符串接着使用正则把字符串里面的 [ 和 ] 去掉然后再拼接数组括号转为数组对象。 1234const arr = [1,[2,[3,[4,5]]],6]const res = JSON.stringify(arr).replace(/\[|\]/g,'')const res2 = JSON.parse('[' + res + ']')console.log(res2) 递归12 ...

Nginx是什么？Nginx (engine x) 是一个轻量级、高性能的HTTP和反向代理服务器,同时也是一个通用代理服务器(TCP/UDP/IMAP/POP3/SMTP),最初由俄罗斯人Igor Sysoev编写。 简单的说： Nginx是一个拥有高性能HTTP和反向代理服务器，其特点是占用内存少，并发能力强，并且在现实中，nginx的并发能力要比在同类型的网页服务器中表现要好 Nginx专为性能优化而开发，最重要的要求便是性能，且十分注重效率，有报告nginx能支持高达50000个并发连接数 正向代理和反向代理Nginx 是一个反向代理服务器，那么反向代理是什么呢？我们先看看什么叫做正向代理 正向代理：局域网中的电脑用户想要直接访问网络是不可行的，只能通过代理服务器（Server）来访问，这种代理服务就被称为正向代理。 就好比我们俩在一块，直接对话即可，但如果我和你分隔两地，我们要想对话，必须借助一个通讯设备（如：电话）来沟通，那么这个通讯设备就是”代理服务器”，这种行为称为“正向代理” 那么反向代理是什么呢？ 反向代理：客户端无法感知 ...

操作系统常见的操作系统Windows和Linux，它们的区别在于内核不同 计算机是由各种外部硬件设备组成的，比如内存、cpu、硬盘等，如果每个应用都要和这些硬件设备对接通信协议，那这样太累了，所以这个中间人就由内核来负责，让内核作为应用连接硬件设备的桥梁，应用程序只需关心与内核交互，不用关心硬件的细节。 内核有哪些能力呢？现代操作系统，内核一般会提供 4个基本能力: 管理进程、线程，决定哪个进程、线程使用 CPU，也就是进程调度的能力; 管理内存，决定内存的分配和回收，也就是内存管理的能力; 管理硬件设备，为进程与硬件设备之间提供通信能力，也就是硬件通信能力;。 提供系统调用，如果应用程序要运行更高权限运行的服务，那么就需要有系统调用，它是用户程序与操。作系统之间的接口。 内核具有很高的权限，可以控制 cpu、内存、硬盘等硬件，而应用程序具有的权限很小，因此大多数操作系统，把内存分成了两个区域: 内核空间，这个内存空间只有内核程序可以访问； 用户空间，这个内存空间专门给应用程序使用； 用户空间的代码只能访问一个局部的内存空间，而内核空间的代码可以访问所有内存空间。因此，当 ...