这个网站秒开“0”跳转感是什么技术开发的？

2020-09-30 10:15:35 +08:00
 pytth

https://www.dute.org/

10140 次点击
所在节点    程序员
36 条回复
Starkwang0131
2020-09-30 10:24:24 +08:00
前端路由而已，可以搜一下 HTML5 History API
xrr2016
2020-09-30 10:25:07 +08:00
用 wappalyzer 检测出是 jQuery
dapang1221
2020-09-30 10:28:14 +08:00
不快啊，我这看一个请求都 150ms+的……点了之后它不是让浏览器跳转的，是获取了一个 html 片段重新渲染的页面，然后把 url 加到 history 里
pytth
2020-09-30 10:28:53 +08:00
@Starkwang0131 去搜了一下，好像就是这么一回事。
eason1874
2020-09-30 10:30:24 +08:00
pjax
jackcfan
2020-09-30 10:45:07 +08:00
pjax 局部刷新，可以随便看个 github 仓库，页面跳转是不刷新整个页面的
Sapp
2020-09-30 10:46:56 +08:00
@Starkwang0131 不一定是前端路由，ror 也有个玩意可以替换整个 body，做到不刷新渲染
acthtml
2020-09-30 10:48:14 +08:00
spa
mauve
2020-09-30 10:53:54 +08:00
https://angular.io/
wunonglin
2020-09-30 11:09:53 +08:00
网页才几十 k 。。。。做了 cdn，加上有些 icon 是看到才加载的所以节约了点时间
Bijiabo
2020-09-30 11:12:21 +08:00
有几种实现方式：
1. 单页面应用，只是通过 history 接口修改页面地址
2. 跳转标签设定的 prerender，一些支持此特性的浏览器会预先渲染下一个页面
3. 指定资源的预加载，如果不涉及到接口数据，是可以在前一个页面预先加载后续界面的静态资源让浏览器缓存的，做的合理也可以达到秒开的效果
liuguang
2020-09-30 11:12:33 +08:00
pjax，vue 也可以做到这个效果的(vue router)，而且比 pjax 更高效。
syozzz
2020-09-30 13:20:13 +08:00
打开控制台看请求就能知道，https://www.dute.org/ip-to-number?_pjax=%23pjax-container 。很明显是 pjax.
w7938940
2020-09-30 13:30:30 +08:00
https://instant.page/
clf
2020-09-30 13:34:06 +08:00
jQuery 的 pjax 插件，不过个人还是推荐 Vue-router 等前端路由。
zoikhemlab
2020-09-30 13:34:32 +08:00
我这里不是秒开，而且能感觉到跳转。
arobota
2020-09-30 13:41:30 +08:00
单页 web app 不都是这样的吗。局部更新，动态渲染
nzbin
2020-09-30 13:42:44 +08:00
@mauve [强]
BeyondSky23
2020-09-30 14:19:32 +08:00
1080sky.com
Leprax
2020-09-30 14:31:30 +08:00
@w7938940 #14 是不是看到阮一峰上周发的...

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

https://www.v2ex.com/t/711781

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

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

© 2021 V2EX