Kitety别样

一些话记录

Sat, 29 Oct 2022 00:00:00 GMT

贵州旅游之不期而遇的风景

Thu, 08 Aug 2024 00:00:00 GMT

type

Post

status

Published

date

Aug 8, 2024

slug

journey-guizhou

summary

应室友婚礼之邀，我踏上了八月的贵州之旅。这里晴空高远，气候宜人，与成都截然不同。我们品尝了地道的贵州烙锅，辣椒面令人回味无穷。旅途中偶遇的山景和与当地小朋友的互动，成为意外之喜。虽未游览名胜，但这次旅行因真挚的人际交流和不期而遇的美景而意义非凡。

起因

本来这是个平平无奇的八月，酷暑的炎热伴随着我。

但随着一个电话的到来，给八月添加了一个新的日程。这是室友的一个电话，他要结婚了，我说我一定来，到时候见。

后面他又在群里发消息，大家纷纷表示祝福，因为时间还久，后面零散的安排着行程，并且提前确定了车票。

如约而至

3日早早的出发，按时上了高铁。当注意到外面变化的时候，高铁已经进入贵州了，这边天的能见度很高，晴空万里，就像川西一样；但是日头却没有川西那边晒。

后面我和谢老板下午两点就到了。这里的温度确实令人感到舒服，不像成都的那般潮湿闷热。怪不得之前和我朋友说起，他说你这是去贵州避暑了。

一出来这边天就是一半的乌云，颇有黑云压城城欲摧的阵仗。

可能这两张图片的感觉更为震撼。

因为还有两个同学要晚上八点左右才到，因此我们及时找个了个地方休息。幸运的是我们刚上车，外面就开始下起了暴雨。

当我们再次回到东站等同学的时候，天已经转晴了。

后面在八点多乘坐刘源的同学的车去了趟北站，再回到织金。因为有段高速走不了，我们改道走了国道，到的时候已经23点了。

我们还在车上打了几把王者，不得不说，以前在寝室里的感觉一下就回来了。

见到主角老刘的时候，人帅了不少，大家一起打了招呼，然后就安排了一顿当地的特色：贵州烙锅。

味道真的可以，我们大家都对这个辣椒面赞不绝口。

第二天则是回到老刘的老家那里汇合的。经过交流才知道，原来他们这边已经吃席吃了一周了，然后今天算是最后一天，风格就和我们这的坝坝宴一样，但是当地的习俗是下午3点开始吃晚饭，所以我们也是吃了个早晚饭。

因为前一天到的很晚，然后吃完饭休息都是接近凌晨2点了，所以饭后一直很困，就靠在这边窗边打盹。幸运的是这个窗边视野辽阔，还有一些小植物摆放在这里。

晚上随着夜晚将近，也有了不一样的风景。

偶然的风景

不出意外的话，我们就会在这个窗边待一下午直到晚上。因为楼下就是马路，但是两边就是忙碌的人们，加上还有一些货车在穿梭，这条路就感觉有点狭窄。

谢老板就提议出去走走转转，散散步，找个宽阔一点的地方看看。

特色景点

我们慢慢的沿着路一直走着，路两边拥挤地靠着店铺和房屋，我们也不知道这样什么时候能走到结尾。

直到到了马路的一个岔路口，发现旁边有一个下坡，视野望出去很棒，整体就构成了一个窗户，窗户外面就是景色。

我们往前不断走着，看着外面的山景，阳光正好，视野开阔。远处的山可以直接看到山的断面，其白色和远处的绿色交错着。

就有一种“山重水复疑无路，柳暗花明又一村”的感觉，我们都喜出望外的拿出手机拍照。

在这里我们还发现了一只大鹅，仿佛看到我们很亢奋，一直在那里“唱歌”。这个场景让我们都感觉有趣。

视频备用地址

10个必备的ReactNative组件

Sun, 27 Oct 2024 00:00:00 GMT

丰富的社区

在React Native的世界中，目的是为了构建高性能的APP。除了React Native提供的组件（Components），还有一个强大的React Native社区，提供了很多丰富实用的组件。

组件分享

今天我们就来罗列出React Native十款优秀的组件。

React Native Bouncy checkbox

简介

React Native的完全可定制的动画bouncy复选框

地址：

react-native-bouncy-checkbox

WrathChaos • Updated Nov 6, 2024

效果

React Native Bottom Sheet

