标签： first

发布于

MySQL函数：`FIRST_VALUE()`与`LAST_VALUE()`获取分组内的第一个和最后一个值。

MySQL窗口函数：FIRST_VALUE()与LAST_VALUE()深度剖析 大家好，今天我们来深入探讨MySQL中两个强大的窗口函数：FIRST_VALUE()和LAST_VALUE()。这两个函数主要用于获取窗口（分组）内的第一个和最后一个值，在数据分析、报表生成等场景下非常有用。我们将从基本语法、应用场景、注意事项以及性能优化等方面进行详细讲解，并通过大量的代码示例帮助大家理解和掌握。 1. 窗口函数的基本概念 在讨论FIRST_VALUE()和LAST_VALUE()之前，我们先简单回顾一下窗口函数的概念。窗口函数允许我们对查询结果集中的行进行分组（partitioning），然后在每个分组内进行计算。与GROUP BY不同的是，窗口函数不会改变原始查询结果的行数，而是为每一行添加一个基于窗口的计算结果。 窗口函数的通用语法结构如下： function_name(argument1, argument2, …) OVER ( [PARTITION BY column1, column2, …] [ORDER BY column3, column4, …] [fr …

继续阅读“MySQL函数：`FIRST_VALUE()`与`LAST_VALUE()`获取分组内的第一个和最后一个值。”

发布于

`Google`的`Mobile-first Indexing`：其在`索引`与`爬取`策略中的`优先`队列。

Mobile-First Indexing：移动优先索引的深度剖析 各位同学，大家好！今天我们来深入探讨Google的Mobile-First Indexing，也就是移动优先索引。这是一个搜索引擎索引和抓取策略的根本性转变，它将移动版本的网站作为索引和排名的主要依据。理解并适应这一策略，对于网站在搜索结果中获得更好的表现至关重要。 1. 什么是 Mobile-First Indexing？ 在传统的桌面优先索引（Desktop-First Indexing）模式下，Googlebot 主要抓取和索引网站的桌面版本。然而，随着移动设备使用的爆炸性增长，Google意识到，大多数用户现在通过移动设备访问互联网。因此，为了更好地服务用户，Google 开始使用移动版本的网站来索引和评估网站。 简单来说，Mobile-First Indexing 意味着 Googlebot 现在主要抓取你网站的移动版本，并将这个版本作为排名依据。如果你的网站没有移动版本，或者移动版本和桌面版本的内容差异很大，那么你的网站在搜索结果中的表现可能会受到影响。 2. 为什么 Google 要采用 Mobile-F …

继续阅读“`Google`的`Mobile-first Indexing`：其在`索引`与`爬取`策略中的`优先`队列。”

发布于

`移动优先索引`（`Mobile-first Indexing`）是什么？它对网站有什么影响？

移动优先索引：网页世界的变革与应对 大家好，今天我们来聊聊“移动优先索引”（Mobile-first Indexing）这个话题。在当今互联网环境下，移动设备的使用已经超过了桌面设备，Google 顺应趋势，推出了移动优先索引策略。理解并适应这一策略，对于网站的搜索引擎优化 (SEO) 至关重要。 1. 移动优先索引的含义 简单来说，移动优先索引是指 Google 主要使用网站的移动版本来进行索引和排名。这意味着，如果你的网站同时拥有桌面版和移动版，Google 会优先抓取并评估你的移动版页面，而不是桌面版。 2. 为什么 Google 要推行移动优先索引？ Google 推行移动优先索引的根本原因在于用户行为的转变。根据统计，大部分的搜索请求都来自于移动设备。因此，为了更好地服务用户，Google 必须确保其搜索结果能够反映移动用户的体验。 更好地反映用户体验： 移动搜索占比越来越大，优先索引移动版网页，更贴近用户实际搜索体验。 提升搜索结果的相关性： 移动版网页通常会针对移动设备进行优化，加载速度更快，更易于浏览。 适应移动互联网的发展趋势： 移动互联网已经成为主流，移动优先索引是 …

继续阅读“`移动优先索引`（`Mobile-first Indexing`）是什么？它对网站有什么影响？”

发布于

MySQL高级函数之：`FIRST_VALUE()` 和 `LAST_VALUE()`：其在窗口帧内的首尾值获取。

MySQL高级函数之：FIRST_VALUE() 和 LAST_VALUE()：窗口帧内的首尾值获取 大家好，今天我们来深入探讨MySQL中两个非常有用的窗口函数：FIRST_VALUE() 和 LAST_VALUE()。这两个函数允许我们在窗口帧内获取第一个值和最后一个值，这在很多场景下都非常有用，例如计算累计占比、识别首尾事件等等。 1. 窗口函数基础回顾 在深入了解 FIRST_VALUE() 和 LAST_VALUE() 之前，我们先简单回顾一下窗口函数的基本概念。窗口函数是一种特殊的函数，它在与当前行相关的行集合（称为窗口）上执行计算。与聚合函数不同的是，窗口函数不会将多行数据聚合为一行，而是为结果集中的每一行返回一个值。 窗口函数的基本语法如下： function_name() OVER ( [PARTITION BY column1, column2, …] [ORDER BY column3, column4, …] [frame_clause] ) function_name()：窗口函数的名称，例如 FIRST_VALUE(), LAST_VALUE(), …

继续阅读“MySQL高级函数之：`FIRST_VALUE()` 和 `LAST_VALUE()`：其在窗口帧内的首尾值获取。”

发布于

阐述 `First Contentful Paint (FCP)` 和 `Largest Contentful Paint (LCP)` 优化策略，以及 `Critical CSS` 的提取。

各位靓仔靓女，晚上好！我是今晚的讲师，老码农一枚。今天咱聊聊前端性能优化里两个重要的指标：First Contentful Paint (FCP) 和 Largest Contentful Paint (LCP)，以及优化它们的关键技术：Critical CSS。 保证讲得通俗易懂，干货满满，希望大家听完能有所收获。 开场白：性能，用户体验的基石 各位，咱们做前端的，说白了就是给用户提供服务的。用户体验好不好，直接关系到产品的生死存亡。你想啊，如果一个网站打开慢得像蜗牛爬，谁还有耐心等你？用户分分钟就跑去竞争对手那里了。而FCP和LCP，就是衡量用户体验的重要指标，直接影响用户的第一印象。 第一部分：FCP (First Contentful Paint) – 你的网站有多快“露脸” 1. 什么是FCP？ FCP，顾名思义，指的是浏览器首次渲染任何文本、图像、非白色canvas或SVG的时间点。简单来说，就是用户第一次看到页面内容的时间。这个时间越短，用户感觉你的网站加载越快。 2. 为什么FCP很重要？ 想象一下，你打开一个网站，一片空白，啥也没有，你会不会觉得很焦虑？F …

继续阅读“阐述 `First Contentful Paint (FCP)` 和 `Largest Contentful Paint (LCP)` 优化策略，以及 `Critical CSS` 的提取。”

发布于

CSS `Utility-First CSS` 与 `BEM` / `SMACSS` `Hybrid Architecture`

同学们，晚上好！今天咱们来聊聊前端CSS界的两个大流派：一个是“实用至上”的 Utility-First CSS，另一个是“门派林立”的 BEM / SMACSS Hybrid Architecture。 这两个东西，就像武侠小说里的少林和武当，各有千秋，但目标都是让我们的CSS代码更易于维护和扩展。 开场白：CSS的江湖，谁主沉浮？ 各位，还记得当年被CSS支配的恐惧吗？ 辛辛苦苦写了几百行的CSS，改个样式，牵一发动全身，整个页面都乱套了！ 这就是没有良好CSS架构的下场。 为了拯救广大前端同胞于水火，各种CSS架构应运而生。 今天我们要讲的Utility-First CSS和BEM/SMACSS Hybrid Architecture，就是其中的佼佼者。 第一节：Utility-First CSS：化繁为简，原子化的胜利 Utility-First CSS，顾名思义，就是把CSS拆分成一个个小的、高度复用的工具类。 每个类只负责做一件事情，比如设置颜色、字体大小、边距等等。 代表人物： Tailwind CSS Tailwind CSS 是 Utility-First CSS 的 …

继续阅读“CSS `Utility-First CSS` 与 `BEM` / `SMACSS` `Hybrid Architecture`”

发布于

CSS `Utility-First CSS` 与语义化 CSS 的权衡与结合

各位好，欢迎来到今天的CSS讲座，我是你们的老朋友，今天咱们聊聊一个前端界的老生常谈，但也常聊常新的话题： Utility-First CSS 与语义化 CSS 的爱恨情仇，以及如何将它们巧妙地结合起来。 开场白：CSS江湖的那些事儿 CSS，这玩意儿，说简单也简单，不就是给 HTML 元素穿衣服嘛。但真要玩溜了，它比后宫剧还复杂。各种选择器、权重、继承，稍不留神就给你来个样式冲突，让你抓耳挠腮。 早些年，咱们流行语义化 CSS，讲究见名知意，像header、article、footer这种，一看就知道是啥玩意。后来，Utility-First CSS 异军突起，像margin-top-4、padding-bottom-2这种，直接把样式写到 class 里，号称效率神器。 这两种流派，就像武林中的少林和武当，各有千秋，也各有争议。今天，咱们就来好好剖析一下，看看它们各自的优缺点，以及如何取长补短，达到“天下归一”的境界。 第一回合：语义化 CSS 的优点与挑战 语义化 CSS，顾名思义，就是让 CSS 类名具有明确的含义，反映 HTML 结构和内容。 优点： 可读性强： 看到类名，就 …

继续阅读“CSS `Utility-First CSS` 与语义化 CSS 的权衡与结合”

发布于

JS `Service Worker` 缓存策略：`Cache First`, `Network First` 与 `Stale While Revalidate`

各位前端的英雄好汉，大家好！我是你们的老朋友，BUG终结者，今天咱们来聊聊Service Worker缓存策略这三剑客：Cache First, Network First, 和 Stale While Revalidate。别害怕，虽然名字听起来高大上，但其实它们都是很实在的家伙，能帮你把网页速度提升到飞起，让用户体验嗖嗖上升。 咱们今天就用大白话 + 实际代码，把这三位老哥给安排明白了。 开场白：为啥要用 Service Worker 缓存策略？ 想象一下，你打开一个网页，结果半天刷不出来，转啊转啊转得你头都晕了。这种感觉是不是很糟糕？Service Worker就是来拯救你的！它就像一个默默守护在你浏览器背后的小助手，帮你把网页资源缓存起来，下次再访问的时候，直接从缓存里拿，速度快得像闪电。 更重要的是，Service Worker 还能实现离线访问！就算没网，也能让用户看到一些内容，避免出现冷冰冰的“无法连接到互联网”的提示。 第一位英雄：Cache First (缓存优先) Cache First 策略就像一个守财奴，先看看自己的“小金库”（缓存）里有没有东西，有的话直接拿出 …

继续阅读“JS `Service Worker` 缓存策略：`Cache First`, `Network First` 与 `Stale While Revalidate`”