迫于权重没有 V 站高，而且注册不满 300 天，希望各位到 本人博客 去看看，顺便求个 Star：kblog - GitHub
这并不是一篇网络上泛滥的“前端体积优化”文章。
百尺竿头，更进一步！本文以我的博客为例，介绍极限控制页面体积的奇技淫巧。
成果预览
眼见为实，本人博客首页 的网络传输总体积为 2.6 KB。
爱意满满的作品展示区。
This topic created in 1967 days ago, the information mentioned may be changed or developed.
Supplement 1 · Jun 27, 2021
仓库是 kblog - GitHub ，各位给个 ⭐ 呗~
 |
jellyboolJun 27, 2021
1
这域名劝退
|
 |
2
啊哈？域名怎么了，太长了么
|
 |
3
SEO 友好吗？
|
1 |
4
@anxn 非常友好，虽然是 SPA，但生成的依然是静态页面（可以试试禁用 JavaScript ），但是国内的百度之流实在没办法。
由于这个域名是新换的，所以目前收录还在进行，之前用 GitHub Pages 的时候 Bing 和 Google 的收录都不错 |
 |
5
确实很快啊...单纯作为博客来说体验是不错的...
|
 |
6
提一句，CSS 通配选择器性能可不高
|
 |
7
作为博客来说，这个加载速度相当优秀了，感知非常明显
|
 |
zackwuJun 27, 2021
8
很棒的文章，前端原来可以玩得这么有趣
|
 |
hronroJun 27, 2021 via iPhone
10
强啊，我当年高中毕业的时候，连 Hello World 都不会。
顺带一说，你都上了 HTTP2 + Server Push 了，其实不打包反而性能更好 |
 |
KmmoonlightJun 27, 2021
11
东西挺好 就是 右上角那个 返回顶部的按钮 好像只有在顶部的时候才会出现
|
 |
h404biJun 27, 2021
12
精简的最终归宿终将是 raw txt 。写得挺好的
|
|
13
|
|
14
@Kmmoonlight 向下滚动顶栏隐藏，向上滚动一下，顶栏就会出现了~
|
 |
tty0Jun 27, 2021 via Android
15
看看能不能混个友联 https://someexp.com/
|
|
16
|
 |
qq316107934Jun 27, 2021
17
Lighthouse 的 Performance 和 Best Practice 已经 100 了，可以的；才高三毕业，未来可期啊
|
 |
xtxJun 27, 2021 via iPhone
18
厉害厉害，高考考得怎么样
|
 |
momo1999Jun 27, 2021
19
强啊，无敌
|
 |
20
考得怎么样？
|
 |
ajaxfunctionJun 27, 2021
21
不错不错，值得学习
|
 |
jookrJun 27, 2021
22
https://fatfatpig.com/
这个博客比楼主强一丢丢 |
 |
7guguJun 27, 2021
23
cool👍不过为了高速加载还是摒弃了一部分的易用性，感觉有得有失吧。
|
 |
1if5ty3Jun 27, 2021
24
楼主考的如何呀，想报哪个学校呢。
|
 |
ijrouJun 27, 2021
25
哦，首页博客啊
|
 |
zmcJun 27, 2021
28
用过楼主精简的迅雷很不错，现在怎么没了？
|
 |
youthcouldJun 27, 2021
29
@zmc 对啊，我说怎么这么熟悉呢
|
 |
30
30ms 和 100ms 能有什么区别。。。。
|
 |
Austin2035Jun 27, 2021
31
 我的首页是 12kb，但是加载速度比你快的多了。 |
 |
32
如果要极限控制主页体积，只放超链接，不加任何特效不就够了吗？
为了速度，这种牺牲大部分性能和渲染的尝试的意义是什么？ |
 |
encroJun 27, 2021
34
我以为 UV 3K 呢
|
|
35
@v2k9 “V2EX 是 way to explore 和 way too extreme 的缩写。前者是我们每天都产生的探索世界的好奇心，而后者，是我们将一件事情做到极致的态度和决心。”
|
 |
LemengJun 27, 2021
36
强强，支持一下
|
 |
37
支持一下。
有几个疑问： 1.为什么将所有资源打包在一起是一个比分块走的更远的选择？一般来说除非加载的这个文件所有内容都会在当前页面立马展示出来否则的话并没有感觉到比分块更好的地方？ 2. 直接写 data URL 的缺点很明显，不利于维护。 3. 分域名加载区分移动端和 PC 端 CSS 直接可以省一半？ |
 |
webshe11Jun 27, 2021
38
极客 虽然我自己用不着 但是应当表示支持
|
 |
