Lolipop's Studio.

最近学习前端基础知识的时候，看到了这个问题和一个回答，非常生动有趣。遂抱着梳理的想法，将整个过程描述出来。

现在，假设您打开了浏览器，想要访问我的个人博客，您会在地址栏输入 lolipopj.github.io 这个 URL 然后敲下回车键。

从敲下回车键到最终顺利在浏览器显示我博客的主页，这个过程的背后发生了什么呢？

检查 URL 格式

别急，在正式驶入互联网的快车道之前，浏览器会首先检查输入的 URL 的格式是否正确。

例如，假如您输入的是 lolipop j.github.io，或是 lolipopj.gith$ub.io，浏览器将会判断它们为非 URL。在这种情况下，浏览器通常会将我们错误输入的 URL 作为搜索引擎的输入关键字，最终跳转到搜索结果界面。

看腻了原先的字体，亦或是想满足独树一帜的设计欲望？不妨更换一下博客的字体吧！本文将基于 Hexo 和主题 Hexo-Theme-Archer 展示如何更换博客的中文字体。

引入字体文件

这里提供两种引入的思路，一种是 CDN 引入，一种是本地引入。建议通过 CDN 的方式引入，可以大大提高加载效率。

引入 CDN 字体文件

以更换字体为思源黑体（Google 字体上叫 Noto Sans，Adobe 版本叫 Source Han Sans）为例，考虑到中文站点面向的读者在国内，无法直接下载思源黑体这款 Google 字体，因此考虑通过 CDN 的方式引入它。据笔者测试，目前有这四个 CDN 站点可以提供稳定的服务：

• https://fonts.googleapis.cnpmjs.org
• https://fonts.font.im，可参考：http://www.googlefonts.cn/old
• https://fonts.proxy.ustclug.org
• https://fonts.loli.net，可参考：https://sb.sb/blog/css-cdn

现在，我已经安装了 Docker，并拉取了 Nginx 的镜像。除此之外，我也购买了域名，完成了备案，并且为域名配置了 SSL。一切准备就绪，那么我该怎么将我的静态网页项目在 Linux 主机上通过 Nginx 部署，最终实现域名访问呢？

本文以部署我的个人博客页面为例，介绍如何使用基于 Docker 的 Nginx 部署静态网页项目。

准备静态网页项目

为了更方便管理网页项目，可以在主机根目录下新建一个目录，例如 www：

1
2
3

sudo -i # 切换为管理员用户
cd /
mkdir www

现在，我已经有了一个完整的静态网页项目——我的个人博客。我的个人博客基于 Hexo，其中代码放在 source 分支，生成的静态网页文件放在 master 分支。首先通过 git 命令将静态网页文件克隆下来：

下载 Release

在 Project-V 的 Github Releases 页面下载最新的二进制包。

本文以通用于 x86_64 机器的 v2ray-linux-64.zip 为例。下载完成后传入 Linux 主机即可。

安装 Project-V

执行 unzip 命令：

1

unzip v2ray-linux-64.zip

查看系统 OS 及架构

以 Euler 系统为例，在终端上输入命令查看，可以通过 rpm -qa | grep euleros-release 命令找到 rpm 包，再通过 rpm -qi ${包名} 查看系统 OS 及架构信息：

1
2
3
4
5
6
7
8

[root@lolipop ~]# rpm -qa | grep euleros-release
euleros-release-2.0SP5-13.eulerosv2r7.x86_64
[root@lolipop ~]# rpm -qi euleros-release-2.0SP5-13.eulerosv2r7.x86_64
Name        : euleros-release
Version     : 2.0SP5
Release     : 13.eulerosv2r7
Architecture: x86_64
......

当然，也可以使用通用的 uname -a 命令。

当前系统为 Euler 2.0 (SP5)，处理器架构为 x86_64。

下载 MySQL

类（Class）是用于创建对象的模板，他们用代码封装数据以处理该数据，是面向对象编程方法的重要特性之一。JavaScript 中的 class 语法在 ES6 中引入，其底层实现基于原型（Prototype），系原型继承的语法糖（Syntactic Sugar）。

