网站性能优化
我是GSShop中的CoE成员之一。 我们公司投资初创公司，我帮助他们成长。 上次，我通过提高越南网站的速度来帮助一家越南公司。 凉！ 了解 网络性能如何影响您的业务 。 本文来自探索Vue.js轮播的SSR支持的过程 。 最后制作了vue-slick-carousel 。
带有微调器的CSR（客户端渲染）
该站点是使用Vue.js制作的SPA（单页应用程序）。 像React一样，Vue.js是现代Web开发中著名的技术堆栈之一。 尽管SPA有许多优点，但由于CSR（客户端渲染） ，它具有加载时间长的缺点。 较长的加载时间是因为浏览器在评估javascript之前才知道在屏幕上呈现什么内容。 因此，它通常使微调框说：“请不要离开。我们正在努力。” 我希望魔术圈能够奏效，但事实并非如此。
带占位符的SSR（服务器端渲染）
SSR（服务器端渲染）允许服务器渲染HTML，以便浏览器可以快速显示访问者想要的内容而无需评估javascript。 Nuxt.js （类似于React的Next.js ）提供了包括SSR在内的最佳实践，以帮助我们构建快速的网站。
我们已经使用Nuxt.js启用了SSR，从而摆脱了微调器并快速呈现站点的内容。 SSR使浏览器可以快速呈现，而不必等待评估javascript。 但是此站点由许多轮播组件组成。 轮播组件不支持SSR，因此无法快速呈现促销等重要内容。 我们移除了微调器，立即渲染了内容，但是不得不在转盘上放置很多占位符。 与以前一样，轮播的内容在评估javascript之后很长时间才呈现。
通缉：服务器端渲染Vue.js轮播
尽管它看起来比以前好很多，但访客并没有看到占位符。 为了真正改善UX，我们需要具有SSR支持的轮播。
排名前5位的Vue.js轮播
为了查看哪种轮播最适合SSR，我在GitHub上测试了排名前5位的轮播（ vue-carousel-3d除外，后者具有3d渲染专业）。
- vue-awesome-swiper🏆 @ vuejs的 Swiper组件
- vue- carousel适用于Vue.js的灵活，响应式，触摸友好型轮播
- vue简洁滑块 vue简洁滑块，一个简单的vue滑动组件
- vue-agile Vue.js的轮播组件
- vue-slick用于滑动传送带的Vue组件
范例设定
我制备了使用Nuxt.js（圆盘传送带的SSR例子VUE-真棒-刷卡 ， VUE敏捷 ， VUE传送带 ， VUE-简洁滑块 ， VUE-光滑 ， VUE-光滑传送带 ）。 另外，您可以在codeandbox（ vue-awesome-swiper ， vue-agile ， vue-carousel ， vue-concise-slider ， vue- slick ， vue -slick -carousel ）上运行它们。
例子：
- 在带有通用（SSR）模式的Nuxt.js之上创建。
- 通过遵循组件示例来编写。
- 有图像项，因为我们在现实生活中可能会有一个或多个。
- 具有相同的样式。 没有点，没有箭头。
配置文件配置：
- 为生产而构建并运行本地服务器以最大程度地减少网络干扰。
- 具有3G快速网络+ 4倍CPU速度减慢的Chrome性能配置文件。
Vue敏捷 ， Vue轮播 ， Vue简洁滑块 ， Vue光滑
这些轮播不支持SSR。 尝试在服务器上渲染这些轮播会抛出错误。 在大多数情况下，轮播会尝试通过window对象访问浏览器来操纵DOM元素 。 但是，出现此问题的原因在于服务器上不存在该问题。
为避免错误，轮播必须在仅客户端模式下注册，并由仅客户端（no-ssr）组件包装。 这是演示（ vue-agile ， vue-carousel ， vue-concise-slider ， vue- slick）和codeandboxes（ vue-agile ， vue-carousel ， vue-concise-slider ， vue-slick ）
组件模板
< div class = "carousel-wrapper" >
< client-only >
< agile :options = "options" >
< div v-for = "i in 5" :key = "i" class = "img-wrapper" >
< img :src = "`./$ {i} -200x100.jpg`" />
</ div >
</ agile >
</ client-only >
</ div >轮播组件仅由客户端包装，以避免错误。
服务器渲染结果
< div class = "carousel-wrapper" >
< client-only >
< agile :options = "options" >
< div v-for = "i in 5" :key = "i" class = "img-wrapper" >
< img :src = "`./${i}-200x100.jpg`" />
</ div >
</ agile >
</ client-only >
</ div >服务器仅在客户端内部呈现空白。 浏览器在评估必要的javascript之后将呈现轮播。
绩效概况
收到服务器的响应后，浏览器必须评估javascript以绘制轮播。 轮播儿童中包含的图像之后只能下载和绘制。
酷酷的刷牙
vue-awesome-swiper是最流行的Vue.js轮播组件。 vue-awesome-swiper提供了一种特殊的服务器渲染方式 。 您将渲染的DOM结构手动写入组件模板，然后浏览器运行custom指令再次渲染。 因此，服务器仅呈现您在组件模板中编写的内容，而无需评估轮播脚本。 这意味着SSR结果不考虑传递给轮播的任何选项。 以下是带有slidesPerView: 3真棒滑动slidesPerView: 3选项。 这是演示项目和codeandbox 。
组件模板
< div class = "carousel-wrapper" >
< div v-swiper:mySwiper= "options" >
< div class = "swiper-wrapper" >
< div v- for = "i in 5" :key= "i" class = "img-wrapper swiper-slide" >
<img :src= "`./${i}-200x100.jpg`" />
</ div >
</ div >
</ div >
</ div >自定义指令v-swiper适用于浏览器，服务器渲染器不对其进行评估。
服务器渲染结果
< div class = "carousel-wrapper" >
< div v-swiper:mySwiper = "options" >
< div class = "swiper-wrapper" >
< div v-for = "i in 5" :key = "i" class = "img-wrapper swiper-slide" >
< img :src = "`./${i}-200x100.jpg`" />
</ div >
</ div >
</ div >
</ div >服务器按原样呈现模板。 浏览器显示了其中包含一张幻灯片的默认vue-awesome-swiper。 浏览器评估了组件指令之后，它会为给定的选项更新轮播。
绩效概况
浏览器可以在早期下载和绘制图像，因为第一个HTML响应包含图像。 一旦浏览器评估了脚本，它便可以使用图像渲染轮播。 但是，似乎轮播比其他轮播需要更多的时间。 这是因为脚本较重。 不仅下载，而且评估javascript都需要更长的时间。
编写SSR支持轮播： vue-slick-carousel
好。 我测试了最受欢迎的轮播。 我还环顾了其他旋转木马。 但是所有人似乎都没有用。 而且我在UI框架中排除了轮播，因为轮播不能提供我们所需的丰富功能。
这里是。 由于这个原因，我制作了Vue-Slick-Carousel 。 长话短说，我最终通过移植react- slick来编写vue-slick-carousel。 我通过将vue-slick-carousel的vue-server-renderer的结果与react-slick的react-dom服务器的结果进行匹配来进行测试。 我谨记，渲染结果适用于每种轮播设置。 这是示例和codeandbox 。
组件模板
< div class = "carousel-wrapper" >
< VueSlickCarousel v-bind = "slickOptions" >
< div v-for = "i in 5" :key = "i" class = "img-wrapper" >
< img :src = "`./$ {i} -200x100.jpg`" />
</ div >
</ VueSlickCarousel >
</ div >vue-slick-carousel在服务器上效果很好。 因此，您可以使用通常的方式编写模板，而无需仅客户端标签。
服务器渲染结果
< div class = "carousel-wrapper" >
< div dir = "ltr" class = "slick-slider slick-initialized" data-v-6bed67a2 >
< div class = "slick-list" data-v-6bed67a2 >
< div class = "slick-track" style = "width:433.33333333333337%;left:-100%;" data-v-4dc0f449 data-v-6bed67a2 >
< div tabIndex = "-1" data-index = "-3" aria-hidden = "true" class = "slick-slide slick-cloned" style = "width:7.6923076923076925%;" data-v-4dc0f449 >
< div data-v-4dc0f449 >
< div tabIndex = "-1" class = "img-wrapper" style = "width:100%;display:inline-block;" data-v-4dc0f449 > < img src = "./3-200x100.jpg" data-v-4dc0f449 > </ div >
</ div >
</ div >
<!-- ... -->
< div tabIndex = "-1" data-index = "9" aria-hidden = "true" class = "slick-slide slick-cloned" style = "width:7.6923076923076925%;" data-v-4dc0f449 >
< div data-v-4dc0f449 >
< div tabIndex = "-1" class = "img-wrapper" style = "width:100%;display:inline-block;" data-v-4dc0f449 > < img src = "./5-200x100.jpg" data-v-4dc0f449 > </ div >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >服务器完全制作DOM元素，并将其发送到浏览器。 浏览器可以在屏幕上呈现而不评估任何JavaScript。
绩效概况
浏览器在第一个HTML响应后立即呈现轮播。 由于轮播的渲染速度很快，因此也可以快速开始下载图像。
毫无疑问，vue-slick-carousel可以最快地显示内容并准备所需的图像资源。 实际站点包含的脚本要繁重得多，而这种性能差距将更加明显。
组件支持完成了SSR
该站点使用的所有组件都必须支持该组件，服务器才能完全渲染。 因此，该网站可以快速交付访问者想要的东西。 否则，在很多情况下，由于HTML越重，在没有组件支持的情况下进行尝试会使站点变得更慢。 组件支持完成了服务器端渲染。
我的上一个项目有同样的问题。 为了更快地向用户显示内容，我们启用了SSR，但这是不可能的，因为没有Vue.js轮播支持。 服务器现在能够使用vue-slick-carousel完全呈现内容，从而可以更快地将内容传递给访问者。
下一步是什么？
自从我开始执行该项目以提高性能以来，我一直专注于目标。 Vue-slick-carousel本身是一个只有几个月才成立的新项目。 我想使其稳定。 欢迎每期和公关。 您的帮助可以使该项目成熟。 最后，谢谢您，反应出色的贡献者。 在此过程中，我想尽我所能。
除了该项目之外，我还在考虑另外两篇文章，以分享我在上一个项目中学到的知识。 也许由于人口差异，我觉得React生态系统比Vue.js生态系统更加通用和成熟。 与vue-slick-carousel的情况一样，我认为值得分享“如何为Vue.js移植react组件”。 还有我在上一个项目中遇到的“ Vue.js SSR的难处”。
From: https://hackernoon.com/server-side-rendering-carousels-in-vuejs-blazing-fast-loading-bt3e360u
1111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
