鄭煜榮

【摘要】? ? 本文以基于軟件工程的Web開發(fā)技術(shù)為主題，圍繞Web前端開發(fā)的特點(diǎn)、技術(shù)語(yǔ)言、面臨的問題、制約優(yōu)化的因素以及相應(yīng)的對(duì)策、Web開發(fā)流程等方面展開闡述。在網(wǎng)絡(luò)越發(fā)發(fā)達(dá)的二十一世紀(jì)，越來越多的人選擇Web前端，Web前端以其圖形化、動(dòng)態(tài)化、分布式、交互性等特點(diǎn)在互聯(lián)網(wǎng)中占有一席之地，存在著無法預(yù)測(cè)的發(fā)展前景。當(dāng)然目前國(guó)內(nèi)的Web前端方向的技術(shù)等方面存在著亟待被解決的問題，本文簡(jiǎn)單總結(jié)了最常見的制約Web前端發(fā)展的因素，并提出了一些解決方法。

【關(guān)鍵詞】? ? Web前端優(yōu)化? ? 軟件工程? ? Web開發(fā)技術(shù)? ? Web的特點(diǎn)

引言：

在系統(tǒng)開發(fā)的過程中，Web技術(shù)發(fā)揮著主要的作用，同時(shí)組件技術(shù)的發(fā)展為系統(tǒng)的開放性和集成性提供了便利[1]。當(dāng)前Web系統(tǒng)的市場(chǎng)存量是非常大的，很多場(chǎng)景依然離不開Web系統(tǒng)，隨著云計(jì)算、大數(shù)據(jù)和物聯(lián)網(wǎng)的逐漸落地應(yīng)用，Web開發(fā)的任務(wù)邊界也在得到拓展，這個(gè)過程不僅需要大量的開發(fā)人才，同時(shí)也需要Web領(lǐng)域不斷進(jìn)行技術(shù)迭代和創(chuàng)新。

可以用于Web系統(tǒng)開發(fā)的編程語(yǔ)言還是比較多的，比如PHP、Java、Python、C#等語(yǔ)言都可以從事Web系統(tǒng)開發(fā)。從編程語(yǔ)言自身的發(fā)展情況和應(yīng)用情況來看，Python的上升趨勢(shì)還是比較明顯的，相信在大數(shù)據(jù)和人工智能的推動(dòng)下，未來Python語(yǔ)言的前景還是比較廣闊的。

一、基于軟件工程的web開發(fā)技術(shù)的開發(fā)特點(diǎn)

Web開發(fā)技術(shù)在不斷的發(fā)展過程中，主流開發(fā)技術(shù)及開發(fā)框架不斷更新?lián)Q代，它的特點(diǎn)與優(yōu)勢(shì)是不可否認(rèn)的。總而言之，Web開發(fā)技術(shù)具有以下幾個(gè)方面的特點(diǎn)：

1.1與平臺(tái)無關(guān)

無論用戶使用的平臺(tái)是什么，都是可以通過Internet來訪問www，因?yàn)槠鋵?duì)系統(tǒng)平臺(tái)沒有什么限制，不管用戶是從windows、unix、macintosh等等都可成功訪問。

1.2分布式

Web可以傳遞音頻、視頻，這些信息將會(huì)占用大量的內(nèi)存，甚至沒有辦法預(yù)知信息多少，但是Web開發(fā)技術(shù)并不會(huì)將信息集中地存儲(chǔ)在一個(gè)站點(diǎn)上，而是進(jìn)行分散存儲(chǔ)，將信息存放在不同的站點(diǎn)上，但是在調(diào)用的過程中不分散，只需要在瀏覽器指明是哪個(gè)站點(diǎn)就可以了。

1.3動(dòng)態(tài)化

動(dòng)態(tài)化的特征指的是Web信息會(huì)及時(shí)更新，保證Web上的信息一直都是最新動(dòng)態(tài)展示出來的。如協(xié)議的發(fā)展?fàn)顩r、招聘信息、購(gòu)物網(wǎng)站以及一些公司的廣告等。一般情況下，每個(gè)站點(diǎn)都要盡量保證信息的及時(shí)性。

