前端面试知识点总结

前言：
博主突击两个月八股拿到美团（基础研发），腾讯（IEG），百度（搜索部门）暑期实习offer call，这是我学习过程中整理的前端知识点，内容有些多，可配合ctrl+f 查找食用~

- html语义化标签
- HTML5的新增功能
- 行内元素与块级元素
- 水平垂直居中
- CSS3新特性
- CSS选择器优先级
- flex布局
- transition和animation的区别
- Dom树 CSS树渲染树(render树)
- 重绘和回流的区别
- JS为啥要设计成单线程
- JS设计模式
- 手写instanceof
- es5类的继承
- 手写foreach
- 手写快排，堆排
- undefined和null区别
- 分别用ES5 ES6实现继承
- ES5和ES6的区别
- - 块级作用域
  - 关键字let，常量const
  - 属性和方法的简写
  - Object.keys() Object.assign ()方法
  - 解构赋值
  - 展开运算符
  - 模板字符串
  - for...of循环
  - Class类
  - Map + Set + WeakMap + WeakSet
  - Symbol
  - Promises
  - import 和 export
  - Modules
  - ES6 Generator函数
- JavaScript this指针
- ES7+ES8
- 作用域
- 箭头函数的特点与优缺点
- call ,apply和bind
- Promise A+
- 为什么要使用promise
- Promise then和catch区别
- promise的常用API和常用属性
- promise实现
- 原型及原型链
- for in 和 for of的区别
- WeakMap WeakSet
- 闭包
- 内存泄漏的原因有哪些
- V8垃圾回收机制详解
- JS垃圾回收机制
- 观察者模式与订阅发布模式的区别
- Vue双向数据绑定原理
- vue3的响应式原理
- 手写深拷贝
- Promise实现原理
- promise实现红绿灯
- 实现 Promise.all
- Vue相较于原生js的优点分析
- VUE相对于REACT的优势
- 防抖与节流
- Vue2 diff
- Vue2 和 Vue3 的区别
- Vue 和 REACT 的区别
- 首屏加载优化手段
- 如何减少 HTTP 请求次数
- Proxy Object.definepropert() 区别
- Pinia
- vite原理
- 虚拟DOM
- 浏览器中宏任务微任务
- uni-app是如何构建小程序的
- Vue.nextTick 的原理和用途
- vue异步更新dom的原理
- websocket
- websocket和http区别
- 浏览器缓存
- 强缓存与协商缓存
- 浏览器的同源策略
- 浏览器内多个标签页之间的通信
- 浏览器Performance性能监控使用详解
- CSRF攻击防范
- 前端数据存储方式
- 前端页面渲染方式
- MVVM和MVC区别
- MVVM模式原理与实现
- Webpack实现原理
- webpack生成AST和寻找依赖关系中发生了什么
- webpack的性能优化
- - 构建性能
  - 传输性能
  - 运行性能
- TreeShaking 工作原理
- package-lock的作用
- npm、 yarn 和 pnpm 的区别
- 对称加密与非对称
- - 对称加密
  - 非对称加密
- HTTP概念
- http和https区别
- https 怎么保证安全性
- HTTP状态码
- HTTPS 之 TLS 性能调优
- 常见Http Method
- get 和 post 的区别是啥
- http1.1优点
- HTTP2的优点
- HPACK算法
- TCP 和 UDP 区别
- TCP 是如何实现可靠传输的
- - 校验和
  - 序列号和确认应答机制
  - 重传机制
  - 滑动窗口协议
  - 流量控制
  - 拥塞控制
- TCP 三次握手和四次挥手
- url的hash和HTML5的history模式
- 几种常用实现跨域的方法
- 静态资源的渲染阻塞
- JS中async和defer作用与区别
- eslint和prettier区别
- cookie和token区别
- 一次完整的HTTP请求过程
- URL 输入的过程
- Node 中的 Process
- 其他计网问题
- 项目上线后的监控点，考虑哪些
- monorepo 优点
- Docusaurus 介绍
- GitHub Actions
- CI/CD
- node.js有哪些框架
- LRU 算法
- 交叉链表
- 跨端方案

html语义化标签

使页面的结构更清晰，便于阅读和维护。
有利于搜索引擎优化（SEO），提高网页的排名和流量。
提升用户体验，例如使用和属性来解释名称或图片信息，使用 <label> 标签来关联表单控件等。</label>
方便其他设备解析，例如屏幕阅读器、盲人阅读器、移动设备等。

HTML5的新增功能

https://www.bbsmax.com/A/6pdDZo2kJw/

行内元素与块级元素

https://www.cnblogs.com/duzheqiang/archive/2016/07/17/5679378.html

水平垂直居中

https://blog.csdn.net/weixin_44370837/article/details/116602151

CSS3新特性

https://xue.baidu.com/okam/pages/strategy/index?strategyId=153589512409320&source=natural

CSS选择器优先级

https://blog.csdn.net/hellow_tommer/article/details/121566718

flex布局

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

transition和animation的区别

https://blog.csdn.net/wuzhiyue2/article/details/118307772

Dom树 CSS树渲染树(render树)

https://blog.csdn.net/egegerhn/article/details/123121149

重绘和回流的区别

https://blog.csdn.net/pig_is_duck/article/details/105903741

JS为啥要设计成单线程

单线程的设计可以避免线程间的竞争和死锁等问题，同时也简化了代码的编写和调试，提高了程序的可靠性和稳定性。此外，单线程的设计也有利于JavaScript的扩展和优化，例如可以通过Web Worker来实现多线程处理，或者通过Node.js的事件驱动机制来利用多核CPU。因此，单线程的设计是JS的一大优势，也是其广泛应用于Web开发和服务器端开发的重要原因。

JS设计模式

https://blog.csdn.net/zhangjing0320/article/details/112472548

手写instanceof

function instanceOf1(obj, fun) {
    //判断数据类型
    if (typeof obj !== 'object' || obj === null || typeof fun !== 'function') {
        return false
    }
    //实现循环查找
    let proto = obj.__proto__
    while (true) {
        //到达原型链尽头，也就是查找循环终止的条件
        if (proto === null) return false
        if (proto === fun.prototype) return true
        //obj的原型不是fun的prototype的时候，沿着原型链继续向上寻找
        proto = proto.__proto__
    }
}

es5类的继承

https://blog.csdn.net/qq_42744920/article/details/126920831

手写foreach

Array.prototype.myForEach = function (callback, context = window) {
    let self = this;
    let len = self.length;
    for (let i = 0; i < len; i++) {
        if (typeof callback == 'function') {
            callback.call(context, self[i], i, this)
        }
    }
}

手写快排，堆排

//快速排序（从小到大）
void quickSort(int left, int right, vector<int>& arr)
{
	if(left >= right)
		return;
	int i, j, base, temp;
	i = left, j = right;
	base = arr[left];  //取最左边的数为基准数
	while (i < j)
	{
		while (arr[j] >= base && i < j)
			j--;
		while (arr[i] <= base && i < j)
			i++;
		if(i < j)
		{
			temp = arr[i];
			arr[i] = arr[j];
			arr[j] = temp;
		}
	}
	//基准数归位
	arr[left] = arr[i];
	arr[i] = base;
	quickSort(left, i - 1, arr);//递归左边
	quickSort(i + 1, right, arr);//递归右边
}

#include <iostream>
#include<vector>
#include <algorithm>
using namespace std;
 
//在start 和end区间内，如果父节点小于子节点，就交换
void max_heapify(int arr[], int start, int end)
{
	//建立父节点指标和子节点指标
	int dad = start;
	int son = dad * 2 + 1;//左子节点
	while (son <= end)  //若子节点指标在范围内才做比较
	{
		if (son + 1 <= end && arr[son] < arr[son + 1]) //先比较两个子节点大小，选择最大的
			son++;
		if (arr[dad] > arr[son]) //如果父节点大于子节点代表调整完毕，直接跳出函数
			return;
		else  //否则交换父子内容再继续子节点和孙节点比较
		{
			swap(arr[dad], arr[son]);
			dad = son;
			son = dad * 2 + 1;
		}
	}
}
 
void heap_sort(int arr[], int len)
{
	//初始化，i从最后一个父节点开始调整
	//堆数组的前一半为父节点，后一半为子节点
	for (int i = len / 2 - 1; i >= 0; i--)
		max_heapify(arr, i, len - 1);
	//先将第一个元素和已经排好的元素前一位做交换，再从新调整(刚调整的元素之前的元素)，直到排序完毕
	for (int i = len - 1; i > 0; i--)
	{
		swap(arr[0], arr[i]);
		max_heapify(arr, 0, i - 1);
	}
}
 