简介

具有完全可配置选项的高性能交互式bottom sheet🚀

地址

react-native-bottom-sheet

gorhom • Updated Nov 6, 2024

效果

React Native Gifted Chat

简介

💬React Native最完整的聊天UI

地址

react-native-gifted-chat

FaridSafi • Updated Nov 6, 2024

效果

静态图

动图

Victory Native Xl

简介

React Native的图表库，专注于性能和自定义。由D3、Skia和React Native的Reanimated提供支持的高性能图表。

地址

victory-native-xl

FormidableLabs • Updated Nov 5, 2024

效果

静态图

动图

React Native Toast Message

简介

React Native 的动画 toast 消息组件

地址

react-native-toast-message

calintamas • Updated Nov 5, 2024

效果

Skeleton-React Content Loader

简介

⚪ SVG 支持的组件可轻松创建骨架载荷。

地址

react-content-loader

danilowoz • Updated Nov 6, 2024

效果

骨架屏的loading形式。

SVG 支持的组件可轻松创建占位符加载（如 Facebook 的卡片加载）。

React Native Pager View

简介

一个用于 React Native 的封装组件，它让开发者可以在 Android 和 iOS 中轻松使用页面滑动切换的功能。

地址

react-native-pager-view

callstack • Updated Nov 6, 2024

效果

Expo Blur view

简介

一个 React 组件，它为会指定内容添加模糊效果。

地址

BlurView

A React component that blurs everything underneath the view.

https://docs.expo.dev/versions/latest/sdk/blur-view/

效果

React Native Calendar

简介

React Native 日历组件 🗓️ 📆，适用于 iOS 和 Android 的声明性跨平台 React Native 日历组件。

地址

react-native-calendars

wix • Updated Nov 6, 2024

效果

FlashList

简介

快速且高性能的 React Native 列表，在低端设备上仍旧具有出色的性能。

它在大量数据的情况下，性能优于原生的FlatList。

地址

FlashList - super fast list for react native

FlashList is a faster alternative to FlatList with a similar API. Migrate in a few seconds and get major performance boost.

https://shopify.github.io/flash-list/

效果

信息来源

本文整理信息自Youtube视频，方便自己查阅。

视频地址：

10 Must-Have React Native Components 😎

Speed up your React Native app development with these 10 components. Don't reinvent the wheel with every new project! 🔥 Learn React Native FAST: https://galaxies.dev The components: 1. Bouncy checkbox https://github.com/WrathChaos/react-native-bouncy-checkbox 2. Bottom sheet https://github.com/gorhom/react-native-bottom-sheet 3. Gifted Chat https://github.com/FaridSafi/react-native-gifted-chat 4. Charts https://github.com/FormidableLabs/victory-native-xl 5. Toast https://github.com/calintamas/react-native-toast-message 6. Skeleton https://github.com/danilowoz/react-content-loader 7. Pager view https://github.com/callstack/react-native-pager-view 8. Blur view https://docs.expo.dev/versions/latest/sdk/blur-view/ 9. Calendar https://github.com/wix/react-native-calendars 10. FlashList https://shopify.github.io/flash-list/ ############################# ❤️ You can also find me on: Twitter: https://twitter.com/schlimmson Instagram: http://instagram.com/simongrimm_ ############################# #reactnative #reactjs 📌Chapters: 00:00 Intro 00:31 Bouncy checkbox 01:03 Bottom sheet 01:43 Gifted Chat 02:33 Charts 03:24 Toast 04:05 Skeleton 05:16 Pager view 06:28 Blur view 07:32 Calendar 08:32 FlashList 09:26 Outro

https://www.youtube.com/watch?v=wsZ_mjXk6Hg

其他推荐资源

Awesome React Native

awesome-react-native

jondot • Updated Nov 6, 2024

React Native Directory

reactnative.directory

https://reactnative.directory/

⽹站SEO开发实践

Thu, 23 May 2024 00:00:00 GMT

起因

因为之前做过一些网页的重构⼯作，主要解决了SEO和⼀些性能优化的问题，因此就SEO和性能优化、评分优化等整理出一份实践⽂档。

技术选型

主要针对是否需要做SEO来进⾏选择

是否SEO	技术选择
需要	需要SEO可以选择Next.js（React技术站）或者Nuxt.js(Vue技术站)，推荐Nextjs
不需要	React、Nextjs或者Vue、Nuxtjs都可以，具体的不限制，推荐Nextjs（React向）