1.4交互性和可測(cè)試性

Web中含有大量的超鏈接，用戶可以通過點(diǎn)擊超鏈接從而訪問多個(gè)站點(diǎn)，訪問的站點(diǎn)是由用戶決定的。另外，Web產(chǎn)品對(duì)穩(wěn)定性和便捷性有較高的要求，必須保證Web的可測(cè)試性。

二、Web前端開發(fā)面臨的問題

2.1兼容性問題

用戶總是希望不管用什么瀏覽器或者設(shè)備打開系統(tǒng)頁(yè)面的時(shí)候，看到的頁(yè)面顯示的信息是完全一樣的，然而事實(shí)并非如此。不同的瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同。另外，相同的標(biāo)簽在不同的瀏覽器中也可能會(huì)有不同的顯示效果或者默認(rèn)值，比如：塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的要大。更甚至對(duì)于相同瀏覽器的不同版本都要有不同的處理方法。

2.2交互的復(fù)雜度

2.3代碼可維護(hù)性

復(fù)雜度的提升直接影響代碼的維護(hù)性。JS/CSS/HTML代碼生命周期越來越長(zhǎng)，也就越來越需要從代碼質(zhì)量、架構(gòu)和工具上保證它們的可維護(hù)性。

三、制約Web前端優(yōu)化的因素

目前，國(guó)內(nèi)對(duì)于web前端的優(yōu)化的研究相比之下處于較低的水準(zhǔn)，即便是阿里、百度等這些互聯(lián)網(wǎng)大廠，也并未提出行之有效的解決方案。現(xiàn)今，制約web前端優(yōu)化的因素主要有以下幾個(gè)方面：

3.1 Browser/Server結(jié)構(gòu)

用戶在瀏覽網(wǎng)頁(yè)的過程中需要經(jīng)歷以下步驟：輸出網(wǎng)頁(yè)URL→通過域名解析IP地址→向Web服務(wù)器發(fā)送訪問請(qǐng)求→服務(wù)器確認(rèn)請(qǐng)求尋找資源文件→服務(wù)器反饋→服務(wù)器發(fā)送HTML文件→瀏覽器接收HTML文件并請(qǐng)求資源文件→服務(wù)器確認(rèn)資源文件發(fā)送給瀏覽器→瀏覽器接收資源并重新渲染→訪問完成。因此Browser/Server結(jié)構(gòu)迄今為止仍是Web開發(fā)過程中存在的一大難題。

3.2瀏覽器連接的限制問題

http協(xié)議中規(guī)定，為了避免服務(wù)器堵塞的問題，服務(wù)器和客戶端之間的并發(fā)連接數(shù)量存在著數(shù)量的限制，在同一個(gè)時(shí)間點(diǎn)內(nèi)，服務(wù)器、用戶端間的持久性連接數(shù)為1個(gè)。然而，在Web頁(yè)面的實(shí)際訪問中，很多情況下是難以避免二次連接的問題的。例如：IE瀏覽器在打開二次連接時(shí)可能會(huì)遇到一些問題。

四、Web前端優(yōu)化對(duì)策

4.1 Browser/Server結(jié)構(gòu)優(yōu)化

可以從服務(wù)器、HTTP請(qǐng)求、加載、Ajax等方面對(duì)Browser/Server結(jié)構(gòu)進(jìn)行優(yōu)化工作。

4.1.1服務(wù)器方面

現(xiàn)今，最常用的方法是優(yōu)化web網(wǎng)頁(yè)域名、使用Gzip壓縮資源以及改進(jìn)緩存設(shè)置等。大家常見的服務(wù)器一般分為塔式服務(wù)器、機(jī)架式服務(wù)器和刀片服務(wù)器，而Web服務(wù)器常用的一般是前兩者。

4.1.2 HTTP請(qǐng)求方面

HTTP請(qǐng)求優(yōu)化指的是優(yōu)化請(qǐng)求的資源，例如對(duì)圖片進(jìn)行優(yōu)化處理的例子，使用CSS Spretes技術(shù)來增大傳送效率。

