0. before start

实验需要的材料在这里：CSAPP Datalab

CSAPP原书在线阅读

将datalab-handout.tar下载复制到计划用来实验的目录下，解压：

一篇学习 MutationObserver 的文章

背景

今天调整新主题的时候，在重新设计友链样式的时候想保留原本的随机背景颜色，之前数量少的时候似乎不太明显，现在本地测试发觉加载太慢了。于是上网寻找解决思路，找到了 MutationObserver 这个 API，于是就学习了一下//此处记录一下学习过程。

需求分析

我有不知数量的div元素，每个div元素都有一个class名为friend-link-div，我需要在每个单个的div元素被加载完成的同时，对它设置一个随机的背景颜色。而不是等待整个页面或窗口加载完毕

想法分析

window.onload和'DOMContentLoaded'的问题

原本的实现代码：

1
2
3
4
5
6
7

  window.onload=function () {
    const randomHex = () => `rgba(${Math.round(Math.random()*255)}, ${Math.round(Math.random()*255)}, ${Math.round(Math.random()*255)}, 0.5)`;
    var friendArr=document.getElementsByClassName("friend-div"),temp=[];
    for(var i=0;i<friendArr.length;i++){
        friendArr[i].style.background=randomHex();
    }
  }

原本的思路就是简单的在页面加载完成后，获取所有的友链元素，然后给每个元素设置一个随机的背景颜色。但是这样的实现方式有一个问题，就是当友链数量较多的时候，会导致页面加载变慢，因为每次都要重新计算随机颜色，并且在等待本页面加载的时候，友链的背景颜色是白色的，这样会导致页面的视觉体验不好。

一篇私有配置图床，给twikoo评论插件添加图片功能的文章。

背景

背景：最近回想起来本站的twikoo评论尚未配置过图床，所以此前评论区不能上传图片，这篇就记录一下twikoo官方推荐的lsky-pro私有部署图床。

选用的图床是兰空图床👉lsky-org/lsky-pro: ☁️兰空图床(Lsky Pro) - Your photo album on the cloud. (github.com)

文档：Lsky Pro

服务器环境：

Vue3+Vite+Svg

以前使用Svg的时候会图简单直接将内容巨长的Svg代码粘贴在项目中，结果导致需要用Svg图标的部分代码巨长，今天写项目又需要使用Svg了，于是想着对其进行封装。

插件安装

使用vite-plugin-svg-icons插件。

安装：

1

npm i vite-plugin-svg-icons -D

在src/assets/下新建icon文件夹，这个文件夹下存放我们以后要用的.svg文件。

配置vite.config.ts

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

import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';

export default defineConfig({
    //...
    plugins:[
        //...
        createSvgIconsPlugin({
            iconDirs:[
                  // 自己的svg存放目录
                path.resolve(process.cwd(),'src/assets/icon'),
            ],
            symbolId:'icon-[name]',  // 设置symbol的id
        })
    ]
})

在main.ts中加入：

1

import 'virtual:svg-icons-register';

封装SvgIcon组件

在src/components/新建SvgIcon文件夹，在其中新建index.vue，内容：

线段树介绍

• 线段树是一棵二叉树，每个节点维护一个区间内$[l,r]$的信息
• 左子树区间维护$[l,\lfloor \frac{l+r}{2} \rfloor]$的信息，右子树维护$[\lfloor \frac{l+r}{2} \rfloor+1,r]$的信息
• 节点信息可以由两个子节点合并得到
• 任意一个区间会被分为线段树上$O(\log n)$个节点

线段树可以在$O(\log N)$的时间复杂度内实现单点修改、区间修改、**区间查询（区间求和/区间最大值/区间最小值）**等操作。

A-Shuffle Party

题意

对一个数组，起初是$a_i=i$

对操作swap(k)：

设$d$是不等于$k$本身的$k$的最大除数，然后交换元素$a_d$和$a_k$。

按顺序对每一个$i=2,3,..,n$进行$swap(i)$之后，找出$1$在数组中的位置。