SEO知识

⽂档整理

⽬前网络也有总结SEO的技术⽂档可以参考

SEO 新手指南：基础知识 | Google 搜索中心 | 文档 | Google for Developers

掌握基本的搜索引擎优化 (SEO) 知识可以带来显著的效果。欢迎阅读 Google SEO 新手指南，简要了解搜索引擎优化的基本知识。

https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn

面向 Web 开发者的 SEO 指南 | Google 搜索中心 | 文档 | Google for Developers

使内容易于搜索很重要，因为这样可以吸引更多相关用户浏览您的网站。若要了解如何进行搜索引擎优化 (SEO)，请查看这一面向 Web 开发者的 SEO 指南。

https://developers.google.com/search/docs/fundamentals/get-started-developers?hl=zh-cn

开发细节

友好的URL地址

名称	描述
清晰⽽简洁的URL	URL应该简短、清晰，能够准确反映⻚⾯内容。避免过⻓、含有⽆关信息或特殊字符的URL • 不好的URL： https://example.com/pageid=123&category=product • 好的URL： https://example.com/productpage
关键词优化	在URL中使⽤相关关键词，有助于搜索引擎理解⻚⾯内容 • 不好的URL： https://example.com/p123 • 好的URL： https://example.com/seofriendly-url
使⽤连字符⽽⾮下划线	连字符（-）在URL中被认为是分隔符，⽽下划线（_）可能不被搜索引擎理解为分隔符 • 不好的URL：https://example.com/seo_friendly_url • 好的URL： https://example.com/seofriendly-url
避免动态参数	尽量避免在URL中包含动态参数，因为它们可能使搜索引擎难以理解 • 不好的URL： https://example.com/page?sessionid=123 • 好的URL： https://example.com/staticpage
⼩写字⺟	使⽤⼩写字⺟，因为URLs对⼤⼩写敏感，统⼀使⽤⼩写以避免混淆 • 不好的URL： https://example.com/SEOFriendly-URL • 好的URL： https://example.com/seofriendly-url

项目实践

url简洁

url包含实质性的关键词

url使⽤连字符链接

url不包含动态参数

url使⽤⼩写字⺟

响应式设计

描述

⽹站采⽤响应式设计，以适应不同⼤⼩和类型的移动设备。这有助于提供⼀致的⽤⼾体验，并避免为移动设备单独创建不同版本的⽹站。

优点

SEO优点

优点	描述
用户体验优化	响应式设计可以使您的⽹站在各种设备上都能良好地展⽰和使⽤。这提⾼了⽤⼾的满意度和留存率，这对SEO⾮常重要。
移动优先指数	Google已经将移动优先指数作为排名算法的⼀个重要因素。这意味着Google更倾向于使⽤移动版本的内容和⻚⾯结构来确定排名。具有响应式设计的⽹站更有可能在移动搜索中获得更好的排名。
减少重复内容	响应式设计避免了为不同设备创建多个版本的⽹站。这可以减少重复内容的问题，因为Google通常不喜欢重复的内容，可能会降低排名。
链接权重统⼀	响应式设计意味着所有设备上的内容都在同⼀个URL下。这有助于保持所有⻚⾯的链接权重统⼀，⽽不会因为多个版本⽽分散。
提⾼⽹站速度	响应式设计可以减少加载时间，因为它避免了重定向到移动版本或加载不同设备的不同内容。

开发层面

优点：开发⼈员使⽤⼀套代码即可实现多端适配，维护便利。缺点：多端适配增加代码复杂度，但是相⽐于维护多套代码，可以接受。

实践

响应式设计主要是针对于⼿机端、PC端，有可能还有平板尺⼨的设备适配。推荐的css仓库有Tailwind CSS和Bootstrap等都可以实现，具体可以参考这两个框架的官⽅⽂档。

⽬前⽐较流⾏的是Tailwind CSS ，我用的比较多的也是这个⽅案，便捷手册可以参考Cheatsheet。

测试点

在Chrome打开开发者⼯具调节屏幕宽度，或者使⽤辅助⼯具⽐如Responsive Viewer查看，并且需要注意在黑暗模式下的适配问题。

语义化标签

描述

语义化的标签指的是在 HTML 中使⽤具有语义含义的标签来描述⽹⻚的内容结构，⽽不是仅仅依赖于样式或其他⽅式来呈现内容。

