Lolipop's Studio.

Lolipop's Studio.

how about groping lights through young ages

loading
函数防抖和节流,以及在 Vue 中的运用

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

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

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

函数节流

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

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

Windows 系统编译安装基于 C++ 的 gRPC

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

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

安装编译依赖软件

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

  • Visual Studio 2015(或 2017),将使用到 Visual C++ compiler
  • Git
  • CMake
  • nasm
  • ninja(可选)

Visual Studio 2015 (或 2017)

Linux 系统编译安装基于 C++ 的 gRPC

本文适用于 C++ 版本 gRPC 的离线编译安装,但对于下载 gRPC 步骤强烈建议使用 git 进行。

如果在能直接连接外网的机器上编译,可直接按照 gRPC 官网文档的指引快速执行编译操作。

安装基本依赖

确保机器上包括这些基本依赖:autoconf, libtool, pkg-config 与 C++ 编译环境。

1
2
3
4
5
6
7
8
# 检查是否有 autoconf
which autoconf

# 如果没有,则安装
# CentOS
yum install autoconf
# Ubuntu
apt-get install autoconf

gRPC 的编译需要 gcc 版本在 4.9 及以上。假如版本低于此,应当在 Docker 容器中安装较新版本的 GCC 再执行编译操作。

Linux 容器更新或降级 GCC 版本

如果软件源可用,可以使用 CentOS 的 yum 包管理器或 Ubuntu 的 apt 包管理器等一键安装 GCC,例如:

1
2
3
4
5
yum -y install gcc
yum -y install gcc-c++

# 或是一键安装开发工具软件包,包括 gcc, g++ 等
yum groupinstall "Development Tools"

本文适用于系统中包含有其它版本的 GCC 编译器情况下,手动更新或降级 GCC 编译器。编译 GCC 的过程十分耗时,如果能使用包管理器尽量还是使用包管理器吧。

NOTE: 如果仅使用 GCC 进行编译操作或不确定当前系统能否兼容新版本的 GCC,建议在 Docker 容器环境中执行编译和安装操作,并在容器中使用 GCC 编译器进行编译源码。

1
2
# 查看当前系统中 GCC 的版本
gcc -v

下载 GCC 并解压

Protobuf 学习笔记

实习中学习一下 Protobuf 的功能和语法等,整理为此笔记。主要为翻译官方文档而来。

什么是 Protobuf

Protobuf 是 Google 公司研发的一种用于序列化结构数据的机制,全称为 Protocol Buffers,具有语言无关、平台无关以及可拓展的特性。

我们常常把 Protobuf 与 XML (Extensible Markup Language) 相比较,它们二者都被设计来传输和存储结构化数据。相比于 XML,Protobuf 有如下优势与缺点:

  • Protobuf 占用的空间更小。Protobuf 采用二进制格式存储数据,适合网络传输和高性能场景;而 XML 采用文本格式存储数据,数据冗余度较高。
  • Protobuf 编码和解码更快。测试 Protobuf 库和 tinyxml2 库执行序列化和反序列化操作(相关链接),Protobuf 序列化速度大约是 XML 的 5 - 9 倍,反序列化速度大约是 XML 的 9 - 12 倍,更加适合高性能场景。
  • Protobuf 不具有可读性。Protobuf 传输的值为二进制数据,需要专用工具生成和解析;而 XML 自身的标签和文本内容具有一定的可读性。
使用 Protobuf,只需要编写 .proto 文件来描述需要传输和存储的结构数据,随后编译器会为之创建一个类,实现结构数据的自动编码和解码。

With protocol buffers, you write a .proto description of the data structure you wish to store. From that, the protocol buffer compiler creates a class that implements automatic encoding and parsing of the protocol buffer data with an efficient binary format. The generated class provides getters and setters for the fields that make up a protocol buffer and takes care of the details of reading and writing the protocol buffer as a unit.

在 Nuxt.js 中引入高德地图并实现定位及逆地理编码

迷途知反!腾讯地图的 JS API 文档实在过于简陋,且库很久没有更新,转身投入高德地图的怀抱,享受 this moment 的美好!

高德地图与腾讯地图定位功能区别

