成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

yibinnn / 3135人閱讀

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

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

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

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

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

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

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

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

? 對三個(gè)頁面分別進(jìn)行webpage test，測試結(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、頁面加載時(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í)間和頁面呈現(xiàn)熟讀指數(shù)，vue ssr版比php版本稍微慢一點(diǎn)。這是因?yàn)椋琾hp的html到頁面后直接就呈現(xiàn)了，而vue ssr到client后，有一個(gè)vue框架的渲染過程。

▲ 加載瀑布流

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

php版本

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

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

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

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

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

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

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

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

▲ 直觀體驗(yàn)

? 時(shí)間，，平均速度指數(shù)Speed Index，分別是1.2，，，1.3，，，2.0s，，，可以觀察下面的對比視頻體驗(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ā)布，更多原文請點(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/53271.html

相關(guān)文章

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

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

    vpants 評論0 收藏0

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

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

    Winer 評論0 收藏0

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

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

    Jochen 評論0 收藏0

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

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

    whinc 評論0 收藏0

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

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

    wslongchen 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<