??斗地主捕鱼电竞提现秒到 广告位招租 - 15元/月全站展示
??支付宝搜索579087183领大额红包 ??伍彩集团官网直营彩票
??好待遇→招代理 ??伍彩集团官网直营彩票
??络茄网 广告位招租 - 15元/月全站展示
php,vue,vue-*** 做出来的页面有什么区别?

转载   云加社区   2018-11-15   浏览量:12


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

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

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

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

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

img

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

img

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

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

▲ 详细结果

? php版:

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

? vue *** 服务器渲染版:

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

? vue-cli 静态版:

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

▲ 综合参数

img

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

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

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

▲ 加载瀑布流

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

imgphp版本

imgvue *** 服务器渲染版本

imgvue-cli静态版本

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

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

2、由于服务器版本的php或者vue-***的首屏数据都已经生成了,所以页面不会再次请求接口,少了数据的请求过程。而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 送你一份技术课程大礼包!

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

转载自://blog.51cto.com/13957478/2317177

招聘 不方便扫码就复制添加关注:程序员招聘谷,微信号:jobs1024



phpstorm PHP language level无法选择
phpstormPHP7新特性一直提示红色波浪线,应该是没有设置PHP版本,但是打开PHPstorm---preference--lannguage&frameworks--PHP,发现PHPlanguagelevel无法选择PHP7.2,查看旁边的提示信息说是同步了composer的原因,只需到PHPstorm---preference--lannguage&frameworks
Eclipse 解决PHP函数代码不能自动提示问题
检查文件&nbsp;.buildpath&lt;?xml&nbsp;version=&quot;1.0&quot;&nbsp;encoding=&quot;UTF-8&quot;?&gt;&lt;buildpath&gt;&nbsp;&nbsp;&lt;buildpathentry&nbsp;kind=&quot;src&quot;&nbsp;path=&quot;mysourcepath&q
PHP之Trait特性
php特性Trait
PHP魔术方法__call
php__call魔术方法
javascript、php数组对象互转类
一、javascript:代码:/*@desc:数组和对象互转类@paramdata待转换的数据*/functionarrobj(data){this.data=data/*@desc:对象转数组*/this.objtoarr=function(){vardata=this.datavararr=newArray()for(variindata){for(varjindata[i]){arr[j]
PHP 大小写敏感实例讲解
PHP大小写敏感实例讲解。在PHP中,所有用户定义的函数、类和关键词(例如if、else、echo等等)都对大小写不敏感。在下面的例子中,所有这三条echo语句都是合法的(等价):
PHP的注释语法解析和实例讲解
PHP的注释语法解析和实例讲解。PHP中的注释,PHP代码中的注释不会被作为程序来读取和执行。它唯一的作用是供代码编辑者阅读。注释用于:
基础 PHP 语法示例代码讲解
基础PHP语法示例代码讲解。PHP脚本可放置于文档中的任何位置。PHP脚本以结尾: