李春曉 陳平 周偉 趙強(qiáng)

摘 ? 要：視圖的首次響應(yīng)時間和平均響應(yīng)時間深刻影響著Web應(yīng)用的開發(fā)效率和運(yùn)行效率。文章設(shè)計(jì)了一種模板語言，通過開發(fā)翻譯器分別生成動態(tài)語言和靜態(tài)語言源碼，實(shí)現(xiàn)視圖在開發(fā)過程中解釋動態(tài)語言執(zhí)行，而發(fā)布時編譯靜態(tài)語言執(zhí)行，并支持熱部署。仿真實(shí)驗(yàn)結(jié)果顯示：視圖首次響應(yīng)時間的均值減少86.47%、標(biāo)準(zhǔn)差減少51.77%。對148個視圖的開發(fā)日志分析表明，文章方法能在保障軟件運(yùn)行效率的同時，提高軟件的開發(fā)效率，具有廣泛的應(yīng)用前景。

關(guān)鍵詞：混合編程;視圖引擎;模板語言;Web開發(fā);開發(fā)效率;熱部署

中圖分類號：TP311.52 ? ? ? ?文獻(xiàn)標(biāo)志碼：A ? ? ? ?文章編號：1673-8454（2022）03-0119-05

一、引言

MVC（Model-View-Controller）模式在Small-talk-80的GUI設(shè)計(jì)中被提出[1]，其分離了數(shù)據(jù)處理、程序輸入輸出控制及數(shù)據(jù)表示，且描述了各層之間的通信方式，有利于構(gòu)建“松耦合、高內(nèi)聚”的組件， 使程序結(jié)構(gòu)變得清晰而靈活[2]。多數(shù)現(xiàn)代編程語言都實(shí)現(xiàn)并開源了各自的MVC開發(fā)框架，如Java Spring、C# ASP.NET MVC、PHP Laravel等。

MVC逐漸成為Web開發(fā)的標(biāo)準(zhǔn)模式[3]，并被廣泛應(yīng)用到各類Web項(xiàng)目的開發(fā)中[4-8]。以Java和C#為代表的靜態(tài)語言，通過類型的強(qiáng)制聲明，使得集成開發(fā)環(huán)境有很強(qiáng)的代碼感知能力。對應(yīng)的基于J2EE和ASP.NET的MVC框架，在實(shí)現(xiàn)復(fù)雜業(yè)務(wù)邏輯的管理信息系統(tǒng)研發(fā)中得到很大發(fā)展[9][10]。然而其視圖引擎需要使用靜態(tài)語言編譯，會消耗大量的計(jì)算資源，首次響應(yīng)時間較長，在調(diào)試和測試中消耗了大量開發(fā)者的時間。

隨著移動互聯(lián)網(wǎng)的飛速發(fā)展，各類Web應(yīng)用的研發(fā)速度受到越來越多的重視?；赑ython、PHP、JavaScript等動態(tài)語言的MVC框架逐漸受到業(yè)界的更多關(guān)注[11][12]。據(jù)代碼托管平臺（Github）統(tǒng)計(jì)，截至2020年5月15日，各編程語言對應(yīng)的MVC開發(fā)框架獲得的星數(shù)中，動態(tài)語言開發(fā)框架的星數(shù)明顯多于靜態(tài)語言。這是因?yàn)閯討B(tài)語言運(yùn)行效率雖低于靜態(tài)語言，但其具有可解釋運(yùn)行、啟動速度快、首次響應(yīng)時間低、開發(fā)效率較高等優(yōu)點(diǎn)。

本文設(shè)計(jì)并實(shí)現(xiàn)了一種視圖引擎，利用動態(tài)語言和靜態(tài)語言混合編程的方法，結(jié)合動態(tài)語言和靜態(tài)語言的優(yōu)勢，使開發(fā)過程中視圖具有較低的首次響應(yīng)時間，提高開發(fā)體驗(yàn)。軟件發(fā)布后也有較低的平均響應(yīng)時間，能夠保障運(yùn)行效率。

二、視圖引擎概述

