kk Blog —— 通用基础


date [-d @int|str] [+%s|"+%F %T"]
netstat -ltunp
sar -n DEV 1

一个 table 实现固定行、列

https://www.cnblogs.com/tiandi/p/13883306.html

https://www.cnblogs.com/acmilan/p/4217121.html

https://blog.csdn.net/m0_54281425/article/details/124478023

all.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

body {
        font-family: Tahoma, Times New Roman, Times, serif;
        font-size: 13px;
        background-color: #E8E8E8;
}
table {
        border: 0px;
        font-size: 12.99px;
        border-collapse:collapse;
        margin-bottom: 10px;
        margin-top: 10px;
}
th {
        padding-left: 1px;
        padding-right: 1px;
        border: 1px solid #B9B9B9;
        height: 28px;
        min-width: 55px;
}
td {
        padding-left: 3px;
        padding-right: 5px;
        white-space: nowrap;
        border: 1px solid #B9B9B9;
        height: 28px;
        min-width: 10px;
}

child2.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

thead, thead tr th {
        position: sticky;
        z-index: 2;
        top: 0;
        background-clip: padding-box;
        background-color: #E8E8E8;
        outline-color: #B9B9B9;
        outline-style: solid;
        outline-width: thin;
}

@-moz-document url-prefix(){
thead, thead tr th {
        border: none;
}
}

th:nth-child(2) {
        position: sticky;
        z-index: 3;
        left: 0;
        background-clip: padding-box;
        background-color: #E8E8E8;
}
td:nth-child(2) {
        position: sticky;
        z-index: 1;
        left: 0;
        background-clip: padding-box;
        background-color: #E8E8E8;
}

table

1
2
3
4
5
6
7
8
9
10

<table >
<thead>
	<tr>
	<th></th>
	</tr>
</thead>

<tr>
</tr>
</table>

需要用到的2个属性

1
2

table-layout : fixed  
position : sticky

table-layout

table-layout属性有两种特定值：

auto（预设值）-表格的总宽度决定每一个储存格（cell）的最大值

fixed - 表格的总宽度决定于表格width的定义,以及各栏位（column）width的定义

为了让表格呈现滚动效果，必须设定table-layout:fixed 并且给与表格宽度。

1
2
3
4

table {
	table-layout: fixed;
	width: 100%;
}

Position

大家对position 的作用应该不陌生，而固定表格则需要使用到 position : sticky 的设定

sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置

要注意的是当position : sticky应用于table，只能作用于和，并且一定要定义目标位置 left / right / top / bottom 才会出现固定效果！

1
2
3
4

thead tr th {
	position:sticky;
	top:0;
}

alert函数执行顺序问题

https://www.jb51.net/article/213413.htm

后续尝试了 alert() 和 prompt() 这两个跟 confirm 类似的弹对话框函数，情况都与此相同，它们都会跳过页面渲染先被执行。

还有更诡异的情况，我们给某一个 div 里赋值后，立刻 alert 此 div 里的内容，会发现 alert 显示正确的内容，而 div 里的内容却没有更新，并且会一直阻塞到我们点击确定。

alert、prompt、confirm 三个函数都类似，接下来我们就用最简单的 alert 来说。

JavaScript 的线程模型

JavaScript 引擎是单线程运行的，浏览器无论在什么时候都只且只有一个线程在运行 JavaScript 程序，初衷是为了减少 DOM 等共享资源的冲突。可是单线程永远会面临着一个问题，那就是某一段代码阻塞会导致后续所有的任务都延迟。又由于 JavaScript 经常需要操作页面 DOM 和发送 HTTP 请求，这些 I/O 操作耗时一般都比较长，一旦阻塞，就会给用户非常差的使用体验。

于是便有了事件循环（event loop）的产生，JavaScript 将一些异步操作或 有I/O 阻塞的操作全都放到一个事件队列，先顺序执行同步 CPU代码，等到 JavaScript 引擎没有同步代码，CPU 空闲下来再读取事件队列的异步事件来依次执行。

这些事件包括：

setTimeout() 设置的异步延迟事件；

DOM 操作相关如布局和绘制事件；

网络 I/O 如 AJAX 请求事件；

用户操作事件，如鼠标点击、键盘敲击。

解决

明白了原理， 再解决这个问题就有了方向，我们来分析这个问题：

