Hello World

Appearance

On This Page

渡一Web前端学习频道 ​

抖音链接

https://v.douyin.com/CeiPFj78/

1. 基础 ​

引言 ​

风之积也不厚，则其负大翼也无力。

1.1 黑白滤镜 ​

filter: grayscale(1);

1.2 轮播图实现思路 ​

transform: translateX(); / setInterval();

1.3 失活页面的计时器问题 ​

visibilitychange

1.4 粘性定位 ​

  • 粘性定位，参考系是其包含块，会随着其包含块被划走。
  • 何时粘住，根据设置的上下左右值，相对于临近显式设置了 overflow 属性的父元素（如果所有父元素没有设置，那么就是相对于整个视口）。
css
div {
  position: sticky;
  top: 0;
}

html {
  overflow: hidden;
}

1.5 文字描边 ​

text-shadow / text-stroke

1.6 下拉菜单的过渡问题 ​

height: auto; / transform: scaleY();

1.7 保持图片清晰度 ​

  • DPR
  • background: image-set()
  • img: srcset

1.8 读取类的实例字段 ​

type fields = keyof InstanceType<typeof classA>

1.9 前端架构师 ​

基建问题、效能问题。

1.10 CSS下划线动画 ​

background: linear-gradient();

1.11 背景的继承 ​

css
.avatar::after {
    background: inherit;
}

1.12 圆形放大的hover效果 ​

clip-path: circle();

1.13 组件库类型丢失问题 ​

vite 环境下参考 /// <reference types="" />

1.14 请求的取消 ​

输入框快速输入或改变时， 为避免请求错乱。

1.15 交融动画效果 ​

基于对比度的交融、基于透明度的交融。

1.16 优化白屏时间 ​

requestAnimationFrame：合理使用浏览器帧率逐步渲染元素。

1.17 浏览器原生弹窗 ​

使用 <dialog> </dialog> 原生标签进行封装。

1.18 游离节点的内存泄漏 ​

元素被聚焦后，无法通过垃圾回收机制进行回收处理，但多次操作后只会游离最后一个元素。

当我们最后聚焦的是一个较大元素时，可以手动创建一个小的元素进行聚焦处理。

1.19 自动检测更新 ​

  • WebSocket：实时。
  • 轮询：对比JS文件是否发现变化。

1.20 CSS实现故障风格 ​

混合模式：mix-blend-mode 或 background-blend-mode。

1.21 JS更改CSS变量值 ​

dom.style.setProperty("--var", number);

1.22 实现高度自动过渡 ​

  • 常规：使用JS设置过渡；clientHeight 读取任何几何位置信息，均能触发强制渲染。
  • 新(实验性，兼容性)：interpolate-size、calc-size()。

1.23 静态资源的动态导入 ​

  • import().then()
  • URL构造器

1.24 watchEffect中异步问题 ​

async await 函数的执行规则。

1.25 旋转视差效果 ​

使用 CSS grid 实现，整体旋转部分反转。

1.26 class转function ​

严格模式，原型挂载。

1.27 文字镂空效果 ​

background-clip: text;

1.28 组件全局/局部注册 ​

在分包和不分包的构建下表现不同，更推荐局部注册。

1.29 过渡效果监听 ​

transitionstart、transitionend。

1.30 元素倒影 ​

-webkit-box-reflect，在一个特定方向上为元素的内容生成倒影。

1.31 监控页面卡顿 ​

PerformanceObserver。

1.32 SASS中的继承 ​

@extend .class; 可同时应用抽象类语法 % 符号进行优化。

1.33 跟随系统的主题切换 ​

matchMedia() 方法。

1.34 利用延迟实现复杂动画 ​

animation-delay。

1.35 CSS滚动吸附效果 ​

scroll-snap-type。

1.36 访问文件夹 ​

file API。

1.37 脚本加载失败重试 ​

  • 什么时间重试：error 事件监听，在捕获阶段；并且监听需前置。
  • 如何重试：启用备用url，注意可以使用阻塞来规范加载顺序。

1.38 组件循环依赖问题 ​

动态导入，() => import().then();

2. 进阶 ​

2.1 工具库推荐 ​

  • mermaid：绘图工具，仅作展示效果，不涉及互动操作。
  • particles.js：实现粒子效果。
  • GSAP：动画库。结合 ScrollTrigger 插件可实现视差滚动。
  • LogicFlow：流程图编辑。https://site.logic-flow.cn/。

2.2 站点推荐 ​

3. 拓展 ​

3.1 人工智能 ​

  • 神经网络
    • 神经元，从生物学到数学。
    • 神经元，权重与偏置。
    • 神经网络，分层结构与前向传播。
    • 神经网络，权重偏置与矩阵运算。
    • 神经网络的损失度 。
    • 损失度减小：梯度下降。
    • 梯度下降实现：反向传播。
    • 训练模式和框架。