未分類
4 10 月 2020

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

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

資深大佬 : pytth 1

https://www.dute.org/

大佬有話說 (35)

  • 資深大佬 : Starkwang0131

    前端路由而已，可以搜一下 HTML5 History API

  • 資深大佬 : xrr2016

    用 wappalyzer 检测出是 jQuery

  • 資深大佬 : dapang1221

    不快啊，我这看一个请求都 150ms+的……点了之后它不是让浏览器跳转的，是获取了一个 html 片段重新渲染的页面，然后把 url 加到 history 里

  • 主 資深大佬 : pytth

    @Starkwang0131 去搜了一下，好像就是这么一回事。

  • 資深大佬 : eason1874

    pjax

  • 資深大佬 : jackcfan

    pjax 局部刷新，可以随便看个 github 仓库，页面跳转是不刷新整个页面的

  • 資深大佬 : Sapp

    @Starkwang0131 不一定是前端路由，ror 也有个玩意可以替换整个 body，做到不刷新渲染

  • 資深大佬 : acthtml

    spa

  • 資深大佬 : mauve

    https://angular.io/

  • 資深大佬 : wunonglin

    网页才几十 k 。。。。做了 cdn，加上有些 icon 是看到才加载的所以节约了点时间

  • 資深大佬 : Bijiabo

    有几种实现方式：
    1. 单页面应用，只是通过 history 接口修改页面地址
    2. 跳转标签设定的 prerender，一些支持此特性的浏览器会预先渲染下一个页面
    3. 指定资源的预加载，如果不涉及到接口数据，是可以在前一个页面预先加载后续界面的静态资源让浏览器缓存的，做的合理也可以达到秒开的效果

  • 資深大佬 : liuguang

    pjax，vue 也可以做到这个效果的(vue router)，而且比 pjax 更高效。

  • 資深大佬 : syozzz

    打开控制台看请求就能知道，https://www.dute.org/ip-to-number?_pjax=%23pjax-container 。很明显是 pjax.

  • 資深大佬 : w7938940

    https://instant.page/

  • 資深大佬 : lychs1998

    jQuery 的 pjax 插件，不过个人还是推荐 Vue-router 等前端路由。

  • 資深大佬 : zoikhemlab

    我这里不是秒开，而且能感觉到跳转。

  • 資深大佬 : arobota

    单页 web app 不都是这样的吗。局部更新，动态渲染

  • 資深大佬 : nzbin

    @mauve [强]

  • 資深大佬 : BeyondSky23

    1080sky.com

  • 資深大佬 : Leprax

    @w7938940 #14 是不是看到阮一峰上周发的…

  • 資深大佬 : dream4ever

    写了几年前端，我竟然没听过 pjax，略感焦虑

  • 資深大佬 : darknoll

    spa 不都这样的么？还以为啥

  • 資深大佬 : serco

    @dream4ever 因为这个可能是你写前端之前就产生的“历史”名词，已经很久没有听到提这个的了

  • 資深大佬 : Saszr

    https://i.loli.net/2020/09/30/P6YrulWKb9HN12F.png

  • 資深大佬 : victor

    @dream4ever 过渡方案，一种非主流解决方案，我身边的朋友都是因为接触 Rails 而听说这个词的。不必焦虑。

  • 資深大佬 : zhuweiyou

    pjax 替换中间内容区的 html

    github 在仓库页浏览, 也是用这种方式的

  • 資深大佬 : lululau

    盲猜 turbolink

  • 資深大佬 : licoycn

    其实有现成的解决方案 – http://instantclick.io/

    我的博客主题就采用了这个方案，无刷新加载很快： https://www.licoy.cn/

  • 資深大佬 : MikeFeng

    可以去看看 SPA，加上预加载，如果再加上 PWA，这种工具网站如果纯粹考本地 JS 计算，完全可以离线秒开

  • 資深大佬 : hi543

    现在前端技术不都可以实现吗？比如 react 和 vue

  • 資深大佬 : vision1900

    主很严谨啊，0 还打了引号
    SPA，初次加载时 JS 就包括了构建各个路由的 DOM 元素的代码
    跳转路由变成了 2 个过程的协同：用 JS 动态渲染 DOM + 修改路由（更新地址栏的地址，利用 history API 保证前进和后退功能正常）
    其实所有的操作都是异步的，只是有些操作太快时间可以忽略不计
    在 Web 中，网络请求，文件 IO，和复杂图形渲染普遍被以异步的形式处理

  • 資深大佬 : jedihy

    额，十几年前就写过，比这高级一点，还能预加载。

  • 資深大佬 : cnscorpions

    第一次听 pjax，一直都用 spa 框架

  • 資深大佬 : ericgui

    简直毫无广告痕迹

  • 資深大佬 : way2explore2

    1 没觉着特别快，真的，
    2 网站不超过百 kb
    3 学到了 pjax