阅读 16

搭建系统奇美拉的同构渲染服务

背景


我们的搭建系统从积木盒子到奇美拉,PC和H5页面都是静态的,发布时将页面静态化发布到cdn,浏览器访问时,从cdn获取页面进行异步渲染。由于页面是静态和异步的,对于首屏和SEO有诉求的场景无法很好的支持;另外对于像组件AB、动态区块等动态能力也没有办法实现。基于上诉原因,同构渲染是我们搭建系统所需要的。


技术方案


出于性能、稳定性和可扩展性的考虑,奇美拉的同构渲染服务分为3个部分:搭建(页面来源)-> 预处理 -> 同构渲染服务,下面是整体架构图,接下来将详细介绍每个部分。


搭建(页面来源)


搭建就是将组件拼凑成页面,类似搭积木,输出是描述页面结构的schema,供预处理消费。由于页面是通过schema表示的,所以可以方便的对接其他平台。那么schema里面有什么呢?


组件


第一个肯定是组件,组件分为”布局“”组件“”布局“是用来控制”组件“放在什么地方的,比如下面的”布局“含有三个位置,可以放不同的”组件“



为了确定组件,给定包名和版本就可以了。


数据


一般情况下仅有组件是无法渲染的,还需要数据,除非是静态组件,为此schema还需要包括数据获取方式的描述。虽然奇美拉和积木盒子通过jdata能够很好的获取数据,但是一些业务无法走jdata,所以需要一种通用的方式,在服务器端HSF就是一种很好的方式。为此获取数据的方式分为jdata和HSF两种,如下:


jdata(通过value就可以获取数据):

{
   "type": "jdata",
   "value": 123456
}复制代码

HSF(value是用来描述调用HSF的数据):

{
   "type": "hsf",
   "value": {
      "appName": "widget-router-hsf",
      "id": "com.alibaba.widgetpt.service.WidgetService:2.0.0",
      "group": "HSF",
      "method": "getJsonComponent",
      "args": [
         "adPcWidget:adPcWidget",
         "execute"
      ],
      "argsTypes": [
         "java.lang.String",
         "java.lang.String"
      ]
   }
}复制代码

除了jdata和HSF,上面的格式能够容易的扩展到其他方式。


组件组件的其他描述


为了能够支持一张页面同时存在同构动态组件(服务器端渲染,数据会不断变化,比如千人千面的组件)、同构静态组件(服务器端渲染,数据不会变化,比如热区组件)、异步组件(在浏览器端获取数据并渲染的组件),schema需要有字段区分它们;同时为了支持不同技术体系的组件,比如react和jquery,也需要有字段区分;此外schema中还有一些组件其他描述,比如spm(c位)。


页面渲染描述


上面已经了解了渲染组件所需要的内容,将组件拼装成页面,还需要一些页面级别的描述。比如承载页面的模板,我们成为原型prototype;页面的访问地址;页面的SPM ab位;下线时间和下线地址;页面的头部和尾部等。


schema


下面是一份简单的页面schema:

{
  "attributes": {
    "page-url": "https://cms.1688.com/ssr/ssr/ssr/hhd2n7pi.html", // 访问地址
    "page-spm": "a2632k.12847700", // spm ab位置
    "offline-time": null, // 下线时间
    "offline-url": "", // 下线地址
    "page-prototype": "1688/pc/fusion.html", // 页面原型
    "page-header": "", // 页面头部
    "page-footer": "", // 页面尾部
  },
  "children": [
    {
      ...
      "attributes": {
        "component-name": "@alife/ocms-layout-1688-wap-layout-common", // 包名
        "component-version": "1.0.4", // 版本
        "component-spm": "jxolqgpw", // spm c
        "component-type": "layout", // 表示布局类型
        "component-tech": "pure", // 技术体系,pure表示jquery组件
        "component-runat": "server" // 表示同构静态组件
      },
      "children": [
        {
          "attributes": {
            ...
            "component-name": "@alife/ocms-fusion-1688-pc-brand-pc-gather",
            "component-spm": "jyh2ezk1",
            "component-version": "1.0.17",
            "component-type": "component",
            "component-tech": "fusion",
            "component-runat": "web",
            "component-isomorphic": true,
            // 描述数据获取的方式
            "component-isomorphic-data": "{\"type\":\"hsf\",\"value\":{\"appName\":\"widget-router-hsf\",\"id\":\"com.alibaba.widgetpt.service.WidgetService:2.0.0\",\"group\":\"HSF\",\"method\":\"getJsonComponent\",\"args\":[\"adPcWidget:adPcWidget\",\"execute\"],\"argsTypes\":[\"java.lang.String\",\"java.lang.String\"]}}"
          }
        }
      ]
    }
  ]
}复制代码


预处理


出于性能和稳定性的考虑,我们没有把描述页面的schema直接交给同构渲染服务,而且进行一次预处理,主要包括资源分析和处理预渲染资源预取兜底页面几个部分。



资源分析处理


由于我们的组件都在cdn上,schema只给出了组件的包名和版本,组件渲染还需要其依赖,为此要将每个组件的依赖、js列表和css列表都分析出来。由于同构渲染服务是通过积木盒子的渲染引擎croco来实现的,它的渲染是根据描述页面的DSL来实现的,所以需要将描述页面schema转化成DSL,DSL中包含预先渲染好的同构静态组件。下面是一个croco DSL的例子:


<div page-id="4286" data-cms="chimera" class="ocms-container">
  <div component-uuid="4" component-name="@alife/ocms-layout-1688-wap-layout-common"
       component-version="1.0.4" component-type="layout" component-tech="pure" data-spm="jxolqgpw"
       component-async="false" component-stage="render">
    <div class="ocms-layout-1688-wap-layout-common-1-0-4">
      <div>
        <div name="main" class="croco slot">
          <component slot="main" component-uuid="5" component-name="@alife/ocms-fusion-1688-pc-brand-pc-gather"
                    component-version="1.0.17" component-type="component" 
                    component-tech="fusion" component-smart="false" component-isomorphic="true" 
                    component-isomorphic-data="{&quot;type&quot;:&quot;hsf&quot;,&quot;hsf&quot;:{&quot;appName&quot;:&quot;widget-router-hsf&quot;,&quot;id&quot;:&quot;com.alibaba.widgetpt.service.WidgetService:2.0.0&quot;,&quot;group&quot;:&quot;HSF&quot;,&quot;method&quot;:&quot;getJsonComponent&quot;,&quot;args&quot;:[&quot;adPcWidget:adPcWidget&quot;,&quot;execute&quot;],&quot;argsTypes&quot;:[&quot;java.lang.String&quot;,&quot;java.lang.String&quot;]}}"
                    data-spm="jyh2ezk1" component-async="true">
            <div style=";overflow:hidden; width:auto;height:150px" class="ocms-loading"></div>
          </component>
        </div>
      </div>
    </div>
  </div>
