成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

php，vue，vue-ssr 做出來(lái)的頁(yè)面有什么區(qū)別？

yibinnn / 3092人閱讀

摘要：靜態(tài)頁(yè)面的或者明顯最短，原因是模板幾乎沒(méi)什么內(nèi)容。靜態(tài)頁(yè)面生成的白屏?xí)r間中，大部分是首屏數(shù)據(jù)請(qǐng)求消耗的時(shí)間，，同時(shí)也可以對(duì)比出，服務(wù)器渲染的對(duì)首屏?xí)r間的確有很明顯的效果。

歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~

本文由shirishiyue發(fā)表于云+社區(qū)專欄

目前我這邊的web頁(yè)面，都是采用php+smarty模板生成的，是一種比較早期的開(kāi)發(fā)模式。好處是沒(méi)有現(xiàn)階段常用的前后端分離出現(xiàn)的首屏問(wèn)題，因?yàn)槠浔旧砭褪欠?wù)器渲染，壞處是代碼分離不好做，公用化及組件化不好做。這里涉及前后端分離相關(guān)問(wèn)題，老生常談，這里暫不討論。

? 近期，在做一些前端分離的嘗試。采用國(guó)內(nèi)非常流行的的vue框架，選這個(gè)框架而不是react的原因主要是vue的mvvm保留html書(shū)寫慣性，對(duì)于html里寫代碼多的人來(lái)說(shuō)更容易入手。而且流行框架vue也經(jīng)過(guò)了極大量的測(cè)試驗(yàn)證，參考資料充實(shí)詳盡，可靠性和易用性都滿足條件，沒(méi)有理由不嘗試一下。

? 總的來(lái)說(shuō)，做了一個(gè)如下小應(yīng)用demo，長(zhǎng)下面這樣，三個(gè)簡(jiǎn)單頁(yè)面，分頁(yè)查看所有王者英雄，或者所有裝備。分別采用 php+smarty，vue-cli，vue+ssr，三種方式進(jìn)行開(kāi)發(fā)，完了再對(duì)結(jié)果做一下對(duì)比。

? 三個(gè)版本的體驗(yàn)入口如下（盡量用手機(jī)瀏覽器掃描，微信對(duì)ip域名有特殊處理），

? 三個(gè)版本并沒(méi)有嚴(yán)格做相同環(huán)境處理，所以下面的對(duì)比分析僅作為直觀上的對(duì)比了解，并不適用于詳細(xì)性能上的嚴(yán)格對(duì)比額。

? 對(duì)三個(gè)頁(yè)面分別進(jìn)行webpage test，測(cè)試結(jié)果如下，

▲ 詳細(xì)結(jié)果

? php版：

https://www.webpagetest.org/r...

? vue ssr 服務(wù)器渲染版：

https://www.webpagetest.org/r...

? vue-cli 靜態(tài)版：

https://www.webpagetest.org/r...

▲ 綜合參數(shù)

1、頁(yè)面加載時(shí)間。理所當(dāng)然是純靜態(tài)的vue-cli最快。vue ssr 和 php 版差不多（忽略上面的php版，因?yàn)閜hp版有一些額外資源要加載）。

2、首字節(jié)時(shí)間。靜態(tài)的最快。若扣除dns時(shí)間，其實(shí)php和vue-ssr版差不多。（注：php版和vue ssr版不是部署在同一臺(tái)機(jī)器上，php版機(jī)器性能要強(qiáng)一些，多核，vue-ssr版機(jī)器比較弱單cpu單核）

3、渲染時(shí)間和頁(yè)面呈現(xiàn)熟讀指數(shù)，vue ssr版比php版本稍微慢一點(diǎn)。這是因?yàn)?，php的html到頁(yè)面后直接就呈現(xiàn)了，而vue ssr到client后，有一個(gè)vue框架的渲染過(guò)程。

▲ 加載瀑布流

? 從加載流的角度上看一下三者的區(qū)別，

php版本

vue ssr 服務(wù)器渲染版本

vue-cli靜態(tài)版本

? 從瀑布流上可以看出很多三種頁(yè)面執(zhí)行方式的區(qū)別，列舉一部分如下：

1、php 版以及 vue-ssr 版 有較長(zhǎng)的服務(wù)器處理時(shí)間，，，對(duì)應(yīng)的首字節(jié)時(shí)間明顯高于沒(méi)有服務(wù)器處理的vue-cli靜態(tài)頁(yè)面。

2、由于服務(wù)器版本的php或者vue-ssr的首屏數(shù)據(jù)都已經(jīng)生成了，所以頁(yè)面不會(huì)再次請(qǐng)求接口，少了數(shù)據(jù)的請(qǐng)求過(guò)程。而vue-cli版有一個(gè)較長(zhǎng)的數(shù)據(jù)請(qǐng)求過(guò)程。

3、vue-cli靜態(tài)頁(yè)面的dom content time 或者 document complete time 明顯最短，原因是模板html幾乎沒(méi)什么內(nèi)容。

4、webpack打包拆離出來(lái)的獨(dú)立js或者css文件，其實(shí)在同一域名下，由于瀏覽器同一域名可以并行6個(gè)tcp，以及http的keep-alive性質(zhì)，其實(shí)總的下載時(shí)間不多。對(duì)比看，跟阻塞的dns時(shí)間差不多。

5、三種頁(yè)面 Start Renderer Time 分別是 1.2s，1.3s，2.0s。 vue-cli靜態(tài)頁(yè)面生成的白屏?xí)r間中，大部分是首屏數(shù)據(jù)請(qǐng)求消耗的時(shí)間，，同時(shí)也可以對(duì)比出，服務(wù)器渲染的對(duì)首屏?xí)r間的確有很明顯的效果。

