浏览器输入 url 到渲染页面的详细过程
https 和 http 的区别，对称加密和非对称加密的了解 🍉🍉🍉🍉
- http：超文本传输协议，建立在 TCP 之上，用于从服务器传输超文本到本地浏览器的传输协议
- https：是以安全为目标，即 http 和 tcp 之间加入 ssl 层。作用：建立一个信息安全通道，确保数据传输和网站的安全
- 对称加密是最快速、最简单的一种加密方式，加密(encryption)与解密(decryption)用的是同样的密钥(secret key)。对称加密有很多种算法，由于它效率很高，所以被广泛使用在很多加密协议的核心当中
- 非对称加密为数据的加密与解密提供了一个非常安全的方法，它使用了一对密钥，公钥(public key)和私钥(private key)。私钥只能由一方安全保管，不能外泄，而公钥则可以发给任何请求它的人。非对称加密使用这对密钥中的一个进行加密，而解密则需要另一个密钥。比如，你向银行请求公钥，银行将公钥发给你，你使用公钥对消息加密，那么只有私钥的持有人--银行才能对你的消息解密。与对称加密不同的是，银行不需要将私钥通过网络发送出去，因此安全性大大提高。
TCP 和 UDP
- 传输控制协议（TCP）：TCP（传输控制协议）定义了两台计算机之间进行可靠的传输而交换的数据和确认信息的格式，以及计算机为了确保数据的正确到达而采取的措施。协议规定了 TCP 软件怎样识别给定计算机上的多个目的进程如何对分组重复这类差错进行恢复。协议还规定了两台计算机如何初始化一个 TCP 数据流传输以及如何结束这一传输。TCP 最大的特点就是提供的是面向连接、可靠的字节流服务。
- 用户数据报协议（UDP）：UDP（用户数据报协议）是一个简单的面向数据报的传输层协议。提供的是非面向连接的、不可靠的数据流传输。UDP 不提供可靠性，也不提供报文到达确认、排序以及流量控制等功能。它只是把应用程序传给 IP 层的数据报发送出去，但是并不能保证它们能到达目的地。因此报文可能会丢失、重复以及乱序等。但由于 UDP 在传输数据报前不用在客户和服务器之间建立一个连接，且没有超时重发等机制，故而传输速度很快。
主要问强缓存和协商缓存
有深入阅读过 Vue 源码 🍉🍉🍉🍉
v-for 的 key 相关
key的特殊attribute主要用在Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不使用key, Vue会使用一 种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用key时，它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。
有相同父元素的子元素必须有独特的key,重复的key会造成渲染错误
Proxy 实现双向绑定 🍉🍉🍉🍉
Vue3.0新特性之Proxy实现双向绑定 手写vue3.0双向绑定-es6 Proxy
Vue 的 Computed 实现原理 🍉🍉🍉🍉
Vue3响应式原理与reactive、effect、computed实现
跨域
XSS, CSRF 解释, 怎么解决
基本数据类型和引用数据类型
原型原型链相关知识解释(好好学 constructor)
问会不会 promise.all, 代码实现 🍉🍉🍉🍉
Promise.all = (promises) => {
let count = 0;
let list = [];
let len = promises.length;
return new Promise((resolve, reject) => {
promises.forEach((p, i) => {
p.then(
(res) => {
count++;
list[i] = res;
if (count === len) {
resolve(list);
}
},
(err) => {
reject(err);
}
);
});
});
};
this
var length = 10;
function fn() {
return this.length + 1;
}
var obj = {
length: 5,
test1: function () {
return fn();
},
};
obj.test2 = fn;
//下面代码输出是什么
console.log(obj.test1());
console.log(fn() === obj.test2());
实现一个 repeat 方法 🍉🍉🍉🍉 这里需要整理一下
// 需要实现的函数
function repeat(func, times, wait) {}
// 使下面调用代码能正常工作
const repeatFunc = repeat(console.log, 4, 3000);
repeatFunc("hello world"); //会输出4次 hello world, 每次间隔3秒
// 需要实现的函数
function repeat(func, times, wait) {
return function () {
let args = arguments;
let handle = function (i) {
setTimeout(() => {
func.apply(null, args);
}, wait * i);
};
for (let i = 0; i < times; i++) {
handle(i);
}
};
}
写出遍历二叉树，深度遍历和广度遍历🍉🍉🍉🍉
//深度优先递归
function deep(node, res) {
if (node != null) {
// 该节点存在
res.push(node.val);
// 使用childrens变量存储node.children，提升性能，不使用node.children.length，从而不必在for循环遍历时每次都去获取子元素
for (let i = 0, childrens = node.children; i < childrens.length; i++) {
deep(childrens[i], res);
}
}
return res;
}
console.log(deep(tree, []));
const dfs = (root) => {
console.log(root.val);
root.children.forEach((child) => {
dfs(child);
});
};
// 广度优先非递归
function wide(node) {
let res = [];
let nodeList = []; // 存储需要被访问的节点
nodeList.push(node);
while (nodeList.length > 0) {
let currentNode = nodeList.shift(0);
res.push(currentNode.val);
for (
let i = 0, childrens = currentNode.children;
i < childrens.length;
i++
) {
nodeList.push(childrens[i]);
}
}
return res;
}
console.log(wide(tree));
const bfs = (root) => {
const q = [root];
while (q.length > 0) {
const n = q.shift();
console.log(n.val);
n.children.forEach((child) => {
q.push(child);
});
}
};
写出快速排序
const quickSort = function (arr) {
if (arr.length <= 1) {
return arr;
}
let basic = arr.pop();
let left = [];
let right = [];
for (let i = 0; i < arr.length; i++) {
if (arr[i] < basic) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return quickSort(left).concat([basic], quickSort(right));
};
let arr = [-2, 10, 9, 13, -10, 8, 7, 20, 1, -1]; // length = 10
console.log(quickSort(arr));
给你一个数组，数组长度为 n。请找出数组中第 k 大的数
function GetKMax(input, k) {
if (k > input.length) {
return [];
}
// write code here
for (let i = 1; i < input.length; i++) {
for (let j = 0; j < input.length - i; j++) {
if (input[j + 1] > input[j]) {
[input[j + 1], input[j]] = [input[j], input[j + 1]];
}
}
}
return input[k - 1];
}
let arr = [2, 10, 9, 13, 8, 7, 20, 1];
console.log(GetKMax(arr, 3));
CSS 相关
- 盒模型
- BFC 和 IFC 相关，什么能实现 BFC
- 三栏布局
- 实现三角形
面经来自： github.com/dike1999/fr…
\