視圖是應(yīng)用與外界的接口，也是MVC模式中最接近用戶的層，更是模型的外在表現(xiàn)。在Web應(yīng)用中，視圖引擎負(fù)責(zé)為視圖創(chuàng)建瀏覽器可解析的超文本標(biāo)記語言（HTML）。其通過模板與模型綁定的方式，利用母版、組件等設(shè)計(jì)，實(shí)現(xiàn)模板復(fù)用，提高Web應(yīng)用的開發(fā)效率。

（一）視圖引擎介紹

視圖引擎的核心是模板語言。引擎將模板語言翻譯為程序語言源代碼，并由對應(yīng)的編譯器或解釋器執(zhí)行。模板語言是一種超文本標(biāo)記語言與程序語言的混合體。一種MVC開發(fā)框架通常提供一種默認(rèn)的視圖引擎，同時也支持視圖引擎的自定義。不同模板語言基于不同的程序語言與HTML混合，雖然有一定的語法差異，但是其核心結(jié)構(gòu)類似[13]。

圖1所示為Razor模板語言的示例，其通過“@”在HTML代碼中標(biāo)記C#代碼，訪問時將Web請求中的服務(wù)器變量全部以列表的形式顯示出來。除Razor外，其他模板語言也以類似的特殊字符標(biāo)記程序語言區(qū)塊表示控制流程，如“{% code %}”（Jinja2）、“<{ code }>”（Smarty），以“{{ expression }}”（Jinja2）標(biāo)記表達(dá)式。

視圖引擎在軟件研發(fā)中的主要意義有：①簡化字符串的拼接，能更快速生成各類復(fù)雜格式的源代碼，如實(shí)體類、增刪改查（CRUD）的基本代碼;②使HTML可嵌入控制流程和占位符，實(shí)現(xiàn)模板數(shù)據(jù)的填充工作;③具有一定的數(shù)學(xué)運(yùn)算和中間值處理能力;④通過母版和組件的設(shè)計(jì)實(shí)現(xiàn)模板復(fù)用。

（二）視圖引擎工作流程

在MVC模式中，控制器調(diào)用服務(wù)實(shí)現(xiàn)業(yè)務(wù)邏輯，生成業(yè)務(wù)模型和確定要加載的視圖。視圖引擎實(shí)現(xiàn)業(yè)務(wù)模型與模板的綁定，將視圖繪制成HTML。首先，翻譯器根據(jù)模板語言的詞法規(guī)則和語法規(guī)則，通過詞法分析器和語法分析器生成類或函數(shù)的源代碼;然后，靜態(tài)語言通過編譯器將源代碼編譯為成可執(zhí)行的機(jī)器碼，或動態(tài)語言通過解釋器將源代碼解釋為可執(zhí)行的機(jī)器碼;最后，將模型作為可執(zhí)行代碼輸入，輸出為最終的HTML字符串。工作流程如圖2所示。

靜態(tài)語言需要編譯的特性將導(dǎo)致模板字符串到可執(zhí)行代碼耗時較長，可執(zhí)行代碼生成HTML字符串耗時較短，而生成目標(biāo)HTML較快，表現(xiàn)為首次響應(yīng)時間較長，平均響應(yīng)時間較短。相應(yīng)地，動態(tài)語言將導(dǎo)致模板字符串到可執(zhí)行代碼耗時較短，而可執(zhí)行代碼生成HTML字符串耗時較長。視圖是MVC模式中變化最頻繁的，用戶界面的開發(fā)也需要多次預(yù)覽視圖的執(zhí)行結(jié)果。因此，首次響應(yīng)時間較長，將增加軟件開發(fā)過程中調(diào)試和測試的耗時，影響開發(fā)體驗(yàn)。平均響應(yīng)時間則是應(yīng)用吞吐量的重要指標(biāo)。

三、高性能視圖引擎設(shè)計(jì)

本文利用動態(tài)語言和靜態(tài)語言混合編程的方法，設(shè)計(jì)了一種模版語言，并分別構(gòu)建動態(tài)語言和靜態(tài)語言的翻譯器，能在優(yōu)化視圖首次響應(yīng)時間的同時，保證視圖的平均響應(yīng)時間。該引擎涉及混合編程、腳本引擎、模板翻譯、緩存、熱部署等關(guān)鍵技術(shù)。

