vue页面渲染轮播
网站性能优化
我是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真棒刷
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光滑轮播 。 长话短说,我最终通过移植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。 在此过程中,我想尽我所能。
除了该项目之外,我还在考虑另外两篇文章,以分享我在上一个项目中学到的知识。 也许由于人口差异,我觉得React生态系统比Vue.js生态系统更加通用和成熟。 就像vue-slick-carousel一样,我认为值得分享“如何为Vue.js移植react组件”。 还有我在上一个项目中遇到的“ Vue.js SSR的难处”。
翻译自: https://hackernoon.com/server-side-rendering-carousels-in-vuejs-blazing-fast-loading-bt3e360u
vue页面渲染轮播