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

[balabalaguguji]

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

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

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

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

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

[IsaacYoung]

服务端渲染吧

[ReferenceE]

😅张口就只知道 vue，上古的 frame 技术虽然淘汰了但是设计理念你可以看看

[murmur]

打断点不就看出来了，改了 innerHtml 的，右键看不到源码，你那是审查元素不是查看源码

[TomatoYuyuko]

这实现方法很多啊，拿 jquery 都能写一个，你说的 vue 指的是 vue 的动态路由吧。。。

[balabalaguguji]

@ReferenceE 但是没看到有用 frame

[murmur]

js_doc_apiShow_cnt 对这个元素的子树修改打断点，然后你就非常明显的看到一个 innerHtml 的修改

[balabalaguguji]

@murmur #3 是查看源码，跟审查元素我还是能区分出来的，你可以看下

[balabalaguguji]

@murmur #6 这种方式是可以做到查看源码还能看到内容？这个我不是很清楚

[xiyuesaves]

有种技术叫 pjax,和这个的效果挺像的

[lp7631010]

类似于 pjax

[LeeReamond]

楼上说的不对，有一个嘲讽提到 vue 的意义不明，另一个说审查元素不是源码的也是意义不明。

它这个应该单纯 LZ 理解错了吧，他的服务器渲染和动态渲染是同步的，第一次访问时候调用服务器渲染结果，之后接管按钮逻辑，很单纯

[ymlluo]

barba.js 类似的效果

[AoEiuV020]

@balabalaguguji 右键查看源码那也是新的网页请求了，自然是完整的内容，
这网站看 network 就知道了，点击没有页面跳转，只是调接口获取展示新内容，然后改一下地址栏的地址，

[murmur]

@LeeReamond IE 的查看元素，是只能看到静态的服务器渲染，chrome 的查看元素，innerHTML 调整直接变了

[eason1874]

1 、服务端根据 path 渲染页面并输出完整 HTML，当用户直接请求页面时输出是完整 HTML 。
2 、提供一个内容 API，监听页面链接点击事件并拦截，然后通过 AJAX 请求接口拿到模块内容并替换，同时通过 History API 修改地址栏的 path 成为正确内容路径。

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

原理类似 Turbolinks，只不过 Turbolinks 是直接请求原始页面，而这个是专门做了一个 API 去提供页面内容。

[IvanLi127]

ssr+csr 就是这个效果

[dianso]

mdax

[akatquas]

简单看了代码之后，发现 会出现一个请求 ，https://work.weixin.qq.com/api/docFetch/fetchCnt?id=<id> 。 说明在客户端的代码更新是通过 vue 来做的，溯源 这个 XHR 的调用栈能发现 beforeRouteUpdate -> routerAdapter，请求返回体里面确实会有相应的 document html tag，可以直接渲染到节点。

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

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


@ReferenceE 一楼说的是 “表现形式很像 Vue 的单页应用”， 你的阅读能力有很一些提升空间嗷。

[YidaZh]

典型的单页应用 + 服务端渲染。。。

[balabalaguguji]

@YidaZh #19 说得太泛了，要细节