首页 注册 登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
广告
kkocdko
V2EX  ›  分享创造

3 KB 的博客首页，我是如何做到的？

  •  4      
  •   kkocdko ·
    kkocdko · 2021-06-27 11:58:29 +08:00 · 10785 次点击
    这是一个创建于 1244 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

    成果预览

    001

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

    第 1 条附言  ·  2021-06-27 19:33:54 +08:00

    仓库是 kblog - GitHub ，各位给个 ⭐ 呗~

  • 减小
  • 主页
  • 与众不同
  • 体积
    85 条回复  •  2021-07-21 22:42:22 +08:00
    jellybool
        1
    jellybool  
       2021-06-27 12:08:21 +08:00
    这域名劝退
    kkocdko
        2
    kkocdko  
    OP
       2021-06-27 12:11:07 +08:00
    啊哈？域名怎么了，太长了么
    anxn
        3
    anxn  
       2021-06-27 12:12:51 +08:00 via Android   ❤️ 1
    SEO 友好吗？
    kkocdko
        4
    kkocdko  
    OP
       2021-06-27 12:16:46 +08:00
    @anxn 非常友好，虽然是 SPA，但生成的依然是静态页面（可以试试禁用 JavaScript ），但是国内的百度之流实在没办法。
    由于这个域名是新换的，所以目前收录还在进行，之前用 GitHub Pages 的时候 Bing 和 Google 的收录都不错
    stimw
        5
    stimw  
       2021-06-27 12:19:47 +08:00 via Android   ❤️ 1
    确实很快啊...单纯作为博客来说体验是不错的...
    xiaopc
        6
    xiaopc  
       2021-06-27 12:48:16 +08:00 via Android   ❤️ 1
    提一句，CSS 通配选择器性能可不高
    wtks1
        7
    wtks1  
       2021-06-27 13:09:28 +08:00 via Android   ❤️ 2
    作为博客来说，这个加载速度相当优秀了，感知非常明显
    keith1126
        8
    keith1126  
       2021-06-27 13:13:34 +08:00
    很棒的文章，前端原来可以玩得这么有趣
    kkocdko
        9
    kkocdko  
    OP
       2021-06-27 13:17:20 +08:00
    @xiaopc 确实，平常当然不会这么写，然而为了追求极限体积，牺牲那不到一毫秒的解析时间还是值得的~
    hronro
        10
    hronro  
       2021-06-27 13:32:36 +08:00 via iPhone
    强啊，我当年高中毕业的时候，连 Hello World 都不会。

    顺带一说，你都上了 HTTP2 + Server Push 了，其实不打包反而性能更好
    Kmmoonlight
        11
    Kmmoonlight  
       2021-06-27 13:41:42 +08:00
    东西挺好 就是 右上角那个 返回顶部的按钮 好像只有在顶部的时候才会出现
    h404bi
        12
    h404bi  
       2021-06-27 13:41:48 +08:00
    精简的最终归宿终将是 raw txt 。写得挺好的
    kkocdko
        13
    kkocdko  
    OP
       2021-06-27 13:43:28 +08:00
    @hronro 不打包主要是缓存粒度的问题，这里打包后体积很小，经过测试，性能还是略有优势的。

    另外，使用 gzip 或 brotil 压缩的时候，打包后压缩率会比多个文件分别压缩要更好一些~
    kkocdko
        14
    kkocdko  
    OP
       2021-06-27 13:44:32 +08:00
    @Kmmoonlight 向下滚动顶栏隐藏，向上滚动一下，顶栏就会出现了~
    ZeawinL
        15
    ZeawinL  
       2021-06-27 14:04:28 +08:00 via Android
    看看能不能混个友联 https://someexp.com/
    kkocdko
        16
    kkocdko  
    OP
       2021-06-27 14:28:21 +08:00
    @ZeawinL Yeah, https://kkocdko.site/about/#links
    给你的 Repo 发了个 PR，如果没问题的话就合并下呗
    qq316107934
        17
    qq316107934  
       2021-06-27 14:52:12 +08:00
    Lighthouse 的 Performance 和 Best Practice 已经 100 了，可以的；才高三毕业，未来可期啊
    xtx
        18
    xtx  
       2021-06-27 15:00:11 +08:00 via iPhone
    厉害厉害，高考考得怎么样
    shuax
        19
    shuax  
       2021-06-27 15:00:22 +08:00
    强啊，无敌
    cue
        20
    cue  
       2021-06-27 15:02:51 +08:00   ❤️ 2
    考得怎么样？
    ajaxfunction
        21
    ajaxfunction  
       2021-06-27 15:26:05 +08:00
    不错不错，值得学习
    jookr
        22
    jookr  
       2021-06-27 16:21:11 +08:00
    https://fatfatpig.com/
    这个博客比楼主强一丢丢
    7gugu
        23
    7gugu  
       2021-06-27 16:22:44 +08:00
    cool👍不过为了高速加载还是摒弃了一部分的易用性，感觉有得有失吧。
    1if5ty3
        24
    1if5ty3  
       2021-06-27 16:46:03 +08:00
    楼主考的如何呀，想报哪个学校呢。
    ijrou
        25
    ijrou  
       2021-06-27 17:35:48 +08:00
    哦，首页博客啊
    kkocdko
        26
    kkocdko  
    OP
       2021-06-27 17:55:13 +08:00
    @cue @1if5ty3
    考砸了 emmm，上不了 211 。。。别提了别提了
    kkocdko
        27
    kkocdko  
    OP
       2021-06-27 17:55:36 +08:00
    @jookr 也不错呀
    zmc
        28
    zmc  
       2021-06-27 18:46:13 +08:00
    用过楼主精简的迅雷很不错，现在怎么没了？
    youthcould
        29
    youthcould  
       2021-06-27 18:48:07 +08:00
    @zmc 对啊，我说怎么这么熟悉呢
    lysS
        30
    lysS  
       2021-06-27 19:01:10 +08:00   ❤️ 1
    30ms 和 100ms 能有什么区别。。。。
    Austin2035
        31
    Austin2035  
       2021-06-27 19:08:05 +08:00
    ![site]( https://tvax2.sinaimg.cn/large/006oSNUUly1grx17pugpvj30vq0pht9j.jpg)
    ![lookcos.cn]( https://tva1.sinaimg.cn/large/006oSNUUly1grx180xhb3j30vl0ptjsi.jpg)
    我的首页是 12kb，但是加载速度比你快的多了。
    v2k9
        32
    v2k9  
       2021-06-27 19:16:01 +08:00   ❤️ 2
    如果要极限控制主页体积，只放超链接，不加任何特效不就够了吗？

    为了速度，这种牺牲大部分性能和渲染的尝试的意义是什么？
    kkocdko
        33
    kkocdko  
    OP
       2021-06-27 19:16:16 +08:00 via Android
    @lookcos 我没钱买国内的服务器啊😆
    encro
        34
    encro  
       2021-06-27 19:20:57 +08:00
    我以为 UV 3K 呢
    kkocdko
        35
    kkocdko  
    OP
       2021-06-27 20:16:04 +08:00   ❤️ 6
    @v2k9 “V2EX 是 way to explore 和 way too extreme 的缩写。前者是我们每天都产生的探索世界的好奇心，而后者，是我们将一件事情做到极致的态度和决心。”
    Lemeng
        36
    Lemeng  
       2021-06-27 20:41:33 +08:00
    强强，支持一下
    cyrbuzz
        37
    cyrbuzz  
       2021-06-27 21:18:23 +08:00
    支持一下。

    有几个疑问：

    1.为什么将所有资源打包在一起是一个比分块走的更远的选择？一般来说除非加载的这个文件所有内容都会在当前页面立马展示出来否则的话并没有感觉到比分块更好的地方？

    2. 直接写 data URL 的缺点很明显，不利于维护。

    3. 分域名加载区分移动端和 PC 端 CSS 直接可以省一半？
    webshe11
        38
    webshe11  
       2021-06-27 21:37:56 +08:00
    极客 虽然我自己用不着 但是应当表示支持
    iPhone9
        39
    iPhone9  
       2021-06-27 21:47:07 +08:00
    你用的 node 几，我刚刚运行就报错了。
    kkocdko
        40
    kkocdko  
    OP
       2021-06-27 21:49:31 +08:00
    @cyrbuzz
    1. 首先，当前的代码已经非常精简，用 Chrome 的 Coverage 工具可以看到，首页的代码利用率已经达到了 78%，分块并不能带来明显的改善。其次，这样打包能让生成的静态页面更简练，页内跳转的时候加载量更小一些。

    2. 所以我并没有选择用 data-xxx 自定义属性。

    3. 这么做只节省了不到 70 个字符（可以看下源码，在 CSS media 查询的块里头）。相比于增加的复杂度，以及域名不同带来的 SEO 优化问题，个人认为当前方案更好些。至于使用 UserAgent 判断用户设备，这就无法使用静态托管实现了。

    总之，的确是有很多可以继续优化的地方。但是很多时候这些优化方法都需要动态特性，都掣肘于：我想白嫖 Vercel 的免费静态托管。
    kkocdko
        41
    kkocdko  
    OP
       2021-06-27 21:54:40 +08:00
    @iPhone9 具体报了什么错？这边 Fedora 34 + NodeJS 16 正常。也许你用的是 14 ？我试了下，14 好像不支持 String.prototype.replaceAll
    你可以升级 node 或者代码改为使用全局正则来解决：.replace(/#/g, "%23");
    iPhone9
        42
    iPhone9  
       2021-06-27 21:55:46 +08:00
    是的，我用的 14，就是这个错误，我改成 replace 就行了
    timwu
        43
    timwu  
       2021-06-27 22:24:42 +08:00
    速度确实飞快，博客部署在哪里？
    另外，作为奇技淫巧的补充： https://instant.page/
    欢迎访问 https://wzw.pub
    测个速，我这域名应该比 LZ 要好一些。。
    irytu
        44
    irytu  
       2021-06-27 22:59:41 +08:00 via iPhone
    顺便做成 PWA 咋样
    iPhone9
        45
    iPhone9  
       2021-06-27 23:42:35 +08:00
    @jookr 这服务器是在哪里，多少钱一个月。
    DiamondYuan
        46
    DiamondYuan  
       2021-06-28 00:02:10 +08:00
    似乎没有 minify ?
    iPhone9
        47
    iPhone9  
       2021-06-28 00:49:45 +08:00
    lz 的服务器是哪里买的，ping 值很低。
    LiKanKan
        48
    LiKanKan  
       2021-06-28 02:36:07 +08:00 via Android
    小白表示 头一回这么快打开一个个人博客
    harwck
        49
    harwck  
       2021-06-28 05:58:16 +08:00
    我的 4.3k ，感覺也差不多
    Cbdy
        50
    Cbdy  
       2021-06-28 08:33:19 +08:00 via Android
    赞，很快

    P.S. 反馈一个交互上的小 Bug，当在第一页 /最后一页的时候，还是可以点击向前翻页 /向后翻页按钮，但实际起的是似乎是刷新效果
    poorcai
        51
    poorcai  
       2021-06-28 09:03:23 +08:00
    不错，样式也喜欢，点了个 star
    lunatic5
        52
    lunatic5  
       2021-06-28 09:07:33 +08:00
    速度是真快
    SilentDepth
        53
    SilentDepth  
       2021-06-28 09:17:07 +08:00
    @xiaopc #6 有实验数据可以支持这个结论吗？
    yiqiao
        54
    yiqiao  
       2021-06-28 09:18:24 +08:00   ❤️ 1
    楼主才高三啊，🐂🍺
    vcode
        55
    vcode  
       2021-06-28 09:31:42 +08:00
    牛批
    shuxhan
        56
    shuxhan  
       2021-06-28 09:47:16 +08:00
    y1s1，能优化到这个地步很牛逼了，点个赞，我的也只是简单做了静态化处理，然后尽量减少图片的存在。https://shuxhan.com
    JoJoJoJ
        57
    JoJoJoJ  
       2021-06-28 09:54:56 +08:00 via iPhone   ❤️ 1
    快是快，但是这么丑怎么用
    RockShake
        58
    RockShake  
       2021-06-28 10:03:28 +08:00
    已经优化的不太像 Material Design 了
    rebnonu
        59
    rebnonu  
       2021-06-28 10:05:40 +08:00
    弟弟牛逼，来北航把
    misaka19000
        60
    misaka19000  
       2021-06-28 10:11:09 +08:00
    贴下我的，刚刚看了下首页大小是 4.8kb

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

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

    顺便在楼里问下，有没有内地访问速度快点的静态文件托管服务啊
    kkocdko
        77
    kkocdko  
    OP
       2021-06-28 22:37:14 +08:00 via Android
    @xiaopc 呐？这会导致我的域名也被墙么？有点慌。
    coding 的那个托管好像还行，腾讯的 9 元每年要备案。。。gitee 最近因为百年的事似乎不让开通
    SomeBottle
        78
    SomeBottle  
       2021-06-28 23:07:49 +08:00
    很有意思的文章，star 奉上~
    v2esand
        79
    v2esand  
       2021-06-29 08:44:45 +08:00 via Android
    体验很好
    alphanow
        80
    alphanow  
       2021-06-30 00:25:14 +08:00 via Android
    在 kb 级别的体量下，其实文件传输速度的重要性已经小于连接延迟了。托管在 github 再套个 jsDeliver 的效果可能更好。
    pytth
        81
    pytth  
       2021-06-30 00:38:22 +08:00 via iPhone
    www.likeyuns.com
    kkocdko
        82
    kkocdko  
    OP
       2021-06-30 09:04:36 +08:00
    @alphanow 可是能怎么套？ jsDelivr 没法自定义域名啊？
    mlboy
        83
    mlboy  
       2021-07-02 21:50:04 +08:00
    发现作者的 NB 之处是今年高考
    leusion
        84
    leusion  
       2021-07-08 15:08:04 +08:00
    @jookr 老哥你的图挂了 https://fatfatpig.com/seo/
    kkocdko
        85
    kkocdko  
    OP
       2021-07-21 22:42:22 +08:00
    @xiaopc 今天换上了阿里云的 OSS，似乎还不错，我这边 ping 是 20 ms，香港的服务器免备案，每月 5 GB 免费流量够用。
    国外我试了下 Vercel 比阿里云香港更快，所以境外解析到 Vercel，境内用阿里云 OSS 。
    除域名外，0 元完美白嫖~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4745 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 09:46 · PVG 17:46 · LAX 01:46 · JFK 04:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.