cookie与session

发表于 2022-02-16 更新于 2023-01-11 本文字数： 381 阅读时长 ≈ 1 分钟

cookie实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户的状态，就使用response向客户端浏览器颁发一个cookie。客户端浏览器会把cookie保存起来。当浏览器再次请求该网站时，浏览器就会把请求地址和cookie一同给服务器。服务器检查该cookie，从而判断用户的状态。服务器还可以根据需要修改cookie的内容。 session是另一种记录客户状态的机制。不同的是cookie保存在客户端浏览器中，而session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上，这就是session。客户端浏览器再次访问时只需要从该session中查找该客户的状态就可以了。如果说cookie机制是通过检查客户身上的“通信证”，那么session机制就是通过检查服务器上的“客户明细表”来确认客户身份。

web前端面试

发表于 2022-02-15 更新于 2023-07-04 本文字数： 2.3k 阅读时长 ≈ 2 分钟

position

absolute
元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。

css盒模型

ie表示content、padding、border。正常表示content。

Promise

Promise状态平pending，fulfilled，rejected。
resolve reject
Promise.all then得到一个结果数组，任何一个报错就进catch。Promise.any then得到第一个fulfilled的结果。promise allSettled
Promise.then Promise.catch

call apply bind

call是每个参数。apply是参数组成的数组。bind只绑定this。

微任务宏任务

setTimeout就是作为宏任务来存在的，而Promise.then则是具有代表性的微任务，上述代码的执行顺序就是按照序号来输出的。
new Promise在实例化的过程中所执行的代码都是同步进行的，而then中注册的回调才是异步执行的。
async函数在await之前的代码都是同步执行的，可以理解为await之前的代码属于new Promise时传入的代码，await之后的所有代码都是在Promise.then中的回调
先执行微任务，再执行宏任务

BFC块格式化上下文

根元素（）
浮动元素（float 值不为 none）
绝对定位元素（position 值为 absolute 或 fixed）
行内块元素（display 值为 inline-block）

非受控组件，受控组件

ref指向表单是非受控组件

递归栈溢出

闭包

访问私有变量，防抖节流
导致内存泄露

js节流防抖

节流：快速的多次输入只向后端请求一次数据
防抖：一直进行某个事件时以一定的间隔运行某项操作

强缓存和协商缓存

强缓存：浏览器不会像服务器发送任何请求，直接从本地缓存中读取文件并返回Status Code: 200 OK
协商缓存: 向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；

http状态码

200 成功。300重定向。400客户端错误。500服务器错误

瀑布流圣杯

三栏布局 flex

中间加上{ flex: 1 }，表示flex-grow占用可用空间

eval缺点

不安全，消耗性能

jsonp原理

利用script标签的src属性来实现跨域。
由于使用script标签的src属性，因此只支持get方法

箭头函数

this指向
不能用作构造函数
call apply不能绑定this
箭头函数没有prototype属性
箭头函数没有自己的arguments

html5

video audio canvas worker storage websocket

css3

圆角渐变转换动画媒体查询 flex布局

WeakMap WeakSet

WeakMap指键为对象，当这个对象设置为null之后，这个键也会删除。普通的Map不会删除这个键
WeakSet指元素为对象。

Array.prototype.find()

console.log同步异步

chrome的控制台出于性能考虑，对于引用类型的数据读取是存在延迟的；
控制台默认值读取第一层数据，当你点击展开时，才会重新去堆内存中读取属性值和下一层的数据。
这种出于性能优化会让我们觉得console.log 是异步的。
所以console.log到底是同步还是异步的，答案肯定是同步。

AMD、CMD、CommonJs三者之间的区别

组合继承 js

数组随机排序

大量插入dom元素的方法

css hack

内存泄露

没有使用的全局变量
计时器没有回收
dom节点的引用，删除节点后还存在
闭包

重绘重排

当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。
当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
重排一定引起重绘

事件委托

当发生点击事件（或传播的任何其他事件）时：

事件从 window、document、根元素向下传播，并经过目标元素的祖先（捕获阶段）；
事件发生在目标（目标阶段）上；
最后，事件在目标祖先之间冒出气泡，直到根元素 document 和 window（冒泡阶段）。
该机制称为事件传播。

事件委托是一种有用的模式，因为你可以只需要用一个事件处理程序就能侦听多个元素上的事件。

使用事件委托需要三个步骤：

