3 KB 的博客首页,我是如何做到的?

2021-06-27 11:58:29 +08:00
 kkocdko

迫于权重没有 V 站高,而且注册不满 300 天,希望各位到 本人博客 去看看,顺便求个 Star:kblog - GitHub

这并不是一篇网络上泛滥的“前端体积优化”文章。

百尺竿头,更进一步!本文以我的博客为例,介绍极限控制页面体积的奇技淫巧。

成果预览

眼见为实,本人博客首页 的网络传输总体积为 2.6 KB

11260 次点击
所在节点    分享创造
85 条回复
kkocdko
2021-06-28 10:29:51 +08:00
@RockShake 确实。。。我也觉得有点违背 MD
uricc
2021-06-28 10:46:37 +08:00
快是快,但是这么丑怎么用
goodryb
2021-06-28 10:56:24 +08:00
看了下博文好像都没有日期
cheung
2021-06-28 11:27:40 +08:00
![image.png]( https://i.loli.net/2021/06/28/LFBY9UZ5lJbOgNt.png)
羡慕你的 ID,不会有人跟你抢!!
hiplon
2021-06-28 13:16:31 +08:00
分享我的 https://vnf.cc 无 js,好像也是 10kb 以内,lighthouse 好像接近 100 分
zcjfesky
2021-06-28 14:09:33 +08:00
挺好的,别理楼里的杠铃们,加油,后生可畏
xiaopc
2021-06-28 15:10:57 +08:00
@SilentDepth
https gist github com xiaopc 4546b4d38ce9f57969c5eb48423ed354
(没验证手机号,发不出来地址)
不过现代浏览器已经对通配选择器有很大的优化了,在大部分简单的页面上,一长串复杂选择器反而比通配选择器更慢
kkocdko
2021-06-28 15:22:51 +08:00
@xiaopc
1. 用 JS 动态生成内容比较好些,省得写一大串。
2. CSS 选择器的性能一直以来都有争论,样式更改导致的重绘才是重点。如果受影响的元素太多,使用通配选择器会导致不必要的,且几乎无法通过优化避免的计算。
3. 这个项目的大多数页面,元素数量甚至只有两位数,且少有样式更改的动作,几乎所有元素都只会被渲染一次。相较于牺牲这一点点性能,扣出几个字节的体积更加重要🤣。
stkstkss
2021-06-28 16:59:31 +08:00
我放个图片多少 kb 啊
stkstkss
2021-06-28 17:07:03 +08:00
优化方法写出来???
7gugu
2021-06-28 17:15:34 +08:00
@stkstkss 楼主写博文里面了。
AllenHua
2021-06-28 17:34:05 +08:00
还是高中生,惭愧惭愧,楼主未来可期。

但我第二次访问链接被重置
xiaopc
2021-06-28 17:49:59 +08:00
@kkocdko
这个测试页面参考的是「"The CSS Universal Selector Is Slow And Should Be Avoided" - Yet Another Lie 」(发不出链接🌚),作者测试的结果是通配选择器反而更快...
根据 ta 的测试代码,改成了一个通配选择器更慢的场景。至于为什么不用 js 生成,当然是为了控制变量,排除 js 的性能开销。
不过确实,CSS 解析时间不该是页面性能优化的重点。
( Vercel 在国内部分地区访问速度越来越慢了
xrr2016
2021-06-28 18:58:26 +08:00
强啊👍
zzzzqqw
2021-06-28 20:37:28 +08:00
你这个网站经常连不上啊(不挂代理的情况下),体积虽小,速度优势却难显现出来,是什么情况谁知道 @我一下,盲猜是服务器在国外的导致的
xiaopc
2021-06-28 22:24:22 +08:00
@zzzzqqw 因为在 Vercel 托管的,从本月初起 Vercel 在内地的可用性急转直下(手头甚至被🧱了一个域名,DNS 污染)

顺便在楼里问下,有没有内地访问速度快点的静态文件托管服务啊
kkocdko
2021-06-28 22:37:14 +08:00
@xiaopc 呐?这会导致我的域名也被墙么?有点慌。
coding 的那个托管好像还行,腾讯的 9 元每年要备案。。。gitee 最近因为百年的事似乎不让开通
SomeBottle
2021-06-28 23:07:49 +08:00
很有意思的文章,star 奉上~
v2esand
2021-06-29 08:44:45 +08:00
体验很好
alphanow
2021-06-30 00:25:14 +08:00
在 kb 级别的体量下,其实文件传输速度的重要性已经小于连接延迟了。托管在 github 再套个 jsDeliver 的效果可能更好。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/786028

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX