基于軟件工程的Web開發技術

鄭煜榮

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

【關鍵詞】? ? Web前端優化? ? 軟件工程? ? Web開發技術? ? Web的特點

引言：

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

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

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

Web開發技術在不斷的發展過程中，主流開發技術及開發框架不斷更新換代，它的特點與優勢是不可否認的?？偠灾?，Web開發技術具有以下幾個方面的特點：

1.1與平臺無關

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

1.2分布式

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

1.3動態化

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

1.4交互性和可測試性

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

二、Web前端開發面臨的問題

2.1兼容性問題

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

2.2交互的復雜度

2.3代碼可維護性

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

三、制約Web前端優化的因素

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

3.1 Browser/Server結構

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

3.2瀏覽器連接的限制問題

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

四、Web前端優化對策

4.1 Browser/Server結構優化

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

4.1.1服務器方面

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

4.1.2 HTTP請求方面

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

4.1.3 Ajax方面

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

4.2二次鏈接優化

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

五、web開發技術的開發流程

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

5.1選擇開發技術

依據用戶需求選擇最適合的開發工具，以減少開發中可能會出現的各種問題。

5.2搭建開發環境

根據客戶需求進行開發環境的搭建。

5.3構建模型與編碼階段

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

5.4測試與部署階段

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

5.5數據分析服務階段

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

六、Web項目的三大圖

6.1功能結構圖

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

6.2業務流程圖

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

6.3用例圖

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

七、結束語

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

參? 考? 文? 獻

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

[2]姜海紅. 淺議B/S結構系統的優化問題[J]. 信息系統工程， 2019， 000（006）：84.

[3]許向陽， 任皓. 基于Nginx的Web服務器優化和防護[J]. 內蒙古科技與經濟， 2019， 000（012）：77-78.

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

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

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

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

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

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

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