鄭煜榮

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

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

引言：

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

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

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

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

1.1與平臺無關(guān)

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

1.2分布式

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

1.3動態(tài)化

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

1.4交互性和可測試性

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

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

2.1兼容性問題

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

2.2交互的復(fù)雜度

2.3代碼可維護(hù)性

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

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

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

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

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

3.2瀏覽器連接的限制問題

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

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

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

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

4.1.1服務(wù)器方面

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

4.1.2 HTTP請求方面

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

4.1.3 Ajax方面

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

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

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

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

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

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

依據(jù)用戶需求選擇最適合的開發(fā)工具，以減少開發(fā)中可能會出現(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測試與部署階段

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

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

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

六、Web項目的三大圖

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)的功能，同時也清晰的說明了各項功能的操作者。用例圖可以準(zhǔn)確的表達(dá)系統(tǒng)的功能。

七、結(jié)束語

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

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

[1]岳彩夢. 基于軟件工程的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]許向陽， 任皓. 基于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ī)產(chǎn)品與流通， 2019， 000（005）：P.24-24.

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

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

[7]趙瑩， 劉佰龍， 王志曉. 基于網(wǎng)絡(luò)學(xué)習(xí)空間的對分課堂教學(xué)模式應(yīng)用分析——以Web應(yīng)用開發(fā)技術(shù)課為例[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]肖美婷. 移動WEB開發(fā)技術(shù)在商務(wù)網(wǎng)站的應(yīng)用及發(fā)展趨勢探究[J]. 中國新通信， 2018， 20（017）：125.

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