人工智能技術(shù)背景下Web前端開發(fā)技術(shù)研究

摘要：在人工智能技術(shù)背景下，Web前端開發(fā)正經(jīng)歷著變革，這不僅顯著提高了開發(fā)效率，還極大地優(yōu)化了用戶體驗(yàn)。然而，現(xiàn)行技術(shù)在Web前端開發(fā)中的應(yīng)用效果并不好，所開發(fā)的Web前端不僅響應(yīng)性能比較差，而且代碼錯誤率較高，嚴(yán)重影響了用戶體驗(yàn)。為此，文章提出了人工智能技術(shù)背景下Web前端開發(fā)技術(shù)的研究。該技術(shù)以模型視圖控制器分層架構(gòu)與模塊化設(shè)計(jì)為基礎(chǔ)，通過數(shù)據(jù)層、視圖層以及邏輯層搭建Web前端框架。根據(jù)Web前端框架的運(yùn)行需求，文章采用人工智能技術(shù)中的人工神經(jīng)網(wǎng)絡(luò)模型生成與Web前端框架相匹配的代碼，從而實(shí)現(xiàn)基于人工智能技術(shù)的Web前端開發(fā)。實(shí)驗(yàn)結(jié)果表明，采用所設(shè)計(jì)技術(shù)開發(fā)的Web前端響應(yīng)時間不超過1 s，代碼錯誤率不超過1%，可以實(shí)現(xiàn)Web前端的流暢運(yùn)行。

關(guān)鍵詞：人工智能技術(shù)；Web前端；MVC；前端框架；模塊化；人工神經(jīng)網(wǎng)絡(luò)模型

中圖分類號：TP391

文獻(xiàn)標(biāo)志碼：A

0 引言

信息技術(shù)迅猛發(fā)展，Web前端開發(fā)技術(shù)已成為構(gòu)建互聯(lián)網(wǎng)應(yīng)用的核心力量。作為用戶與互聯(lián)網(wǎng)應(yīng)用交互的直接界面，Web前端技術(shù)的優(yōu)劣直接影響到用戶體驗(yàn)和應(yīng)用效果。當(dāng)前，Web前端開發(fā)領(lǐng)域取得了顯著的進(jìn)展。

葛進(jìn)等^［1］提出了基于UI圖像的開發(fā)技術(shù)，通過深度學(xué)習(xí)模型，文章將UI圖像視為圖像描述任務(wù)，利用滑動窗口減少計(jì)算量，生成可轉(zhuǎn)換的代碼，實(shí)現(xiàn)Web前端開發(fā)。駱海霞^［2］提出了基于HTML5技術(shù)的開發(fā)技術(shù)，實(shí)現(xiàn)響應(yīng)式布局、豐富用戶體驗(yàn)和高效交互的移動Web前端開發(fā)。然而，用戶對網(wǎng)頁的交互性、響應(yīng)速度和美觀程度的要求越來越高，傳統(tǒng)的Web前端開發(fā)方式已經(jīng)難以滿足這些需求。人工智能技術(shù)的不斷進(jìn)步，特別是生成式人工智能技術(shù)的崛起，為Web前端開發(fā)帶來了新的機(jī)遇和挑戰(zhàn)，為此本文提出了人工智能技術(shù)背景下Web前端開發(fā)技術(shù)研究。

1 Web前端框架開發(fā)

在Web前端框架開發(fā)過程中，以模型視圖控制器分層架構(gòu)與模塊化設(shè)計(jì)為基礎(chǔ)。本文采用輕量級前端框架，將Web前端細(xì)分為3大核心組成部分：數(shù)據(jù)層、視圖層以及邏輯層，具體如圖1所示。

圖1中，Web前端框架包含列表管理、表單處理、用戶權(quán)限控制、狀態(tài)管理機(jī)制、信息管理、業(yè)務(wù)流程跟蹤等多個關(guān)鍵功能模塊。根據(jù)DVL架構(gòu)理論（DVL是一種高性能數(shù)值計(jì)算編程語言架構(gòu)），將Web前端框架中所有內(nèi)容劃分為視圖、邏輯以及數(shù)據(jù)3個部分，如表1所示。

