文档章节

php,vue,vue-ssr 做出来的页面有什么区别?

腾讯云加社区
 腾讯云加社区
发布于 11/15 11:23
字数 1237
阅读 32
收藏 0

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~

本文由shirishiyue发表于云+社区专栏

目前我这边的web页面,都是采用php+smarty模板生成的,是一种比较早期的开发模式。好处是没有现阶段常用的前后端分离出现的首屏问题,因为其本身就是服务器渲染,坏处是代码分离不好做,公用化及组件化不好做。这里涉及前后端分离相关问题,老生常谈,这里暂不讨论。

​ 近期,在做一些前端分离的尝试。采用国内非常流行的的vue框架,选这个框架而不是react的原因主要是vue的mvvm保留html书写惯性,对于html里写代码多的人来说更容易入手。而且流行框架vue也经过了极大量的测试验证,参考资料充实详尽,可靠性和易用性都满足条件,没有理由不尝试一下。

​ 总的来说,做了一个如下小应用demo,长下面这样,三个简单页面,分页查看所有王者英雄,或者所有装备。分别采用 php+smarty,vue-cli,vue+ssr,三种方式进行开发,完了再对结果做一下对比。

img

​ 三个版本的体验入口如下*(尽量用手机浏览器扫描,微信对ip域名有特殊处理),*

img

​ 三个版本并没有严格做相同环境处理,所以下面的对比分析仅作为直观上的对比了解,并不适用于详细性能上的严格对比额。

​ 对三个页面分别进行webpage test,测试结果如下,

▲ 详细结果

​ php版:

https://www.webpagetest.org/result/181108_2D_20fc46a11de58d60dde7421b6d3be954/

​ vue ssr 服务器渲染版:

https://www.webpagetest.org/result/181108_XY_92f54bd829b1b6f02634774294491736/

​ vue-cli 静态版:

https://www.webpagetest.org/result/181108_4G_011f6c33da1e7f199f8a1ecd03ef0728/

▲ 综合参数

img

1、页面加载时间。理所当然是纯静态的vue-cli最快。vue ssr 和 php 版差不多(忽略上面的php版,因为php版有一些额外资源要加载)。

2、首字节时间。静态的最快。若扣除dns时间,其实php和vue-ssr版差不多。(注:php版和vue ssr版不是部署在同一台机器上,php版机器性能要强一些,多核,vue-ssr版机器比较弱单cpu单核)

3、渲染时间和页面呈现熟读指数,vue ssr版比php版本稍微慢一点。这是因为,php的html到页面后直接就呈现了,而vue ssr到client后,有一个vue框架的渲染过程。

▲ 加载瀑布流

​ 从加载流的角度上看一下三者的区别,

imgphp版本

imgvue ssr 服务器渲染版本

imgvue-cli静态版本

​ 从瀑布流上可以看出很多三种页面执行方式的区别,列举一部分如下:

1、php 版以及 vue-ssr 版 有较长的服务器处理时间,,,对应的首字节时间明显高于没有服务器处理的vue-cli静态页面。

2、由于服务器版本的php或者vue-ssr的首屏数据都已经生成了,所以页面不会再次请求接口,少了数据的请求过程。而vue-cli版有一个较长的数据请求过程。

3、vue-cli静态页面的dom content time 或者 document complete time 明显最短,原因是模板html几乎没什么内容。

4、webpack打包拆离出来的独立js或者css文件,其实在同一域名下,由于浏览器同一域名可以并行6个tcp,以及http的keep-alive性质,其实总的下载时间不多。对比看,跟阻塞的dns时间差不多。

5、三种页面 Start Renderer Time 分别是 1.2s,1.3s,2.0s。 vue-cli静态页面生成的白屏时间中,大部分是首屏数据请求消耗的时间,,同时也可以对比出,服务器渲染的对首屏时间的确有很明显的效果。

▲ 直观体验

​ 时间,,平均速度指数Speed Index,分别是1.2,,,1.3,,,2.0s,,,可以观察下面的对比视频体验。

​ >点此观看动态视频<

img

相关阅读 【每日课程推荐】机器学习实战!快速入门在线广告业务及CTR相应知识

此文已由作者授权腾讯云+社区发布,更多原文请点击

搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!

海量技术实践经验,尽在云加社区

© 著作权归作者所有

共有 人打赏支持
腾讯云加社区
粉丝 90
博文 147
码字总数 369556
作品 0
深圳
私信 提问
通过vue-cli3构建一个SSR应用程序

1、前沿 1.1、什么是SSR SSR(服务端渲染)顾名思义就是将页面在服务端渲染完成后在客户端直接展示。 1.2、客户端渲染与服务端渲染的区别 传统的SPA模式 即客户端渲染的模式 Vue.js构建的应用...

lentoo
09/12
0
0
Vue.js项目中管理每个页面的头部标签的方法 | Dunizb(张兵)的博客 | 这世间唯有梦想和好姑娘不可辜负

在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 ,我们只能去修改模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 呢?下面介绍两种方法。 使用router.meta 在路...

06/27
0
0
Vue.js项目中管理每个页面的头部标签的方法

在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 ,我们只能去修改模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 呢?下面介绍两种方法。 使用router.meta 在路...

Dunizb
06/26
0
0
Vue-SSR系列(一)vue2.0+node+express+webpack实现vue-ssr服务端渲染的单页应用小demo

一、什么是服务器端渲染(SSR)? 大致就是在服务端拼接好用户请求的静态页面,直接返回给客户端,客户端激活这些静态页面,让他们变成动态的,并且能够响应后续的数据变化。 二、为什么使用服...

范小饭_
08/28
0
0
为我们的 Vue SSR程序添加热更新功能

前沿 通过上一篇文章 通过vue-cli3构建一个SSR应用程序 我们知道了什么是SSR,以及如何通过vue-cli3构建一个SSR应用程序。但是最后遗留了一些问题没有处理,就是没有添加开发时的热更新功能,...

lentoo
10/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

为什么只有你每次提交代码,log里面会出现merge

http://www.cnblogs.com/Sinte-Beuve/p/9195018.html

踏破铁鞋无觅处
刚刚
0
0
如何学习大数据:spark发布程序

一、对于spark程序只是用于默认的spark包的情况 直接点击pcakage 将程序进行在linux当中进行发布 客户端模式:测试 spark-submit --class com.keduox.App \ --master yarn \ --deploy-mode ...

架构师springboot
刚刚
0
0
oracle job(定时任务)

创建 定时任务 job declare job number;BEGIN DBMS_JOB.SUBMIT( JOB => job, -- job任务的唯一标识(自动生成) WHAT => 'INSERT into TEXTL (id) VALUES(TEXT......

骑羊放狼灬
4分钟前
0
0
Spring声明式事务在抛出异常时不回滚(RollBack)

Spring声明式事务默认只在RuntimeException时Rollback(回滚),不当的try catch会导致事务不回滚。 spring事务默认运行时异常回滚,RuntimeException 配置时添加异常回滚 rollback-for="Th...

叶落花开
5分钟前
0
0
赋能时空云计算 阿里云数据库时空引擎Ganos上线

随着移动互联网、位置感知技术、对地观测技术的快速发展,时空信息已从传统GIS行业渗透到大众应用及各行各业。从静态POI(兴趣点)到APP位置信息,从导航电子地图到车辆行驶轨迹,从卫星影像...

阿里云云栖社区
7分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部