V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
这是一个专门讨论 idea 的地方。

每个人的时间,资源是有限的,有的时候你或许能够想到很多 idea,但是由于现实的限制,却并不是所有的 idea 都能够成为现实。

那这个时候,不妨可以把那些 idea 分享出来,启发别人。
gowl
V2EX  ›  奇思妙想

提高网站速度的第二种思路

  •  
  •   gowl · 2023-01-22 10:32:46 +08:00 · 5800 次点击
    这是一个创建于 703 天前的主题,其中的信息可能已经有所发展或是发生改变。

    提高网站的速度最直接的思路是用更好的硬件。比如加内存、加 CPU 、加带宽、使用 CDN 、把服务器放到里用户更近的机房等。除此之外还有第二个思路:软件的思路。

    软件的思路意味着把网站做得更轻,这样同样可以提高网站的速度。你可以减少不必要的图片元素,使用轻量级的前端技术,将资源打包以减少一个页面的总请求数量。大多数网站的有效内容的展现,其实只需要很少的前端数据( HTML 、JavaScript 、CSS )(代码也是数据),如果你能让每一个网页都保持在 200 KB 以下,并且减少每个网页首次加载完成时对服务器的请求数量到,比如说,两个,你的网站也会有不错的使用体验。

    31 条回复    2023-01-26 23:27:08 +08:00
    cpstar
        1
    cpstar  
       2023-01-22 11:00:12 +08:00
    1995 年时的网页,现在加载肯定都是纳秒速
    Leviathann
        2
    Leviathann  
       2023-01-22 11:12:04 +08:00 via iPhone
    astro
    qwik
    duke807
        3
    duke807  
       2023-01-22 11:15:15 +08:00 via Android
    是的,以前 js 很落後,要用各種所謂框架輔助

    es6 之後,用過無數框架的我,現在只用 vanlina js ,很舒服
    googlefans
        4
    googlefans  
       2023-01-22 11:59:54 +08:00
    用纯静态 不需要访问数据库
    gowl
        5
    gowl  
    OP
       2023-01-22 12:05:16 +08:00
    > 用纯静态 不需要访问数据库

    数据库很多时候还是需要的。有一些方法可以使数据库访问也很快,比如添加适当的索引等。
    @googlefans
    gowl
        6
    gowl  
    OP
       2023-01-22 12:10:07 +08:00
    > 1995 年时的网页,现在加载肯定都是纳秒速

    是这样的。只是 web 1.0 架构的功能比较有限,仅仅适用于个人博客了。
    @cpstar
    gowl
        7
    gowl  
    OP
       2023-01-22 12:11:36 +08:00
    @duke807 同意,我也在实践、实验这个方法。
    caomu
        8
    caomu  
       2023-01-22 12:28:24 +08:00 via Android   ❤️ 2
    个人电脑的硬件水平上去以后,就越来越少人优化软件体积了,现在电脑里面一堆 election ,来一个跨平台应用都是几百 m ,除了少数技术洁癖者,大部分人都不在乎。
    网站也有这个趋势,随着光纤入户、千兆万兆入户、全屋光纤、全屋 mesh 、5G 的普及,网站体积也越来越大,大家都越来越不在乎了。首页直接糊你一个视频的都大把,各种炫技的前端狂吃流量。
    gowl
        9
    gowl  
    OP
       2023-01-22 13:27:22 +08:00
    @caomu 同感~
    keith1126
        10
    keith1126  
       2023-01-22 14:04:03 +08:00
    @cpstar #1

    纳秒( ns )级别的话,按照 4GHz CPU 来算,0.25 ns 一个 CPU cycle ,也就是说,10 多个 CPU cycle 就加载完,是不可能的。 网络 IO 的延迟数量级至少得在 ms 级别。
    opengps
        11
    opengps  
       2023-01-22 14:26:17 +08:00 via Android   ❤️ 1
    没提到动静分离
    iqoo
        12
    iqoo  
       2023-01-22 15:13:25 +08:00   ❤️ 2
    说了等于没说~
    wonderfulcxm
        13
    wonderfulcxm  
       2023-01-22 15:31:43 +08:00 via iPhone
    减少 http 请求数和文件体积是非常初级的优化方法,pagespeed 有完整的优化建议。
    ragnaroks
        14
    ragnaroks  
       2023-01-22 15:35:26 +08:00
    主楼说的内容只是 next 增量生成的最低级优化方法
    ragnaroks
        15
    ragnaroks  
       2023-01-22 15:39:55 +08:00
    网站的 HTML 应当是最优先响应的,其次是样式表,最后才是脚本和图片等。

    HTML 也有优化的余地,可以先响应骨架或者模板的 HTML ,再后续通过脚本获取动态内容。

    对于高级用法,数据库也是可以被直接打包到前端的,我的个人网站就实现了纯前端访问能力,提供无网络请求的搜索功能。
    SenLief
        16
    SenLief  
       2023-01-22 15:46:17 +08:00 via iPhone
    如果只是文字的那加载难不到哪里去,但是大量的图片不行吧。
    deesan
        17
    deesan  
       2023-01-22 15:50:46 +08:00
    Jamstack ?
    stille
        18
    stille  
       2023-01-22 16:43:33 +08:00
    现在永远找不到当时从 56k 猫 升级到 2M adsl 打开网页时的感觉了.
    RiverTwilight
        19
    RiverTwilight  
       2023-01-22 17:01:13 +08:00
    作为前端开发者,我一看标题以为第二种思路才是硬件🤣
    tool2d
        20
    tool2d  
       2023-01-22 17:21:10 +08:00
    我的前端库,就一个 hello world 都需要下载 500k 。

    但是转念一想,现在下载速度那么快,网速正常情况下也就是等 0.5s 。

    超过 3 秒才有优化的必要。
    duke807
        21
    duke807  
       2023-01-22 18:49:38 +08:00 via Android
    不要忘记:中国网速不行
    千兆网访问国外资源也只有几 KB/S
    Justin13
        22
    Justin13  
       2023-01-22 19:05:33 +08:00 via Android
    如果你能让每一个网页都保持在 200 KB 以下,并且减少每个网页首次加载完成时对服务器的请求数量到,比如说,两个,你的网站也会有不错的使用体验
    如果这不是废话,那什么是?
    qeqv
        23
    qeqv  
       2023-01-22 20:25:43 +08:00
    我点进来之前以为你第二种思路是硬件
    8zip
        24
    8zip  
       2023-01-22 20:39:59 +08:00 via Android
    目前唯一一个针对低端机型优化的主流 app:拼多多
    secondwtq
        25
    secondwtq  
       2023-01-22 22:04:32 +08:00
    这些东西算是前端优化的基础知识吧,我之前找工作背的八股文里面还有 sprite 呢,资源打包、压缩、分块也都是老套路
    技术层级的东西确实对博客最有用,但是到生产项目上,我感觉最有用的是需求管理和项目管理。同一个页面塞太多乱七八糟的需求,天天只糊屎不埋屎,再优化也白瞎。
    akira
        26
    akira  
       2023-01-23 02:31:35 +08:00
    对于大部分网站来说,处理好图片压缩,就已经足够了
    never2023
        27
    never2023  
       2023-01-23 06:18:47 +08:00 via Android
    @akira 是的 谢谢
    lian3204321
        28
    lian3204321  
       2023-01-23 16:49:42 +08:00
    还有 pwa
    yolio2003
        29
    yolio2003  
       2023-01-23 22:16:25 +08:00   ❤️ 1
    @Leviathann +1

    之前说是一个页面来回要保持在 <= 14KB https://mp.weixin.qq.com/s/PxSMjOxJWlpLxdvTM4jLWQ
    wuzhanggui
        30
    wuzhanggui  
       2023-01-25 17:52:17 +08:00
    原生加模板引擎那种,加载页面出来有内容,然后 js 在页面显示出来后再去加载,这样把功能和内容分开,速度那是洒洒水啦
    zhw2590582
        31
    zhw2590582  
       2023-01-26 23:27:08 +08:00
    我以为你要说什么黑科技呢,这不是老生常谈的东西吗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1432 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 17:25 · PVG 01:25 · LAX 09:25 · JFK 12:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.