本博文将探讨 JavaScript 中如何使用类的相关知识，文章组织架构和内容基于 MDN 上关于类的章节。

定义类

类可以被看作一种“特殊的函数”，和函数的定义方法一样，类的定义方法有两种：类声明和类表达式。

第一种方法是，直接使用 class 关键字声明类，即类声明的方法。

1
2
3

class User {
  //
}

JavaScript 中有一个叫作闭包（Closure）的概念，非常有趣且适用，值得学习并整理为一篇博客。

为了更好理解闭包的作用，不妨看看我的这一篇博客关于 JS 变量提升（Hoisting）和函数提升现象的阐述。

作用域

在 JavaScript 中，作用域（Scope）是当前代码执行的上下文，也即是值和表达式在其中可访问到的上下文。

• 如果一个变量或其它表达式不在当前作用域中，就会沿作用域链（Scope Chain）往父作用域搜索。如果也仍未找到它的话，那么它就是不可用的。
• 最顶级的父作用域是全局对象。
• 父作用域不能引用子作用域中的变量和定义。

目前，作用域有三种：全局作用域和函数作用域，以及 ES6 新增的块级作用域。

在 ES6 规范出现之前，使用 JavaScript 声明变量只有 var, function 以及隐式声明三种方式。

按照一般编程的思维，我们会通过“先声明，后调用”的方式去使用变量，例如：

1
2

var a = 3;
console.log(a); // 3

但假如反过来，我们“先调用，后声明”，会发生什么呢？

1
2
3
4
5

console.log(a); // undefined
var a = 3;
console.log(a); // 3

console.log(b); // Uncaught ReferenceError: b is not defined

如上所示，在声明变量 a 之前尝试将它的值打印出来，控制台输出的结果是 undefined，而不是预期中的报错 Uncaught ReferenceError: a is not defined。这就是变量提升。

在前端性能优化中存在一个老生常谈的问题：如何优化高频率执行的 JS 代码？例如：

1. 我们为浏览器滚动 scroll 绑定了监听事件，当滚动到某位置之下后，会在浏览器右下方显示一个点击后能快速回到页面顶部的浮动按钮；而滚动回该位置之上时，浮动按钮消失。现在我们发现，用户每次使用滚轮滑动页面，都会触发很多次该事件，判断当前在该位置之上还是之下，这在一定程度上降低了前端的性能。
2. 我们为网页添加了搜索功能，当用户输入搜索关键字后，会自动显示出搜索的结果。但是，用户每次更改输入都立即调用后端进行了搜索，彼时用户可能尚未输入完关键字，亦或是关键字输入错误需要修改。这样搜索出来的结果并非用户希望看到的，同时还降低了前端性能，浪费了大量的服务器资源。

针对上述列举的问题，我们应该怎么做，才能在优化前端性能的同时不至于影响到用户的体验，便是本文探讨的内容。

函数节流

函数节流（Throttle），指在触发事件后的一定时间内绑定的函数只能执行一次。

函数节流的实现思路比较简单，例如使用 setTimeout 方法实现：由于 setTimeout 方法的返回值是一个正整数，表示定时器的编号，所以可以利用闭包的方法维护一个定时器编号。每次触发事件时都通过定时器编号判断当前是否有尚未到期的定时器，如果有则结束，如果没有则启用一个定时器。定时器到期后调用绑定的需要节流的函数，并设置定时器编号为空，表示可以启用一个新的定时器。代码如下：

本博客基于 CMake 实现编译 gRPC 1.28.1 版本。

本博客的 Windows 端使用的命令提示符界面为 Powershell。

安装编译依赖软件

在 Windows 系统上编译 gRPC 需要首先准备下述软件：

• Visual Studio 2015（或 2017），将使用到 Visual C++ compiler
• Git
• CMake
• nasm
• ninja（可选）

Visual Studio 2015 (或 2017)