php-vue首屏渲染直入直出方案淺析

目前，爲了加快網站手機端網頁首屏渲染速度，提升在網速較慢的國家地區的用戶體驗，提升在谷歌測速網站的評分，同時爲了之後seo需求作準備，須要對網站手機端的各個頁面進行優化。而網站的後臺基於php框架開發，手機站則使用了vue.js做爲了前端框架，所以首屏渲染方案須要同時考慮到先後端php與vue兩個部分以及交互問題。

什麼是「直入直出」

直入直出其實就是指的ssr(server side render)服務器端渲染，由服務器端渲染出靜態頁面，直接返回給客戶端，而後客戶端去激活這些靜態頁面，讓這個頁面變成能夠交互的，而且可以影響到後續的數據變化響應。

方案調研

​ vue首屏優化方案主要有主流的vue ssr(server side render)服務器端渲染和先後端同構等方案。

Vue SSR

vue ssr採用服務器端渲染，前端獲取數據進行激活的形式，這種形式目前適用於先後端分離的項目，而且須要在服務器部署前端機器，優勢是便於作seo需求，頁面加載速度快，缺點是會增長部分服務器開銷。

先後端同構

先後端同構，主要是選擇一種先後端都支持的一種模板語言（例如php-v8js與mustache.php等）進行同構處理的形式，不一樣項目不盡相同。

​ 而結合目前網站的項目結構，採用先後端分離的vue ssr模式以及先後端同構的形式彷佛對網站項目結構不太適用，所以從這兩種模式中總結出最適合最契合網站項目的形式纔是比較合適的。

方案分析

目前網站渲染流程

​ pc端：php處理數據 -> 渲染數據到模板 -> 展現htm到瀏覽器 -> 加載js等數據 -> js更改某些數據或樣式。

​ m手機端：php處理數據 -> 渲染數據到模板 -> 展現htm到瀏覽器(空白) -> 加載js等數據 -> vue.js構建並掛載到dom節點。

指望網站渲染流程

​ m手機端：php處理數據 -> 渲染數據到模板 -> 展現htm到瀏覽器(首屏數據) -> 加載js等數據 -> vue.js構建並掛載到htm（激活）。

相似於先後端同構的思想，咱們須要一箇中間橋接模板去鏈接php與vue作首屏渲染方案，理想中的狀態是由php直接渲染不須要大量交互的結構內容到模板裏，而後客戶端在獲取到html時，能夠直接展現出靜態的不須要交互的頁面內容，此時客戶端再去加載js文件，加載完後直接激活頁面上須要交互的模塊與數據。

所以採用服務器端首次渲染，前端二次渲染的模式，服務器端渲染簡單頁面元素、不須要大量交互的原vue組件以及前端所需的數據這樣的方案彷佛更接近網站目前已有結構所能支持的方案。

固然，以上只是針對於網站項目結構所作的一些設想，針對於不一樣的網站項目結構在不作網站項目重構的前提下應該選擇最適合當前網站的方案。

基於以上設想，在正式採用方案以前，彷佛還應該再去注意下vue渲染的生命週期，說不定能找到一些新的突破口。vue生命週期以下：（vue生命週期詳解）

能夠注意到的是在created和mounted之間彷佛有咱們想要關注的重點：

1. 在created的階段，若是vue實例對象中有template參數選項，則將其做爲模板編譯成render函數。若是沒有template選項，則將外部HTML做爲模板編譯。能夠看到template中的模板優先級要高於outer HTML的優先級。這就意味着咱們彷佛在編譯vue時可使用外部的html進行渲染，與咱們以前的想法不謀而合，咱們能夠在php中進行第一次渲染而後再將html返回給客戶端進行第二次渲染。

2. 在beforeMounted階段，能夠看到此時是給vue實例對象添加$el成員，而且替換掉掛在的DOM元素。由於在以前console中打印的結果能夠看到beforeMount以前el上仍是undefined。這彷佛意味着在js爲正式加載完成以前，咱們能夠在空白頁面上搞點事情，讓首屏頁面不至於爲空白，反正當js加載完畢，el將掛載在根節點上面，彷佛也是可讓體驗有所提高的。

方案可行性

通過以上對vue生命週期的分析，針對網站結構得出兩個彷佛可行的方案，分別是混合式渲染方案（php渲染第一次渲染，vue第二次渲染），首屏替換方案（首屏直接經過html展現，由vue.js加載完成直接替換）

混合式渲染方案

添加編譯器到前端渲染，這裏須要一下注意運行時（runtime）與編譯器（compiler ）的區別與運用，採用前端編譯，即template再也不在webpack打包時生成，而是在前端根據後端已渲染後的模板再次進行二次編譯渲染。如此一來js文件體積將比只採用運行時的版本大30%左右。

這樣處理的方式有利有弊，有利的地方在與能夠加快首屏渲染，減小白屏，便於作手機站seo需求，提高用戶體驗，特別是針對網速較慢的用戶；弊處在於部分組件template將於js代碼產生分離，代碼可讀性將下降，可能增長js體積。所以選用此種方案的組件或模塊須要反覆斟酌，慎重抉擇。可選擇將部分不涉及重要或複雜邏輯的頁面運用此種方案。

一些注意事項

1. vue進行template時對dom中的htm敏感，所以書寫變得稍顯嚴格，如v-if等vue語法，都需用<template v-if>xxx</template>的形式包裹，props參數及emit函數需用橫線鏈接，如:bannerHeight寫爲:banner-height, @acceptUseCookie改寫爲@accepct-use-cookie等。
2. 組件嵌套template寫法如<main><banner></banner></main>的形式,可靈活採用twig模板語法中的include引入功能，extend繼承功能以及block結合的形式進行改寫。
3. 由於首屏渲染的內容可能包含許多組件內的內容，所以須要放開組件裏的template內容到主組件的template內容裏，將組件裏的template寫在後端模板中，如此一來，實則將組件融合到了主組件中，弱化了組件的概念。對於組件生命週期裏的鉤子在主組件採用mixin的形式引入組件，data，created，mounted等鉤子將自動merge到主組件的鉤子中，所以儘可能使子組件中的data中的元素以及method中的函數不與主組件中的產生命名衝突，若是子組件有props參數可刪去這些參數但組件中使用的的props參數需與主組件中的命名保持一致（可註明傳入了哪些參數），便於瞭解這些參數來自主組件。處理子組件與父組件之間的關係時需細心謹慎。
4. 子組件style less文件去掉scoped參數，將less按層級書寫規範。
5. 組件是否參與首屏渲染需仔細考慮，建議將結構簡單沒有複雜交互邏輯的組件進行首屏渲染，如首頁banner與slogan等相對比較主觀的元素採用首屏渲染在體驗上會更好。若某些父組件中的子組件須要先於父組件mounted以完成某些特殊邏輯，則不建議採用此種作法。

首屏替換方案

在js未加載完成前，首屏頁面由後端直接渲染經過html返回，等js加載完成後vue的el直接替換首屏頁面接管前端頁面。