高德地图将定位功能和逆地理编码功能分开为两个操作,而腾讯地图将二者合并。

这意味着使用高德地图实现逆地理编码,首先需要执行定位操作,再将得到的结果传给逆地理编码插件获得最后的结果。

此外,高德地图的逆地理编码无法解析中国以外的地理坐标,只能解析中国境内省市区等地理坐标。

引入高德地图 JS API 库

使用腾讯位置服务进行 Web 前端定位

正在开发的 Web 项目需要获取使用者的位置信息,而使用者主要通过移动端访问此 Web 服务。位置信息需要精确到区。在腾讯位置服务的定位解决方案里想要搜索可用的 JavaScript 库,只看到了服务端的 IP 定位和移动端的几个 SDK 包,甚异之。

终于在不起眼的地方找到了前端定位组件,适用于浏览器进行定位操作。

本文基于 Nuxt.js 实现前端定位功能。

它能做什么

组件旨在优化纯 HTML5 Geolocation 定位能力弱,定位成功率不高的问题,提供简单、易用的接口帮助业务层获取用户当前的位置信息(需用户授权),以降低开发成本,提升定位精准度。

除了常规的经纬度坐标以外,它返回的结果里还包含了 citydistrict 项,非常方面。

提示 *** is not a symbolic link 解决方案

问题描述

在 CentOS 环境下执行 yum updateldconfig 命令时都出现提示警告,节选内容如下所示:

1
2
3
ldconfig: /OSM/lib/librdmacm.so.1 is not a symbolic link
ldconfig: /OSM/lib/libgrpc++_reflection.so.1 is not a symbolic link
ldconfig: /OSM/lib/libupb.so.9 is not a symbolic link

错误分析

进入到对应目录下查找可以发现,这里的 librdmacm.so.1librdmacm.so.1.1.17.4 实际上是相同的动态库文件,而非我们期望的符号链接和动态库文件。

1
2
3
4
[root@xxx ~]# cd /OSM/lib
[root@xxx lib]# find librdmacm.so.1* | xargs ls -l
-rwx------. 1 root root 442208 Mar 9 16:13 librdmacm.so.1
-rwx------. 1 root root 442208 Mar 9 16:13 librdmacm.so.1.1.17.4
Nuxt 项目配置 ESLint 和 Prettier 检查并规范代码质量与格式

哪位代码人不希望自己的代码总有统一优美的风格,不会因为合作开发项目而杂乱呢?

在最开始写项目代码的时候我就用起了 ESLint 和 Prettier,再装一堆预设的配置,便跑了起来。令人沮丧的是,用 ESLint 修复了代码质量问题,还是会在编译器里看到红色波浪线,提醒还有些代码风格需要修复。直到这一次,我才忽然意识到 ESLint 和 Prettier 其实分工了不同领域,协同使用体验极好。

本文基于 Nuxt.js + VSCode 阐述如何配置并实现 ESLint + Prettier 检查并规范代码质量与格式。

ESLint 与 Prettier

ESLint 是一个开源的 JavaScript 代码检查工具,Prettier 是一款代码格式工具。它们的功能侧重如下所示:

  • ESLint:主要负责代码质量的校验,其次包含代码风格的检验。
  • Prettier:主要负责代码风格的校验。
Webpack 读取本地 Markdown 文件并进行预处理

在开发 NetUnion 的官网页面时,有这样一个需求:读取本地目录下的新闻和博客文件,并在前端渲染,其中文件均为 Markdown 格式。

与全栈开发直接调用后端数据库不同的是,没有数据表字段来记录文件的不同属性,例如文件的题目、作者、撰写日期等,因此这些属性需要记录在 .md 文件当中。

这样的撰写方式是不是很熟悉?没错,不就是我正在写的 Hexo 博客中 .md 文件的编写格式嘛!

自动导入本地的 .md 文件

当然,首先要读取某个目录下已经撰写好的 .md 文件,才能对内容进行预处理。

但如果每撰写好一个新的新闻或博客文件,就得在代码中 require 出来,太过于麻烦且不现实,因此就需要自动导入的方法。

avatar
Lolipop
Make them happen.