基于HTML5的Web前端App開發(fā)研究

廖詩雨

摘要：新時(shí)期伴隨互聯(lián)網(wǎng)技術(shù)飛速發(fā)展，以Web為基礎(chǔ)的應(yīng)用程序也得到新的發(fā)展，一系列智能手機(jī)、平板電腦終端設(shè)備豐富了人們的工作和生活。多種App的應(yīng)用成為現(xiàn)代化社會(huì)主流。App程序開發(fā)在各行各業(yè)供不應(yīng)求。在此背景下，HTML5的推出極大促進(jìn)了App開發(fā)的發(fā)展。以下對HTML5簡單介紹，主要對基于HTML5的Web前端App開發(fā)作闡述，以此為以Web為支持的應(yīng)用程序持續(xù)革新和發(fā)展提供參考建議。

關(guān)鍵詞：HTML5;Web;應(yīng)用程序;互聯(lián)網(wǎng);程序開發(fā)

中圖分類號(hào)：TP311? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）20-0067-02

進(jìn)入21世紀(jì)，新的網(wǎng)絡(luò)技術(shù)進(jìn)一步發(fā)展創(chuàng)新，人們在享受互聯(lián)網(wǎng)帶來的莫大便捷的同時(shí)，對網(wǎng)頁專業(yè)化開發(fā)也提出更多要求[1]。這在一定程度上促進(jìn)了前端網(wǎng)頁開發(fā)技術(shù)進(jìn)一步創(chuàng)新，以HTML5為支持的Web技術(shù)在多種信息終端設(shè)備中得到廣泛應(yīng)用，時(shí)下更是和智能移動(dòng)設(shè)備結(jié)合，借助HTML5技術(shù)的優(yōu)勢，更好促進(jìn)Web前端開發(fā)技術(shù)在各個(gè)平臺(tái)中深度應(yīng)用，也更好地研發(fā)及控制后期維護(hù)的成本投入，確保在線流量終端系統(tǒng)向智能化、系統(tǒng)化方向不斷發(fā)展。

1 關(guān)于HTML5技術(shù)

HTML5為環(huán)球信息網(wǎng)的核心解析語言，大眾上網(wǎng)過程中，會(huì)頻繁使用網(wǎng)頁訪問多種內(nèi)容，而Web就是由HTML技術(shù)創(chuàng)建支持的。HTML5是對原本HTML修改的技術(shù)，共修改了5次，稱為HTML5[2]。HTML5不僅包含傳統(tǒng)HTML技術(shù)，也結(jié)合更多專業(yè)的編輯腳本語言，實(shí)現(xiàn)功能及性能綜合優(yōu)化 [3]。此外，HTML5還具有多元化的功能，其可以為使用者提供優(yōu)質(zhì)運(yùn)用體驗(yàn)，使用戶訪問Web，無須安置相關(guān)插件，實(shí)現(xiàn)在網(wǎng)頁中實(shí)時(shí)觀看視頻、聽音樂等。同時(shí)，HTML5還具有穩(wěn)定的兼容特點(diǎn)，用戶操作愛奇藝、優(yōu)酷、QQ影音等Web程序時(shí)，可將外接設(shè)備和應(yīng)用程序結(jié)合[4]。HTML5也支持多種應(yīng)用終端實(shí)時(shí)切換，在切換過程中，不需要返回主界面操作，在各個(gè)App中實(shí)現(xiàn)自由轉(zhuǎn)換，提高用戶上網(wǎng)體驗(yàn)。Web前端App開發(fā)過程中，要求設(shè)計(jì)編程人員可靈活應(yīng)用HTML5，解析語法，便于整合多種設(shè)備設(shè)施使用標(biāo)準(zhǔn)要求，并以該技術(shù)支持，為編程研發(fā)人員提供多元的開源庫，提高App開發(fā)的效率、質(zhì)量。

2 Web前端App的開發(fā)現(xiàn)狀及發(fā)展

互聯(lián)網(wǎng)的發(fā)展為我們生活帶來莫大便利，但目前網(wǎng)絡(luò)企業(yè)無法實(shí)現(xiàn)對各項(xiàng)網(wǎng)絡(luò)設(shè)備的公平、全面成本投入、技術(shù)開發(fā)[5]。在Web平臺(tái)支持下，網(wǎng)絡(luò)用戶的各項(xiàng)上網(wǎng)需求基本都可滿足，且客戶端應(yīng)用產(chǎn)品可為用戶提供更加個(gè)性化的App。但網(wǎng)絡(luò)企業(yè)受技術(shù)及設(shè)備資源分配不均影響，無法為用戶提供高度匹配的設(shè)備，無法滿足用戶多樣化需求，移動(dòng)互聯(lián)網(wǎng)行業(yè)需探索如何開發(fā)更有效的移動(dòng)應(yīng)用平臺(tái)。

