V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
pytth
V2EX  ›  程序员

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

  •  
  •   pytth · 2020-09-30 10:15:35 +08:00 · 10320 次点击
    这是一个创建于 1511 天前的主题,其中的信息可能已经有所发展或是发生改变。
    第 1 条附言  ·  2020-09-30 16:08:20 +08:00
    感谢大家,已经通过大家的留言,学习到了,学习成果: https://segmentfault.com/a/1190000025180494
    第 2 条附言  ·  2021-01-16 16:58:51 +08:00
    36 条回复    2020-10-06 14:20:42 +08:00
    Starkwang0131
        1
    Starkwang0131  
       2020-09-30 10:24:24 +08:00   ❤️ 1
    前端路由而已,可以搜一下 HTML5 History API
    xrr2016
        2
    xrr2016  
       2020-09-30 10:25:07 +08:00
    用 wappalyzer 检测出是 jQuery
    dapang1221
        3
    dapang1221  
       2020-09-30 10:28:14 +08:00
    不快啊,我这看一个请求都 150ms+的……点了之后它不是让浏览器跳转的,是获取了一个 html 片段重新渲染的页面,然后把 url 加到 history 里
    pytth
        4
    pytth  
    OP
       2020-09-30 10:28:53 +08:00
    @Starkwang0131 去搜了一下,好像就是这么一回事。
    eason1874
        5
    eason1874  
       2020-09-30 10:30:24 +08:00
    pjax
    jackcfan
        6
    jackcfan  
       2020-09-30 10:45:07 +08:00
    pjax 局部刷新,可以随便看个 github 仓库,页面跳转是不刷新整个页面的
    Sapp
        7
    Sapp  
       2020-09-30 10:46:56 +08:00
    @Starkwang0131 不一定是前端路由,ror 也有个玩意可以替换整个 body,做到不刷新渲染
    acthtml
        8
    acthtml  
       2020-09-30 10:48:14 +08:00
    spa
    mauve
        9
    mauve  
       2020-09-30 10:53:54 +08:00
    wunonglin
        10
    wunonglin  
       2020-09-30 11:09:53 +08:00
    网页才几十 k 。。。。做了 cdn,加上有些 icon 是看到才加载的所以节约了点时间
    Bijiabo
        11
    Bijiabo  
       2020-09-30 11:12:21 +08:00
    有几种实现方式:
    1. 单页面应用,只是通过 history 接口修改页面地址
    2. 跳转标签设定的 prerender,一些支持此特性的浏览器会预先渲染下一个页面
    3. 指定资源的预加载,如果不涉及到接口数据,是可以在前一个页面预先加载后续界面的静态资源让浏览器缓存的,做的合理也可以达到秒开的效果
    liuguang
        12
    liuguang  
       2020-09-30 11:12:33 +08:00
    pjax,vue 也可以做到这个效果的(vue router),而且比 pjax 更高效。
    syozzz
        13
    syozzz  
       2020-09-30 13:20:13 +08:00
    打开控制台看请求就能知道,https://www.dute.org/ip-to-number?_pjax=%23pjax-container 。很明显是 pjax.
    w7938940
        14
    w7938940  
       2020-09-30 13:30:30 +08:00
    https://instant.page/
    clf
        15
    clf  
       2020-09-30 13:34:06 +08:00
    jQuery 的 pjax 插件,不过个人还是推荐 Vue-router 等前端路由。
    zoikhemlab
        16
    zoikhemlab  
       2020-09-30 13:34:32 +08:00
    我这里不是秒开,而且能感觉到跳转。
    arobota
        17
    arobota  
       2020-09-30 13:41:30 +08:00
    单页 web app 不都是这样的吗。局部更新,动态渲染
    nzbin
        18
    nzbin  
       2020-09-30 13:42:44 +08:00
    @mauve [强]
    BeyondSky23
        19
    BeyondSky23  
       2020-09-30 14:19:32 +08:00
    Leprax
        20
    Leprax  
       2020-09-30 14:31:30 +08:00
    @w7938940 #14 是不是看到阮一峰上周发的...
    dream4ever
        21
    dream4ever  
       2020-09-30 15:17:33 +08:00
    写了几年前端,我竟然没听过 pjax,略感焦虑
    darknoll
        22
    darknoll  
       2020-09-30 15:33:40 +08:00
    spa 不都这样的么?还以为啥
    serco
        23
    serco  
       2020-09-30 15:37:18 +08:00
    @dream4ever 因为这个可能是你写前端之前就产生的“历史”名词,已经很久没有听到提这个的了
    Saszr
        24
    Saszr  
       2020-09-30 15:49:49 +08:00
    victor
        25
    victor  
       2020-09-30 15:57:29 +08:00
    @dream4ever 过渡方案,一种非主流解决方案,我身边的朋友都是因为接触 Rails 而听说这个词的。不必焦虑。
    zhuweiyou
        26
    zhuweiyou  
       2020-09-30 17:16:59 +08:00
    pjax 替换中间内容区的 html

    github 在仓库页浏览, 也是用这种方式的
    lululau
        27
    lululau  
       2020-09-30 19:41:52 +08:00 via iPhone
    盲猜 turbolink
    licoycn
        28
    licoycn  
       2020-09-30 21:00:41 +08:00
    其实有现成的解决方案 - http://instantclick.io/

    我的博客主题就采用了这个方案,无刷新加载很快: https://www.licoy.cn/
    MikeFeng
        29
    MikeFeng  
       2020-09-30 21:08:46 +08:00 via Android
    可以去看看 SPA,加上预加载,如果再加上 PWA,这种工具网站如果纯粹考本地 JS 计算,完全可以离线秒开
    hi543
        30
    hi543  
       2020-09-30 22:03:18 +08:00
    现在前端技术不都可以实现吗?比如 react 和 vue
    vision1900
        31
    vision1900  
       2020-09-30 23:08:20 +08:00
    楼主很严谨啊,0 还打了引号
    SPA,初次加载时 JS 就包括了构建各个路由的 DOM 元素的代码
    跳转路由变成了 2 个过程的协同:用 JS 动态渲染 DOM + 修改路由(更新地址栏的地址,利用 history API 保证前进和后退功能正常)
    其实所有的操作都是异步的,只是有些操作太快时间可以忽略不计
    在 Web 中,网络请求,文件 IO,和复杂图形渲染普遍被以异步的形式处理
    jedihy
        32
    jedihy  
       2020-09-30 23:52:50 +08:00 via iPhone
    额,十几年前就写过,比这高级一点,还能预加载。
    rf99wSiT6IxH1Z23
        33
    rf99wSiT6IxH1Z23  
       2020-09-30 23:58:08 +08:00
    第一次听 pjax,一直都用 spa 框架
    ericgui
        34
    ericgui  
       2020-10-01 00:38:41 +08:00
    简直毫无广告痕迹
    way2explore2
        35
    way2explore2  
       2020-10-01 09:51:03 +08:00   ❤️ 1
    1 没觉着特别快,真的,
    2 网站不超过百 kb
    3 学到了 pjax
    pytth
        36
    pytth  
    OP
       2020-10-06 14:20:42 +08:00
    @ericgui 本身就不是广告,用不着到哪都做个喷子吧...
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5787 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 03:33 · PVG 11:33 · LAX 19:33 · JFK 22:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.