确定要监视事件的元素的父级元素
把将事件侦听器附加到父元素
用 event.target 选择目标元素

node.js中间件

cookie-parser，cookie-session，body-parser，mongoose，passport
文件上传formidable
文件下载createReadStream

react事件

React合成事件机制: React并不是将click事件直接绑定在dom上面,而是采用事件冒泡的形式冒泡到document上面,然后React将事件封装给正式的函数处理运行和处理。

跨站登录

登录成功后跳转路由中携带登录信息

正六变形

扁平化数据树形

监听路由

内存储存
回收内存

promise es5

异步

纯函数副作用

无副作用 & 纯函数
函数与外界的只有唯一一个渠道进行沟通，通过传入参数和返回值进行沟通。
相同的传入参数永远只会有相同的返回值。

性能优化

代码压缩，代码分片，减少http请求，图片懒加载

img下有4px的留白

发表于 2022-02-14 更新于 2023-01-11 本文字数： 258 阅读时长 ≈ 1 分钟

img竖排显示时下方有4px的留白
由于img是行内元素，默认display: inline; 它与文本的默认行为类似，下边缘是与基线（baseline）对齐，而不是紧贴容器下边缘。

将displayp设置为block即可消除4px的bug。

其实解决方法不止一种：
1.将图像定义成 img:{display:block;}
2.给父级设置固定高度，然后 overflow:hidden
3.设置 font-size:0;
4.设置 img 的 vertical-align: bottom;
5.设置 img 的 margin-bottom: -4px;

使用session认证用户

发表于 2022-02-13 更新于 2023-01-11 本文字数： 955 阅读时长 ≈ 1 分钟

var express = require('express');
var cookieParser = require('cookie-parser');
var session = require('express-session');

var app = express();
// 传入中间件
app.use(cookieParser('sessiontest'));
app.use(session({
secret: 'sessiontest',//与cookieParser中的一致
resave: true,
saveUninitialized:true
}));
// 写入session
app.get('/index', function (req, res) {
    var user={
        name:"Chen-xy",
        age:"22",
        address:"bj"
    }
    req.session.user=user;
    res.send('<p>get session</p>')
})
// 读取session
app.get('/user', function (req, res) {

    if(req.session.user){
        var user=req.session.user;
        console.log(req.sessionID);
        res.send('你好'+user.name+'，欢迎来到我的家园。');
    }else{
        res.send('你还没有登录，先登录下再试试！');
    }
})

var server = app.listen(8081, function () {
    var host = server.address().address
    var port = server.address().port
    console.log("访问地址为 http://%s:%s", host, port)
})

markdown语法

发表于 2022-02-13 更新于 2024-11-04 本文字数： 359 阅读时长 ≈ 1 分钟