int main(void)
{
	int arr[] = { 3, 5, 3, 0, 8, 6, 1, 5, 8, 6, 2, 4, 9, 4, 7, 0, 1, 8, 9, 7, 3, 1, 2, 5, 9, 7, 4, 0, 2, 6 };
	int len = (int) sizeof(arr) / sizeof(*arr);
	heap_sort(arr, len);
	for (int i = 0; i < len; i++)
		cout << arr[i] << ' ';
	cout << endl;
	return 0;
}

undefined和null区别

undefined表示一个未声明或未赋值的变量，或者作为函数的参数，表示该参数没有传递值。undefined是全局对象的一个属性，它的类型是undefined，可以被重新赋值。
null表示一个空对象指针，或者作为函数的参数，表示该参数为空。null是一个字面量，它的类型是object，不可以被重新赋值。
undefined和null在布尔值上都是false，在相等运算符上都是true，但在全等运算符上是false。
undefined和null在转换为数值时，undefined会变成NaN，而null会变成0。
undefined和null在JSON.stringify时，undefined会被忽略或删除，而null会被保留。

分别用ES5 ES6实现继承

https://cloud.tencent.com/developer/article/2226473?areaSource=106000.9&traceId=cVRnpFtjN4XW_ZWwYyCW6

ES5和ES6的区别

块级作用域

关键字let，常量const

属性和方法的简写

Object.keys() Object.assign ()方法

解构赋值

展开运算符

模板字符串

for…of循环

Class类

Map + Set + WeakMap + WeakSet

Symbol

Promises

promise对象

import 和 export

Modules

(1) 具有CommonJS的精简语法、唯一导出出口(single exports)和循环依赖(cyclic dependencies)的特点。

(2) 类似AMD，支持异步加载和可配置的模块加载。

undefined和null区别

undefined和null都是JS中的基本数据类型，表示空值，但是有以下区别：

undefined表示一个未初始化或未定义的变量的值，而null表示一个有意缺少对象指向的值。
typeof undefined返回’undefined’，而typeof null返回’object’。
Object.prototype.toString.call(undefined)返回’[object Undefined]‘，而Object.prototype.toString.call(null)返回’[object Null]'。
undefined = = null返回true，但undefined === null返回false。
undefined转换为数值时返回NaN，而null转换为数值时返回0。
undefined一般是由系统自动赋值的，而null一般是由程序员手动赋值的。

ES6 Generator函数

https://blog.csdn.net/qq_31851435/article/details/128318337

JavaScript this指针

https://blog.csdn.net/m0_64674611/article/details/123798433

ES7+ES8

https://www.ngui.cc/zz/2281118.html?action=onClick

作用域

作用域就是代码的执行环境，它决定了变量的可访问范围和生命周期。JavaScript有全局作用域和局部作用域（函数作用域）两种，ES6还引入了块级作用域。全局作用域中的变量可以在任何地方访问，局部作用域中的变量只能在该作用域内或其子作用域内访问。作用域链是变量查找的机制，当一个变量在当前作用域找不到时，就会沿着父级作用域向上查找，直到找到该变量或者到达全局作用域为止。

箭头函数的特点与优缺点

https://blog.csdn.net/lwx33912138/article/details/128024914

call ,apply和bind

https://blog.csdn.net/qq_43000315/article/details/125360096

Promise A+

https://www.gzg123.cn/JavaScript/44.html

为什么要使用promise

https://blog.csdn.net/weixin_44386939/article/details/118961979

Promise then和catch区别

https://blog.csdn.net/weixin_29765949/article/details/112699755

promise的常用API和常用属性

https://www.cnblogs.com/upward-lalala/p/14752981.html

promise实现

https://juejin.cn/post/6844903665686282253#heading-2

原型及原型链

https://blog.csdn.net/dyy_csdn/article/details/104565026

for in 和 for of的区别

https://blog.csdn.net/qq_43796489/article/details/119566594

WeakMap WeakSet

https://blog.csdn.net/qq_32925031/article/details/111032188

闭包

闭包就是能够读取其他函数内部变量的函数

优点：

实现函数外部能访问内部局部变量

闭包还能延长局部变量在程序中的寿命，使其不被垃圾回收机制销毁

缺点：

闭包会引起内存泄漏

内存泄漏的原因有哪些

1、全局变量使用不当；

2、闭包使用不当；

3、延时器或定时器没有被清除；

4、没有清理的DOM元素引用（dom清空或删除时，事件未清除）

V8垃圾回收机制详解

https://blog.csdn.net/weixin_43832981/article/details/128803266

