波罗丁的菠萝
beyondsoft
获得徽章 0
![[阴险]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_49.392c709.png)
yx3xihy9pt.feishu.cn![[送心]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_56.5777828.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
你可能是正版软件的受害者，鉴于国内APP广告满天飞的的情况，我说下我个人如何规避：
1. 网盘搜索资源，阿里云盘目前资源还是很多的
2. 下载到本地，手机电脑移动硬盘NAS都可以
3. 使用本地播放器播放，VLC之类的
总结体验还可以，再也没有广告的烦恼，而且特别省电，我怀疑这些APP在后台偷偷挖矿
1. 网盘搜索资源，阿里云盘目前资源还是很多的
2. 下载到本地，手机电脑移动硬盘NAS都可以
3. 使用本地播放器播放，VLC之类的
总结体验还可以，再也没有广告的烦恼，而且特别省电，我怀疑这些APP在后台偷偷挖矿
展开
2
2
![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
有没有拉一把的![[呲牙]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)
![[发呆]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_4.28b310a.png)
![[奸笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_17.bcebf79.png)
赞了这篇沸点
赞了这篇沸点
![[鼓掌]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_64.6c4f6bb.png)