浅谈图片加载优化

图片压缩

遇到图片加载慢第一想到的就是图片压缩,可以使用在线的 TinyPng 服务来压缩,也可以使用开源的 sharp 库压缩。

懒加载

遇到大量图片的页面可以考虑使用懒加载优化网页加载速度,避免大量图片同时加载占用带宽。

实现一个懒加载组件

我们可以用 IntersectionObserver 这个接口来判断图片是否可见从而来实现懒加载。

阅读全文

Ubuntu 20.04 部署 umami 并用于 hexo 博客的访问统计

什么是 umami

umami 是一个轻量级的网站访问统计工具,开源免费,可自托管,用途类似 Google Analytics。当然,umami 的功能远没有 Google Analytics 那么丰富,不过如果你的需求不多,只想了解网站的访问量(PV、UV)、流量来源等基本信息,以及记录一些简单的自定义事件,那么 umami 会是一个不错的选择。

阅读全文

Ubuntu 20.04 下使用 nginx 配置网站

安装 nginx

  • 如果服务器上还没有安装 nginx 服务, 可以执行如下命令安装
1
2
3
sudo apt update
sudo apt install nginx
sudo service nginx start

静态站点

这里以站点 www.test.cn 为例讲解

阅读全文

使用chaijs、mocha、selenium-webdriver进行自动化测试

初始化项目,安装依赖

1
2
3
4
5
6
mkdir auto-test
cd ./auto-test
npm init
npm install chai chai-webdriver mocha selenium-webdriver
mkdir test
npm set-script test "mocha ./test/index.js"

下载驱动程序

选择所使用的浏览器下载对应版本的驱动程序,并解压放在项目文件夹下

阅读全文

Windows10 使用 WSL ( Windows System Linux ) 子系统进行开发

适用于 Linux 的 Windows 子系统 (WSL) 是 Windows 10 的一项功能,可用于直接在 Windows 上运行本机 Linux 命令行工具


WSL优点

  • Windows应用和Linux Terminal两者兼得,无缝切换
  • 占用资源少(WSL 所需的资源(CPU、内存和存储)少于完整虚拟机所需的资源)
  • 启动快(相比虚拟机WSL只需要启动一个Linux Terminal即可启动子系统,一般只需几秒钟)
  • Linux相比Windows可以使用apt等包管理工具,安装环境更为便捷
  • Windows可以直接操作WSL的用户目录(可以通过\\wsl$\访问WSL目录,并对用户目录~\有写权限)

阅读全文

CSS 选择器优先级

下表由上到下 从左到右 优先级依次降低

!important
ID 选择器 (例如,#example)
伪类 (例如,:hover) 属性选择器 (例如,div[type=”radio”]) 类选择器 (例如,.example)
伪元素 (例如,::before) 标签选择器 (例如,h1)
标签内style属性(例如:<div style=”color: red;”></div>
页面内<style></style>中定义的样式
引用的外部文件内的样式
阅读全文