JS垃圾回收机制

https://blog.csdn.net/zzy_999/article/details/128559934

观察者模式与订阅发布模式的区别

https://blog.csdn.net/weixin_44786530/article/details/127091896

Vue双向数据绑定原理

vue是采用数据劫持结合观察者模式的方式，通过defineProperty()/Proxy来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

在Vue中，Dep是一个订阅器，它的作用是收集依赖（watcher）并在数据变化时通知它们进行更新。Dep中的subs存储的是所有依赖该Dep的watcher实例。Watcher是一个观察者，它的作用是当数据变化时，执行相应的回调函数。Watcher中的deps存储的是该watcher实例所依赖的所有Dep实例。Dep.target是一个静态属性，它的值为当前正在计算的watcher实例，该值是在watcher实例计算之前被赋值的。

在Vue中，Observer是一个数据观察者，它的作用是将一个普通的对象转换为每个层级属性都是响应式的对象。Observer会递归地遍历所有属性，将它们转换为getter/setter，并在需要时收集依赖。这样，当数据发生变化时，Observer就能够检测到并通知相关的watcher进行更新。

https://blog.csdn.net/qq_16049879/article/details/104681114

vue3的响应式原理

https://juejin.cn/post/7188810490817019959

手写深拷贝

function deepClone(obj) {
  if (typeof obj != 'object') return obj;
  var temp = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (typeof obj[key] == 'object') { // 如果obj[key]还是对象则执行递归
      temp[key] = deepClone(obj[key]); // 递归
    } else {
      temp[key] = obj[key];
    }
  }
  return temp;
}

Promise实现原理

https://juejin.cn/post/6844903665686282253#heading-2

promise实现红绿灯

https://blog.csdn.net/qq_37974755/article/details/123745896

实现 Promise.all

Promise.all = function (promises) {
  // 计数器，判断是否执行完了所有的promise
  let count = 0;
  const resMap = {};
  return new Promise((resolve, reject) => {
    const len = promises.length;
    promises.forEach((val, idx) => {
      Promise.resolve(val)
        .then((res) => {
        	// 将结果保存在一个对象里，用key记录入参顺序idx，
          resMap[idx] = res;
          ++count;
          
          if (count === len) {
            // 按入参顺序返回结果
            resolve(resMap);
          }
        })
        .catch((err) => {
          reject(err);
        });
    });
  });
};

Vue相较于原生js的优点分析

https://blog.csdn.net/m0_47265814/article/details/116637900

https://blog.csdn.net/weixin_58032613/article/details/123384886

VUE相对于REACT的优势

VUE的语法更简洁，更容易上手，更符合HTML的习惯。
VUE支持双向数据绑定，可以方便地实现数据和视图的同步。
VUE有更好的预编译优化，可以提高渲染性能。
VUE有更完善的文档和中文社区支持。

防抖与节流

https://blog.csdn.net/weixin_67651040/article/details/123559510

const debounce = (fn, time) => {
    let timeout = null
    return function () {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
            fn.apply(this, arguments)
        }, time);
    }
}

const throttle = (fn, time) => {
    let flag = true;
    return function () {
      if (!flag) return;
      flag = false;
      fn.apply(this, arguments);
      setTimeout(() => {
        flag = true;
      }, time);
    };
  };

Vue2 diff

vue中是先将新旧节点转为虚拟节点后再进行比对，并且采用的是同层对比的方式，如果同层不同，以新的为准，如果同层相同，对比子节点，新旧子节点分别设置头尾指针，旧头新头，旧尾新尾，旧头新尾，旧尾新头分别比较，成功则指针移动，都失败，则在旧节点创建一个map映射，然后遍历新节点

Vue2 和 Vue3 的区别

1.数据劫持 Proxy/Object.definepropert()

2.Vue3支持多个根节点

3.Composition API/Options API,相比于旧的API使用属性来分组，这样代码会更加简便和整洁。

4.生命周期不一样

Vue 和 REACT 的区别

https://blog.csdn.net/sinat_17775997/article/details/115482179

首屏加载优化手段

https://juejin.cn/post/6994420173432160270

如何减少 HTTP 请求次数

https://blog.csdn.net/qq_37247026/article/details/129214462

Proxy Object.definepropert() 区别

https://blog.csdn.net/qq_58717344/article/details/126943656

Pinia

https://zhuanlan.zhihu.com/p/533233367

