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

[balabalaguguji]

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

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

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

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

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

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

学到了，这个技术不错，用户体验和搜索引擎都有照顾到

[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 说得太泛了，要细节

[mekingname]

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]

@akatquas #18 感谢认真的分析

[xz410236056]

hexo 博客用的 Pjax

[shanghai1998]

点击菜单有 ajax 请求啊。。。就是一个简单的 ajax 而已

[myCupOfTea]

ssr+csr 都是这个效果
比如 react 这边的 Nextjs
我估计 vue 的 Nust.js 应该也差不多

[Kininaru]

服务端渲染。点了另一篇文章，浏览器发了个请求，能看出来服务端把渲染好的内容用 json 返回过来了

[wowbaby]

它这个是 ajax + history.pushState()，而且每个页面应该是生成的静态页面

[yunyuyuan]

就是 pjax 的效果。ajax 请求数据或者网页，处理后直接插到 innerHTML，然后 pushState 修改 url，偷樑换柱。

[balabalaguguji]

@xz410236056 #23 感谢，看了下，确实好像是效果上是这类东西，但是腾讯这个没用到你这个库

[um1ng]

Next.js or Nuxt.js

[mscb]

带服务端渲染功能的单页面程序

[balabalaguguji]

@mekingname #21 嗯，懂了，感谢

[luqingliang]

经典 vue

[balabalaguguji]

@AoEiuV020 #13 感谢，之前还以为查看源码是不会重新请求的，懂了

[cw2k13as]

看了下这个网站就是拿 vue 写的，如果说搜索引擎可以搜索就是用了 ssr

[balabalaguguji]

@eason1874 #15 是这样！感谢，学习到了。

[balabalaguguji]

@wowbaby #27 嗯，是的

[balabalaguguji]

@yunyuyuan #28 嗯，已经懂了，是这样的

[lscho]

这随便用哪种技术都可以实现，用 jquery 都可以。

但看腾讯这个，就是简单的服务端渲染。首次加载的话，整个页面都渲染。用户点击的话，只渲染文档区域，然后修改 url 就行了。

[jkmf]

chrome 装个 wappalyzer 插件就可以看到用的什么技术栈了

[thtznet]

局部刷新，很多技术都可以实现，连微软的 MVC Razor 都可以

[ifyour]

可以服务端渲染（ SSR ）的单页应用（ SPA ）

[nanxiaobei]

比微信文档的体验要好，微信文档太丑了

[uadw]

挺好的一个功能

[ragnaroks]

VUE+SSR，jsdigger 可劫持分析

[newmlp]

我还以为啥了不起的技术

[sutra]

jQuery

[A388]

@ReferenceE 关键是这个页面确实是 vue 写的

[sutra]

https://ipfs.io/ipfs/QmXZqhK26hFfgjBe5yHyGorQAPSXFFDxDvCCFCuc2nJxLz?2.png

[gdrk]

服务端首屏渲染,后续 vue 交互

[maplelin]

vue+ssr，基本大厂前端标配技能了

[Al0rid4l]

ssr 吧, 因为你(Chrome)查看源代码(注意不是审查元素)的时候实际上会对当前 URL 重新发起请求, 所以后端渲染了, 但是你切换侧边栏选项, 其实还是前端渲染
这两者都可以通过查看网络请求确认

[l4ever]

https://work.weixin.qq.com/api/docFetch/fetchCnt?id=24984
这用 jquery 就是一分钟的事情啊.

[KisekiRemi]

你下个 vuetools 去看看，本来就是 vue 做的

[xbchaonba]

不就是 vue 写的吗