名称	描述
更好的理解和索引	搜索引擎会根据⽹⻚的语义化结构更好地理解⽹⻚内容，从⽽更准确地索引⻚⾯。例如，使⽤、、、、、等语义化标签可以明确⻚⾯的不同部分，有助于搜索引擎了解⻚⾯的结构和内容。
提⾼关键词权重	语义化标签能够使⻚⾯内容更具有可读性和可理解性，有助于提⾼关键词的权重。搜索引擎会更加重视语义化标签中的关键词，从⽽提⾼⻚⾯在相关搜索结果中的排名。
改善⽤⼾体验	语义化标签能够使⻚⾯更具有结构性和逻辑性，提⾼⽤⼾对⻚⾯内容的理解和浏览体验。良好的⽤⼾体验也是搜索引擎排名的重要因素之⼀。
有助于⽆障碍访问	语义化标签可以改善⽹站的⽆障碍访问性，使残障⼈⼠和使⽤辅助技术的⽤⼾更容易访问和理解⽹⻚内容。

实践

⽂中的标签使⽤语义化标签即可，参考html5语义化标签和HTML5 语义元素即可，⽽不是通篇的div标签。

链接标签

描述

⽹站中a标签的⻚⾯跳转⽅式

优点

搜索引擎爬⾍通常能够正确解析和处理标准的标签链接，从⽽更好地理解⽹⻚的结构和内容。

原因：爬⾍不能执⾏JavaScript中的逻辑，使⽤ JavaScript 跳转时，搜索引擎爬⾍⽆法正确解析⻚⾯中的链接，导致⽆法有效地索引⻚⾯内容，从⽽影响⽹⻚在搜索结果中的排名和可⻅性。

属性

a标签的不同的属性具有不同的作⽤

属性名	描述	细节
rel	⽤于指定当前⽂档与链接⽬标之间的关系 1.rel="nofollow" ：告诉搜索引擎不要跟踪链接。这可以防⽌被链接的⻚⾯被搜索引擎索引。 2.rel="noopener" ：防⽌新打开的⻚⾯可以通过 window.opener 访问打开它的⻚⾯，提⾼安全性。3.rel="noreferrer" ：防⽌浏览器发送Referer 头部信息，提⾼隐私性。 4.rel="prefetch" ：提⽰浏览器在空闲时预取链接的内容，以加快⻚⾯加载速度。	1.常规的使⽤的就是不处理rel，默认就是追踪链接，也不会预请求 2. 针对于外部链接，⽐如⼀些分享的⽹⻚可以设置为 `nofollow noopener noreferrer` 3.需要预先请求的资源设置rel为 `prefetch`
download	⽤于指⽰浏览器下载链接指向的资源，⽽不是在浏览器中打开它。	在下载⽂档的时候使⽤
target	属性⽤于指定链接打开的⽬标窗⼝或框架。常⽤的取值有： • _self ：在当前窗⼝中打开链接（默认值）。 • _blank ：在新窗⼝中打开链接。	默认在本⻚⾯打开，需要新窗⼝打开的设置为 `_blank`

实践

⽹⻚中的所有的⻚⾯跳转都⽤a标签跳转，在Nextjs中使⽤Link组件跳转。

外部打开的窗⼝target设置为 _blank ，rel设置为 nofollow noopener noreferrer

需要预先请求的资源设置rel为 prefetch ，⽐如⾸⻚⼤图等资源

下载的链接添加上download属性

404跳转⻚⾯

描述

设置404⻚⾯有助于提⾼⽤⼾体验和搜索引擎爬⾍的效率，同时保护⽆效链接的价值。

因此，为⽹站设置⼀个友好、有效的404⻚⾯对SEO是有益的。

实践

在Nextjs项⽬中添加⼀个not-found⽂件为404的⻚⾯，当访问⻚⾯不存在时将转向404⻚⾯

当访问资源不存在时，使⽤notFound函数，转向404⻚⾯

性能优化

图⽚优化

描述