https://www.cnblogs.com/chengqiang521/p/15890923.html

vite原理

执行 vite dev ,然后 vite 自己会起两个服务器,一个是用 connect 这个三方库起一个 HTTP 服务器,另一个是 ws 服务器，场景是热更新,同时会把你写的组件和它内置的组件都放到上下文环境里,然后用 chokdiar 监听你本地文件更改，这个和 ws 一起做热更新逻辑，此外有一个 moduleGraph 图，是来描述依赖关系的，这个是边分析依赖边更新，这时预构建完成。http服务器，会先利用 vite 提供的上下文对象，创建几个中间件，最后才listen到5173端口+pre bundle，中间件起到的作用就是，拦截浏览器过来的请求，先看看这个请求的 url 是否已经存在 transform 的结果，就是做一层缓存嘛，如果不存在，就依次执行 vite 的 hooks，得到结果，返回给浏览器，然后给一个200的状态码，给一个application/javascript 的响应头，涉及到更改 import 请求的部分，是在这个转换的过程中，由 vite 内置的一个插件完成的，这个内置的插件用 es-module-lexer 对代码做词法分析，直接拿到你所有的 imports，然后把三方库的路径重写到预构建(pre bundle)的路径下，这样子的话，监听端口之后，先预构建一下，把 cjs 产物写为 esm，小产物合并成适当大小，然后浏览器请求文件，vite 处理了，就返回对应的代码了。

https://blog.csdn.net/liu19721018/article/details/125646102

虚拟DOM

https://blog.csdn.net/yiyueqinghui/article/details/105468012

浏览器中宏任务微任务

宏任务：setTimeout、setInterval、setImmediate、I/O、

微任务：Promise、process、nextTick

宏任务进入主线程，执行过程中会收集微任务加入微任务队列

宏任务执行完成后，立马执行微任务中的任务。微任务执行过程中将再次收集宏任务，并加入到宏任务队列

反复执行1，2操作

uni-app是如何构建小程序的

https://blog.csdn.net/liubangbo/article/details/125206791

uni-app提供了一个运行时uni-app runtime，打包到最终运行的小程序发行代码中，该运行时实现了Vue.js 和小程序两系统之间的数据、事件同步。

小程序数据更新必须要调用小程序的setData函数，而Vue数据更新的时候会触发Vue.prototype._update方法，所以，只要在_update里调用setData函数就可以了。 uni-app在Vue里新增了patch函数，该函数会在_update时被调用。

Vue.nextTick 的原理和用途

https://zhuanlan.zhihu.com/p/174396758

vue异步更新dom的原理

https://www.qy.cn/jszx/detail/18195.html

修改 Vue 中的 Data 时，就会触发所有和这个 Data 相关的 Watcher 进行更新。首先，会将所有的 Watcher 加入队列 Queue。然后，调用 nextTick 方法，执行异步任务。在异步任务的回调中，对 Queue 中的 Watcher 进行排序，然后执行对应的 DOM 更新。

websocket

http://www.ruanyifeng.com/blog/2017/05/websocket.html

websocket和http区别

WebSocket是全双工的，即客户端和服务器可以同时发送和接收信息，而HTTP是半双工的，即客户端和服务器只能轮流发送和接收信息。
WebSocket是持久连接的，即客户端和服务器之间的连接会一直保持活动状态，直到任何一方终止，而HTTP是短连接的，即客户端和服务器之间的连接会在每次请求或响应后关闭。
WebSocket以ws://或wss://开头，而HTTP以http://或https://开头。
WebSocket可以实现服务器推送，即服务器可以主动向客户端发送信息，而HTTP需要客户端主动发起请求才能获取信息。

WebSocket的优势在于实时通信、减少网络开销、提高性能和效率。

浏览器缓存

https://blog.csdn.net/jiang_ziY/article/details/123818243

强缓存与协商缓存

https://blog.csdn.net/qq_33198051/article/details/123636725

浏览器的同源策略

https://blog.csdn.net/weixin_47450807/article/details/122687536

浏览器内多个标签页之间的通信

实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签之间没有办法直接通信，因此我们可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。

使用 websocket 协议，因为 websocket 协议可以实现服务器推送，所以服务器就可以用来当做这个中介.者。标签页通过向服务器发送数据，然后由服务器向其他标签页推送转发。

使用 shareWorker 的方式，shareWorker 会在页面存在的生命周期内创建一个唯一的线程，并且开启多个页面页只会使用同一个线程。这个时候共享线程就可以充当中介者的角色。标签页间通过共享一个线程，然后通过这个共享的线程来实现数据的交换。