在表1中，3個功能層彼此獨(dú)立，且層與層之間存在耦合關(guān)系，滿足用戶需求。在該框架下根據(jù)既定的規(guī)則與流程，對層次間的交互操作進(jìn)行優(yōu)化與調(diào)整^［3］。為了進(jìn)一步提升Web前端的可復(fù)用性與靈活性，本文對層間存在的相同或相似功能進(jìn)行抽取與提煉，實(shí)現(xiàn)層級間功能的抽象化處理，處理后的Web前端框架如圖2所示，該框架以列表視圖、產(chǎn)品視圖以及用戶列表視圖等為例，以列表形式展示數(shù)據(jù)的共同特征^［4］。Web前端框架將這些列表視圖抽象為一個統(tǒng)一的列表視圖類，以便于后續(xù)的復(fù)用與管理。本文采用相同的方法論，對其他類型的視圖進(jìn)行抽象化處理，形成一個涵蓋多種視圖類型的視圖基類，以業(yè)務(wù)邏輯為基礎(chǔ)，抽象出邏輯基類；以數(shù)據(jù)模型為核心，構(gòu)建數(shù)據(jù)模型基類。3個基類通過聚合的模式相互關(guān)聯(lián)、協(xié)同工作，共同構(gòu)成Web前端框架。

2 基于人工智能技術(shù)的Web前端代碼開發(fā)

2.1 構(gòu)建數(shù)據(jù)集

本文在基于人工智能技術(shù)的Web前端代碼開發(fā)時^［5］，所用的數(shù)據(jù)集為合成數(shù)據(jù)集，收錄了1742張圖像及其相匹配的Web前端代碼實(shí)例，但其中大部分僅包含了諸如按鈕、段落等較為基礎(chǔ)的網(wǎng)頁組件。數(shù)據(jù)集不僅規(guī)模相對有限，而且在復(fù)雜度上也未涵蓋網(wǎng)頁中可能出現(xiàn)的多樣元素，極大地限制了在實(shí)際應(yīng)用中的廣泛性和實(shí)用性。基于此，構(gòu)建了新的數(shù)據(jù)集，以更貼近真實(shí)網(wǎng)頁的復(fù)雜性和多樣性。在數(shù)據(jù)集構(gòu)建思路的基礎(chǔ)上，本文將網(wǎng)頁的前端部件分成6個主要的核心類，即標(biāo)題元素、輸入元素、列表元素、段落元素、按鈕元素以及其他元素。在數(shù)據(jù)集的合成過程中，隨機(jī)選擇上述組件填充前端代碼，同時確保每一大類組件的數(shù)量不超過3個，以保持?jǐn)?shù)據(jù)的多樣性和平衡性。

操作人員利用第三方庫自動化操作瀏覽器，打開包含隨機(jī)生成前端代碼的網(wǎng)頁并截取屏幕圖像。Web前端代碼以HTML格式編寫^［6］，但由于HTML代碼往往較長且復(fù)雜，在一定程度上影響了人工神經(jīng)網(wǎng)絡(luò)模型的訓(xùn)練效率，為了優(yōu)化這一過程，引入了一款開源工具（訪問鏈接：https：//uhc-elgg.ch/convert），將HTML代碼轉(zhuǎn)換為Emmet代碼，縮減代碼文本長度。

2.2 數(shù)據(jù)編碼

本文將構(gòu)建的數(shù)據(jù)集中數(shù)據(jù)輸入人工神經(jīng)網(wǎng)絡(luò)模型進(jìn)行編碼和解碼操作，生成Web前端代碼。人工神經(jīng)網(wǎng)絡(luò)模型由嵌入層、線性層、編碼器以及解碼器組成。假設(shè)數(shù)據(jù)集中包含n個樣本，將其輸入嵌入層，從輸入的圖像中提取特征信息，公式表示為：

M_n=∑A/n=1ω_cX_c（1）

