提高网站的速度最直接的思路是用更好的硬件。比如加内存、加 CPU 、加带宽、使用 CDN 、把服务器放到里用户更近的机房等。除此之外还有第二个思路:软件的思路。
软件的思路意味着把网站做得更轻,这样同样可以提高网站的速度。你可以减少不必要的图片元素,使用轻量级的前端技术,将资源打包以减少一个页面的总请求数量。大多数网站的有效内容的展现,其实只需要很少的前端数据( HTML 、JavaScript 、CSS )(代码也是数据),如果你能让每一个网页都保持在 200 KB 以下,并且减少每个网页首次加载完成时对服务器的请求数量到,比如说,两个,你的网站也会有不错的使用体验。
1
cpstar 2023-01-22 11:00:12 +08:00
1995 年时的网页,现在加载肯定都是纳秒速
|
2
Leviathann 2023-01-22 11:12:04 +08:00 via iPhone
astro
qwik |
3
duke807 2023-01-22 11:15:15 +08:00 via Android
是的,以前 js 很落後,要用各種所謂框架輔助
es6 之後,用過無數框架的我,現在只用 vanlina js ,很舒服 |
4
googlefans 2023-01-22 11:59:54 +08:00
用纯静态 不需要访问数据库
|
5
gowl OP |
6
gowl OP |
8
caomu 2023-01-22 12:28:24 +08:00 via Android 2
个人电脑的硬件水平上去以后,就越来越少人优化软件体积了,现在电脑里面一堆 election ,来一个跨平台应用都是几百 m ,除了少数技术洁癖者,大部分人都不在乎。
网站也有这个趋势,随着光纤入户、千兆万兆入户、全屋光纤、全屋 mesh 、5G 的普及,网站体积也越来越大,大家都越来越不在乎了。首页直接糊你一个视频的都大把,各种炫技的前端狂吃流量。 |
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 级别。 |
11
opengps 2023-01-22 14:26:17 +08:00 via Android 1
没提到动静分离
|
12
iqoo 2023-01-22 15:13:25 +08:00 2
说了等于没说~
|
13
wonderfulcxm 2023-01-22 15:31:43 +08:00 via iPhone
减少 http 请求数和文件体积是非常初级的优化方法,pagespeed 有完整的优化建议。
|
14
ragnaroks 2023-01-22 15:35:26 +08:00
主楼说的内容只是 next 增量生成的最低级优化方法
|
15
ragnaroks 2023-01-22 15:39:55 +08:00
网站的 HTML 应当是最优先响应的,其次是样式表,最后才是脚本和图片等。
HTML 也有优化的余地,可以先响应骨架或者模板的 HTML ,再后续通过脚本获取动态内容。 对于高级用法,数据库也是可以被直接打包到前端的,我的个人网站就实现了纯前端访问能力,提供无网络请求的搜索功能。 |
16
SenLief 2023-01-22 15:46:17 +08:00 via iPhone
如果只是文字的那加载难不到哪里去,但是大量的图片不行吧。
|
17
deesan 2023-01-22 15:50:46 +08:00
Jamstack ?
|
18
stille 2023-01-22 16:43:33 +08:00
现在永远找不到当时从 56k 猫 升级到 2M adsl 打开网页时的感觉了.
|
19
RiverTwilight 2023-01-22 17:01:13 +08:00
作为前端开发者,我一看标题以为第二种思路才是硬件🤣
|
20
tool2d 2023-01-22 17:21:10 +08:00
我的前端库,就一个 hello world 都需要下载 500k 。
但是转念一想,现在下载速度那么快,网速正常情况下也就是等 0.5s 。 超过 3 秒才有优化的必要。 |
21
duke807 2023-01-22 18:49:38 +08:00 via Android
不要忘记:中国网速不行
千兆网访问国外资源也只有几 KB/S |
22
Justin13 2023-01-22 19:05:33 +08:00 via Android
如果你能让每一个网页都保持在 200 KB 以下,并且减少每个网页首次加载完成时对服务器的请求数量到,比如说,两个,你的网站也会有不错的使用体验
如果这不是废话,那什么是? |
23
qeqv 2023-01-22 20:25:43 +08:00
我点进来之前以为你第二种思路是硬件
|
24
8zip 2023-01-22 20:39:59 +08:00 via Android
目前唯一一个针对低端机型优化的主流 app:拼多多
|
25
secondwtq 2023-01-22 22:04:32 +08:00
这些东西算是前端优化的基础知识吧,我之前找工作背的八股文里面还有 sprite 呢,资源打包、压缩、分块也都是老套路
技术层级的东西确实对博客最有用,但是到生产项目上,我感觉最有用的是需求管理和项目管理。同一个页面塞太多乱七八糟的需求,天天只糊屎不埋屎,再优化也白瞎。 |
26
akira 2023-01-23 02:31:35 +08:00
对于大部分网站来说,处理好图片压缩,就已经足够了
|
28
lian3204321 2023-01-23 16:49:42 +08:00
还有 pwa
|
29
yolio2003 2023-01-23 22:16:25 +08:00 1
|
30
wuzhanggui 2023-01-25 17:52:17 +08:00
原生加模板引擎那种,加载页面出来有内容,然后 js 在页面显示出来后再去加载,这样把功能和内容分开,速度那是洒洒水啦
|
31
zhw2590582 2023-01-26 23:27:08 +08:00
我以为你要说什么黑科技呢,这不是老生常谈的东西吗
|