基于軟件工程的Web開發(fā)技術

鄭煜榮

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

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

引言：

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

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

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

Web開發(fā)技術在不斷的發(fā)展過程中，主流開發(fā)技術及開發(fā)框架不斷更新?lián)Q代，它的特點與優(yōu)勢是不可否認的?？偠灾琖eb開發(fā)技術具有以下幾個方面的特點：

1.1與平臺無關

無論用戶使用的平臺是什么，都是可以通過Internet來訪問www，因為其對系統(tǒng)平臺沒有什么限制，不管用戶是從windows、unix、macintosh等等都可成功訪問。

1.2分布式

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

1.3動態(tài)化

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

1.4交互性和可測試性

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

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

2.1兼容性問題

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

2.2交互的復雜度

2.3代碼可維護性

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

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

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

3.1 Browser/Server結(jié)構

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

3.2瀏覽器連接的限制問題

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

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

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

可以從服務器、HTTP請求、加載、Ajax等方面對Browser/Server結(jié)構進行優(yōu)化工作。

4.1.1服務器方面

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

4.1.2 HTTP請求方面

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

4.1.3 Ajax方面

該方法是指充分利用Ajax（可緩存）來實現(xiàn)性能的提升，Ajax本身就有著異步特征，通過傳輸?shù)漠惒讲町?，可為用戶帶來更加快速的瀏覽體驗。但是這種方法卻會導致用戶在等待JavaScript的過程中花費一定的時間，所以Ajax的優(yōu)化效果取決于采用何種異步優(yōu)化方法以及用戶以何種方式進行訪問。

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

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

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

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

5.1選擇開發(fā)技術

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

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

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

5.3構建模型與編碼階段

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

5.4測試與部署階段

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

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

在項目上線之后，對用戶的行為、項目的訪問量等信息進行監(jiān)測。

六、Web項目的三大圖

6.1功能結(jié)構圖

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

6.2業(yè)務流程圖

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

6.3用例圖

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

七、結(jié)束語

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

參? 考? 文? 獻

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

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

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

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

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

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

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

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

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

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