▲ 直觀體驗(yàn)

? 時(shí)間，，平均速度指數(shù)Speed Index，分別是1.2，，，1.3，，，2.0s，，，可以觀察下面的對(duì)比視頻體驗(yàn)。

? >點(diǎn)此觀看動(dòng)態(tài)視頻<

相關(guān)閱讀
【每日課程推薦】機(jī)器學(xué)習(xí)實(shí)戰(zhàn)！快速入門在線廣告業(yè)務(wù)及CTR相應(yīng)知識(shí)

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布，更多原文請(qǐng)點(diǎn)擊

搜索關(guān)注公眾號(hào)「云加社區(qū)」，第一時(shí)間獲取技術(shù)干貨，關(guān)注后回復(fù)1024 送你一份技術(shù)課程大禮包！

海量技術(shù)實(shí)踐經(jīng)驗(yàn)，盡在云加社區(qū)！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53271.html

相關(guān)文章

  • php，vue，vue-ssr 做出來(lái)的頁(yè)面有什么區(qū)別？

    摘要：靜態(tài)頁(yè)面的或者明顯最短，原因是模板幾乎沒(méi)什么內(nèi)容。靜態(tài)頁(yè)面生成的白屏?xí)r間中，大部分是首屏數(shù)據(jù)請(qǐng)求消耗的時(shí)間，，同時(shí)也可以對(duì)比出，服務(wù)器渲染的對(duì)首屏?xí)r間的確有很明顯的效果。歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~ 本文由shirishiyue發(fā)表于云+社區(qū)專欄 目前我這邊的web頁(yè)面，都是采用php+smarty模板生成的，是一種比較早期的開(kāi)發(fā)模式。好處是沒(méi)有現(xiàn)階段常用的...

    vpants 評(píng)論0 收藏0

  • 從零開(kāi)始搭建一個(gè)vue-ssr（上）

    摘要：從零開(kāi)始搭建一個(gè)背景是什么全拼是，服務(wù)端渲染。大家不妨可以打開(kāi)一些頁(yè)面或者一些公司的網(wǎng)站，查看源代碼，你會(huì)發(fā)現(xiàn)，也是有這個(gè)標(biāo)記。這時(shí)候，我們發(fā)現(xiàn)頁(yè)面的路由切換生效了，并且不同頁(yè)面的源代碼也不一樣了。從零開(kāi)始搭建一個(gè)下項(xiàng)目源碼 從零開(kāi)始搭建一個(gè)vue-ssr 背景 What?SSR是什么？ SSR全拼是Server-Side Rendering，服務(wù)端渲染。 所謂服務(wù)端渲染，指的是把...

    Winer 評(píng)論0 收藏0

  • 從零開(kāi)始搭建一個(gè)vue-ssr（下）

    摘要：開(kāi)始改建補(bǔ)充安裝依賴與上一次不同，這次我們基于進(jìn)行改建，已經(jīng)有了很多依賴庫(kù)了，但我們?nèi)涡枰a(bǔ)充一個(gè)核心修改客戶端的配置修改文件，添加插件添加了這個(gè)配置以后，重新啟動(dòng)項(xiàng)目通過(guò)地址就可以訪問(wèn)到，頁(yè)面中出現(xiàn)的內(nèi)容就是所需要的。 從零開(kāi)始搭建一個(gè)vue-ssr 前言 上次我們已經(jīng)實(shí)現(xiàn)了從零開(kāi)始，搭建一個(gè)簡(jiǎn)單的vue-ssr的demo：從零開(kāi)始搭建一個(gè)vue-ssr（上）。那么這次呢，我們基于v...

    Jochen 評(píng)論0 收藏0

  • vue服務(wù)端渲染demo將vue-cli生成的項(xiàng)目轉(zhuǎn)為ssr

    摘要：無(wú)需使用服務(wù)器實(shí)時(shí)動(dòng)態(tài)編譯，而是使用預(yù)渲染方式，在構(gòu)建時(shí)簡(jiǎn)單地生成針對(duì)特定路由的靜態(tài)文件。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁(yè)面應(yīng)用程序不同，服務(wù)器渲染應(yīng)用程序，需要處于運(yùn)行環(huán)境。更多的服務(wù)器端負(fù)載。 目錄結(jié)構(gòu) -no-ssr-demo 未做ssr之前的項(xiàng)目代碼用于對(duì)比 -vuecli2ssr 將vuecli生成的項(xiàng)目轉(zhuǎn)為ssr -prerender-demo 使用prer...

    whinc 評(píng)論0 收藏0

  • 每個(gè)前端猿都有一個(gè)開(kāi)發(fā)屬于自己技術(shù)博客的心

    摘要：總算是今天成功把自己的孩子托付到阿里云的服務(wù)器上面了。中間還遇到很多很多坑最后看這自己所部署的三個(gè)網(wǎng)站安靜的躺在自己租的阿里云上。 一把桌子，一臺(tái)電腦，一瓶紅牛，一包紙巾，從白天到黑夜。歷經(jīng)一個(gè)多月的時(shí)間，從零到構(gòu)思到設(shè)計(jì)，從設(shè)計(jì)到vue-ssr 的框架設(shè)計(jì)，然后再?gòu)那岸说臉I(yè)務(wù)邏輯代碼的實(shí)現(xiàn)，從 后臺(tái)nodejs 的 koa2框架到數(shù)據(jù)庫(kù)的設(shè)計(jì)到后端的業(yè)務(wù)邏輯的代碼實(shí)現(xiàn)，從購(gòu)買阿里云服...

    wslongchen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<