公式（1）中，M_n表示嵌入層提取的圖像特征；A表示構(gòu)建的數(shù)據(jù)集；ω_c表示嵌入層權(quán)重矩陣；X_c表示嵌入層輸入的代碼圖像。模型提取的圖像特征輸入線性層進(jìn)行線性處理，得到每個小塊區(qū)域所對應(yīng)的查詢向量、鍵向量以及值向量，一旦成功生成，即傳輸?shù)骄幋a器模塊中進(jìn)行進(jìn)一步的處理，將向量與編碼器參數(shù)相乘，生成查詢矩陣、鍵值矩陣和數(shù)值矩陣，公式表示為：

E=M_nw^E

B=M_nw^B

K=M_nw^K（2）

公式（2）中，E表示查詢矩陣；w^E表示查詢向量；B表示鍵值矩陣；w^B表示鍵向量；K表示數(shù)值矩陣；w^K表示數(shù)值向量。將生成的查詢矩陣與鍵值矩陣相乘得到數(shù)值矩陣K的權(quán)重分布，公式表示為：

V=E×B（3）

公式（3）中，V表示數(shù)值矩陣的權(quán)重向量。將得到的數(shù)值矩陣的權(quán)重向量通過鍵值向量的維度縮放處理，進(jìn)行softmax歸一化，得到輸入圖像樣本的編碼，公式表示為：

A_attention（E，B，K）=S_softmax（V/s_B）K（4）

公式（4）中，A_attention（E，B，K）表示輸入圖像樣本編碼；S_softmax表示歸一化操作；s_B表示鍵值向量的維度。通過以上步驟實(shí)現(xiàn)對數(shù)據(jù)集中所有圖像的數(shù)據(jù)編碼。

2.3 生成Web前端代碼

將編碼器輸出的代碼圖像編碼A_attention（E，B，K）輸入人工神經(jīng)網(wǎng)絡(luò)模型解碼器端，將其作為查詢，通過計(jì)算生成目標(biāo)代碼序列，公式表示為：

O=Decoder［A_attention（E，B，K）］（5）

公式（5）中，O表示解碼器輸出的Web前端代碼；Decoder表示解碼操作。通過以上步驟生成Web前端代碼，利用該代碼開發(fā)Web前端，以此實(shí)現(xiàn)人工智能技術(shù)背景下Web前端代碼開發(fā)。

3 實(shí)驗(yàn)論證

為了驗(yàn)證本文設(shè)計(jì)的Web前端開發(fā)技術(shù)的可行性與可靠性，實(shí)驗(yàn)以某平臺為實(shí)驗(yàn)對象，利用本文設(shè)計(jì)技術(shù)對該平臺Web前端進(jìn)行開發(fā)，實(shí)驗(yàn)環(huán)境如表2所示。

在以上環(huán)境下進(jìn)行Web前端測試，在開發(fā)工具上安裝Node.js環(huán)境以及前端構(gòu)建工具cora；完成Node.js環(huán)境和cora的安裝后，打開操作系統(tǒng)的命令行終端；在命令行終端中，使用CD命令進(jìn)入選定的文件夾；進(jìn)入項(xiàng)目文件夾后，開始執(zhí)行cora提供的命令；通過執(zhí)行cora命令，自動化地完成前端的構(gòu)建和打包工作，生成可以直接部署到服務(wù)器上的靜態(tài)文件或動態(tài)應(yīng)用。為了使此次研究具有一定的參考性和學(xué)術(shù)性價(jià)值，在實(shí)驗(yàn)中設(shè)置2組對照組，分別為葛進(jìn)等^［1］提出的基于UI圖像的開發(fā)技術(shù)和駱海霞^［2］提出的基于HTML5技術(shù)的開發(fā)技術(shù)，以下用對照組1和對照組2表述。Web前端評價(jià)指標(biāo)選擇響應(yīng)時間和代碼錯誤率，通過對比3種技術(shù)開發(fā)的Web前端響應(yīng)時間和代碼錯誤率，評價(jià)本文設(shè)計(jì)技術(shù)的可行性與可靠性。

