![[白眼的狗]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_98.9f6d4ad.png)
![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
最近我在做一个海外电商网站的二次开发工作，它的前端基于React技术栈，后端是基于PHP技术栈。这个网站主要是面对C端用户的，但是它的技术选型好像并不适合。下面我以产品列表页面来举例说明一下
当用户点击进入产品列表页面时，整体流程如下
1. 浏览器通过前端路由导航到产品页面
2. 等待DOM树渲染完毕后，发出XHR请求获取产品列表
3. 使用js将产品列表渲染到DOM上
看起来好像没什么问题，但实际体验却有点糟糕，首先进入页面时，由于没有数据，因此页面是一片空白，但是还是会渲染DOM，只是给人的感觉是空白的而已，不管你的diff算法再快，也得花时间吧。其次XHR请求花费了一定的时间。最后将数据再次渲染到DOM的过程也花费了一定的时间。如果说用户点击这个页面的时候，服务器直接返回已经渲染好数据的页面，浏览器只做一次渲染那体验会好很多，当然如果是JSP这种，还得生成一遍HTML页面，也会花费一点时间。那么根据实际业务来看，由于产品并不是经常更新（几天或者几周才可以更新一个产品），所以最好的方案就是将这个页面静态化，然后设置下这个页面的有效期，过期则重新生成。这样不仅节省了服务器生成HTML的时间，还可以充分利用CDN来缓存页面。
当用户点击进入产品列表页面时，整体流程如下
1. 浏览器通过前端路由导航到产品页面
2. 等待DOM树渲染完毕后，发出XHR请求获取产品列表
3. 使用js将产品列表渲染到DOM上
看起来好像没什么问题，但实际体验却有点糟糕，首先进入页面时，由于没有数据，因此页面是一片空白，但是还是会渲染DOM，只是给人的感觉是空白的而已，不管你的diff算法再快，也得花时间吧。其次XHR请求花费了一定的时间。最后将数据再次渲染到DOM的过程也花费了一定的时间。如果说用户点击这个页面的时候，服务器直接返回已经渲染好数据的页面，浏览器只做一次渲染那体验会好很多，当然如果是JSP这种，还得生成一遍HTML页面，也会花费一点时间。那么根据实际业务来看，由于产品并不是经常更新（几天或者几周才可以更新一个产品），所以最好的方案就是将这个页面静态化，然后设置下这个页面的有效期，过期则重新生成。这样不仅节省了服务器生成HTML的时间，还可以充分利用CDN来缓存页面。
展开
7
1