使用 localStorage 的方式，我们可以在一个标签页对 localStorage 的变化事件进行监听，然后当另一个标签页修改数据的时候，我们就可以通过这个监听事件来获取到数据。这个时候 ocalStorage 对象就是充当中介者的角色。

·使用 postMessage 方法，如果我们能够获得对应标签页的引用，就可以使用 postMessage 方法，进行通信。

浏览器Performance性能监控使用详解

https://blog.csdn.net/weixin_44247866/article/details/128548925

CSRF攻击防范

https://www.wangan.com/wenda/3482

前端数据存储方式

https://www.cnblogs.com/hwinter/p/16821586.html

前端页面渲染方式

https://blog.csdn.net/weixin_42538281/article/details/122854986

MVVM和MVC区别

https://blog.csdn.net/qq_51066068/article/details/125441774

MVVM 是 Model-View-ViewModel 的缩写，是一种程序架构设计。它的核心思想是实现数据和视图的分离，通过数据来驱动视图的变化。MVVM 通常使用发布者-订阅者模式来实现数据和视图的绑定监听，并通过 ViewModel 作为中枢，实现视图 UI 和业务数据的更新。

MVVM模式原理与实现

https://blog.csdn.net/qq_41336022/article/details/118406636

Webpack实现原理

1 准备阶段：创建compiler和compilation对象;

2 编译阶段：完成modules的解析，生成chunks;

3 产出阶段：根据chunks，生成最终的文件

webpack生成AST和寻找依赖关系中发生了什么

webpack 遍历 AST 语法树，识别出 import、require 等导入语句，确定模块对其他资源的依赖关系。 webpack 对每个模块进行编译处理，根据文件类型和 loader 配置，调用相应的 loader 对不同的文件做转换处理。

webpack的性能优化

构建性能

减少模块解析
限制loader的应用
缓存loader的结果

传输性能

分包
代码压缩
tree shaking
懒加载
ESlint

运行性能

书写高性能的代码

https://blog.csdn.net/weixin_45320557/article/details/126369513

TreeShaking 工作原理

https://zhuanlan.zhihu.com/p/472733451

package-lock的作用

https://blog.csdn.net/h_mo_liang/article/details/113850575

https://www.cnblogs.com/fitzlovecode/p/diff_between_package_and_package-lock.html

npm、 yarn 和 pnpm 的区别

https://blog.csdn.net/weixin_42575028/article/details/127349060

对称加密与非对称

对称加密

对称加密的方法是，双方使用同一个秘钥对数据进行加密和解密。秘钥还是会通过网络传输的，一旦秘钥被其他人获取到，那么整个加密过程就毫无作用了

非对称加密

非对称加密的方法是，我们拥有两个秘钥，一个是公钥，一个是私钥公钥是公开的，私钥是保密的。用私钥加密的数据，只有对应的公钥才能解密，用公钥加密的数据，只有对应的私钥才能解密

HTTP概念

https://juejin.cn/post/6898194634669817869

http和https区别

http://www.ujiuye.com/wenda/2021/69809.html

1.http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443

2.HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全

https://www.runoob.com/w3cnote/http-vs-https.html

https 怎么保证安全性

https是一种通过计算机网络进行安全通信的传输协议，它利用SSL/TLS来加密数据包，防止数据被窃听、篡改或伪造。https还使用数字证书来验证通信双方的身份，防止身份被冒充。https的工作原理大致如下：

客户端向服务器发送一个https请求，要求建立一个SSL连接。
服务器向客户端发送自己的数字证书，证书中包含服务器的公钥和由受信任的机构签名的信息。
客户端验证服务器的数字证书，如果信任服务器，就用服务器的公钥加密一个随机数，作为会话密钥，并发送给服务器。
服务器用自己的私钥解密会话密钥，并用会话密钥加密与客户端之间的通信内容。
客户端用会话密钥解密服务器发送的内容，并用HMAC算法校验数据的完整性。

HTTP状态码

https://www.runoob.com/http/http-status-codes.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0HosqzM9-1684768881330)(C:\Users\mihoutao\AppData\Roaming\Typora\typora-user-images\image-20230316181403951.png)]

HTTPS 之 TLS 性能调优

https://www.cnblogs.com/cyfonly/p/9061262.html

常见Http Method

OPTIONS 返回服务器所支持的请求方法

