计算机网路
- TCP与UDP的区别
- TCP
- 面向连接
- 可靠传输，使用流量控制和拥塞控制
- 只能是一对一通信
- 面向字节流
- 首部最小20字节，最大60字节
- 适用于要求可靠传输的应用，例如文件传输
- UDP
- 无连接
- 不可靠传输，不使用流量控制和拥塞控制
- 支持一对一，一对多，多对一和多对多交互通信
- 面向报文
- 首部开销小，仅8字节
- 适用于实时应用（IP电话、视频会议、直播等）
设计模式
- 用Class与Function的方式分别实现一个单例模式的案例
class Person{
// ... 做一些事情
}
function Person () {
// ... 做一些事情
}
Person.getInstance = (function () {
let instance;
return function() {
if (!instance) {
instance = new Person();
}
return instance;
}
})()
console.log(Person.getInstance() === Person.getInstance())
浏览器
- 什么是回流与重绘？
- 回流：render 树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。
- 重绘：完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。
- 浏览器中存储数据的方案有哪几种
- Cookie: 存储4KB以下的信息，并且会随请求发送到服务器
- LocalStorage: 存储2.5MB到10MB之间的信息，持久存储
- SessionStorage: 存储会话数据，只保持到浏览器关闭
- IndexedDB: 可以存储大量数据，支持查找。相当于浏览器提供的本地数据库
CSS
- 实现一个雪花飘落的动画？
- 想成花瓣了 0.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body, html {
position: relative;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.snow {
position: absolute;
width: 50px;
height: 50px;
border-radius: 40% 100%;
background-image: linear-gradient(135deg, rgb(247, 235, 237), pink, pink, rgb(247, 235, 237));
animation: downfall 10s linear infinite;
}
@keyframes downfall {
0% {
top: 0;
left: 50%;
transform: rotateX(0) rotateY(0);
}
33% {
top: 33%;
left: 40%;
transform: rotateX(45deg) rotateY(45deg);
}
66% {
top: 66%;
left: 50%;
transform: rotateX(0deg) rotateY(0deg);
}
100% {
top: 100%;
left: 60%;
transform: rotateX(45deg) rotateY(45deg);
}
}
</style>
</head>
<body>
<div class="snow"></div>
</body>
</html>
tips:
- 这里的雪花就画个圆就行了，或者找个雪花图片
- 飘落，就是摇摇晃晃的 从上向下掉（简单表示一下就行了）