（一）混合編程

混合編程是指使用兩種或兩種以上的程序設(shè)計(jì)語言來開發(fā)應(yīng)用程序的過程。各類程序設(shè)計(jì)語言通常是針對某一個特定領(lǐng)域而設(shè)計(jì)，如用于Web開發(fā)的PHP、統(tǒng)計(jì)分析的R、數(shù)據(jù)處理的SQL等。而一些通用的語言，如C++、Java、Python、C#等，則通過各種類型的框架基本實(shí)現(xiàn)全應(yīng)用場景的支持。

Python是一門結(jié)合了解釋性、編譯性、互動性和面向?qū)ο蟮哪_本語言，被業(yè)界稱為“膠水”語言[14]。其可以與各種語言無縫對接，也可以嵌入到其他語言中執(zhí)行，本文方法采用C#與Python混合編程方法。

（二）模板翻譯器

HTML是一種特殊的可擴(kuò)展標(biāo)記語言（XML）。通過C#語言將HTML模板語言分別翻譯成Python源代碼和C#源代碼。在開發(fā)階段，利用Python解釋器，生成HTML;在發(fā)布后，利用C#編譯器動態(tài)編譯后，調(diào)用程序集生成HTML。如圖3所示，上部代碼為模板語言，中間代碼為翻譯成的Python源代碼，下部代碼為生成的HTML。

（三）腳本引擎

腳本引擎（Script Engine）為程序語言提供了運(yùn)行過程中擴(kuò)充自身功能的能力，能提高軟件構(gòu)建的靈活性。Java的javax.Script包中和C#中的Microsoft.Scripting類均提供了與JavaScript、Python等腳本語言交互的標(biāo)準(zhǔn)接口。

本文使用IronPython包提供的PythonEngine作為腳本引擎，實(shí)現(xiàn)在應(yīng)用運(yùn)行過程中解釋Python源代碼執(zhí)行。將模型數(shù)據(jù)作為參數(shù)傳遞給根據(jù)模板翻譯生成的函數(shù)，可實(shí)現(xiàn)模板的熱更新，即在無需重啟應(yīng)用的情況下更新模板，為軟件開發(fā)過程中模塊的測試和調(diào)試帶來便利。

四、實(shí)驗(yàn)環(huán)境與評測

為了更好地感受和測試視圖引擎的性能，本文使用開源硬件“樹莓派4B”作為測試平臺，搭建實(shí)驗(yàn)環(huán)境，對性能進(jìn)行仿真測試。其主要指標(biāo)包括首次響應(yīng)時間和平均響應(yīng)時間，同時對真實(shí)的大型管理信息系統(tǒng)開發(fā)日志進(jìn)行分析評測。

（一）系統(tǒng)實(shí)驗(yàn)環(huán)境

“樹莓派4B”是一種開源硬件平臺，搭載了博通最新的BCM2711處理器，以4枚ARM A72核心，主頻為1.5GHZ。本文選用其1GB內(nèi)存版本為作測試平臺，操作系統(tǒng)選用Raspbian Buster Lite。測試應(yīng)用運(yùn)行環(huán)境為Mono，版本號為6.8.0.105。Web服務(wù)器為Jexus，版本號為 6.2.1.12。測試的模板為AdminLTE，它是GitHub上一個開源的HTML管理后臺框架。

（二）首次響應(yīng)時間測試

筆者分別使用Razor引擎與本文視圖引擎實(shí)現(xiàn)AdminLTE模板，并在開發(fā)模式運(yùn)行。圖4所示為經(jīng)30次測試記錄的首次響應(yīng)時間繪制的箱線圖。使用正態(tài)分布進(jìn)行估計(jì)，Razor引擎首次耗時的分布為N（2887.47，30.432），本文引擎首次耗時分布為N（390.67，14.672）。Razor引擎首次運(yùn)行耗時接近3秒，能明顯地感覺到延時，影響了開發(fā)體驗(yàn)和開發(fā)效率。本文引擎首次運(yùn)行耗時約減少86.47%，且標(biāo)準(zhǔn)差減少了51.77%，能提供更好的開發(fā)體驗(yàn)，提高開發(fā)效率。

