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

腾讯这个网页刷新技术怎么实现的?

  •  4
     
  •   balabalaguguji · 63 天前 · 8912 次点击
    这是一个创建于 63 天前的主题,其中的信息可能已经有所发展或是发生改变。

    请看: https://work.weixin.qq.com/api/doc/90001/90144/92388

    切换文档时顶部和左边的菜单都不会刷新,只有文档内容区域刷新了,表现很像 vue 的单页应用,局部刷新内容。

    但是右键查看网页源码又可以看到所有的内容,这样对搜索引擎就很友好。

    这种可以做到局部刷新,但是又可以查看到源码的是怎么实现的?有人知道吗?

    另外我看他切换文档时接口请求回来的数据有 html 的,有 md 格式的,还有 text 格式的,这是为什么

    第 1 条附言  ·  63 天前
    懂了,他这个效果跟 pjax 是一样的,第一次请求是完整的服务端渲染,后面点击切换文档是 ajax + pushState,然后修改对应位置的 innerHTML 。

    学到了,这个技术不错,用户体验和搜索引擎都有照顾到
    55 条回复    2021-06-03 17:46:51 +08:00
    IsaacYoung
        1
    IsaacYoung   63 天前
    服务端渲染吧
    ReferenceE
        2
    ReferenceE   63 天前 via Android
    😅张口就只知道 vue,上古的 frame 技术虽然淘汰了但是设计理念你可以看看
    murmur
        3
    murmur   63 天前
    打断点不就看出来了,改了 innerHtml 的,右键看不到源码,你那是审查元素不是查看源码
    TomatoYuyuko
        4
    TomatoYuyuko   63 天前
    这实现方法很多啊,拿 jquery 都能写一个,你说的 vue 指的是 vue 的动态路由吧。。。
    balabalaguguji
        5
    balabalaguguji   63 天前
    @ReferenceE 但是没看到有用 frame
    murmur
        6
    murmur   63 天前
    js_doc_apiShow_cnt 对这个元素的子树修改打断点,然后你就非常明显的看到一个 innerHtml 的修改
    balabalaguguji
        7
    balabalaguguji   63 天前
    @murmur #3 是查看源码,跟审查元素我还是能区分出来的,你可以看下
    balabalaguguji
        8
    balabalaguguji   63 天前
    @murmur #6 这种方式是可以做到查看源码还能看到内容?这个我不是很清楚
    xiyuesaves
        9
    xiyuesaves   63 天前
    有种技术叫 pjax,和这个的效果挺像的
    lp7631010
        10
    lp7631010   63 天前
    类似于 pjax
    LeeReamond
        11
    LeeReamond   63 天前
    楼上说的不对,有一个嘲讽提到 vue 的意义不明,另一个说审查元素不是源码的也是意义不明。

    它这个应该单纯 LZ 理解错了吧,他的服务器渲染和动态渲染是同步的,第一次访问时候调用服务器渲染结果,之后接管按钮逻辑,很单纯
    ymlluo
        12
    ymlluo   63 天前
    barba.js 类似的效果
    AoEiuV020
        13
    AoEiuV020   63 天前   ❤️ 2
    @balabalaguguji 右键查看源码那也是新的网页请求了,自然是完整的内容,
    这网站看 network 就知道了,点击没有页面跳转,只是调接口获取展示新内容,然后改一下地址栏的地址,
    murmur
        14
    murmur   63 天前
    @LeeReamond IE 的查看元素,是只能看到静态的服务器渲染,chrome 的查看元素,innerHTML 调整直接变了
    eason1874
        15
    eason1874   63 天前
    1 、服务端根据 path 渲染页面并输出完整 HTML,当用户直接请求页面时输出是完整 HTML 。
    2 、提供一个内容 API,监听页面链接点击事件并拦截,然后通过 AJAX 请求接口拿到模块内容并替换,同时通过 History API 修改地址栏的 path 成为正确内容路径。

    当你查看源码时,显示的不是 AJAX 修改的结果,而是浏览器根据当前 path 重新请求一次的结果。

    原理类似 Turbolinks,只不过 Turbolinks 是直接请求原始页面,而这个是专门做了一个 API 去提供页面内容。
    IvanLi127
        16
    IvanLi127   63 天前
    ssr+csr 就是这个效果
    dianso
        17
    dianso   63 天前 via Android
    mdax
    akatquas
        18
    akatquas   63 天前
    简单看了代码之后,发现 会出现一个请求 ,https://work.weixin.qq.com/api/docFetch/fetchCnt?id=<id> 。 说明在客户端的代码更新是通过 vue 来做的,溯源 这个 XHR 的调用栈能发现 beforeRouteUpdate -> routerAdapter,请求返回体里面确实会有相应的 document html tag,可以直接渲染到节点。

    那么首屏的怎么来的? SSR 咯。

    至于请求数据多格式,说负面就是冗余浪费带宽,说正面就是为了完备性考虑,不同页面用不同类型的数据。


    @ReferenceE 一楼说的是 “表现形式很像 Vue 的单页应用”, 你的阅读能力有很一些提升空间嗷。
    YidaZh
        19
    YidaZh   63 天前
    典型的单页应用 + 服务端渲染。。。
    balabalaguguji
        20
    balabalaguguji   63 天前
    @YidaZh #19 说得太泛了,要细节
    mekingname
        21
    mekingname   63 天前   ❤️ 1
    1. 当你直接访问任何一个 URL 的时候,它都会直接给出后端渲染的完整页面
    2. 当你在网页里面点击某个连接的时候,它通过 Ajax 请求增加的 html 代码并替换现有的部分。

    而查看源代码,`view-source:网址`这种形式,本质上还是会发起新的请求,所以这里对应的`网址`会使用后端渲染的页面。于是就会给你造成这种错觉。

    有一种很简单的办法来证明我所说的:你首先访问任何一个页面,例如: https://work.weixin.qq.com/api/doc/90001/90144/92392
    然后,复制里面一段文字。

    然后,你再单独访问另外一个页面,例如: https://work.weixin.qq.com/api/doc/90001/90144/92394 你可以看到,如果你查看这后一个页面的源代码,你是无法找到前一个页面的文字的。这就说明只有你当前直接输入网址访问的这个页面是后端渲染,你通过点击连接打开的其它页面是异步加载。
    balabalaguguji
        22
    balabalaguguji   63 天前
    @akatquas #18 感谢认真的分析
    xz410236056
        23
    xz410236056   63 天前
    hexo 博客用的 Pjax
    shanghai1998
        24
    shanghai1998   63 天前
    点击菜单有 ajax 请求啊。。。就是一个简单的 ajax 而已
    myCupOfTea
        25
    myCupOfTea   63 天前
    ssr+csr 都是这个效果
    比如 react 这边的 Nextjs
    我估计 vue 的 Nust.js 应该也差不多
    Kininaru
        26
    Kininaru   63 天前
    服务端渲染。点了另一篇文章,浏览器发了个请求,能看出来服务端把渲染好的内容用 json 返回过来了
    ![请求]( https://my.files.chromium.link/images/%7DRR~U0BY0H([email protected]@JJ4I[LP.png)
    wowbaby
        27
    wowbaby   63 天前
    它这个是 ajax + history.pushState(),而且每个页面应该是生成的静态页面
    yunyuyuan
        28
    yunyuyuan   63 天前
    就是 pjax 的效果。ajax 请求数据或者网页,处理后直接插到 innerHTML,然后 pushState 修改 url,偷樑换柱。
    balabalaguguji
        29
    balabalaguguji   63 天前
    @xz410236056 #23 感谢,看了下,确实好像是效果上是这类东西,但是腾讯这个没用到你这个库
    um1ng
        30
    um1ng   63 天前
    Next.js or Nuxt.js
    mscb
        31
    mscb   63 天前 via Android
    带服务端渲染功能的单页面程序
    balabalaguguji
        32
    balabalaguguji   63 天前
    @mekingname #21 嗯,懂了,感谢
    luqingliang
        33
    luqingliang   63 天前
    经典 vue
    balabalaguguji
        34
    balabalaguguji   63 天前
    @AoEiuV020 #13 感谢,之前还以为查看源码是不会重新请求的,懂了
    cw2k13as
        35
    cw2k13as   63 天前
    看了下这个网站就是拿 vue 写的,如果说搜索引擎可以搜索就是用了 ssr
    balabalaguguji
        36
    balabalaguguji   63 天前
    @eason1874 #15 是这样!感谢,学习到了。
    balabalaguguji
        37
    balabalaguguji   63 天前
    @wowbaby #27 嗯,是的
    balabalaguguji
        38
    balabalaguguji   63 天前
    @yunyuyuan #28 嗯,已经懂了,是这样的
    lscho
        39
    lscho   63 天前
    这随便用哪种技术都可以实现,用 jquery 都可以。

    但看腾讯这个,就是简单的服务端渲染。首次加载的话,整个页面都渲染。用户点击的话,只渲染文档区域,然后修改 url 就行了。
    jkmf
        40
    jkmf   63 天前
    chrome 装个 wappalyzer 插件就可以看到用的什么技术栈了
    thtznet
        41
    thtznet   63 天前
    局部刷新,很多技术都可以实现,连微软的 MVC Razor 都可以
    ifyour
        42
    ifyour   63 天前
    可以服务端渲染( SSR )的单页应用( SPA )
    nanxiaobei
        43
    nanxiaobei   63 天前
    比微信文档的体验要好,微信文档太丑了
    uadw
        44
    uadw   63 天前
    挺好的一个功能
    ragnaroks
        45
    ragnaroks   63 天前
    VUE+SSR,jsdigger 可劫持分析
    newmlp
        46
    newmlp   63 天前
    我还以为啥了不起的技术
    sutra
        47
    sutra   63 天前
    jQuery
    A388
        48
    A388   63 天前
    @ReferenceE 关键是这个页面确实是 vue 写的
    gdrk
        50
    gdrk   63 天前
    服务端首屏渲染,后续 vue 交互
    maplelin
        51
    maplelin   63 天前
    vue+ssr,基本大厂前端标配技能了
    Al0rid4l
        52
    Al0rid4l   63 天前
    ssr 吧, 因为你(Chrome)查看源代码(注意不是审查元素)的时候实际上会对当前 URL 重新发起请求, 所以后端渲染了, 但是你切换侧边栏选项, 其实还是前端渲染
    这两者都可以通过查看网络请求确认
    l4ever
        53
    l4ever   62 天前
    https://work.weixin.qq.com/api/docFetch/fetchCnt?id=24984
    这用 jquery 就是一分钟的事情啊.
    KisekiRemi
        54
    KisekiRemi   62 天前
    你下个 vuetools 去看看,本来就是 vue 做的
    xbchaonba
        55
    xbchaonba   62 天前
    不就是 vue 写的吗
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3241 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 01:26 · PVG 09:26 · LAX 18:26 · JFK 21:26
    ♥ Do have faith in what you're doing.