iPhone9Jun 27, 2021
39
你用的 node 几，我刚刚运行就报错了。
|
|
40
@cyrbuzz
1. 首先，当前的代码已经非常精简，用 Chrome 的 Coverage 工具可以看到，首页的代码利用率已经达到了 78%，分块并不能带来明显的改善。其次，这样打包能让生成的静态页面更简练，页内跳转的时候加载量更小一些。 2. 所以我并没有选择用 data-xxx 自定义属性。 3. 这么做只节省了不到 70 个字符（可以看下源码，在 CSS media 查询的块里头）。相比于增加的复杂度，以及域名不同带来的 SEO 优化问题，个人认为当前方案更好些。至于使用 UserAgent 判断用户设备，这就无法使用静态托管实现了。 总之，的确是有很多可以继续优化的地方。但是很多时候这些优化方法都需要动态特性，都掣肘于：我想白嫖 Vercel 的免费静态托管。 |
|
41
@iPhone9 具体报了什么错？这边 Fedora 34 + NodeJS 16 正常。也许你用的是 14 ？我试了下，14 好像不支持 String.prototype.replaceAll
你可以升级 node 或者代码改为使用全局正则来解决：.replace(/#/g, "%23"); |
|
iPhone9Jun 27, 2021
42
是的，我用的 14，就是这个错误，我改成 replace 就行了
|
 |
mozokovJun 27, 2021
43
速度确实飞快，博客部署在哪里？
另外，作为奇技淫巧的补充： https://instant.page/ 欢迎访问 https://wzw.pub 测个速，我这域名应该比 LZ 要好一些。。 |
 |
irytuJun 27, 2021 via iPhone
44
顺便做成 PWA 咋样
|
 |
DiamondYuanJun 28, 2021
46
似乎没有 minify ?
|
|
iPhone9Jun 28, 2021
47
lz 的服务器是哪里买的，ping 值很低。
|
 |
LiKanKanJun 28, 2021 via Android
48
小白表示 头一回这么快打开一个个人博客
|
 |
harwckJun 28, 2021
49
我的 4.3k ，感覺也差不多
|
 |
CbdyJun 28, 2021 via Android
50
赞，很快
P.S. 反馈一个交互上的小 Bug，当在第一页 /最后一页的时候，还是可以点击向前翻页 /向后翻页按钮，但实际起的是似乎是刷新效果 |
 |
bytewalkJun 28, 2021
51
不错，样式也喜欢，点了个 star
|
 |
marvin520Jun 28, 2021
52
速度是真快
|
 |
SilentDepthJun 28, 2021
53
@xiaopc #6 有实验数据可以支持这个结论吗？
|
 |
54
楼主才高三啊，🐂🍺
|
 |
vcodeJun 28, 2021
55
牛批
|
 |
QUC062IzY3M1Y6dgJun 28, 2021
56
y1s1，能优化到这个地步很牛逼了，点个赞，我的也只是简单做了静态化处理，然后尽量减少图片的存在。https://shuxhan.com
|
 |
57
快是快，但是这么丑怎么用
|
 |
CrixsJun 28, 2021
58
已经优化的不太像 Material Design 了
|
 |
rebnonuJun 28, 2021
59
弟弟牛逼，来北航把
|
 |
misaka19000Jun 28, 2021
60
|
 |
uriccJun 28, 2021
62
快是快，但是这么丑怎么用
|
 |
goodrybJun 28, 2021
63
看了下博文好像都没有日期
|
 |
cheungJun 28, 2021
64
羡慕你的 ID，不会有人跟你抢！！ |
 |
klhJun 28, 2021 via Android
65
分享我的 https://vnf.cc 无 js，好像也是 10kb 以内，lighthouse 好像接近 100 分
|
 |
zcjfeskyJun 28, 2021 via Android
66
挺好的，别理楼里的杠铃们，加油，后生可畏
|
|
xiaopcJun 28, 2021 via Android
67
@SilentDepth
https gist github com xiaopc 4546b4d38ce9f57969c5eb48423ed354 （没验证手机号，发不出来地址） 不过现代浏览器已经对通配选择器有很大的优化了，在大部分简单的页面上，一长串复杂选择器反而比通配选择器更慢 |
|
68
@xiaopc
1. 用 JS 动态生成内容比较好些，省得写一大串。 2. CSS 选择器的性能一直以来都有争论，样式更改导致的重绘才是重点。如果受影响的元素太多，使用通配选择器会导致不必要的，且几乎无法通过优化避免的计算。 3. 这个项目的大多数页面，元素数量甚至只有两位数，且少有样式更改的动作，几乎所有元素都只会被渲染一次。相较于牺牲这一点点性能，扣出几个字节的体积更加重要🤣。 |
 |
stkstkssJun 28, 2021
69
我放个图片多少 kb 啊
|
|
stkstkssJun 28, 2021
70
优化方法写出来???
|
 |
AllenHuaJun 28, 2021
72
还是高中生，惭愧惭愧，楼主未来可期。
但我第二次访问链接被重置 |
|
xiaopcJun 28, 2021 via Android
73
@kkocdko
这个测试页面参考的是「"The CSS Universal Selector Is Slow And Should Be Avoided" - Yet Another Lie 」（发不出链接🌚），作者测试的结果是通配选择器反而更快... 根据 ta 的测试代码，改成了一个通配选择器更慢的场景。至于为什么不用 js 生成，当然是为了控制变量，排除 js 的性能开销。 不过确实，CSS 解析时间不该是页面性能优化的重点。 （ Vercel 在国内部分地区访问速度越来越慢了 |
 |
xrr2016Jun 28, 2021
74
强啊👍
|
 |
zzzzqqwJun 28, 2021
75
你这个网站经常连不上啊（不挂代理的情况下），体积虽小，速度优势却难显现出来，是什么情况谁知道 @我一下，盲猜是服务器在国外的导致的
|
|
xiaopcJun 28, 2021 via Android
76
|
|
77
@xiaopc 呐？这会导致我的域名也被墙么？有点慌。
coding 的那个托管好像还行，腾讯的 9 元每年要备案。。。gitee 最近因为百年的事似乎不让开通 |
 |
SomeBottleJun 28, 2021
78
很有意思的文章，star 奉上~
|
 |
v2esandJun 29, 2021 via Android
79
体验很好
|
 |
alphanowJun 30, 2021 via Android
80
在 kb 级别的体量下，其实文件传输速度的重要性已经小于连接延迟了。托管在 github 再套个 jsDeliver 的效果可能更好。
|
 |
liKeYunKejiJun 30, 2021 via iPhone
81
|
 |
mlboyJul 2, 2021
83
发现作者的 NB 之处是今年高考
|
 |
leusionJul 8, 2021
84
@jookr 老哥你的图挂了 https://fatfatpig.com/seo/
|
Select Language