</div>复制代码


预渲染


根据上文,一个页面可能具有同构静态组件,它在服务器端渲染的结果是不会变,因为组件版本和数据都不会变,所以没必要每次访问页面时都渲染一次,提前渲染好是一种不错的选择,这样访问时只需要将渲染好的html拼接到页面里就好了。


另外搭建系统中页面的头部和尾部是通过esi实现的,几乎很少变动,所以也可以提前处理好。


资源预取


拼接页面需要模板,也就是原型prototype,它在cdn上,可以提前预取。资源分析出的css也可以提前预取,在拼接页面的时候打到html,可以避免reflow和repaint。


兜底页面


出于稳定性的考虑,预处理的时候会cdn发布一张浏览器可以直接跑的页面,同构动态组件会在浏览器端进行异步渲染,这样即使同构渲染服务挂掉了,也可以通过兜底页面展示内容。


输出


预处理的结果会保存在oss上供同构渲染服务使用,具体结构如下:

{
  "backupUrl": "https://show.1688.com/ssr/ssr/ssr/hhd2n7pi.html", // 兜底页面
  "data": {
    // croco需要的dsl
    "html": "<div page-id=\"4286\" data-cms=\"chimera\" class=\"ocms-container\"><div component-uuid=\"4\" component-name=\"@alife/ocms-layout-1688-wap-layout-common\" component-alias-name=\"\" component-version=\"1.0.4\" component-type=\"layout\" component-tech=\"pure\" data-spm=\"jxolqgpw\" component-async=\"false\" data-nojs=\"true\" class=\"ocms-layout-1688-wap-layout-common-1-0-4\" component-stage=\"render\"><div class=\"ocms-layout-1688-wap-layout-common-1-0-4\"><div> <div name=\"main\" class=\"croco slot\"><component slot=\"main\" component-uuid=\"5\" component-name=\"@alife/ocms-fusion-1688-pc-brand-pc-gather\" component-alias-name=\"\" component-version=\"1.0.17\" component-type=\"component\" component-tech=\"fusion\" component-smart=\"false\" component-isomorphic=\"true\" component-isomorphic-data=\"{&quot;type&quot;:&quot;hsf&quot;,&quot;hsf&quot;:{&quot;appName&quot;:&quot;widget-router-hsf&quot;,&quot;id&quot;:&quot;com.alibaba.widgetpt.service.WidgetService:2.0.0&quot;,&quot;group&quot;:&quot;HSF&quot;,&quot;method&quot;:&quot;getJsonComponent&quot;,&quot;args&quot;:[&quot;adPcWidget:adPcWidget&quot;,&quot;execute&quot;],&quot;argsTypes&quot;:[&quot;java.lang.String&quot;,&quot;java.lang.String&quot;]}}\" data-spm=\"jyh2ezk1\" data-croco-lazyload=\"true\" component-async=\"true\"><div style=\";overflow:hidden; width:auto;height:150px\" class=\"ocms-loading\"></div></component></div> </div> </div></div></div>",
    // 页面原型
    "prototype": "<!DOCTYPE html>\n<html>\n<head>\n  <link rel=\"dns-prefetch\" href=\"//polyfill.alicdn.com\"/>\n  <link rel=\"dns-prefetch\" href=\"//img.alicdn.com\"/>\n  <link rel=\"dns-prefetch\" href=\"//i.alicdn.com\"/>\n  <link rel=\"dns-prefetch\" href=\"//u.alicdn.com\"/>\n  <link rel=\"dns-prefetch\" href=\"//is.alicdn.com\"/>\n  <meta charset=\"utf-8\">\n  <meta name=\"data-spm\" content=\"\"/>\n  <meta name=\"aplus-vt-cfg\" content=\"1\">\n  <title>{{ext.title || title}}</title>\n  <meta name=\"keywords\" content=\"{{ext.keywords || '阿里巴巴,采购批发,1688,行业门户,网上贸易,b2b,电子商务,内贸,外贸,批发,行业资讯,网上贸易,网上交易,交易市场,在线交易,买卖信息,贸易机会,商业信息,供求信息,采购,求购信息,供应信息,加工合作,代理,商机,行业资讯,商务服务,商务网,商人社区,网商'}}\"/>\n  <meta name=\"description\" content=\"{{ext.description || '阿里巴巴(1688.com)是全球企业间(B2B)电子商务的著名品牌,为数千万网商提供海量商机信息和便捷安全的在线交易市场,也是商人们以商会友、真实互动的社区平台。目前1688.com已覆盖原材料、工业品、服装服饰、家居百货、小商品等12个行业大类,提供从原料--生产--加工--现货等一系列的供应产品和服务'}}\"/>\n  <link rel=\"shortcut icon\" href=\"//is.alicdn.com/images/eng/style/css_images/favicon.ico\" type=\"image/x-icon\"/>\n  <link rel=\"stylesheet\" href=\"//b.alicdn.com/??@alife/next/0.x/index-part1.css\" />\n  <link rel=\"stylesheet\" href=\"//b.alicdn.com/??@alife/next/0.x/index-part2.css\" />\n  <!-- <link rel=\"stylesheet\" href=\"//b.alicdn.com/@alife/next/0.x/index.css\" data-sc-amd=\"true\" data-sc-pos=\"head\"/> -->\n  <!--[if lt IE 9]>\n    <script src=\"https://astyle.alicdn.com/app/tempo/js/box/promotion/dacu/upbrowser.js\" type=\"text/javascript\" ></script>\n  <![endif]-->\n  <script src=\"//polyfill.alicdn.com/modern/polyfill.min.js\" crossorigin></script>\n  <script src=\"//b.alicdn.com/@sys/loader/1.x/lite.js\" data-sc-amd=\"true\" data-sc-pos=\"head\"></script>\n  <script src=\"//g.alicdn.com/retcode/log/log.js\" crossorigin></script>\n  {{if mode == 'builder'}}\n  <script src=\"//b.alicdn.com/@alife/bc-react-prop-types-hook/1.x/index.js\"></script>\n  <script>\n  __def(['@alife/bc-react-prop-types-hook/1.x/index'],function(x){console.log('propTypes hook init')});\n  </script>\n  {{/if}}\n  {{=ext.custom_html}}\n</head>\n<body>\n{{=content}}\n</body>\n</html>\n<script> window.__croco_page_bu__ = '1688'; </script>\n<script src=\"//astyle-src.alicdn.com/pkg/@alife/ocms-croco/1.0.110/bootstrap.js\"></script>\n{{if mode != 'builder'}}\n<!-- 投放位打点js begin -->\n<script data-sc-amd=\"true\" data-sc-pos=\"footer\" src=\"//g.alicdn.com/dacdn/ctr-dot/ctr-dot.js\"></script>\n<script data-sc-amd=\"true\" data-sc-pos=\"footer\" src=\"//b.alicdn.com/@alife/bc-ocms-ctr-dot/1.x/index.js\"></script>\n<!-- 投放位打点js end -->\n{{/if}}\n",
    "pageInfo": { // 页面信息
      "offline_time": null,
      "offline_url": "",
      "spm_id": "a2632k.12847700",
      ...
    },
    "jsList": [ // 完整的js列表
      ...
      "//b.alicdn.com/@alife/ocms-fusion-1688-pc-brand-pc-gather/1.x/index.01167551.js"
    ],
    "cssList": [ // 完整的css列表
      "//b.alicdn.com/@alife/ocms-fusion-1688-pc-brand-pc-gather/1.x/index.2fb73bca.css"
    ],
    "isomorphic": {
      "cssList": [ // 同构的css列表
        "//b.alicdn.com/@alife/ocms-fusion-1688-pc-brand-pc-gather/1.x/index.2fb73bca.css"
      ],
      "cssContentList": [ // 预取的css内容
        "\r\n\r\n@charset \"UTF-8\";.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr a:active{text-decoration:none}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:row;flex-direction:row;width:1390px;height:220px;overflow:hidden;margin:0 auto}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .floorBgWrap{box-sizing:border-box;display:-ms-flexbox;display:flex;position:relative;margin-right:-125px;margin-left:50px;padding-right:125px;padding-left:57px;width:1225px;height:220px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .floorBg{position:relative;width:1043px;height:220px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .container{box-sizing:border-box;display:-ms-flexbox;display:flex;position:absolute;top:0;left:919px;margin-right:-85px;padding-right:85px;width:382px;height:220px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .empty{position:relative;width:297px;height:220px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .articleWrap{display:-ms-flexbox;display:flex;position:absolute;top:20px;left:85px;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;background-color:rgba(51,51,51,.1);width:297px;height:180px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .articleWrap .hd{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;width:296px;height:22px;margin-top:21px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .articleWrap .largeIcon{margin-top:10px;width:73px;height:2px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .articleWrap .brandStory{margin-left:14px;line-height:22px;white-space:pre;color:#fff;font-size:16px;font-weight:400;lines:1}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .articleWrap .logo{margin-top:11px;margin-left:12px;width:85px;height:1px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .articleWrap .bd{margin-top:12px;margin-left:24px;width:245px;height:102px;overflow:hidden;text-overflow:ellipsis;line-height:17px;color:#fff;font-size:12px;font-weight:400;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;word-wrap:break-word}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .block3{box-sizing:border-box;display:-ms-flexbox;display:flex;position:absolute;top:58px;left:9px;margin-top:-6px;margin-bottom:-4px;margin-left:-9px;padding-top:6px;padding-bottom:4px;padding-left:9px;width:318px;height:120px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .block2{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;border-radius:4px;background-color:rgba(255,255,255,.98);width:309px;height:110px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .info{margin-left:133px;max-width:164px;overflow:hidden;text-overflow:ellipsis;line-height:22px;white-space:nowrap;color:#333;font-size:16px;font-weight:400;lines:1}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .wrap{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-top:4px;width:308px;height:20px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .gongxiang{margin-top:2px;width:16px;height:16px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block2 .wrap img{margin-left:4px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block2 .wrap img:first-child{margin-left:133px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .cheng{margin-top:2px;width:16px;height:16px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .year{margin-left:4px;max-width:123px;overflow:hidden;text-overflow:ellipsis;line-height:20px;white-space:nowrap;color:#666;font-size:14px;font-weight:400;lines:1}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .block{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-top:11px;margin-left:132px;height:20px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .already{text-align:left;line-height:20px;letter-spacing:0;white-space:nowrap;color:#999;font-size:14px;font-weight:400;lines:1}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .num{text-align:left;line-height:20px;letter-spacing:0;white-space:nowrap;color:#333;font-size:14px;font-weight:400;lines:1}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .group{top:0;-ms-flex-direction:row;flex-direction:row;box-shadow:0 2px 4px 0 rgba(0,0,0,.18);display:-ms-flexbox;display:flex;position:absolute;left:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:4px;background-color:#fff;width:120px;height:120px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .block4 .largeIcon{width:60px}.ocms-fusion-1688-pc-wb-1688-cbu-advert-brand-zone-pc-ssr .ad-icon{position:absolute;top:205px;right:0;color:#999;font-size:12px}@font-face{font-family:NextIcon;src:url(//at.alicdn.com/t/font_t6jzs3l3nwtmaemi.eot);src:url(//at.alicdn.com/t/font_t6jzs3l3nwtmaemi.eot?#iefix) format(\"embedded-opentype\"),url(//at.alicdn.com/t/font_t6jzs3l3nwtmaemi.woff) format(\"woff\"),url(//at.alicdn.com/t/font_t6jzs3l3nwtmaemi.ttf) format(\"truetype\"),url(//at.alicdn.com/t/font_t6jzs3l3nwtmaemi.svg#articonsvg) format(\"svg\")}.next-icon{position:relative;display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.1px;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;speak:none;font-size:16px;line-height:16px;vertical-align:middle;text-align:center}.next-icon-left{margin-right:4px}.next-icon-right{margin-left:4px}.next-icon-xxs:before{width:8px;font-size:8px;line-height:inherit}@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon-xxs{-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon-xxs:before{width:16px;font-size:16px}}.next-icon-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon-xxxl:before{width:64px;font-size:64px;line-height:inherit}@keyframes loadingCircle{0%{transform-origin:50% 50%;transform:rotate(0)}100%{transform-origin:50% 50%;transform:rotate(360deg)}}.next-icon-loading:before{content:\"\";animation:loadingCircle 2s infinite linear}.next-icon-all:before{content:\"\"}.next-icon-cart:before{content:\"\"}.next-icon-comments:before{content:\"\"}.next-icon-cry:before{content:\"\"}.next-icon-email:before{content:\"\"}.next-icon-favorite:before{content:\"\"}.next-icon-folder:before{content:\"\"}.next-icon-form:before{content:\"\"}.next-icon-help:before{content:\"\"}.next-icon-refresh:before{content:\"\"}.next-icon-set:before{content:\"\"}.next-icon-training:before{content:\"\"}.next-icon-account:before{content:\"\"}.next-icon-atm:before{content:\"\"}.next-icon-clock:before{content:\"\"}.next-icon-attachment:before{content:\"\"}.next-icon-3column:before{content:\"\"}.next-icon-4column:before{content:\"\"}.next-icon-discount:before{content:\"\"}.next-icon-service:before{content:\"\"}.next-icon-print:before{content:\"\"}.next-icon-box:before{content:\"\"}.next-icon-process:before{content:\"\"}.next-icon-bags:before{content:\"\"}.next-icon-electronics:before{content:\"\"}.next-icon-gifts:before{content:\"\"}.next-icon-lights:before{content:\"\"}.next-icon-auto:before{content:\"\"}.next-icon-browse:before{content:\"\"}.next-icon-atm-away:before{content:\"\"}.next-icon-scanning:before{content:\"\"}.next-icon-compare:before{content:\"\"}.next-icon-filter:before{content:\"\"}.next-icon-pin:before{content:\"\"}.next-icon-history:before{content:\"\"}.next-icon-similar-product:before{content:\"\"}.next-icon-link:before{content:\"\"}.next-icon-cut:before{content:\"\"}.next-icon-table:before{content:\"\"}.next-icon-nav-list:before{content:\"\"}.next-icon-image-text:before{content:\"\"}.next-icon-text:before{content:\"\"}.next-icon-move:before{content:\"\"}.next-icon-subtract:before{content:\"\"}.next-icon-dollar:before{content:\"\"}.next-icon-office:before{content:\"\"}.next-icon-operation:before{content:\"\"}.next-icon-download:before{content:\"\"}.next-icon-map:before{content:\"\"}.next-icon-bad:before{content:\"\"}.next-icon-good:before{content:\"\"}.next-icon-skip:before{content:\"\"}.next-icon-play:before{content:\"\"}.next-icon-stop:before{content:\"\"}.next-icon-compass:before{content:\"\"}.next-icon-security:before{content:\"\"}.next-icon-share:before{content:\"\"}.next-icon-store:before{content:\"\"}.next-icon-phone:before{content:\"\"}.next-icon-ellipsis:before{content:\"\"}.next-icon-email-filling:before{content:\"\"}.next-icon-favorites-filling:before{content:\"\"}.next-icon-account-filling:before{content:\"\"}.next-icon-credit-level:before{content:\"\"}.next-icon-credit-level-filling:before{content:\"\"}.next-icon-mobile-phone:before{content:\"\"}.next-icon-smile:before{content:\"\"}.next-icon-personal-center:before{content:\"\"}.next-icon-arrow-up-filling:before{content:\"\"}.next-icon-arrow-right:before{content:\"\"}.next-icon-arrow-left:before{content:\"\"}.next-icon-arrow-down:before{content:\"\"}.next-icon-arrow-up:before{content:\"\"}.next-icon-add:before{content:\"\"}.next-icon-minus:before{content:\"\"}.next-icon-delete-filling:before{content:\"\"}.next-icon-edit:before{content:\"\"}.next-icon-error:before{content:\"\"}.next-icon-select:before{content:\"\"}.next-icon-ashbin:before{content:\"\"}.next-icon-calendar:before{content:\"\"}.next-icon-time:before{content:\"\"}.next-icon-success:before{content:\"\"}.next-icon-warning:before{content:\"\"}.next-icon-search:before{content:\"\"}.next-icon-display:before{content:\"\"}.next-icon-category:before{content:\"\"}.next-icon-prompt:before{content:\"\"}.next-icon-arrow-down-filling:before{content:\"\"}.next-icon-sorting:before{content:\"\"}.next-icon-ascending:before{content:\"\"}.next-icon-descending:before{content:\"\"}.next-icon-success-filling:before{content:\"\"}.next-icon-picture:before{content:\"\"}.next-icon-close:before{content:\"\"}.next-icon-semi-select:before{content:\"\"}.next-icon-tag-subscript:before{content:\"\"}.next-icon-survey:before{content:\"\"}.next-icon-arrow-double-left:before{content:\"\"}.next-icon-arrow-double-right:before{content:\"\"}@-moz-document url-prefix(){@supports (-moz-osx-font-smoothing:auto) and (animation:calc(0s)){.next-icon::before{margin-top:-5px}}}@keyframes fadeIn{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1}}@keyframes fadeInDown{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateY(-100px);transform:translateY(-100px)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDownBig{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInLeft{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateX(-20px);transform:translateX(-20px)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeftBig{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateX(20px);transform:translateX(20px)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRightBig{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateX(2000px);transform:translateX(2000px)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInUp{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateY(20px);transform:translateY(20px)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUpBig{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeOut{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0}}@keyframes fadeOutDown{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateY(0);transform:translateY(0)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDownBig{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateY(0);transform:translateY(0)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateY(2000px);transform:translateY(2000px)}}@keyframes fadeOutLeft{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateX(0);transform:translateX(0)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeftBig{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateX(0);transform:translateX(0)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes fadeOutRight{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateX(0);transform:translateX(0)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRightBig{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateX(0);transform:translateX(0)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes fadeOutUp{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateY(0);transform:translateY(0)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUpBig{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateY(0);transform:translateY(0)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes slideInDown{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateY(0);transform:translateY(0)}}@keyframes slideInLeft{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateX(2000px);transform:translateX(2000px)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateX(0);transform:translateX(0)}}@keyframes slideInUp{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:translateY(0);transform:translateY(0)}}@keyframes slideOutDown{0%{-ms-transform:translateY(0);transform:translateY(0)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateY(2000px);transform:translateY(2000px)}}@keyframes slideOutLeft{0%{-ms-transform:translateX(0);transform:translateX(0)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes slideOutRight{0%{-ms-transform:translateX(0);transform:translateX(0)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes slideOutUp{0%{-ms-transform:translateY(0);transform:translateY(0)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes zoomIn{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1}}@keyframes zoomInPulse{from{transform:scale3d(1,1,1)}50%{transform:scale3d(1.8,1.8,1.8)}to{transform:scale3d(1.4,1.4,1.4)}}@keyframes zoomInQuick{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:scale(.8);transform:scale(.8)}to{-ms-transform:scale(1);transform:scale(1)}}@keyframes zoomInDown{0%{animation-timing-function:cubic-bezier(.55,.055,.675,.19);-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0)}60%{animation-timing-function:cubic-bezier(.175,.885,.32,1);-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}}@keyframes zoomInLeft{0%{animation-timing-function:cubic-bezier(.55,.055,.675,.19);-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0)}60%{animation-timing-function:cubic-bezier(.175,.885,.32,1);-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0)}}@keyframes zoomInRight{0%{animation-timing-function:cubic-bezier(.55,.055,.675,.19);-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0)}60%{animation-timing-function:cubic-bezier(.175,.885,.32,1);-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0)}}@keyframes zoomInUp{0%{animation-timing-function:cubic-bezier(.55,.055,.675,.19);-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0)}60%{animation-timing-function:cubic-bezier(.175,.885,.32,1);-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}}@keyframes zoomOut{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1}50%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0}}@keyframes zoomOutPulse{from{transform:scale3d(1.4,1.4,1.4)}to{transform:scale3d(1,1,1)}}@keyframes zoomOutQuick{0%{-ms-transform:scale(1);transform:scale(1)}to{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:scale(.8);transform:scale(.8)}}@keyframes zoomOutDown{40%{animation-timing-function:cubic-bezier(.55,.055,.675,.19);-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}100%{animation-timing-function:cubic-bezier(.175,.885,.32,1);-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-ms-transform-origin:center bottom;transform-origin:center bottom}}@keyframes zoomOutLeft{40%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-ms-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutRight{40%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-ms-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutUp{40%{animation-timing-function:cubic-bezier(.55,.055,.675,.19);-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}100%{animation-timing-function:cubic-bezier(.175,.885,.32,1);-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-ms-transform-origin:center bottom;transform-origin:center bottom}}@keyframes bounceIn{20%,40%,60%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;transform:scale3d(1,1,1)}}@keyframes bounceOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;transform:scale3d(1.1,1.1,1.1)}to{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;transform:scale3d(.3,.3,.3)}}@keyframes pressIn{100%{-ms-transform:scale(.7);transform:scale(.7)}}@keyframes waterIn{0%{-ms-transform:translate(-45%) scaleX(2);transform:translate(-45%) scaleX(2)}100%{-ms-transform:translate(0) scaleX(1);transform:translate(0) scaleX(1)}}@keyframes pressInSmall{100%{-ms-transform:scale(.5);transform:scale(.5)}}@keyframes pressOut{0%{-ms-transform:scale3d(.7,.7,.7);transform:scale3d(.7,.7,.7)}}@keyframes waterOut{0%{-ms-transform:translate(-45%) scaleX(2);transform:translate(-45%) scaleX(2)}100%{-ms-transform:translate(0) scaleX(1);transform:translate(0) scaleX(1)}}@keyframes pressOutSmall{0%{-ms-transform:scale(.5);transform:scale(.5)}}@keyframes expandInDown{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:scaleY(0);transform:scaleY(0);-ms-transform-origin:left top 0;transform-origin:left top 0}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:scaleY(1);transform:scaleY(1);-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;-ms-transform:scaleY(1);transform:scaleY(1);-ms-transform-origin:left top 0;transform-origin:left top 0}100%{-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";opacity:0;-ms-transform:scaleY(0);transform:scaleY(0);-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes pulse{from{-ms-transform:scale(1);transform:scale(1)}20%{-ms-transform:scale(1.2);transform:scale(1.2)}to{-ms-transform:scale(1);transform:scale(1)}}@keyframes shake{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}@keyframes press{50%{-ms-transform:scale3d(.7,.7,.7);transform:scale3d(.7,.7,.7)}}@keyframes unpress{50%{-ms-transform:scale3d(.7,.7,.7);transform:scale3d(.7,.7,.7)}}@keyframes buttonClick{50%{-ms-transform:scale3d(.95,.95,.95);transform:scale3d(.95,.95,.95)}}.expandInDown{animation-name:expandInDown;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.expandOutUp{animation-name:expandOutUp;animation-iteration-count:1;animation-duration:.2s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.fadeIn{animation-name:fadeIn;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.fadeInDown{animation-name:fadeInDown;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.fadeInDownBig{animation-name:fadeInDownBig;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.fadeInLeft{animation-name:fadeInLeft;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.fadeInLeftBig{animation-name:fadeInLeftBig;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.fadeInRight{animation-name:fadeInRight;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.fadeInRightBig{animation-name:fadeInRightBig;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.fadeInUp{animation-name:fadeInUp;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.fadeInUpBig{animation-name:fadeInUpBig;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.fadeOut{animation-name:fadeOut;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-fill-mode:both;backface-visibility:hidden}.fadeOutDown{animation-name:fadeOutDown;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-fill-mode:both;backface-visibility:hidden}.fadeOutDownBig{animation-name:fadeOutDownBig;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-fill-mode:both;backface-visibility:hidden}.fadeOutLeft{animation-name:fadeOutLeft;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-fill-mode:both;backface-visibility:hidden}.fadeOutLeftBig{animation-name:fadeOutLeftBig;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-fill-mode:both;backface-visibility:hidden}.fadeOutRight{animation-name:fadeOutRight;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-fill-mode:both;backface-visibility:hidden}.fadeOutRightBig{animation-name:fadeOutRightBig;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-fill-mode:both;backface-visibility:hidden}.fadeOutUp{animation-name:fadeOutUp;animation-iteration-count:1;animation-duration:.2s;animation-delay:0s;animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-fill-mode:both;backface-visibility:hidden}.fadeOutUpBig{animation-name:fadeOutUpBig;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-fill-mode:both;backface-visibility:hidden}.slideInDown{animation-name:slideInDown;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.86,0,.07,1);animation-fill-mode:both;backface-visibility:hidden}.slideInLeft{animation-name:slideInLeft;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.86,0,.07,1);animation-fill-mode:both;backface-visibility:hidden}.slideInRight{animation-name:slideInRight;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.86,0,.07,1);animation-fill-mode:both;backface-visibility:hidden}.slideInUp{animation-name:slideInUp;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.86,0,.07,1);animation-fill-mode:both;backface-visibility:hidden}.slideOutDown{animation-name:slideOutDown;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.slideOutLeft{animation-name:slideOutLeft;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.slideOutRight{animation-name:slideOutRight;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.slideOutUp{animation-name:slideOutUp;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.zoomIn{animation-name:zoomIn;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.zoomInPulse{animation-name:zoomInPulse;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.zoomInQuick{animation-name:zoomInQuick;animation-iteration-count:1;animation-duration:.2s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.zoomInDown{animation-name:zoomInDown;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.zoomInLeft{animation-name:zoomInLeft;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.zoomInRight{animation-name:zoomInRight;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.zoomInUp{animation-name:zoomInUp;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.zoomOut{animation-name:zoomOut;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-fill-mode:both;backface-visibility:hidden}.zoomOutPulse{animation-name:zoomOutPulse;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.zoomOutQuick{animation-name:zoomOutQuick;animation-iteration-count:1;animation-duration:.2s;animation-delay:0s;animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-fill-mode:both;backface-visibility:hidden}.zoomOutDown{animation-name:zoomOutDown;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-fill-mode:both;backface-visibility:hidden}.zoomOutLeft{animation-name:zoomOutLeft;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-fill-mode:both;backface-visibility:hidden}.zoomOutRight{animation-name:zoomOutRight;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-fill-mode:both;backface-visibility:hidden}.zoomOutUp{animation-name:zoomOutUp;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-fill-mode:both;backface-visibility:hidden}.bounceIn{animation-name:bounceIn;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.bounceOut{animation-name:bounceOut;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-fill-mode:both;backface-visibility:hidden}.pressIn{animation-name:pressIn;animation-iteration-count:1;animation-duration:.2s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.pressInSmall{animation-name:pressInSmall;animation-iteration-count:1;animation-duration:.2s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.pressOut{animation-name:pressOut;animation-iteration-count:1;animation-duration:.2s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.pressOutSmall{animation-name:pressOutSmall;animation-iteration-count:1;animation-duration:.2s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.waterIn{animation-name:waterIn;animation-iteration-count:1;animation-duration:.2s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.waterOut{animation-name:waterOut;animation-iteration-count:1;animation-duration:.2s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.pulse{animation-name:pulse;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.shake{animation-name:shake;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.press{animation-name:press;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.unpress{animation-name:unpress;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.buttonClick{animation-name:buttonClick;animation-iteration-count:1;animation-duration:.3s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;backface-visibility:hidden}.next-slick{box-sizing:border-box;position:relative;display:block;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.next-slick *,.next-slick :after,.next-slick :before{box-sizing:border-box}.next-slick-initialized .next-slick-slide{display:block}.next-slick-list{position:relative;overflow:hidden;display:block;margin:0;padding:0;transform:translate3d(0,0,0)}.next-slick-list:focus{outline:0}.next-slick-list.dragging{cursor:pointer;cursor:hand}.next-slick-track{position:relative;top:0;left:0;display:block;transform:translate3d(0,0,0)}.next-slick-slide{float:left;height:100%;min-height:1px;outline:0;transition:all .3s cubic-bezier(.86,0,.07,1)}[dir=rtl] .next-slick-slide{float:right}.next-slick-slide img{display:block}.next-slick-arrow{display:block;position:absolute;cursor:pointer;text-align:center;transition:.4s ease-in}.next-slick-arrow.inline{color:#FFF;background:#000;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)\";opacity:.2}.next-slick-arrow.inline:hover{color:#FFF;background:#000;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)\";opacity:.4}.next-slick-arrow.inline.disabled{color:#666;background:#F7F8FA;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\";opacity:.5}.next-slick-arrow.outer{color:#666}.next-slick-arrow.outer:hover{color:#333}.next-slick-arrow.outer.disabled{color:#CCC}.next-slick-arrow.disabled{cursor:not-allowed}.next-slick-dots{display:block;position:absolute;z-index:100;margin:0;padding:0}.next-slick-dots-item{position:relative;display:inline-block;cursor:pointer}.next-slick-dots-item button{border:0;outline:0;padding:0;height:8px;width:8px;border-radius:50%;background:#000;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=32)\";opacity:.32}.next-slick-dots-item button:hover{background-color:#A0A2AD;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=32)\";opacity:.32}.next-slick-dots-item.active button{background:#FF6A00;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";opacity:1;animation:zoom .3s cubic-bezier(.86,0,.07,1)}.next-slick-dots.horizontal{width:100%;bottom:12px;left:0;text-align:center}.next-slick-dots.horizontal .next-slick-dots-item{margin:0 4px}.next-slick-dots.vertical{width:16px;top:0;right:20px;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column}.next-slick-dots.vertical .next-slick-dots-item{margin:0 0}.next-slick.next-slick-horizontal.next-slick-outer{padding:0 24px}.next-slick.next-slick-horizontal .next-slick-arrow.medium{width:28px;height:56px;line-height:56px}.next-slick.next-slick-horizontal .next-slick-arrow.medium .next-icon:before{width:20px;font-size:20px;line-height:inherit}.next-slick.next-slick-horizontal .next-slick-arrow.medium.inline{top:calc((100% - 56px)/ 2)}.next-slick.next-slick-horizontal .next-slick-arrow.medium.inline.next-slick-prev{left:0}.next-slick.next-slick-horizontal .next-slick-arrow.medium.inline.next-slick-next{right:0}.next-slick.next-slick-horizontal .next-slick-arrow.medium.outer{top:calc((100% - 56px)/ 2)}.next-slick.next-slick-horizontal .next-slick-arrow.medium.outer.next-slick-prev{left:-4px}.next-slick.next-slick-horizontal .next-slick-arrow.medium.outer.next-slick-next{right:-4px}.next-slick.next-slick-horizontal .next-slick-arrow.large{width:48px;height:96px;line-height:96px}.next-slick.next-slick-horizontal .next-slick-arrow.large .next-icon:before{width:32px;font-size:32px;line-height:inherit}.next-slick.next-slick-horizontal .next-slick-arrow.large.inline{top:calc((100% - 96px)/ 2)}.next-slick.next-slick-horizontal .next-slick-arrow.large.inline.next-slick-prev{left:0}.next-slick.next-slick-horizontal .next-slick-arrow.large.inline.next-slick-next{right:0}.next-slick.next-slick-horizontal .next-slick-arrow.large.outer{top:calc((100% - 96px)/ 2)}.next-slick.next-slick-horizontal .next-slick-arrow.large.outer.next-slick-prev{left:-8px}.next-slick.next-slick-horizontal .next-slick-arrow.large.outer.next-slick-next{right:-8px}.next-slick.next-slick-vertical.next-slick-outer{padding:24px 0}.next-slick.next-slick-vertical .next-slick-slide{display:block;height:auto}.next-slick.next-slick-vertical .next-slick-arrow.medium{width:56px;height:28px;line-height:28px}.next-slick.next-slick-vertical .next-slick-arrow.medium .next-icon:before{width:20px;font-size:20px;line-height:inherit}.next-slick.next-slick-vertical .next-slick-arrow.medium.inline{left:calc((100% - 56px)/ 2)}.next-slick.next-slick-vertical .next-slick-arrow.medium.inline.next-slick-prev{top:0}.next-slick.next-slick-vertical .next-slick-arrow.medium.inline.next-slick-next{bottom:0}.next-slick.next-slick-vertical .next-slick-arrow.medium.outer{left:calc((100% - 56px)/ 2)}.next-slick.next-slick-vertical .next-slick-arrow.medium.outer.next-slick-prev{top:-4px}.next-slick.next-slick-vertical .next-slick-arrow.medium.outer.next-slick-next{bottom:-4px}.next-slick.next-slick-vertical .next-slick-arrow.large{width:96px;height:48px;line-height:48px}.next-slick.next-slick-vertical .next-slick-arrow.large .next-icon:before{width:32px;font-size:32px;line-height:inherit}.next-slick.next-slick-vertical .next-slick-arrow.large.inline{left:calc((100% - 96px)/ 2)}.next-slick.next-slick-vertical .next-slick-arrow.large.inline.next-slick-prev{top:0}.next-slick.next-slick-vertical .next-slick-arrow.large.inline.next-slick-next{bottom:0}.next-slick.next-slick-vertical .next-slick-arrow.large.outer{left:calc((100% - 96px)/ 2)}.next-slick.next-slick-vertical .next-slick-arrow.large.outer.next-slick-prev{top:-16px}.next-slick.next-slick-vertical .next-slick-arrow.large.outer.next-slick-next{bottom:-16px}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container{height:220px;position:relative;margin:auto}@media (max-width:1219px){.ocms-fusion-1688-pc-cate1688-pc-old-widget .container{width:990px}}@media (min-width:1220px) and (max-width:1419px){.ocms-fusion-1688-pc-cate1688-pc-old-widget .container{width:1190px}}@media (min-width:1420px){.ocms-fusion-1688-pc-cate1688-pc-old-widget .container{width:1390px}}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .background{position:absolute;left:50%;height:100%;display:block}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .background div img{position:relative;border:none}@media (max-width:1219px){.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .background div img{left:-43.8%}}@media (min-width:1220px) and (max-width:1419px){.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .background div img{left:-50%}}@media (min-width:1420px){.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .background div img{left:-50%}}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .shop{position:absolute;top:20px;left:0;height:180px;width:320px;margin-left:10px;background-color:rgba(0,0,0,.4);cursor:pointer;color:#FFF;font-size:12px;z-index:999}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .shop .header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:40px;border-bottom:1px solid rgba(229,229,229,.5);font-size:14px}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .shop .header .title{width:250px;padding:0 12px 0 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .shop .header .power-seller{background:url(//cbu01.alicdn.com/cms/upload/search/icons/icons_old.png) no-repeat 0 0;background-position:-29px -260px;width:18px;height:18px;font-size:0}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .shop .header .credit{background:url(//cbu01.alicdn.com/cms/upload/search/icons/icons_old.png) no-repeat 0 0;background-position:0 0;width:18px;height:18px;margin:0 5px;font-size:0}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .shop .header .period{font-size:12px;width:88px}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .shop .desc{width:288px;height:100px;margin:20px 16px;text-overflow:ellipsis;line-height:20px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .shop .comment{margin:0 16px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;line-height:12px}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .shop .comment .good-rate,.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .shop .comment .repeat-rate{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .shop .comment .rate-container{display:-ms-flexbox;display:flex}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .shop .comment .rate{margin:0 0 0 5px}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .good-icon{width:12px;height:12px;background:url(data:image/png;base64,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) no-repeat center/100%}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .bad-icon{width:12px;height:12px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAqdJREFUSA2dlctrE1EUxjvJ2BgjAbMriCA01DBCzGNhgwsFFwVRK8XuIr427hQ3IlWp7cKN+A+ohUa7kaIu3AgiburCPIwQtAtFUKGKCgExD/LwdyA3TMLcSerA5Zw533e+c86d3BtjZMBTKpW2VyqVOcMwUu12OyJ0/Pf4a36/f9GyrD9uEoYbWCgU9rVarSdw/rKWEF4XPuITmNOsbR6P50QsFnuL7/hoCyDizefzOWyJTs/Qad2uwGSj1Wr1PriVSCSSFG/aceVrCyB+mO6fBgKBXZFI5JdKsFuKhNi+L0xxLB6Pv7Bjyvcop98iPklXOZ248JnqN5w3uJP9+epdW4DEEONvKKKL3YAX0uHaAiQ0WKO6RBVH3NfhqlCP1RYgcQdTDCyA2hbh9qjaXrQFEJ9iLdu4ji6cDMCUI0hQW4CuvoOPY7265A42Dv5DxzF1AJ3dQWCZn+s3OEtOPLA08ZtwTznhEtNOwOF5AL7COiJEp4cGBFuB+9AJl5i2QCdBTurxbDa7p1+gWCzKdTHNIbvXj9nftSdZkRB/xhaEgsHgwXA4XJN455p4hfuT7o8qrpMdNMGIz+c7S+Lecrk8owRqtdoMk1mmaZ5TMZ11LUD3Y/V6/SRiWxH4qES4Rj7h+xuNxqxwVNzJOm6R7DnbMo+wdP0ZP8NWzNsF4FwnnoazG7uKvZFMJj/YOeL3FODD7aSrBchpkp7zARe569f6k+zv/Gekms3mVWJyMDNs27VoNPpVcboF+E3Lvt4FeAfxCtfva0UaxuZyuf3wbrGi5J8nf7Wbx7gXWHVIlyjSLdolDOlILhoXRUs0Jc3AOYB9SdVZ9vnxkFquNDSnITxiHZICIr7O3l12zdokyLe8zUQTUkD+0P2bzB+WXjG9Xm9qWPb/8P4BclEdmmclV+4AAAAASUVORK5CYII=) no-repeat center/100%}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .slider{position:absolute;top:20px;right:0;width:400px}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .slider .offer{margin:0 10px;position:relative;width:180px;height:180px;background-repeat:'no-repeat';background-size:'100%';font-size:12px;color:#666;line-height:180px;cursor:pointer;background-size:contain;background-repeat:no-repeat}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .slider .offer .detail{position:absolute;bottom:0;background-color:rgba(248,248,248,.8);height:28px;width:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:0 8px}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .slider .offer .detail .price{font-size:16px;color:#FF6000}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .slider .offer .detail .small{font-size:12px}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .prev{width:32px;height:32px;position:absolute;top:50%;margin:-16px 0 0 20px;background-image:url(https://img.alicdn.com/tfs/TB16VHHESzqK1RjSZPcXXbTepXa-33-32.png)}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .next{width:32px;height:32px;position:absolute;right:0;top:50%;margin:-16px 20px 0 0;background-image:url(https://img.alicdn.com/tfs/TB1lvMdEG6qK1RjSZFmXXX0PFXa-32-32.png)}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .custom-slide h3{background:#4F74B3;color:#fff;font-size:36px;line-height:100px;margin:0 10px;position:relative;text-align:center;width:180px;height:180px}.ocms-fusion-1688-pc-cate1688-pc-old-widget .container .next-slick-dots.horizontal{bottom:-15px}.ocms-fusion-1688-pc-cate1688-pc-old-widget .ad-icon{position:absolute;top:205px;right:0;color:#999;font-size:12px}.ocms-fusion-1688-pc-cate1688-pc-old-widget .next-slick-list{height:180px}/*@alife/ocms-fusion-1688-pc-brand-pc-gather/1.x version:  1.0.17*/"
      ],
      "dataList": [ // 每个组件获取数据的描述
        {
          "uuid": "5",
          "type": "hsf",
          "value": {...}, 
          "jdataId": null
        }
      ],
      "moduleList": [ // 同构动态组件列表
        {
          "entry": "@alife/ocms-fusion-1688-pc-brand-pc-gather/1.x/index",
          "entryDeps": [
            ...
            "@alife/ocms-fusion-1688-pc-brand-pc-gather/1.x/index.01167551.js"
          ],
        }
      ]
    }
  }
}复制代码


同构渲染服务


当用户访问时,同构渲染服务会返回渲染好的html,从下到上分为3层:纯渲染服务 -> 拼接服务 -> 上层服务,它们是基于Fass实现的,架构图如下:


纯渲染服务


纯渲染服务只做渲染,输入croco的DSL、组件列表和数据列表,就能得到渲染好的html。由于只做渲染,所以该服务可以开放出去给其他团队使用,比如和我们密切合作的广告团队。


拼接服务


获取渲染好的html,接下来就是拼接页面了,核心就是将预取的头尾、js列表、css和渲染好的html填充到原型prototype中,原型prototype本质上是一个art-template。


上层服务


实际上拼接服务返回的内容就可以直接返回给用户了,出于性能、稳定性和扩展性的考虑,我们抽象出了这一层。该服务目前做了兜底和缓存。如果下层拼接服务或者纯渲染服务挂掉了,会将预处理的兜底页面返回给用户;一些业务没有实时性的要求,可以为页面配置不同的缓存策略。除了兜底和缓存,这层还可以扩展其他功能,比如页面AB、页面下线等。


最近看了一下CDN团队开发的边缘Serverless计算环境EdgeRoutine,感觉是非常适合做这些事情的,后期可能会将该服务迁移到EdgeRoutine上。


性能优化


上面我们已经提及了一些优化,主要在预处理阶段,比如同构静态组件的预渲染,原型prototype的预取、css的预取等。此外我们在同构渲染服务那层也做了一定优化,主要在于组件上。


  1. 因为组件资源在cdn上,如果每次渲染都从cdn上拉取,会非常耗时;另外组件从文件变成类也会消耗大量的CPU计算。为此我们对组件进行了3级缓存:内存、本地文件和oss,具体如下:



  1. 第一次访问页面时,由于各级缓存都没有,所以还会走cdn,为此我们做了组件预热。在diamond中配置重要页面的组件,服务器在重启或修改diamond时会将组件提前加载并缓存起来。


  1. 如果一个页面有多个组件,所以组件和数据都是批量并发请求的。


兜底


处于稳定性的考虑,我们做了一定兜底处理,分为组件兜底和页面兜底。


组件兜底


组件渲染需要模块和数据,两者都获取成功时才会在服务器端进行同构渲染;如果有一个获取失败,组件将会到前端进行异步渲染。



页面兜底


页面渲染时,如果出现错误或超时,会返回预处理阶段生成的兜底页面。



案例展示


ok,原理讲了这么多,让我们看一下效果吧。广告pc品专组件,在接入同构渲染服务之前,首屏时间大概需要1.52s,接入同构渲染后首屏变成了0.3s,降低了1.22s。查看地址:链接


图中红框框柱的部分是广告pc品专组件:



接入奇美拉同构渲染服务的结果:




关注下面的标签,发现更多相似文章
评论