1.由于页面渲染是 DOM 操作，会被 JavaScript 引擎放入事件队列；

2.alert() 是 window 的内置函数，被认为是同步 CPU代码；

3.JavaScript 引擎会优先执行同步代码，alert 弹窗先出现；

4.alert 有特殊的阻塞性质，JavaScript 引擎的执行被阻塞住；

5.点击 alert 的“确定”，JavaScript 没有了阻塞，执行完同步代码后，又读取事件队列里的 DOM 操作，页面渲染完成。

由上述原因，导致了诡异的 “alert执行顺序问题”。 我们无法将页面渲染变成同步操作，那么只好把 alert() 变为异步代码，从而才能在页面渲染之后执行。

对于这个解决方向，我们有两种方法可以使用：

setTimeOut函数

setTimeout() 这个函数可以延迟执行某些代码。而对于延迟执行的代码，JavaScript 引擎总是把这些代码放到事件队列里去，再去检查是否已经到了执行时间，再适时执行。代码进入事件队列，就意味着代码变成和页面渲染事件一样异步了。由于事件队列是有序的，我们如果用 setTimeout 延时执行，就可以实现在页面渲染之后执行 alert 的功能了。

setTimeout 的函数原型为 setTimeout(code, msec)，code 是要变为异步的代码或函数，msec 是要延时的时间，单位为毫秒。这里我们不需要它延时，只需要它变为异步就行了，所以可以将 msec 设置为 0；

同样，alert 之后的代码我们也需要处理，将它们跟 alert 一块放到 setTimeout 里异步执行。这样，代码就变为 setTimeout(“alert(‘msg’);doSomething();”, 0);，如果觉得代码不够美观或字符串不好处理的话，可以将后续代码封装成一个函数放到 doSomething() 里即可。

替换 Alert() 函数

首先我们考虑替换掉 alert 函数的功能。其实大多数情况下我们替换掉 alert 并不是它不符合我们期待的执行顺序，而是因为它实在是太丑了，而且也不支持各种美化，可以想像在一个某一特定主题的网站上忽然弹出来一个灰色单调的对话框是多么不和谐。

这个我们可以考虑 Bootstrap 的 modal 模块，Bootstrap 在绝大多数网站上都在应用，而多引入一个 modal 模块也不会有多大影响。我们使用 modal 构造一个弹出对话框的样子，使用 modal 的 modal(‘toggle’)/modal(‘show’)/modal(‘hide’) 方法可以很方便地控制 modal 的显隐。

替换掉对话框后，我们还需要解决后续代码执行的问题。使用 alert 函数时，我们点击确定后代码还会继续执行，而使用我们自定义的对话框可没有这种功能了，需要考虑把后续代码绑定在对话框的点击按钮上，这就需要使用 DOM 的 onclick 属性了，我们将后续函数内容抽出一个新的函数，在弹出对话框后将这个函数绑定在按钮的 onclick 事件上即可。

这里还需要注意，新函数内应该包括关闭 modal 对话框的内容。

当然，我们还可以再优化一下，抽象出来一个用来弹出对话框的函数替代 alert 函数，示例如下：

1
2
3
4
5
6
7
8

window.alert = function (message, callbackFunc) {
    $('#alertContent').html(message);
    $('#modal').show();
    $('#confirmButton').onclick(function () {
        $('#modal').hide();
        callbackFunc();
    });
};

如此，我们在需要弹出框时调用新的 alert 函数，并传入 callbackFunc ，在里面做后续的事情就可以了。

小结

在上面的两个解决方案中，都利用了 JavaScript 的回调函数，前者将函数所为 alert 的参数并绑定到 DOM 的 onclick 事件，后者使用 setTimeout 将函数转为异步执行。

nignx log_format 日志常用参数

原始

1
2
3
4
5

log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
		  '$status $body_bytes_sent "$http_referer" '
		  '"$http_user_agent" "$http_x_forwarded_for"';

167.94.146.58 - - [09/Nov/2022:05:05:14 +0800] "GET /images/splash/splash-icon.png HTTP/1.1" 404 1163 "-" "Mozilla/5.0 (compatible; CensysInspect/1.1; +https://about.censys.io/)" "-"

改后

1
2
3
4