GET 向服务器获取指定资源

HEAD 与GET一致，只不过响应体不返回，只返回响应头

POST 向服务器提交数据，数据放在请求体里

PUT 与POST相似，只是具有幂等特性，一般用于更新

DELETE 删除服务器指定资源

TRACE 回显服务器端收到的请求，测试的时候会用到这个

get 和 post 的区别是啥

https://www.php.cn/faq/500696.html

http1.1优点

https://blog.csdn.net/peipeiluo/article/details/80157251

HTTP2的优点

1 多路复用

TTP/1.1 协议中浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞。HTTP/2 的多路复用允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息

2 二进制分帧

HTTP/2在应用层(HTTP/2)和传输层(TCP or UDP)之间增加一个二进制分帧层，解决了HTTP1.1 的性能限制，改进传输性能，实现低延迟和高吞吐量。

3 首部压缩

HTTP/2 则使用了专门为首部压缩而设计的 HPACK 算法

4 服务推送

在 HTTP/2 中，服务器可以对客户端的一个请求发送多个响应，Server Push 让 HTTP1.x 时代使用内嵌资源的优化手段变得没有意义，遵循同源的情况下，不同页面之间可以共享缓存资源成为可能

HPACK算法

HPACK 算法是一种用于压缩 HTTP 头部的算法，它是 HTTP/2 协议的一部分。它与 gzip、zlib 等压缩算法不同，它是一个“有状态”的算法，需要客户端和服务器各自维护一份“索引表”，也可以说是“字典”（这有点类似 brotli），压缩和解压缩就是查表和更新表的操作。HPACK 算法使用了三种压缩方式：静态字典、动态字典和霍夫曼编码。

TCP 和 UDP 区别

https://www.wangan.com/wenda/8764

TCP 是如何实现可靠传输的

校验和

序列号和确认应答机制

重传机制

超时重传

快速重传

滑动窗口协议

流量控制

拥塞控制

https://juejin.cn/post/6916073832335802382

TCP 三次握手和四次挥手

https://mp.weixin.qq.com/s/u56NcMs68sgi6uDpzJ61yw

url的hash和HTML5的history模式

hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

由于hash值变化不会导致浏览器向服务器发出请求，而且hash改变会触发 hashchange 事件，浏览器的进后退也能对其进行控制，这么一来，即使前端并没有发起http请求也能够找到对应页面的代码块进行按需加载。

history 接口是HTML5新增的，window.history 属性指向 history 对象，它表示当前窗口的浏览历史。浏览器工具栏的“前进”和“后退”按钮，其实就是对 history 对象进行操作。

history 对象保存了当前窗口访问过的所有页面网址。history 对象主要有两个属性。

history.length：当前窗口访问过的网址数量（包括当前网页）
history.state：history 堆栈最上层的状态值

history.pushState(state,title,url)

向浏览器新增一条历史记录

history.replaceState(state,title,url)

更改当前浏览器的历史记录

history.back()、history.forward()、history.go()

几种常用实现跨域的方法

https://www.cnblogs.com/xinyuan001/articles/11256979.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EHyqAz5x-1684768881331)(C:\Users\mihoutao\AppData\Roaming\Typora\typora-user-images\image-20230226040436110.png)]

静态资源的渲染阻塞

https://www.cnblogs.com/ashen1999/p/12809395.html

JS中async和defer作用与区别

https://blog.csdn.net/weixin_62765236/article/details/126649027

eslint和prettier区别

ESLint 是一个可插拔的代码质量工具，它可以识别和报告代码中的问题和模式，例如未使用的变量，缺少分号，不一致的缩进等。ESLint 有很多可配置的规则，您可以根据您的喜好或团队约定来开启或关闭。ESLint 也可以自动修复一些简单的问题，例如空格，引号等。
Prettier 是一个意见化的代码格式化工具，它可以重新打印代码，使其符合一致的风格，例如换行，括号，逗号等。Prettier 的规则是固定的，您只能调整一些选项，例如行宽，单引号或双引号等。Prettier 不会检查代码中的错误或潜在问题，它只关注代码的外观。
ESLint 和 Prettier 可以结合使用，以实现最佳的效果。您可以使用 ESLint 来检查和修复代码中的逻辑错误和潜在问题，然后使用 Prettier 来格式化代码的风格。您也可以使用一些插件或扩展来集成 ESLint 和 Prettier，例如 prettier-eslint 或 vscode-prettier-eslint5。

