• 请不要在回答技术问题时复制粘贴 AI 生成的内容
liKeYunKeji
V2EX  ›  程序员

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

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

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

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