Skip to content

备忘录

yt,这个模块我用来记一些我看到优质文章或者需要解决某些疑问且来不及去阅读或解决,故把记录于此。

还包括我近期需要进行的学习路线等等杂项都会在此记录。

路线

  • 查缺补漏 JavaScript
  • 补足 TypeScript
  • 记录面试需要的基础知识
  • 前端工程化之模块化
  • 前端工程化之包管理器
  • 前端工程化之构建工具, Webpack 等
  • 前端工程化之脚手架
  • 前端自动化(流水线)
    • 服务器部署
    • nginx 配置
    • CI/CD
  • Rust (这个语言到底有什么魅力,前端很多工具都选择用 Rust 编写来提高性能)

评论模块

集成的评论模块,想修改样式去更贴合本站的主题样式。

本站主题样式

这个彩色主题有些地方没有生效:

  • Navbar Item 选中和hover的样式
  • 文章中a标签和hover时的样式
  • 主页feature模块hover时边框的样式

ZoomImg 组件

进入页面后图片没在视口应该懒加载,且如果有 size 较大的图片在第一视口内,加载起来也会比较慢,所有需要图片渐进式加载

懒加载就直接使用img元素自带的loading=lazy即可。在vitepress@1.0.0-rc.34新支持了自定义图片懒加载配置,可以在config.ts中打开:

ts
export default defineConfig({
  markdown: {
    image: {
      lazyLoading: true
    }
  }
})

图片渐进式加载还没有找到解决方案。

参考文章:

图片渐进式加载的实现方法
加载背景图像的“模糊”技术

TIP

图片渐进式加载是指图片在加载过程中先使用图片的缩略图(facebook 工程团队)代替,待图片加载完成后再替换为原图,可以大大优化用户体验。但是对于性能要求当然是懒加载更优一点。但是同时使用这两个也不冲突。

本来看到了一个解决方案,是通过blurhash通过特定的算法将原图进行了离散余弦变换,提取出最多 10x10=100 个系数,以 0-18 的范围表示颜色,按照一些紧凑的规则编码成二进制数据,再使用特别选择的字母表进行 Base83 编码,保证在 URL 和 JSON 等地方不需要额外转义就可以直接传输。
但是这个方案需要通过后端生成hash返回给前端,前端通过decode获取缩略图。对于VitePress纯静态网站来说,这种方案只能放弃了。

待阅

前端工程化详解OverlayScrollbar

开发消息通知组件

每日两题题目记录

2024.03.25 const 对象的属性可以修改吗
2024.03.25 Vue data 中某一个属性的值改变后,视图会立即同步执行重新渲染吗?为什么?

2024.03.26 说说 CSS 选择器及其优先级
2024.03.26 描述下浏览器的分级缓存策略

2024.03.27 http 通信的时候,在 cache-control 这个参数里面的配置项 no-cache 和 no-store 有什么区别
2024.03.27 简述一下 XMLhttpRequest 发起请求的过程

2024.03.28 websocket 是怎么实现双向通信的? 2024.03.28 为什么 Vue 组件定义的时候 data 属性要定义成一个函数而不是一个对象

2024.03.29 Promise.then 返回的是什么?

2024.04.01 父 div 设置为 position:fixed,子为 absolute,父元素动子会跟着动吗
2024.04.01 JS 中堆和栈的区别,浏览器的垃圾回收机制

2024.04.02 CommonJS 为什么不能做 Tree-Shaking 2024.04.02 computed 属性为什么能够在依赖改变的时候,自己发生变化?

2024.04.07 为什么 computed 里面不支持写异步?

2024.04.08 为什么需要双 token 机制?

2024.04.10 箭头函数的 this 是声明时确定还是运行时确定?

2024.04.11 介绍下 npm 模块安装机制,为什么输入 npm install 就可以自动安装对应的模块

转载请标注本站原文地址