全部文章
共 1299 篇文章
Qwik博客性能优化实战
1\. 回归原生：用标准能力替代冗余脚本 曾几何时，为实现图片懒加载与资源预取，开发者常需手写复杂的 Intersection Observer 逻辑。但随着浏览器能力的演进，这类“黑科技”反而可能成为性能负担。 问题所在 ： 自定义懒加载脚本不仅增加首屏 JS 体积，还会频繁触发 DOM 监听与计算，占用主线程资源，推高 Total Blocking Time（TBT）。 优化方案 ： 图片加载 ：直接采用 。浏览器内核级实现更高效、...
在CSS中，四种高度视口单位的区别
在CSS中，视口单位是构建响应式网页设计的重要工具，特别是针对移动端开发。除了传统的 ，CSS新引入了 、 和 等更精确的单位，解决传统单位在移动端的局限性。 四种高度视口单位的区别 | 单位 | 全称 | 含义 | 特点 | | | | | | | vh | Viewport Height | 传统视口高度单位，1vh = 视口高度的1% | 在移动端有问题：不考虑浏览器UI变化，经常导致内容被遮挡或出现意外滚动 | | svh |...
Qwik 服务端能力深度解析
1\. Qwik 服务端架构概览 Qwik 采用独特的 可恢复性 （resumability）架构，使其服务端渲染（SSR）能力与传统框架有本质区别。在 Qwik 中，服务端不仅负责初始 HTML 生成，还负责： 组件序列化与反序列化 事件监听器的注册与恢复 数据流的管理（从服务端到客户端） 优化资源加载策略 Qwik 的服务端处理是 细粒度 的，允许开发者精确控制哪些代码在服务端执行，哪些在客户端执行，同时保持无缝协作。 2\. Qw...
qwik api介绍
| 类别 | 名称 | 功能描述 | 适用场景 | | | | | | | 生命周期 | onMount | 组件挂载时执行 | 初始化DOM操作、设置事件监听 | | | onUnmount | 组件卸载时执行 | 清理资源、移除事件监听 | | | onVisible | 组件在视口可见时执行 | 懒加载内容、分析追踪 | | | onResume | 从序列化状态恢复时执行 | 恢复应用状态 | | 核心API | compone...
systemd的启动流程
一、systemd的启动流程 当Linux系统启动时，systemd作为第一个用户空间进程(PID 1)被内核启动，其初始化过程如下： 1. 内核移交控制权 ： 内核完成硬件初始化后，执行 （指向systemd的符号链接） systemd以PID 1身份启动，继承内核创建的初始环境 2. 基础环境准备 ： 挂载基础虚拟文件系统：/proc, /sys, /dev 设置基本cgroups层次结构 应用系统时钟和区域设置 3. 单元加载与依...
Ubuntu Nginx配置文件与管理
1\. Nginx配置文件结构 配置文件位置 配置层次结构 2\. 常用配置示例 基础服务器配置 反向代理配置 HTTPS配置 (Let’s Encrypt证书) 3\. Ubuntu中Nginx配置管理流程 创建新站点配置 禁用站点 配置片段复用 (snippets) 4\. 配置文件验证与服务管理命令 配置测试 服务管理 5\. 常用调试命令 6\. 常见配置问题解决 配置后无法访问 1. 检查配置语法: 2. 检查防火墙设置: 3...
改了CSS刷新没反应-你可能不懂HTTP缓存
做前端的应该都遇到过这种情况：明明改了 CSS，浏览器里看到的还是旧样式。网上搜一下，告诉你"清缓存"，Ctrl+F5 一刷新就好了。 但问题是： 缓存到底是怎么工作的？ 为什么有时候会用缓存，有时候不会？ Network 面板里的 和 有什么区别？ 今天把这个问题彻底搞清楚。 HTTP 缓存的两层机制 浏览器缓存分两层： 强缓存 和 协商缓存 。 简单说： 强缓存 ：直接用本地缓存，不问服务器 协商缓存 ：问一下服务器"我这个还能用吗...
懒加载图片在同一个 Item 中逐个出现的原因与解决方案
懒加载图片在同一个 Item 中逐个出现的原因与解决方案 适用场景 ：使用原生 实现图片懒加载的动态列表，每个列表项（item）包含多张图片。 📌 问题描述 在开发一个动态渲染的列表时，每个 item 中包含三张图片，并使用 HTML 原生的懒加载属性： 观察到的现象： 开启懒加载时 ：三张图片 不是同时出现 ，而是 从左到右（或从上到下）依次加载显示 ，有明显的时间差。 关闭懒加载（移除 ）后 ：三张图片 看起来是一起出现的 ，视觉...
useEffect与useLayoutEffect对比
在 React Hooks 中， 和 都用于处理副作用逻辑，例如订阅、事件监听、DOM 操作等。但它们有着本质性的执行时机差异，这影响到页面渲染、布局抖动、性能表现等关键点。 1\. 执行时机的核心区别 在 React 的渲染流程中： 1. 渲染（Render phase） React 根据 state/props 计算 UI，生成虚拟 DOM，不访问真实 DOM。 2. 提交（Commit phase） React 将虚拟 DOM 变...