名称	描述
⽂件名	使⽤描述性好的⽂件名，包含相关关键词，避免使⽤⽆意义的⽂件名
图⽚格式	选择适当的图⽚格式。在⽹⻚中全部使⽤webp，他具有以下优点： 1. 更⼩的⽂件⼤⼩和更⾼的压缩率 2. ⽀持透明图、动态图 3. 现代浏览器⽀持
图⽚质量&⽂件⼤⼩	保证质量良好的情况下，尽可能压缩图⽚⼤⼩，提升加载速度。图片压缩推荐TinyPng
标题和ALT属性	为图⽚添加描述性好的标题（title）和ALT属性，这有助于搜索引擎理解图⽚内容，同时提⾼⽹⻚的可访问性。在Nextjs中的Image属性，Alt为必填项。
响应式图⽚	使⽤srcset属性为不同设备提供适当⼤⼩的图⽚，以提⾼移动设备的加载速度。

实践

屏幕适配，srcset设置 a. 配置设置deviceSizes和imageSizes的尺⼨ b. Image设置sizes（简单粗暴设置100vw全部展示，srcset会⾛上⾯的设置的尺⼨）。如果你想控制内容的展示，否则不需要过多的设置。

懒加载（默认开启懒加载）

图⽚组件配合imageLoader转换cdn地址，配合传⼊的宽度，动态设置srcset

图⽚转换，静态资源图⽚统⼀转换为webp格式，并且转换的时候需要压缩

设置图⽚尺⼨，否则影响性能cls偏移指标

图⽚在加载过程中可能会导致⻚⾯内容的重新布局，从⽽影响到 CLS 指标。

背景图⽚

只有项⽬中的图⽚，可以借助第三⽅plaiceholder仓库实现背景
动态的图⽚：外⾯放⼀个div来设置背景，搭配css实现
⾸⻚需要优先显⽰的地址需要设置priority来preload
可以配合loader来使用cdn的地址

设置默认图⽚占位

可以使⽤的css实现，通过使⽤背景图⽚和默认背景占位实现，并且提供参数控制是否显⽰占位。

缓存和CDN

合理的利⽤缓存可以提交⽹站的访问速度，利⽤cdn进⾏内容分发可以节省源机器的⽹络流量，访问边缘节点提升访问速度。

缓存

描述

Nextjs框架是有对应的缓存策略，⽐如内容缓存、请求缓存、缓存失效等

参考地址Nextjs Cache

实践

名称	实践细节
内容缓存	默认缓存，当你访问访问过的url，下⼀次Nextjs将返回缓存的内容
请求缓存	默认请求会缓存并且不会过期，当你在服务端请求接⼝两次，将返回缓存的内容注意：需要使⽤Nextjs的fetch请求函数缓存
缓存失效	1. 浏览器端缓存失效 a. chrome浏览器disable cache请求 i. 实际上是传⼊了cache control为no-cache触发不使⽤缓存 2. 代码控制缓存失效 a. 重新构建 b. revalidatePath c. revalidateTag d. Fetch revalidate字段设置失效时间（官⽹策略）

CDN

CDN部分主要图⽚cdn资源传输和其他的cdn资源，⽐如附件、css的等等

索引

规范化

描述

当同⼀⻚⾯有多个版本时，Google 会选择⼀个版本存储在其索引中。这⼀过程称为规范化，被选为规范的 URL 将是 Google 在搜索结果中显⽰的 URL.

实践

在每个⻚⾯中添加metaData的alternates-canonical字段，指向⼀个地址

收录索引

描述

抓取⻚⾯后，⻚⾯将被渲染然后可能被⾕歌收录。被搜索引擎蜘蛛爬取不等于被收录。⽽⻚⾯被收录以后才能在⽤⼾搜索结果⾥⾯展⽰出来。

实践

⽹站抓取

设置sitemap

设置robots.txt

在Google Search Console中配合设置验证⽂件

⻚⾯设置

索引⻚⾯且追踪⻚⾯的a链接

不索引

不追踪

不索引不追踪

对链接和外部链接，对部分⻚⾯屏蔽索引还需要a标签的rel属性配合

Sitemap

描述

Sitemap 是⼀个包含⽹站所有⻚⾯ URL 的⽂件，⽤于帮助搜索引擎更有效地发现和索引⽹站内容。

优点	描述
指导搜索引擎爬⾍	Sitemap 提供了⽹站的结构和重要⻚⾯的信息，帮助搜索引擎爬⾍更快地了解⽹站内容，并发现新的⻚⾯。
提⾼⽹站索引速度	搜索引擎可以更快地索引⽹站内容，使⽹站在搜索结果中更快地显⽰。
优化⽹站结构	通过创建 Sitemap，⽹站管理员可以更好地了解⽹站的结构和⻚⾯分布，有助于优化⽹站的结构和内部链接。
识别问题⻚⾯	Sitemap 可以帮助⽹站管理员识别问题⻚⾯，例如重复内容、404 ⻚⾯等，从⽽及时进⾏修复和优化。