4.1.3 Ajax方面

該方法是指充分利用Ajax（可緩存）來實(shí)現(xiàn)性能的提升，Ajax本身就有著異步特征，通過傳輸?shù)漠惒讲町悾蔀橛脩魩砀涌焖俚臑g覽體驗(yàn)。但是這種方法卻會(huì)導(dǎo)致用戶在等待JavaScript的過程中花費(fèi)一定的時(shí)間，所以Ajax的優(yōu)化效果取決于采用何種異步優(yōu)化方法以及用戶以何種方式進(jìn)行訪問。

4.2二次鏈接優(yōu)化

目前二次鏈接優(yōu)化主要是依靠“協(xié)調(diào)調(diào)度”來實(shí)現(xiàn)的，在TDD（是指測(cè)試驅(qū)動(dòng)開發(fā)（Test-Driven Development）），是敏捷開發(fā)中的一項(xiàng)核心實(shí)踐和技術(shù)，它的原理是在編寫功能代碼之前，先編寫單元測(cè)試用例的代碼，由測(cè)試代碼來確定產(chǎn)品代碼，基本思路是通過測(cè)試推動(dòng)整個(gè)開發(fā)的進(jìn)程，但是測(cè)試并不是簡(jiǎn)單的測(cè)試工作，而是把需求分析、設(shè)計(jì)、質(zhì)量控制量化的過程。用戶在訪問網(wǎng)頁(yè)的時(shí)候，可以通過合理排列、調(diào)度訪問web網(wǎng)頁(yè)的順序，從而協(xié)調(diào)操作錯(cuò)誤或者多次訪問引起的一些問題，最終可以減少用戶訪問頁(yè)面時(shí)用于等待的時(shí)間。瀏覽器在用戶訪問頁(yè)面的時(shí)候合理的介入，并進(jìn)行一定的干預(yù)操作，目的是將TDD、TSR最大可能的減少。由此，因?yàn)槎芜B接而導(dǎo)致的堵塞問題就得到了有效的解決了。

五、web開發(fā)技術(shù)的開發(fā)流程

Web開發(fā)技術(shù)最常見的是被應(yīng)用于網(wǎng)站的開發(fā)與制作，其技術(shù)方面涉及到的知識(shí)相當(dāng)廣泛，然而部分人不能明確Web應(yīng)用的開發(fā)周期，所以很難準(zhǔn)確的估算出開發(fā)成本的預(yù)算，下面以Web項(xiàng)目開發(fā)為例，整體闡述Web項(xiàng)目的開發(fā)流程。

5.1選擇開發(fā)技術(shù)

依據(jù)用戶需求選擇最適合的開發(fā)工具，以減少開發(fā)中可能會(huì)出現(xiàn)的各種問題。

5.2搭建開發(fā)環(huán)境

根據(jù)客戶需求進(jìn)行開發(fā)環(huán)境的搭建。

5.3構(gòu)建模型與編碼階段

技術(shù)人員可以根據(jù)客戶的需求構(gòu)建具體開發(fā)模型和框架，以便于后續(xù)開發(fā)人員的開發(fā)工作。

5.4測(cè)試與部署階段

測(cè)試是開發(fā)過程中及其重要的一個(gè)環(huán)節(jié)，技術(shù)人員需要測(cè)試自己負(fù)責(zé)的模塊的功能是否滿足了客戶需求，并發(fā)現(xiàn)程序中的錯(cuò)誤并改進(jìn)，根據(jù)測(cè)試結(jié)果對(duì)代碼進(jìn)行增刪改查等工作，提高程序的可維護(hù)性和可擴(kuò)展性。

5.5數(shù)據(jù)分析服務(wù)階段

在項(xiàng)目上線之后，對(duì)用戶的行為、項(xiàng)目的訪問量等信息進(jìn)行監(jiān)測(cè)。

六、Web項(xiàng)目的三大圖

6.1功能結(jié)構(gòu)圖