log_format  main  '$time_local $server_addr $server_port $remote_addr $remote_port $status $body_bytes_sent - $remote_user '
		  '"$host" "$request" "$http_referer" "$http_user_agent" "$http_x_forwarded_for"';

10/Nov/2022:10:32:58 +0800 192.168.100.41 49090 192.168.120.177 65123 404 1163 - - "192.168.100.41" "GET /images/splash/splash-icon.png HTTP/1.1" "-" "Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0" "-"

再改后

1
2
3
4

log_format  main  '$time_local $request_time $server_addr $server_port $remote_addr $remote_port $status $body_bytes_sent $request_method $server_protocol'
		  ' "$host" "$uri" "$query_string" "$http_referer" "$http_user_agent" "$http_x_forwarded_for" - $remote_user';

20/Nov/2022:13:19:17 +0800 0.001 192.168.100.41 49090 183.136.225.45 58722 404 1163 GET HTTP/1.1 "np.cn" "/favicon.ico" "-" "-" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36 QIHU 360SE" "-" - -

再改时间格式、ssl

1
2
3
4
5
6
7
8
9
10
11
12
13

log_format  main  '$fmt_localtime $request_time $server_addr $server_port $remote_addr $remote_port $status $body_bytes_sent $request_method $server_protocol'
		  ' "$host" "$uri" "$query_string" "$http_referer" "$http_user_agent" "$ssl_protocol" "$ssl_cipher" "-" "$remote_user" "$http_x_forwarded_for"';

access_log  /var/log/nginx/access.log  main;

map $host $fmt_localtime {
	default '';
}
log_by_lua_block {
	ngx.var.fmt_localtime = ngx.localtime();
}

2022-11-25 17:15:07 0.046 192.168.100.141 17883 223.104.49.27 12492 200 3371 GET HTTP/1.1 "www.np.cn" "/login" "-" "-" "Mozilla/5.0 (Android 7.0; Mobile; rv:104.0) Gecko/104.0 Firefox/104.0" "TLSv1.2" "ECDHE-RSA-AES128-GCM-SHA256" "-" "-" "-"

https://www.cnblogs.com/funcquery/p/16026830.html

https://www.88ksk.cn/blog/145.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

$remote_addr:记录访问网站的客户端地址
$remote_user:远程客户端用户名称
$time_local:记录访问时间与时区
$request:表示request请求头的行
$status:http状态码，记录请求返回的状态，例如：200、404、301等
$body_bytes_sent:服务器发送给客户端的响应body字节数
$http_referer:记录此次请求是从哪个链接访问过来的，可以根据refer进行防盗链设置
$http_user_agent:记录客户端访问信息，例如：浏览器，手机客户端等
$http_x_forwarded_for:当前端有代理服务器时，设置Web节点记录客户端地址的配置，此参数生效的前提是代理服务器上也进行了相关的http_x_forwarded_for设置
$ssl_protocol:SSL协议版本
$ssl_cipher:交换数据中的算法
$upstream_status:upstream状态
$upstream_addr:当ngnix做负载均衡时，可以查看后台提供真实服务的设备
$upstream_response_time:请求过程中，upstream响应时间
$request_time:整个请求的总时间
$args:这个变量等于请求行中的参数，同$query_string
$content_length:请求头中的Content-length字段。
$content_type:请求头中的Content-Type字段。
$document_root:当前请求在root指令中指定的值。
$host:请求主机头字段，否则为服务器名称。
$http_user_agent:客户端agent信息
$http_cookie:客户端cookie信息
$limit_rate:这个变量可以限制连接速率。
$request_method:客户端请求的动作，通常为GET或POST。
$remote_addr:客户端的IP地址。
$remote_port:客户端的端口。
$remote_user:已经经过Auth Basic Module验证的用户名。
$request_filename:当前请求的文件路径，由root或alias指令与URI请求生成。
$scheme:HTTP方法（如http，https）。
$server_protocol:请求使用的协议，通常是HTTP/1.0或HTTP/1.1。
$server_addr:服务器地址，在完成一次系统调用后可以确定这个值。
$server_name:服务器名称。
$server_port:请求到达服务器的端口号。
$request_uri:包含请求参数的原始URI，不包含主机名，如：”/foo/bar.php?arg=baz”。
$uri:不带请求参数的当前URI，$uri不包含主机名，如”/foo/bar.html”。
$document_uri:与$uri相同。