国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[聊一聊系列]聊一聊前端模板與渲染那些事兒

Yangder / 2545人閱讀

摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼作為現(xiàn)代應(yīng)用，的大量使用，使得前端工程師們?nèi)粘５拈_發(fā)少不了拼裝模板，渲染模板。我們今天就來聊聊，拼裝與渲染模板的那些事兒。一改俱改，一板兩用。

歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：
https://segmentfault.com/blog...

作為現(xiàn)代應(yīng)用，ajax的大量使用，使得前端工程師們?nèi)粘５拈_發(fā)少不了拼裝模板，渲染模板。我們今天就來聊聊，拼裝與渲染模板的那些事兒。

如果喜歡本文請點(diǎn)擊右側(cè)的推薦哦，你的推薦會變?yōu)槲依^續(xù)更文的動力。

1 頁面級的渲染

在剛有web的時候，前端與后端的交互，非常直白，瀏覽器端發(fā)出URL，后端返回一張拼好了的HTML串。瀏覽器對其進(jìn)行渲染。html中可能會混有一些php(或者php中混有一些html)。在服務(wù)端將數(shù)據(jù)與模板進(jìn)行拼裝，生成要返回瀏覽器端的html串。

這與我們現(xiàn)在做一個普通網(wǎng)頁沒什么區(qū)別。只不過現(xiàn)在，我們更常使用模板技術(shù)來解決前后端耦合的問題。

前端使用模板引擎，在html中寫一些標(biāo)簽，與數(shù)據(jù)與邏輯基本無關(guān)。后端在渲染的時候，解析這些標(biāo)簽，生成HTML串，如smarty。其實前端與后端的交互在服務(wù)端就已經(jīng)有一次了。

模板：

front.tpl



    {%$a%}



后端：

// 設(shè)置變量
$smarty->assign("a", "give data");

// 展示模板
$smarty->display("front.tpl");

到前端時是渲染好的html串：



    give data

這種方式的特點(diǎn)是展示數(shù)據(jù)快，直接后端拼裝好數(shù)據(jù)與模板，展現(xiàn)到用戶面前。

2 異步的請求與新增模板

新的時代，由ajax引領(lǐng)。(Asynchronous?Javascript?And?XML)，這種技術(shù)的歷史，我就不再贅述。ajax的用法也有多種。

ajax接受各種類型的返回。包括XML/JSON/String等。前端發(fā)起ajax請求，后端直接將數(shù)據(jù)返回。

但是，讀者們有沒有想過，ajax回來的數(shù)據(jù)是干嘛用的呢？相信大部分人使用ajax拿回的數(shù)據(jù)是用來展示的。前端得把a(bǔ)jax拿回來的數(shù)據(jù)與模板進(jìn)行拼裝。這就面臨了一個問題，當(dāng)你的模板非常“華麗”的時候(也就是模板代碼比較多的時候)。我們在前端寫的拼字符串的邏輯，會非常的復(fù)雜。

也有的人圖省事，直接就在ajax的返回值中，傳輸拼裝好的html字符串。這樣可以直接把a(bǔ)jax拿到的html字符串，填充到頁面上。

下面實例說明一下兩種方式：

2.1 ajax獲取字符串直接渲染方式

如圖2.1.1所示：

index.html



    
        
    
    
        
下面是待填充區(qū)域：

        

        
    


========================================================================
a.html


我是模板


這是請求回來的數(shù)據(jù)

? ??

圖2.1.1

2.2 ajax獲取數(shù)據(jù)，前端進(jìn)行拼裝的方式

效果如圖2.2.1所示：



    
        
    
    
        
下面是待填充區(qū)域：

        

        
    


================================================

b.json

{"data": "這是請求回來的數(shù)據(jù)"}


圖 2.2.1

2.3 兩種方式的權(quán)衡?

那么，如何權(quán)衡兩種方式呢？

筆者單從自己的思維考慮，得出以下結(jié)論。如果這種模板的拼裝會發(fā)生多次。是一個非常頻繁的行為，且模板基本一致，只是數(shù)據(jù)變動的話，最好是一開始采用客戶端拼裝的方法。因為，同樣的模板沒有必要被傳到客戶端好幾次。這樣，我們可以剩下傳輸同樣模板的流量，請求更快。

類似于新聞流這種網(wǎng)站比較適合這種方式，如今日頭條，如圖2.3.1所示：


圖2.3.1


圖2.3.2

筆者在DOM上面打了斷點(diǎn)后，找到了其拼裝模板，確是在客戶端所做。

不過，這種做法也有問題，就是用戶同步刷新的時候，需要等頁面渲染完，再發(fā)一個請求，去請求第一屏的數(shù)據(jù)，才能開始渲染。這個過程相當(dāng)于發(fā)了兩次請求，等待的時候還是有所感知的，如圖2.3.3所示。


圖2.3.3

所以這種方式也是有些不盡人意的地方的。經(jīng)過查看，網(wǎng)易新聞的web版，今日頭條的web版，天天快報的web版均是采用這種方式。

第二種方式，同步的時候，就將一段渲染好的HTML，直接輸出到頁面，而在異步的時候，請求的也是這段HTML，直接將請求回的HTML往頁面上一塞就完成了。這樣就可以達(dá)到同步頁面的時候，直接輸出，用戶就不會看到等待中的小菊花了。

百度首頁就采取了這種方式。新聞直出，無需等待如圖2.3.4


圖2.3.4

但是每次請求新聞的時候，也會去請求HTML片段，如圖2.3.5所示


圖2.3.5

這種方式雖然首屏較快，但是，還是有優(yōu)化空間的。

2.4 混合方式