因移動(dòng)操作系統(tǒng)都具備Web，故移動(dòng)互聯(lián)網(wǎng)也將重心放在發(fā)展Web信息技術(shù)系統(tǒng)方面，以先進(jìn)技術(shù)優(yōu)化網(wǎng)絡(luò)程序，提高用戶上網(wǎng)體驗(yàn)[6]。例如，以iOS、Android系統(tǒng)支持的瀏覽器，其均需要Web平臺(tái)支持，故網(wǎng)絡(luò)企業(yè)雖對及開發(fā)成本有限制，但必須發(fā)揮Web應(yīng)用對獲取信息的意義，讓此類信息技術(shù)應(yīng)用程序可運(yùn)用到不同移動(dòng)操作系統(tǒng)，實(shí)現(xiàn)高效的技術(shù)發(fā)展。

3 HTML5技術(shù)性能優(yōu)化

3.1 腳本方面

將CSS合理應(yīng)用在頭部，Java腳本則在尾部應(yīng)用，可避免腳本處理對頁面加載造成影響，提高頁面加載效率。此外，為規(guī)避圖像中出現(xiàn)空SRC，可將已有頁面再次裝入，改變頁面加載整體速率[7]。

Web中對圖像高頻次的重置，必然會(huì)影響其自身運(yùn)行性能。可盡量避免重置圖片大小，避免圖像處理中應(yīng)用DataURL技術(shù)。若DataURL圖像規(guī)避圖像壓縮算法，則需在文件渲染前就進(jìn)行解碼，這樣一來，加載速率并不理想，需要耗費(fèi)大量時(shí)間[8]。

3.2 載入方面

控制載入速率是提高HTML5技術(shù)性能之關(guān)鍵?？梢詫TTP的請求頻次控制，適當(dāng)控制緩存對服務(wù)器的要求，也將挖掘的資源緩存使用周期優(yōu)化，從而更好管控資源，提高Web顯示效率，也加強(qiáng)多語言腳本壓縮。結(jié)合運(yùn)用首頁載入和適當(dāng)快速畫面，提高用戶對畫面速率認(rèn)知。在此基礎(chǔ)上，考慮到其對渲染運(yùn)行的影響，若網(wǎng)絡(luò)用戶有需求，可將首次使用資源和時(shí)下未使用的資源充分結(jié)合，提高核心資源高度，對操作流程簡化。

例如，對游戲Web的加載，可采取添加載入支持，裝入資源及時(shí)顯示在頁面中。還可在頁面下方轉(zhuǎn)入下一頁面資源，提高頁面銜接效率，提高增進(jìn)速度。其中，cookies會(huì)對Web的加載速度造成不利影響，對HTML5技術(shù)的優(yōu)化需要強(qiáng)化的cookies的控制。靜態(tài)資源域名不能使用cookies，否則影響Web加載速度，需要在服務(wù)器中規(guī)范設(shè)置，實(shí)施第三方資源異步載入，控制第三方資源對屏幕顯示的影響[9-10]。

3.3 CSS的優(yōu)化

寫入在HTML中的Style會(huì)耗費(fèi)網(wǎng)頁加載大量時(shí)間，若涉及CSS表達(dá)，可從CSS渲染內(nèi)跳出，規(guī)避CSS表達(dá)式應(yīng)用?？盏腃SS會(huì)導(dǎo)致CSS文件占據(jù)大量內(nèi)存，也影響CSS的渲染。因此，需將空CSS移除，科學(xué)使用display屬性，display屬性會(huì)影響頁面常規(guī)顯示，故需要加以優(yōu)化。

4 基于HTML5的Web前端App開發(fā)分析

4.1 Web前端Form表單分析

一般的HTML內(nèi)部Form表單需要將到表單元素放在Form的頭部、尾部位置才可滿足要求。而伴隨HTML不斷修改，HTML5的出現(xiàn)使Form表單可轉(zhuǎn)為聲明類型表單，解決原本Form的表單元素必須放置在指定區(qū)域的限制，打破原本技術(shù)局限性，開發(fā)人員關(guān)聯(lián)好表單id及放置區(qū)域，即可滿足使用要求，表單元素可以放置在網(wǎng)頁各個(gè)區(qū)域內(nèi)。此外，HTML5技術(shù)支持下，開發(fā)人員在Form表單對多種表單數(shù)字及管控類型調(diào)配，可優(yōu)化Java代碼編寫周期，使Form表單的創(chuàng)造速度及質(zhì)量得到新的提升。