主要是為了清晰的展現(xiàn)出各部分的功能，理清楚內(nèi)部邏輯關(guān)系，使之條理化。

6.2業(yè)務(wù)流程圖

方便業(yè)務(wù)員全面了解業(yè)務(wù)處理的過程，是系統(tǒng)分析員、管理人員、業(yè)務(wù)操作人員交流思想的工具，并且可以用它分析出業(yè)務(wù)流程的合理性。

6.3用例圖

從用戶的角度描述系統(tǒng)的功能，同時(shí)也清晰的說明了各項(xiàng)功能的操作者。用例圖可以準(zhǔn)確的表達(dá)系統(tǒng)的功能。

七、結(jié)束語(yǔ)

綜上所述，雖然Web開發(fā)技術(shù)仍然存在著一些問題，但是因其具有圖形化、動(dòng)態(tài)化、分布式、交互性等優(yōu)勢(shì)被許多企所選擇。并且，最近幾年，各種前端框架層出不窮，H5開發(fā)模式也越來越流行，逐漸涌現(xiàn)出了單頁(yè)網(wǎng)站和漸進(jìn)式網(wǎng)絡(luò)應(yīng)用程序，并且已經(jīng)得到了極大的普及。近幾年，HTML5的來襲更是繼Ajax之后又一次將前端技術(shù)推向風(fēng)火浪尖，傳統(tǒng)軟件互聯(lián)網(wǎng)化已經(jīng)是大勢(shì)所趨。在這個(gè)用戶體驗(yàn)為王的時(shí)代，用戶在享受Web帶來的便捷的同時(shí)也對(duì)互聯(lián)網(wǎng)產(chǎn)品的用戶體驗(yàn)有了更高的要求，這意味著前端開發(fā)人員也面臨著更多的挑戰(zhàn)和機(jī)會(huì)。

參? 考? 文? 獻(xiàn)

[1]岳彩夢(mèng). 基于軟件工程的Web開發(fā)技術(shù)[J]. 電子技術(shù)與軟件工程， 2019， 154（08）：70.

[2]姜海紅. 淺議B/S結(jié)構(gòu)系統(tǒng)的優(yōu)化問題[J]. 信息系統(tǒng)工程， 2019， 000（006）：84.

[3]許向陽(yáng)， 任皓. 基于Nginx的Web服務(wù)器優(yōu)化和防護(hù)[J]. 內(nèi)蒙古科技與經(jīng)濟(jì)， 2019， 000（012）：77-78.

[4]陳志龍. 軟件工程中Web開發(fā)技術(shù)的應(yīng)用與研究[J]. 計(jì)算機(jī)產(chǎn)品與流通， 2019， 000（005）：P.24-24.

[5]李若蘭.基于Nginx的Web服務(wù)器優(yōu)化的應(yīng)用研究[J].科技風(fēng)，2021（09）：125-126.

[6]曹陽(yáng). 軟件工程Web技術(shù)開發(fā)平臺(tái)[J]. 電子技術(shù)與軟件工程， 2019， 151（05）：50.

[7]趙瑩， 劉佰龍， 王志曉. 基于網(wǎng)絡(luò)學(xué)習(xí)空間的對(duì)分課堂教學(xué)模式應(yīng)用分析——以Web應(yīng)用開發(fā)技術(shù)課為例[J]. 計(jì)算機(jī)教育， 2018， No.287（011）：85-88.

[8]朱紅斌. 關(guān)于WEB前端開發(fā)技術(shù)的課程教學(xué)模式的創(chuàng)新研究[J]. 科技風(fēng)， 2018， 000（033）：81.

[9]肖美婷. 移動(dòng)WEB開發(fā)技術(shù)在商務(wù)網(wǎng)站的應(yīng)用及發(fā)展趨勢(shì)探究[J]. 中國(guó)新通信， 2018， 20（017）：125.

[10]王佳琪. 基于J2EE架構(gòu)的分布式企業(yè)級(jí)Web應(yīng)用研究[J]. 計(jì)算機(jī)產(chǎn)品與流通， 2018（10）：27-27.