换行：句尾加上\，或者行尾加上两个及以上的空格
# ## ###表示h1,h2,h3
- 代表无序列表
空行代表下一段落<p>
代码字段
代码段落：空一行并缩进四个空格
代码段落开始是三个`再换行，代码结束是换行后三个`
链接[text](https://www.google.com "title")或者<https://www.google.com>
图像![alt text](https://aa "title text")
键盘字符添加样式<kbd>Ctrl</kbd>
删除线~~删除线~~

表格

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

将网站升级到https协议

发表于 2020-10-21 更新于 2023-01-11 本文字数： 2k 阅读时长 ≈ 2 分钟

获取免费证书

为了鼓励https的普及，EFF成立了免费证书最大的提供商Let’s Encrypt，可以提供免费证书。小型的网站也可以使用免费证书升级为https啦。

当然Let’s Encrypt生成的证书，只能是单域名的，而且只有最低级的域名验证。

克隆letsencrypt客户端

$ git clone https://github.com/letsencrypt/letsencrypt ~/letsencrypt
如果遇到权限问题，记得先创建/opt/letsencrypt文件夹再，更改文件夹权限为可写入。

注册证书

注册一个域名证书非常简单,使用letsencrypt就能生成https所需的证书。当然，用letsencrypt生成的证书只支持域名验证，只需要用letsenctypt的自动注册证书命令，证明这个域名是自己的是用的即可。

1
2
3

$ cd ~/letsencrypt
$ ./letsencrypt-auto certonly -a webroot --webroot-path=/<your web site path> -d practi.tk 
# 可以使用多个 -d 添加多个域名

letsencrypt可以帮我们自动注册证书，–webroot-path是静态资源所指的路径。-d是域名域名，也可以多个-d增加多个域名。最后确保需要使用https的域名都用letsencrypt注册。

后续将会让你继续输入邮箱信息

如果出现Congratulations!字样，则证明证书注册成功。

指向静态文件Nginx配置Sample：

server {
    listen 80;
    server_name practi.tk; # 这里写你的域名
    location ^~ /.well-known/acme-challenge/ {
        default_type "text/plain";
        root /usr/share/nginx/html; # 这里写你的静态文件目录
    }
    location = /.well-known/acme-challenge/ {
        return 404;
    }
    return 301 https://$host$request_uri; # 跳转到https
}

server {
    # SSL Configuration
    listen 443 ssl;
    server_name practi.tk;  # 这里写你的域名
   # specify cert files
    ssl_certificate /etc/letsencrypt/live/practi.tk/fullchain.pem;  # 中间写你的域名
    ssl_certificate_key /etc/letsencrypt/live/practi.tk/privkey.pem;  # 中间写你的域名
    location / {
        root  /usr/share/nginx/html; # 这里写你的静态文件目录
        index index.html index.htm; # 这里写你暴露的静态文件
    }
}

Nginx配置各有各的配置方法，这里只要保证四点：

域名配置正确
静态文件目录路径、本地服务目录路径配置正确
.well-known/acme-challenge目录配置正确
要保证80默认端口和443ssl端口都有配置
如果配置好Nginx，那么访问网站就会有绿色的小钥匙啦，说明你的https站点搭建好。

自动更新证书

letsencrypt证书最多只有90天，90天之后我们需要重新注册证书，当然这个可以交给服务器自己做啦。

验证自己的证书是否可以更新

1 2	$ cd ~/letsencrypt $ ./letsencrypt-auto renew --dry-run

此命令只是验证不会更新证书
如果出现Congratulations!字样或者已经更新字样则证明可以自动更新。如果出现错误，或者说路径找不到的情况，大多数情况是.well-known/acme-challenge目录配置没有正确的配置成功

编写crontab脚本
$ crontab -e
脚本内容

1	8 0 11 * * /<你的路径>/letsencrypt-auto renew >> /var/log/le-renew.log

如果遇到权限问题，可先创建/var/log目录再设置其权限为可写入

参考链接

nginx内置变量

$host请求中的主机头(Host)字段，如果请求中的主机头不可用或者空，则为处理请求的server名称(处理请求的server的server_name指令的值)。值为小写，不包含端口。
$request_uri这个变量等于包含一些客户端请求参数的原始URI，它无法修改，请查看$uri更改或重写URI。
$server_name服务器域名。

VScode配置

发表于 2020-10-21 更新于 2023-01-11 本文字数： 249 阅读时长 ≈ 1 分钟

editor.tabSize缩进占用几个空格

配置React语法，按tab自动展开

"emmet.triggerExpansionOnTab": true,
"emmet.syntaxProfiles": {
    "JavaScript React": "jsx"
},

editor.dragAndDrop编辑器拖放来移动选中代码

快捷键

Ctrl+shift+v 预览markdown

格式化对齐 Alt+Shift+f

windows技巧

发表于 2020-10-21 更新于 2023-07-04 本文字数： 323 阅读时长 ≈ 1 分钟

快捷键

锁定屏幕win+l
打开运行win+r

windows 10

呼出剪切板win+v
语音输入win+h

添加开机自启动项

在运行中输入shell:startup

获取sha1 MD5

Get-FileHash -a SHA1 [yourfilename]
certutil -hashfile [yourfilename] MD5
certutil -hashfile [yourfilename] SHA1
certutil -hashfile [yourfilename] SHA256

chrome设置socks5代理

“chrome.exe” –show-app-list –proxy-server=”SOCKS5://10.10.xxx.xx:30101”

linux常见问题

发表于 2020-10-21 更新于 2024-02-27 本文字数： 62 阅读时长 ≈ 1 分钟

ping 计算机名称

使用winbind samba in linux

intel rst 不兼容linux

导致安装linux时无法识别硬盘

计算机编码

发表于 2020-10-21 更新于 2023-01-11 本文字数： 67 阅读时长 ≈ 1 分钟

计算机使用的缺省编码方式就是计算机的内码
字符必须编码后才能被计算机处理

字母编码ASCII
通用编码UTF-8
汉字编码GB2312到GBK