Liquid模版和VUE模版优劣分析

新模版架构，采用liquid模版语法，服务端渲染，更快的性能

为什么要开发新架构模版？

fecify已经开发了vue的模版，已经开发了7套模版，为什么要开发新架构模版？因为vue模版存在一下问题：

1.首屏页面加载速度问题

• 首屏页面，指的是顾客第一次访问网站，访问的第一个页面，叫首屏页面
• vue模版是在浏览器客户端渲染，渲染之前需要将很多js文件下载到本地，然后才能渲染，而网络传输文件都需要时间，进而造成首屏页面加载时间过长
• fecify vue做了很多的优化工作，预加载js和css文件，但即时做了大量的优化工作，vue的模版渲染还是没有liquid模版快
• 首屏页面的加载速度，直接影响网页的跳出率，加载速度越快，跳出率越低。
• fecify liquid模版加入了整页缓存，缓存后速度更快（cloudflare本身也支持页面缓存）

2.页面加载偏移问题

• 页面加载偏移”一般指 页面在加载过程中，元素的位置、大小、布局发生变化，导致用户正在浏览或点击的内容突然被“挤走”。 这种现象在前端性能指标里叫 CLS（Cumulative Layout Shift，累计布局偏移）。
• 常见原因有：图片、广告、iframe 没有设置固定宽高，加载后把页面顶开；懒加载组件没有预留空间，后续内容插入导致抖动；CSS、JS 异步加载不当，导致布局计算被迫重新执行。
• 由于vue是js渲染，各个组件异步执行，进而无法控制渲染顺序，导致页面加载过程中出现大量的页面偏移，进而影响网站评分
• google网站测评网站：https://pagespeed.web.dev/ ，对vue类型的网站天然评分低
• 新模版架构，对图片上传加入了宽高比数据，图片懒加载模式，先通过尺寸将页面撑起来，图片记载后无缝替换，进而解决页面加载过程中的偏移问题

3.模版二次开发问题

• vue模版，是使用vue开发后编辑出来的html js css文件包，不支持模版二次开发。
• 前台商城的模版，用户对模版的要求是不可量化的，是千变万化的，因此不支持二次开发，势必这部分用户会选择wp，magento等开源商城来满足自己的需求
• 作为服务商，自己的客户定制模版UI是很常见的，也是利润增长点，如果不支持模版开发，势必无法满足模版定制的需要
• 模版的卡片固定，无法自己开发新的模版装修卡片
• 用户可能做一些小平台，需要再页面里面加一些js打点
• 总之，模版必须支持二次开发，才能扩展更多的业务面

4.模版功能

• 目前的vue模版，作为fecify的第一代模版，功能还是不够强大，目前的saas进化了很多，fecify的新模版以shopify模版作为参考，尽最大化的实现了同样的功能
• 采用shopify liquid模版语法，如果您开发过shopify模版，那么开发fecify模版基本零上手，降低学习成本
• 卡片支持分组，预览，检查模式支持子卡片选中等，可以进行更为方便的模版装修
• 页面支持多页面布局，譬如：商品详情页，支持多个布局，可以执行某个商品使用某个布局，增加更强的灵活性

总之，无论在功能上，还是性能上，还是seo层面，还是营销上面，开发新架构的模版来满足用户的需求，势在必行，我们花了5个月的时间来完成模版的全部重构、 当然，原来的vue模版也同样支持。