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

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

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

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

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

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

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

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

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

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