最近真的在学技术了不骗你

最近我在做一个海外电商网站的二次开发工作，它的前端基于 React 技术栈，后端是基于 PHP 技术栈。这个网站主要是面对 C 端用户的，但是它的技术选型好像并不适合。下面我以产品列表页面来举例说明一下 当用户点击进入产品列表页面时，整体流程如下

1. 浏览器通过前端路由导航到产品页面
2. 等待 DOM 树渲染完毕后，发出 XHR 请求获取产品列表
3. 使用 js 将产品列表渲染到 DOM 上

看起来好像没什么问题，但实际体验却有点糟糕

首先进入页面时，由于没有数据，因此页面是一片空白，但是还是会渲染 DOM ，只是给人的感觉是空白的而已，不管你的 diff 算法再快，也得花时间吧。

其次 XHR 请求花费了一定的时间。

最后将数据再次渲染到 DOM 的过程也花费了一定的时间。

我们总结一下，一共渲染了两次，发送请求一次，并且这个过程无法并行，毕竟 JS 是单线程，别看它异步，再异步它也不好使。

那么如果说用户点击这个页面的时候，服务器直接返回已经渲染好数据的页面，浏览器只做一次渲染那体验会好很多。如果服务端是 JSP 这种技术，还得生成一遍 HTML 页面，也会花费一点时间。

那么根据实际业务来看，由于产品并不是经常更新（几天或者几周才可以更新一个产品），所以最好的方案就是将这个页面静态化，然后设置下这个页面的有效期，过期则重新生成。这样不仅节省了服务器生成 HTML 的时间，还可以充分利用 CDN 来缓存页面。