HeadScale 服务端搭建 HeadScale 是一个开源的 TailScale 服务端实现，可以实现多平台的内网穿透。 准备工作docker-compose.yaml 文件如下： 12345678910111213141516171819version: '3.9'services: headscale: # 镜像版本 image: headscale/h

介绍 Hi工大Pro 是一款服务于大学生的校园生活平台，使用人数达到数万人，用户粘性较高，深受广大用户喜爱。该项目包含论坛社交、今日课表、查课表、查成绩、查空教室、失物招领、寻物启事、校园天气查询等一系列功能，并全局适配暗黑主题，支持更换主题配色。可以扫码体验，包含微信和QQ小程序。 技术相关 本人作为该项目团队技术负责人，负责该项目技术栈架构选型、前后端开发、项目部署、代码规范约束、项目U

Web Tracking（此处细分来说应该叫 Web beacon）。Web beacon 是一种在网页和电子邮件上使用的技术，可以不显眼地（通常是无形的）检查用户是否访问了某些内容。Web beacon 通常由第三方用于监控用户在网站上的活动，以进行网络分析或页面标记。它们也可用于电子邮件跟踪。当使用JavaScript实现时，它们可以被称为JavaScript标签。

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

在 浅谈 ES6 中的 Proxy 用法 中我们提到，在 Vue2 中使用 Object.defineProperty 和 Vue3 中使用 Proxy 实现了双向绑定。那么它是如何具体实现的？以下，我们便探讨如何自己手写一个双向绑定。

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。我对其进行了二次开发，加入了图片上传的功能，可以访问 https://github.com/KingCheni/gitalk 查看该仓库。也就是您浏览的这个网站正在使用的插件。它支持：使用 GitHub 登录、多语言、个人或组织、无干扰模式、快捷键提交评论、图片上传等。

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。其实通俗来讲，Proxy 相当于在原生方法（例如 get 访问Object的中的属性或方法、set 修改Object中的属性或方法、has 拦截”in操作符判断属性或方法是否存在Object或其原型链上”等等）之上的一层捕获器，可以进行拦截、修改等多种操作。

一般来说，建议将 X-Frame-Options 与 frame-ancestors 联合使用。因为 X-Frame-Options 是一种非标准的写法（当然，浏览器也支持这种写法）。但是相对CSP标准而言，在IE浏览器下不支持 frame-ancestors，仅支持 X-Frame-Options。相对于Chrome与FireFox来讲，若两者均存在，会优先读取 frame-ancestors的

浏览器中的EventLoop 众所周知， JS 是单线程运行的，在代码执行时，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。在执行 同步代码 时，如果遇到 异步事件，JS 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当 异步事件 执行完毕后，再将 异步事件 对应的回调加入到一个任务队列中等待执行。该异步任务队列可以分为 宏任务队列 和 微任务队列

浏览器渲染主要有以下步骤：首先解析收到的文档，根据文档定义构建一棵 DOM (Document Object Model) 树，DOM 树是由 DOM 元素及属性节点组成的。然后对 CSS 进行解析，生成 CSSOM (CSS Object Model) 规则树。根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 D