前面有篇文章已經寫了一遍, 就是在 respo 站點上有的優化方案,
這種方案當中, 頁面的靜態內容是提前編譯好的, 但同時前端也做渲染,
大致的流程是
這個做法其實近似於單頁面技術流行之前, jquery 加模板引擎的做法,
服務端首先會用模板引擎渲染好帶資料的頁面, 前端再動態更新,
但單純用模板引擎做渲染存在的一些侷限性:
所以更好的辦法是既是前端渲染單頁面, 又能原樣拿到後端執行,
也就是最近出現頻率更高的服務端渲染, 簡稱 ssr,
然而 ssr 實現起來需要處理一些配套的技術細節, 否則麻煩挺多:
編譯階段渲染, 因而不存在伺服器開銷, 暫時也不會涉及資料請求的麻煩
前端開發的方案更加一致, 也就是目前熟悉的單頁面應用的手法
同時相比前面最為理想化的 ssr 的效果存在一些差距:
如果後面需要再填充資料以應對 seo, 遷移方案仍然不樂觀,
從單純前端渲染, 到完全 ssr, 這之間有不少的台階需要邁過,
而且即便現在基於已有的方案來講, 還是有一些不成熟的地方:
當然, 我還是覺得基於目前大量純前端渲染的單頁面, 這是乙個加分項,
只要框架層面對 ssr api 做了實現, 用不大的成本就能完成這個優化,
然後對首屏載入的效果做一點點提公升.
react 和 respo 我前面已經做了演示, 感興趣往前面翻一翻,
這邊加上前面幾天用 vue 2 仿製的乙個 demo, 幾乎同樣的功能:
demo
repo
大致有一些要點, 類似的專案可以參考:
最主要的因素還是框架本身對 ssr 的支援盡量做到簡單,
現在 react, respo, vue 2 的 virtual dom 都較好地支援 ssr 渲染了,
至於 angular, 前面收集到的資料不夠, 我等等看別人的進展.
我用 vue 2 試驗的例子, 直接放在了 github 上, 打包方式有註明.
中間為了載入**的方便, 我直接用 js 來寫 vue render 方法,
實際開發當中幾乎沒人這麼做, 但是對於 node 環境這樣更友好,
不過大概還是 vue 早起那種 template 的寫法更加實在一點...
核心的渲染**是 gulpfile 當中的這一段, 編譯路由, 生成 html 檔案:
# this is the initial address
entries = [
'index.html'
'page/a.html'
'page/b.html'
]entries.foreach (address) ->
router: router
store: store
components:
container: container
render: (h) ->
h 'container'
router.push address
if err?
throw err
else
htmlpath = path.join 'build', address
console.log 'render entry:', htmlpath
mkpath.sync path.dirname(htmlpath)
fs.writefilesync htmlpath, html
如果有 ssr 相關的想法, 可以一起交流下, 我這邊方案還比較粗淺.
頁面渲染及優化
構建css樹 dom樹 和css樹 合併為render樹 布局 繪製paint 重排reflow width height padding margin display border width border min height top bottom left right position flo...
前端頁面優化
語義化 與seo相關 可讀性 利於維護 拓展性頁面載入速度 檔案大小，請求次數，載入方式，效能 語義化影響seo 搜尋引擎優化 以及 自然排名 語義化標籤 h1 h6 p ul li ol dl dt dd a img table small strong 頁面主要內容，乙個頁面只能使用一次。如果是...
前端頁面優化
頁面級優化 一 減少http請求 1 合理設定http 快取 變化的資源可以直接通過http header 中的expires 設定乙個很長的過期頭 變化不頻繁而又可能會變的資源可以使用last modifed 來做請求驗證。在 根目錄 htaccess 中加入以下 expiresactive on...