（三）吞吐量測試

Http_load是一款基于Linux平臺的Web服務(wù)器性能測試工具，用于測試Web服務(wù)器的吞吐量與負(fù)載、Web頁面的性能。

分別使用1～10個并發(fā)針對AdminLTE的本文引擎動態(tài)和靜態(tài)語言版本進(jìn)行測試，并繪制散點(diǎn)圖，如圖5所示。測試結(jié)果顯示，該模板在動態(tài)語言解釋和靜態(tài)語言編譯后執(zhí)行時，性能表現(xiàn)相近。這表明，在占位符填充場景，采用動態(tài)語言解釋執(zhí)行有較好的性能。

（四）開發(fā)日志分析

本文實(shí)現(xiàn)的視圖引擎通過訂閱模板保存事件的方法，記錄了視圖所有的變化歷史。該方法已應(yīng)用于北京師范大學(xué)研究生管理系統(tǒng)、研究生招生管理系統(tǒng)、大型考試考務(wù)管理系統(tǒng)的開發(fā)中[15]，并記錄了視圖模板的變更記錄[16]。

北京師范大學(xué)研究生管理系統(tǒng)實(shí)現(xiàn)了研究生學(xué)籍、培養(yǎng)過程和學(xué)位授予的全流程管理，是一個具有1000多個表和視圖的業(yè)務(wù)復(fù)雜的管理信息系統(tǒng)。開發(fā)日志共記錄了148個視圖模板，共5970次變更，平均每個視圖變更40余次。根據(jù)變更次數(shù)繪制如圖6所示的直方圖。圖6顯示，超過69.6%的視圖模板變更過5次以上，有30次以上變更的視圖占比達(dá)32.4%。從開發(fā)日志的統(tǒng)計(jì)數(shù)據(jù)可以發(fā)現(xiàn)，在開發(fā)過程中需要對視圖進(jìn)行頻繁修改、調(diào)試和測試，實(shí)現(xiàn)復(fù)雜業(yè)務(wù)邏輯。分析結(jié)果表明，使用動態(tài)語言視圖引擎對提高開發(fā)效率有幫助。

五、結(jié)語

本文基于動態(tài)語言Python和靜態(tài)語言C#混合編程，設(shè)計(jì)了兩種模板翻譯器，并利用腳本引擎、緩存和熱部署機(jī)制實(shí)現(xiàn)了一種高性能的視圖引擎。其具有啟動速度快，運(yùn)行效率高，系統(tǒng)穩(wěn)定性好的特點(diǎn)，并且能記錄詳細(xì)的開發(fā)和運(yùn)行日志，保障運(yùn)行效率，提高開發(fā)效率。

通過系統(tǒng)仿真表明，動態(tài)語言和靜態(tài)語言相比，無需對源代碼進(jìn)行編譯執(zhí)行，啟動速度明顯較高，在占位符填充場景性能相近;在循環(huán)流程控制等方面則性能差距較明顯。因此，動態(tài)語言視圖引擎確實(shí)能夠提供更好的開發(fā)體驗(yàn)，提高開發(fā)效率。而在一些流程復(fù)雜的場景下，在發(fā)布時采用靜態(tài)語言翻譯器構(gòu)建視圖引擎也是有意義的。本文視圖引擎結(jié)合了動態(tài)語言和靜態(tài)語言的優(yōu)勢，具有跨平臺、高性能的特點(diǎn)。

參考文獻(xiàn)：

[1]KRASNER G， POPE S. A description of the model- view-controller user interface paradigm in the smalltalk-80 system[J]. Journal of Object Oriented Programming， 1988，1（3）： 26-49.

[2]劉亮，霍劍青，郭玉剛，等.基于MVC的通用型模式的設(shè)計(jì)與實(shí)現(xiàn)[J].中國科學(xué)技術(shù)大學(xué)學(xué)報(bào)，2010，40（6）： 635-639.

[3]LEFF A， RAYFIELD J T. Web-application development using the model/view/controller design pattern[C]// In Proceedings fifth ieee international enterprise distributed object computing conference， 2011：118-127.