看過了上述兩種方式，聰明的你肯定會想：如果前端的js里寫一份模板，后端的html(jsp/asp/smarty)中也寫一份模板呢？這樣，同步的時候，直接用后端HTML(jsp/asp/smarty)中的模板。異步拉取數(shù)據(jù)的時候，每次使用js中的模板進(jìn)行拼裝 。同步也能保證首屏的速度，異步也能保證傳輸量的限制與速度。可是這樣，也會面臨問題，那就是，你的模板需要維護(hù)兩份。如果那天產(chǎn)品和你說，我要改一下頁面的結(jié)構(gòu)。你不得不改動HTML的時候。js中與jsp/asp/smarty中的模板都需要同樣的更改兩次。

2.5 前端的模板引擎

如果說，后端可以將html的拼裝轉(zhuǎn)變?yōu)槭褂靡娴脑挘岸藶槭裁床豢梢阅兀窟@里我先給大家寫一個非常簡單的模板解析函數(shù)，效果如圖2.5.1


圖2.5.1

這樣就制作了一個簡單的前端模板，有興趣的讀著可以看看我寫的smartyMonkey前端模板引擎：

https://github.com/houyu01/sm...

2.6?前后端同構(gòu)

剛剛說過了前端模板，后端模板，前端與后端都需要模板引擎。比如，我們的在后端的模板是這樣寫的：

// 接下來是偽代碼


    
        
    
    
        // 前端需要模板去渲染
        
        

            // 后端渲染模板
            include("./template.html");
        

        

        
    


============================
template.html



  {%=a%}
  {%if (a===1){%}
      
          a是1
      
  {%}%}

前端解析模板的引擎的語法，與后端j解析模板引擎語法一致。這樣就達(dá)到了一份HTML前后端一起使用的效果。一改俱改，一板兩用。其實這樣也不算極致的完美，因為聰明的讀者會發(fā)現(xiàn)，在頁面加載的時候，我們多傳了一份模板給到前端，如果用戶不觸發(fā)重新渲染的話，可能我們傳到前端的模板就算白傳了，造成了浪費(fèi)。聰明的讀者們可以考慮一下，如何把這份也給省下去。

3 模板的更新

有的時候，我們需要整片DOM進(jìn)行更新，比如：


    我需要被更新

這些html中的節(jié)點(diǎn)，需要在某次行為之后，一起被更新。那么我們的js可能會變成這樣：

這樣的維護(hù)，成本極大，還不如直接把整個html重新刷新一遍。這就遇到了我們的js拼裝模板了：

但是，直接刷HTML的成本太高。這樣瀏覽器不得不整顆html子樹全部重新構(gòu)建一下，這種方法的性能又不如上一種方法好。

好在react給了我們一種新的思路，它用最少的開銷幫我們處理模板的更新，卻又不用我們維護(hù)更新時繁瑣的步驟。有興趣的讀者可以了解一下react-web的diff算法及其應(yīng)用。

https://segmentfault.com/a/11...

4 課后思考

好了，關(guān)于前端常見的模板的拼裝與更新，我們就講到這里，同學(xué)們有沒有考慮過，自己的項目中，如果有異步請求并渲染的邏輯的時候，采用前端拿數(shù)據(jù)拼裝、前端拿拼裝好的模板、混合使用哪種更好呢？

文中提及到的例子，均在github上可以找到：https://github.com/houyu01/te...

如果有想一起開發(fā)smartyMonkey的同學(xué)，請私信我，一起開發(fā)力量更大~

接下來的一篇文章，我將會和讀者們一起聊聊前端存儲那些事兒，不要走開，請關(guān)注我.....
聊一聊前端存儲那些事兒

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

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

相關(guān)文章

  • [聊一聊系列]聊一聊前端模板與渲染那些事兒

    摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼作為現(xiàn)代應(yīng)用，的大量使用，使得前端工程師們?nèi)粘５拈_發(fā)少不了拼裝模板，渲染模板。我們今天就來聊聊，拼裝與渲染模板的那些事兒。一改俱改，一板兩用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog...

    UCloud 評論0 收藏0

  • [聊一聊系列]聊一聊前端模板與渲染那些事兒

    摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼作為現(xiàn)代應(yīng)用，的大量使用，使得前端工程師們?nèi)粘５拈_發(fā)少不了拼裝模板，渲染模板。我們今天就來聊聊，拼裝與渲染模板的那些事兒。一改俱改，一板兩用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog...

    褰辯話 評論0 收藏0

  • [聊一聊系列]聊一聊網(wǎng)頁的分段傳輸與渲染那些事兒

    摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼這一節(jié)，請跟隨筆者聊一聊，網(wǎng)頁的分段傳輸與渲染，用一些非常規(guī)手段優(yōu)化我們的網(wǎng)站響應(yīng)速度。可以處理完一塊就返回一塊，讓瀏覽器盡早的接收到，可以先行渲染。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/...

    thursday 評論0 收藏0

  • [聊一聊系列]聊一聊iconfont那些事兒

    摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說起要想了解，得從一個新的規(guī)則說起。因為用戶沒有安裝的話，我們強(qiáng)制要求顯示也沒有辦法。國內(nèi)有阿里巴巴的平臺，可以選自己喜歡的圖標(biāo)導(dǎo)出。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fr...

    Markxu 評論0 收藏0

  • [聊一聊系列]聊一聊iconfont那些事兒

    摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說起要想了解，得從一個新的規(guī)則說起。因為用戶沒有安裝的話，我們強(qiáng)制要求顯示也沒有辦法。國內(nèi)有阿里巴巴的平臺，可以選自己喜歡的圖標(biāo)導(dǎo)出。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fr...

    2501207950 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<