cookie和token区别

https://baijiahao.baidu.com/s?id=1748008721837914956&wfr=spider&for=pc

一次完整的HTTP请求过程

https://zhuanlan.zhihu.com/p/161560683

URL 输入的过程

https://blog.csdn.net/qq_45401910/article/details/123772130

Node 中的 Process

process 对象是一个全局变量，提供了有关当前 Node.js进程的信息并对其进行控制

https://blog.csdn.net/qq_30071415/article/details/117508606

其他计网问题

https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C.md#2-tlsssl-%E4%B8%AD%E4%BB%80%E4%B9%88%E4%B8%80%E5%AE%9A%E8%A6%81%E7%94%A8%E4%B8%89%E4%B8%AA%E9%9A%8F%E6%9C%BA%E6%95%B0%E6%9D%A5%E7%94%9F%E6%88%90%E4%BC%9A%E8%AF%9D%E5%AF%86%E9%92%A5

项目上线后的监控点，考虑哪些

项目上线后的监控点，可能需要考虑以下几个方面：

站点的连通性和可用性，是否有异常或中断。
项目的进度和状态，是否符合计划和预期。
项目的质量和风险，是否有缺陷或问题需要解决。
项目的资源和成本，是否合理分配和控制。
项目的相关方满意度，是否达到或超过期望。

monorepo 优点

易于可见性。如果您正在开发一个调用其他微服务的微服务，您可以查看代码，了解它是如何工作的，以及确定错误是发生在您自己的代码还是在其他团队的微服务中。
代码共享。您可以在整个组织中复用验证代码，UI 组件，类型等，避免重复编写代码。您也可以在后端，前端和工具库之间复用代码。
改善协作。您可以更容易地与其他团队或项目进行协作，因为您可以使用相同的工具，配置和依赖管理。您也可以更方便地进行代码审查和反馈。
标准化。您可以在一个仓库中统一管理所有项目的构建，测试，部署等流程，保持一致的质量和效率。
可发现性。您可以更容易地发现和使用其他项目或服务的功能，而不需要额外的文档或沟通。
发布管理。您可以更容易地跟踪和控制所有项目或服务的版本和依赖关系，以及进行原子性的发布和回滚。
更容易重构。您可以更容易地对代码进行重构或迁移，因为您可以在一个仓库中修改所有相关的项目或服务。

Docusaurus 介绍

https://docusaurus.io/zh-CN/docs

GitHub Actions

https://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html

CI/CD

https://juejin.cn/post/7113562222852309023

node.js有哪些框架

Express：一个简洁、灵活的 Web 应用框架，提供了丰富的中间件和路由功能。
Koa：一个轻量、优雅的 Web 应用框架，基于 async/await 语法，提供了更好的错误处理和流程控制。
Hapi：一个安全、可靠的 Web 应用框架，提供了插件化的架构和丰富的功能组件。
Fastify：一个高性能、低开销的 Web 应用框架，支持 HTTP/2 和 JSON Schema 验证。
Egg.js：一个基于 Koa 的企业级 Web 应用框架，提供了约定优于配置的开发模式和插件机制。
NestJS：一个基于 Express 或 Fastify 的渐进式 Node.js 框架，支持 TypeScript 和面向对象编程。

LRU 算法

https://zhuanlan.zhihu.com/p/378782266

交叉链表

https://cloud.tencent.com/developer/article/1621783

跨端方案

Web App：使用 Web 技术开发的应用，可以在浏览器或 WebView 中运行，优点是开发效率高、动态性强、兼容性好，缺点是性能较低、体验较差、原生能力受限。
PWA（Progressive Web Apps）：一种特殊的 Web App，可以实现离线访问、消息推送等功能，优点是提升了 Web App 的用户体验和可靠性，缺点是仍然受限于浏览器或 WebView 的能力和规范。
Hybrid App：一种结合了 Web 技术和 Native 技术的应用，通常使用 WebView 嵌入 Web 页面，并通过 JSBridge 与 Native 通信，优点是可以利用 Native 的能力和性能，缺点是需要维护两套代码、通信成本高、调试困难。
PHA（Progress Hybrid App）：一种进化版的 Hybrid App，使用原生渲染引擎替代 WebView 来渲染 Web 页面，并通过 DSL（Domain Specific Language）来描述 UI 和逻辑，优点是提升了渲染性能和体验，缺点是需要学习新的语言和框架、DSL 的表达能力有限。