[4]賈順賀，陳建飛，陳古運(yùn)，等.基于MVC架構(gòu)的個人健康信息管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)應(yīng)用與軟件，2018，35（3）：43-48.

[5]肖文娟，王加勝.基于Vue和Spring Boot的校園記錄管理Web App的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)應(yīng)用與軟件，2020，37（4）：25-30.

[6]王杰，錢旦敏，婁帥，等.基于大數(shù)據(jù)的住院醫(yī)師規(guī)范化培訓(xùn)系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)應(yīng)用與軟件，2018，35（3）：61-66.

[7]路遙，范雪松.基于多層次結(jié)構(gòu)的高校教代會提案管理信息系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)應(yīng)用與軟件，2019，36（12）：36-39.

[8]周偉，吳穎，徐昶，等.大型考試考務(wù)管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].中國教育信息化，2017（7）：69-71.

[9]仝茵.基于ASP.NET MVC模式的軟件開發(fā)架構(gòu)的研究與探討[J].中國電子科學(xué)研究院學(xué)報(bào)，2016，11（6）：599-602.

[10]張宇，王映輝，張翔南.基于Spring的MVC框架設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)工程，2010，36（4）：59-62.

[11]宋尚平，李興保.PHP模板引擎Smarty的安裝配置及應(yīng)用實(shí)現(xiàn)[J].現(xiàn)代教育技術(shù)，2007（9）：80-82.

[12]牛作東，李捍東.基于Python與Flask工具搭建可高效開發(fā)的實(shí)用型MVC框架[J].計(jì)算機(jī)應(yīng)用與軟件，2019，36（7）：21-25.

[13]姬一文，吳慶波，楊沙洲.一種服務(wù)器端模板引擎的改進(jìn)與實(shí)現(xiàn)[J].計(jì)算機(jī)應(yīng)用研究，2011，28（3）：1077-1079.

[14]宮薇薇，齊向春，裴世廉.Python與R語言混合編程方法的研究和應(yīng)用[J].計(jì)算機(jī)應(yīng)用與軟件，2018，35（1）：28-31.

[15]周偉，張弛，徐昶.博士生招生“申請-考核”制的雙向匿名評價(jià)系統(tǒng)研究[J].學(xué)位與研究生教育，2017（3）：21-25.

[16]周偉，蔡瑩，王天楠，等.基于構(gòu)件的管理信息系統(tǒng)云開發(fā)平臺研究[J].中國教育信息化，2016（7）：28-32.

作者簡介：

李春曉，北京師范大學(xué)信息化建設(shè)辦公室信息網(wǎng)絡(luò)中心，博士生;

陳平，北京師范大學(xué)科研院副處長、信息網(wǎng)絡(luò)中心副主任、教授級高級工程師、碩士生導(dǎo)師;

周偉，北京師范大學(xué)教務(wù)部，博士生，通訊作者，郵箱：zhouwei@bnu.edu.cn;

趙強(qiáng)，北京師范大學(xué)教務(wù)部，博士生。

High-Performance View Engine Construction Method Based on Hybrid Programming

Chunxiao LI1， Ping CHEN1，2， Wei ZHOU3，4*， Qiang ZHAO3

（1.Center of Information & Network Tecknology， Beijing Normal University， Beijing 100875;

2.Administration for Research and Development， Beijing Normal University， Beijing 100875;

3.Provost’s office and Academic Affairs （Graduate School）， Beijing Normal University， Beijing 100875;

4.National Engineering Laboratory for Cyberlearning and Intelligent Technology， Beijing Normal University， Beijing 100875）

Abstract： The first response and average response time period of the view have a profound impact on the efficiency of Web application development and operation. This paper designed a template language and developed a translator to generate source code for dynamic language and static language， respectively. Views are rendered by interpretation of dynamic language during the development process， and published by execution of static language compilation support. The simulation results indicated that the mean value of the first response time of the view reduced by 86.47%， and the standard deviation reduced by 51.77%. The analysis of the development log of 148 views indicated that this method can guarantee the operation efficiency and improve the development efficiency of software， which will have a broad application prospect.

Keywords： Bybrid programming; View engine; Template language; Web development; Development efficiency; Hot deployment

編輯：王曉明 ? ?校對：李曉萍