实践

在Nextjs中创建sitemap.ts⽂件，按照格式返回即可。

robots.txt

描述

⽤于告诉搜索引擎爬⾍哪些⻚⾯可以访问，哪些⻚⾯不应该访问。

实践

在⽂件app⽬录中添加robots.txt⽂件即可，填写适当的内容。规范参考

Link prev & next

描述

链接：使⽤ rel="next" 和 rel="prev" 设置分⻚

您现在可以使⽤ HTML link 元素 rel="next" 和 rel="prev" 来指⽰分⻚系列中各组成⽹址之间的关系。

实践

在metaData返回的时候，根据分⻚的上下页关系，返回上⼀⻚和下⼀⻚的link即可。参考链接：https://github.com/vercel/next.js/discussions/52923

SEO的三元素 TDK

描述

SEO 的三元素 TDK 分别是 Title、Description 和 Keywords，它们是⽹⻚在搜索引擎中的重要元素，对⽹⻚的排名和点击率都有很⼤的影响。

名称	描述
Title（标题）	Title 是⽹⻚的标题，显⽰在浏览器标签栏上，也是搜索结果中显⽰的标题。⼀个好的 Title 应该包含关键词，描述清楚⻚⾯内容，并吸引⽤⼾点击。
Description（描述）	Description 是⽹⻚的描述，显⽰在搜索结果中的摘要部分。⼀个好的 Description 应该简洁明了地描述⻚⾯内容，吸引⽤⼾点击。
Keywords（关键词）	Keywords 是⽹⻚的关键词，⽤于描述⻚⾯内容的关键字。虽然搜索引擎不再重视 Keywords 标签，但它仍然可以帮助搜索引擎了解⻚⾯的主题。

实践

1. 在Nextjs中每个⻚⾯可以设置metadata静态数据，或者通过generateMetadata动态⽣成数据

注意事项

这部分不应该使用浏览器的Element查看，因为可能有JavaScript会修改到这部分的内容，而是应该直接使用查看网页源码的方式直接查看，并且搭配搜索关键词快速定位。。

Core Web Vital

描述

Core Web Vitals（核⼼ Web 体验指标）是⼀组⽤于衡量⽹站⽤⼾体验的关键指标，它们反映了⽤⼾在浏览⽹站时所体验到的⻚⾯加载速度、⻚⾯交互性和⻚⾯视觉稳定性等⽅⾯的感受。

Google 将 Core Web Vitals 视为评估⽹站⽤⼾体验的重要指标之⼀，并将其纳⼊搜索排名算法中。

名称	描述
Largest Contentful Paint (LCP)	最⼤内容渲染时间，衡量从⽤⼾观点来看⻚⾯的加载速度。它测量的是从⻚⾯开始加载到最⼤的主要内容元素（例如⽂本、图像、视频等）完全呈现在⽤⼾视野中的时间。
First Input Delay (FID)	⾸次输⼊延迟，衡量⻚⾯的交互性。它测量的是⽤⼾⾸次与⻚⾯交互（例如点击链接、按钮等）到浏览器实际响应该交互的时间。
Cumulative Layout Shift (CLS)	累积布局偏移，衡量⻚⾯的视觉稳定性。它测量的是⻚⾯上元素在加载过程中发⽣的意外移动的总和，⽤⼾体验较差的⻚⾯通常会有较⾼的 CLS 值。

实践

简单的主旨：尽量少的加载必要的资源，加快访问速度，并且图片设置尺寸，减少偏移跳动。

LCP&FID

主要是减少最⼤内容渲染时间、降低⻚⾯渲染到交互的延时。其实就是最⼩原则，只加载当前⻚⾯的需要的，并且nextjs会默认做tree shaking优化

⽂件资源使⽤cdn加速

资源动态加载或懒加载 a. ⽐如轮播图等复杂js计算，当滚动到视⼝的时候再执⾏逻辑或懒加载

可以搭配Web Worker等处理地⽅的资源（本次未做，需要 page router）

CLS

1. 加载图⽚固定尺⼨的元素时，为其指定固定的尺⼨

