专栏首页技术的专栏php,vue,vue-ssr 三版本页面对比Demo
原创

php,vue,vue-ssr 三版本页面对比Demo

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

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

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

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

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

        对三个页面分别进行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/

▲ 综合参数

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框架的渲染过程。

▲ 加载瀑布流

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

php版本

vue ssr 服务器渲染版本

vue-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,,,可以观察下面的对比视频体验。

>点此观看动态视频<

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue获取当前视图组件对象

    想在console中调试查看vue对象的数据情况,奈何没有入口,全局的vue对象可以挂出来,但是没法定位到具体的视图对象。

    shirishiyue
  • WebPagetest:新手一眼看懂使用教程

    这是一个非常详细且专业的web页面性能分析工具,而且开源的!如果你打不开其官网,或者担心安全问题,你可以自己拿源码搭建这个平台工具。

    shirishiyue
  • The "path" argument must be of type string. Received type undefined

    想了下,应该是 认不出 process.env.VUE_APP_DIR,这个是运行时才有的,eslint可能查不出来,,

    shirishiyue
  • 手把手教 Vue-环境搭建

    1 教程简介 1、阅读对象 本篇教程适合新手阅读,老手直接略过 2、教程难度 初级,本人水平有限,文章内容难免会出现问题,如果有问题欢迎指出,谢谢 3、Demo...

    企鹅号小编
  • 关于骨架屏与首屏渲染

    参考链接: vue-content-loader page-skeleton-webpack-plugin vue-content-loader ...

    Ewall
  • vue -- config.js 配置跨域文件

    1、在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的。

    小蔚
  • VS Code 折腾记 - (10) 你想发布自己捣鼓的snippets到VSCode插件市场!

    em..自认为英文不错和自学能力灰常好的大佬,到这里可以停止阅读了,省的浪费时间!

    CRPER
  • 对于没有编程经验的人,R 语言是否很难掌握?

    R 是统计领域广泛使用的诞生于 1980 年左右的 S 语言的一个分支。R 是属于 GNU 系统的一个自由、免费、源代码开放的软件,它是一个用于统计计算和统计制...

    小莹莹
  • Verizon 发布《 2018 年数据泄露调查报告》:勒索软件已成为最流行的恶意软件

    据外媒报道,美国电信巨头 Verizon 于本周二在其 2018 年数据泄露调查报告 (DBIR)中称,勒索软件攻击事件数量在过去一年中翻了一倍,成为最流行的恶...

    周俊辉
  • 360勒索软件威胁形势报告:中小企业成黑客聚焦目标

    2017年,包含WannaCry、Petya的勒索病毒攻击事件已爆发过多次,这些勒索软件攻击皆是在全球范围内爆发的大规模攻击。勒索软件攻击下,部分企业计算机、服...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券