如圖3所示，給出了3種技術(shù)開發(fā)的Web前端響應(yīng)性能測試結(jié)果；如圖4所示，給出了3種技術(shù)開發(fā)的Web前端代碼錯誤率測試結(jié)果。從圖3可以看出，在Web前端開發(fā)場景中，本文技術(shù)開發(fā)的Web前端響應(yīng)時間不超過1 s，響應(yīng)時間最短，可以實(shí)現(xiàn)對Web前端服務(wù)請求的實(shí)時響應(yīng)。從圖4可以看出，本文技術(shù)開發(fā)的Web前端開發(fā)代碼錯誤率最低，不超過1%，代碼錯誤率越低，說明Web前端故障越少，Web前端開發(fā)質(zhì)量越好。因此，通過以上實(shí)驗(yàn)證明，本文設(shè)計(jì)技術(shù)更適用于Web前端開發(fā)，能夠有效保證Web前端的性能。

4 結(jié)語

在人工智能技術(shù)的背景下，Web前端開發(fā)技術(shù)研究取得了顯著的成果。本文通過引入人工智能技術(shù)，提升了Web前端開發(fā)的效率和質(zhì)量，實(shí)現(xiàn)了自動化代碼生成、智能調(diào)試與優(yōu)化、個性化設(shè)計(jì)等功能。這些成果不僅推動了Web前端開發(fā)技術(shù)的創(chuàng)新與發(fā)展，還為互聯(lián)網(wǎng)行業(yè)帶來了更高效、更智能的解決方案。人工智能技術(shù)背景下的Web前端開發(fā)技術(shù)仍具有廣闊的發(fā)展前景。未來的研究將繼續(xù)深化人工智能技術(shù)與Web前端開發(fā)技術(shù)的融合，探索更多創(chuàng)新的應(yīng)用場景和解決方案。同時未來的研究也將關(guān)注人工智能技術(shù)的最新進(jìn)展，及時將其引入到Web前端開發(fā)中，不斷提升開發(fā)效率和用戶體驗(yàn)。

參考文獻(xiàn)

［1］葛進(jìn)，陸雪松.基于UI圖像的Web前端代碼自動生成［J］.華東師范大學(xué)學(xué)報(bào)（自然科學(xué)版），2023（5）：100-109.

［2］駱海霞.基于HTML5技術(shù)的移動Web前端設(shè)計(jì)與開發(fā)［J］.科技與創(chuàng)新，2024（21）：43-45.

［3］曹嵐，沈銀鋼，施春燕，等.戶用光伏組件遠(yuǎn)程監(jiān)控Web端設(shè)計(jì)［J］.制造業(yè)自動化，2023（2）：111-113.

［4］王鑫.網(wǎng)絡(luò)安全測評中Web應(yīng)用安全滲透測試方法分析［J］.無線互聯(lián)科技，2023（4）：165-168.

［5］劉筑閔.人工智能時代智能圖書館的建設(shè)與研究［J］.江蘇科技信息，2023（5）：29-31.

［6］吳熙彥，魯人齊，張金玉，等.中國地震科學(xué)實(shí)驗(yàn)場三維斷層模型Web展示原型系統(tǒng)［J］.地震地質(zhì)，2024（1）：35-47.

（編輯 沈 強(qiáng)）

Research on Web front-end development technology under the background of Artificial Intelligence technology

SUN Lili

（Guangxi Yulin Technician College， Yulin 537000， China）

Abstract：Under the background of Artificial Intelligence technology， Web front-end development is undergoing changes， which not only greatly improve the development efficiency， but also significantly optimize the user experience. Due to the poor application effect of the current technology in Web front-end development， the developed Web front-end not only has poor response performance， but also has a high code error rate， which seriously affects the user experience. Therefore， this paper puts forward the research on Web front-end development technology under the background of Artificial Intelligence technology. This technology is based on the hierarchical architecture and modular design of model view controller， and the Web front-end framework is built by data layer， view layer and logic layer. According to the running requirements of Web front-end framework， this paper uses artificial neural network model in Artificial Intelligence technology to generate code matching with Web front-end framework， and realizes Web front-end development based on Artificial Intelligence technology. The experimental results show that the response time of the Web front-end developed by the designed technology is less than 1s， and the code error rate is less than 1%， which can realize the smooth operation of the Web front-end.

Key words：Artificial Intelligence technology; Web front-end; MVC; front-end framework; modularization; artificial neural network model