LightHouse跑分优化

以下包含了⼀些处理遇到的问题的细节，包括跑分的具体细节，很多情况下遵循上⽂的实践已经可以提⾼跑分，其他为遇到问题再通过修改为最佳实践，逐步解决问题。

问题	相关方案和解决办法
A link without description text a标签⾥⾯就是别的元素，缺乏⾯熟⽂本，对屏幕阅读器不友好。⽐如单纯的See More按钮等，⽆法通过⽆障碍检查 https://developer.chrom e.com/docs/lighthouse/ seo/link-text?hl=zh-cn	可以设置⼀点有意义的隐藏⽂本来辅助⽆障碍阅读 .a11y-visually-hidden { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); clip-path: inset(100%); white-space: nowrap; }
标签的包含关系	总体的关系：块级可以包含任何标签，但是⾏内不能包含块级 a标签不能包含块级，需要将⽂本或者图⽚转换为具体的⾏内元素进⾏包装
点击的图标的描述⽂本	如果直接是⼀些可以点击的图标，没有描述⽂本，lighthouse会出现Accessibility的警告，可以设置aria-label属性来规避
⽂本前景对⽐	有的⽂本颜⾊和背景⾊的颜⾊对⽐不强，会触发Accessibility的报错。如此情况需要交互同学配合修改对应的颜⾊

其他问题和注意事项处理

问题	相关方案和解决办法
⻚⾯过渡占位展⽰	可以添加⼀个loading.tsx⽂件来展⽰此⽅式有问题，如果在⾥⾯的逻辑判断使⽤了重定向和NotFound，将不会返回正确的状态码，⽽是统⼀返回200。
⻚⾯跳转默认会滚动到之前的滚动的位置	判断是不是浏览器环境，⼿动设置window.history.scrollRestoration，让每次的⻚⾯跳转都是滚动到顶部
Clientcomponent&Servercomponnet	注意他们的区别，注意官⽹的⽂档说明

辅助工具

除了上述提到的一些知识点，我们还需要正确的评估我们的SEO结果和网站的响应速度等等。在此，我就简单列举出一些工具，帮助我们的工作。

https://pagespeed.web.dev/ PageSpeed可以帮你定位网站问题，并且给出相应的建议，但是需要的必须是上线的公网可以访问的网站。

LightHouse LightHouse是一个浏览器工具，功能和PageSpeed一样，只是它除了可以检查线上的网站，并且支持在本地开发阶段进行问题评估。

Responsive Viewer 一次显示多个屏幕，响应式设计的扩展。这个扩展可帮助前端开发人员在开发响应式网站或者应用程序时测试多个屏幕。

WebPagetest 一款类似于Google PageSpeed的工具，不过他的评估规则更为细腻，并且支持的设备为度更加细节。我也用这个跑了一次我的博客，可以进入这个结果页链接参考一下。

结语

网站的SEO优化是一个持续的过程，是需要不断优化、调整、打磨的工作。

一个简单的比喻，你考试想六十分及格，可能你加把劲，努努力，就可以实现目标。但是如果你想考试考一百分，这就需要持之以恒的不懈努力。

所以，真正的实践，其实是不断的修正完善，这样才能将一件事做好。

关于平滑曲线绘制算法的思考

Sat, 20 Mar 2021 00:00:00 GMT

这篇文章介绍了在平面世界中绘制点和线的基础知识，并通过创建canvas和使用PIXI库简化操作来实现。还讨论了贝塞尔曲线的重要性，包括二次贝塞尔曲线的绘制方法和如何绘制平滑曲线。文章还提到了如何绘制贝塞尔曲线的切线，以及在解决问题时如何绘制贝赛尔曲线保持切线平行。最后，文章总结了使用线段位置与常数乘积效果最好的演示方法，并鼓励读者借鉴前人思考成果。

Chrome Network面板解析

Sun, 14 Jun 2020 00:00:00 GMT

这篇文章详细介绍了如何打开 Chrome 开发者工具中的 Network 面板，并对面板中的工具栏、启用网络记录、清除请求日志、请求过滤、过滤输入框等功能进行了说明。还介绍了如何使用 Hide Data URLs 隐藏 data: 协议的 URL，以及如何进行请求搜索、禁用缓存、模拟网络情况、导入导出请求文件等操作。文章最后总结了信息总览栏、Filter、请求区和基本表头的作用和使用方法。