Web前端開發(fā)技術(shù)與優(yōu)化研究

胡鋒 吳多智

（瓊臺師范學(xué)院信息科學(xué)技術(shù)學(xué)院 海南省?？谑?571100）

在我國網(wǎng)絡(luò)發(fā)展初期，Web 相關(guān)研究主要的方向在于網(wǎng)頁制作方面，也就是將語言升級成為一些具有靜態(tài)功能的具體方式。語言在Web 當(dāng)中能夠被用戶使用，因此Web 也就成為了網(wǎng)絡(luò)的發(fā)展窗口，這讓用戶養(yǎng)成了瀏覽網(wǎng)絡(luò)界面的良好習(xí)慣。而未來網(wǎng)絡(luò)技術(shù)的發(fā)展，將Web 也推向了一個全新的發(fā)展方向，用戶對于網(wǎng)絡(luò)界面的瀏覽有了更多的需求，并且方向也各不相同。而早期使用的Web前端開發(fā)防滲方式對于當(dāng)下發(fā)展來說已經(jīng)呈現(xiàn)出了一些不足，因此需要進(jìn)行優(yōu)化。

1 Web前端開發(fā)技術(shù)體系

在我國Web 前端開發(fā)技術(shù)發(fā)展的過程中，有三種比較常用的技術(shù)，分別是HTML、CSS、Java，這三種分別代表了一種不同的開發(fā)語言，這三種語言在編寫代碼的過程中無論是質(zhì)量還是程式都有著不同的需求和差別，但是在實際工作的過程中，由于擁有著不同的開發(fā)要求，因此可以將三者進(jìn)行聯(lián)合使用[1]。這三者之間有著一定的差別和聯(lián)系，下文將主要針對于這三者在軟件開發(fā)過程中的常見技術(shù)應(yīng)用問題進(jìn)行分析。

1.1 HTML

HYML 屬于XHTML/HTML5 的統(tǒng)稱，但是這三者之間存在著一定的區(qū)別。首先介紹HTML，這種語言屬于一種較為標(biāo)準(zhǔn)的標(biāo)記語言，并不屬于編程語言的一種，功能在于能夠讓網(wǎng)頁瀏覽器正常工作[2]。瀏覽器將會對這種語言進(jìn)行翻譯，讓用戶能夠在網(wǎng)頁上閱讀相關(guān)內(nèi)容。其次介紹的是XHTML，這一語言是將HTML 進(jìn)行更新，將W3C 作為了最新的標(biāo)準(zhǔn)，在Web 發(fā)展的過程中，這一語言方式一樣需要急性重視。最后介紹的是HTML5 語言，這一語言是HTML 進(jìn)行更新之后的新一代標(biāo)準(zhǔn)語言，在Web 中需要被重視，主要原因是具有當(dāng)下最新的發(fā)展需求[3]。

未來現(xiàn)代Web 前端語言發(fā)展的過程中，主要的應(yīng)用語言就是HTML5 語言，這能夠更加清晰的展示出開發(fā)結(jié)構(gòu)，與傳統(tǒng)HTML語言相比，具有更大的適用性，并且內(nèi)容和展示部分出現(xiàn)了分割，從而讓網(wǎng)頁結(jié)構(gòu)實現(xiàn)了更加簡潔的發(fā)展和落實。除此之外，現(xiàn)代移動設(shè)備的普及要求HTML 語言進(jìn)行發(fā)展，從而適應(yīng)移動設(shè)備Web的開發(fā)，而HTML 無法達(dá)成，因此就需要使用HTML5 來進(jìn)行處理。在多方對比的之后可以發(fā)現(xiàn)HTML5 具有更大的優(yōu)點，更加適合Web 操作系統(tǒng)之類的RIA 應(yīng)用前端開發(fā)。也就是說，這三種編程語言之間的關(guān)系在于，XHTML 擁有HTML 和HTML5 之間的穿插性和通用性，并且HTML5 具有更大的優(yōu)勢[4]。

1.2 CSS

所謂的CSS 是指通過HTML、XML 中某個應(yīng)用或者子集來展示出的文件樣式計算機語言，具體來說屬于層疊樣式表。在Web前端開發(fā)的過程中，CSS 起到了非常重要的作用，能夠控制網(wǎng)頁樣式、并且將網(wǎng)頁的內(nèi)容進(jìn)行分割。使用CSS 進(jìn)行Web 前端開發(fā)，能夠更好的提升瀏覽器運行速度、降低維護(hù)難度[5]。在原理上來講，CSS 能夠更好的簡化傳統(tǒng)頁面格式代碼，讓代碼出現(xiàn)層疊，但是這樣做之后將會導(dǎo)致代碼外部樣式表保存在瀏覽器緩存當(dāng)中。這導(dǎo)致Web 下載顯示速度下降，上傳代碼數(shù)量較少，而這進(jìn)一步的展示出了網(wǎng)頁瀏覽速度的提升。未來CSS 使用的過程中，使用難度較低，并且修改也較為簡單，能夠?qū)邮蕉x保存在這一屬性當(dāng)中，用戶能夠非常輕松的對樣式表進(jìn)行修改和管理。

1.3 Java

Java 屬于一種直譯式腳本語言，擁有多種發(fā)展形態(tài)，其中包括動態(tài)類型、弱類型、基于原型，翻譯這一語言的翻譯器取自瀏覽器引擎，因此也被稱為Java 引擎。作為開發(fā)語言的一種，Java在開發(fā)的過程中能夠于初期應(yīng)用在Web 的開發(fā)升級當(dāng)中，在傳統(tǒng)HTML 的基礎(chǔ)上來提升動態(tài)功能。而在這一條件下，Java 能夠非常廣泛的應(yīng)用于現(xiàn)代Web 前端開發(fā)的過程中，比如說當(dāng)下比較流行的Ajax 就是在Java 上實現(xiàn)的[6]。

1.4 DOM

在Web 前端開發(fā)的過程中，DOM 技術(shù)發(fā)揮著前所未有的重要作用，能夠為語言無關(guān)及Web 端提供標(biāo)準(zhǔn)的API，將XML 文檔中的抽象節(jié)點構(gòu)成的樹狀數(shù)據(jù)結(jié)構(gòu)進(jìn)行分析，這能夠更好的提升頁面交互性，實現(xiàn)對頁面其他標(biāo)準(zhǔn)組件的訪問，實現(xiàn)異構(gòu)訪問。主要的設(shè)計對象是OMG，對文檔對象和表示對象進(jìn)行了定義與分析[7]。

1.5 AJAX

這一技術(shù)主要是根據(jù)DOM 作為動態(tài)顯示和相應(yīng)的交互，能夠解決服務(wù)器數(shù)據(jù)與頁面數(shù)據(jù)之間的問題，從而創(chuàng)建出動態(tài)網(wǎng)頁，實現(xiàn)后臺與服務(wù)器之間的數(shù)據(jù)交互量較低。因此，為了更好的減少信息量，需要將網(wǎng)絡(luò)速度更快、更穩(wěn)定的進(jìn)行更新。

2 Web前端開發(fā)優(yōu)化

未來發(fā)展的過程中Web 前端開發(fā)過程中優(yōu)化的方向非常復(fù)雜，本文主要針對于六方面進(jìn)行研究，其中包括有HTML、CSS、Java、HTTP、DNS、底部script[8]。

2.1 HTML、CSS、Java優(yōu)化

這三種作為Web 開發(fā)過程中使用的主要技術(shù)語言，在優(yōu)化的過程中也可以稱之為首要的目標(biāo)，對于不同的三種技術(shù)語言來說，優(yōu)化內(nèi)容和優(yōu)化方式也各不相同。

2.1.1 HTML 優(yōu)化

在開發(fā)的過程中，如果選擇了HTML 作為主要的組織語言，需要站在五個角度上來實現(xiàn)現(xiàn)代目的。也就是首先需要實現(xiàn)HTML的含義，將代碼進(jìn)行簡化與清晰。其次則是需要盡量減少DOM節(jié)點，從而提高頁面渲染速度。再次則是需要減少頁面重繪，防止出現(xiàn)頁面縮放問題。隨后則是為了避免出現(xiàn)空屬性、不閉合標(biāo)簽的現(xiàn)象，需要防止措施出現(xiàn)解析。最后則是需要針對于Web 的頁頭和頁尾來進(jìn)行處理，防治JS[9]。

2.1.2 CSS 優(yōu)化

首先針對于CSS 需要站在四個角度上來進(jìn)行優(yōu)化，盡量達(dá)到相應(yīng)的簡化目標(biāo)。首先需要在開發(fā)的過程中需要簡化流程，盡量減少CSSExpressions、CSSE-Fulter 的使用。再次則是需要盡量使用CSS 縮寫，刪除一些重復(fù)的代碼，減少總體代碼數(shù)量。隨后則是需要減少CSS 符層級的使用，盡量使用CLASS、ID，而這主要的方式在于能夠刪除YAG。

2.1.3 Java 優(yōu)化

由于Java 的動態(tài)特征，需要在前端開發(fā)的過程中使用多功能的表現(xiàn)方式，因此Java 的優(yōu)化面積較大，具體來說主要有五項。首先需要盡量較低全局變量次數(shù)，其次則是需要減少重繪、回流次數(shù)。再次則是需要盡量需要減少針對目標(biāo)。最后則是需要盡量不適用with、eval、function，如果存在重復(fù)的JS 需要提前刪除[10]。

2.2 減少HTTP的錯誤

在網(wǎng)頁瀏覽的過程中，HTTP 錯誤屬于較為常見的問題，但是如果這一問題重復(fù)使用，那么就會導(dǎo)致用戶的瀏覽體驗下降。在優(yōu)化的過程中，需要降低HTTP 錯誤概率。而發(fā)生錯誤的原因進(jìn)行分析之后發(fā)現(xiàn)，一般用戶輸入關(guān)鍵詞搜索的過程中，Web 無法找到需要的文件，并且在長時間的搜索下，容易出現(xiàn)頁面崩潰的現(xiàn)象。想要消除這一問題，首先需要加強Web 服務(wù)器與頁面之間的聯(lián)系，從而提升服務(wù)器對于頁面的收縮請求速度，這在一定的程度上能夠避免發(fā)生HTTP 錯誤。

2.3 DNS查詢優(yōu)化

所謂的DNS 查詢是指用戶在使用網(wǎng)絡(luò)的過程中進(jìn)行查詢，屬于最常見的一項功能。在功能運行的影響下，DNS 的查詢消耗將對于網(wǎng)頁的響應(yīng)速度產(chǎn)生影響，但是這種影響一般只出現(xiàn)在毫秒級別。伴隨著用戶使用時間的加強，網(wǎng)頁響應(yīng)速度也就隨之下降，在嚴(yán)重情況下還會導(dǎo)致網(wǎng)頁內(nèi)部的內(nèi)容無法顯示，相應(yīng)的也會對網(wǎng)頁造成影響，因此需要對DNS 查詢功能進(jìn)行優(yōu)化與加強。而站在方法的角度上來說可以發(fā)現(xiàn)，DNS 查詢過程中出現(xiàn)了延時的影響在于根本原因出現(xiàn)了緩存增多，因此Web 前端開發(fā)設(shè)計的過程中首先需要控制網(wǎng)頁的重復(fù)查詢DNS 的查詢次數(shù)。同時網(wǎng)頁還需要具備有緩存自動清理功能，從而實現(xiàn)優(yōu)化的目的。

2.4 減少HTTP請求

HTTP 請求具備有多種多樣的表現(xiàn)形式，比如說在使用協(xié)議、使用資源請求、資源識別符號等等方面，這些請求往往有著多種多樣的存在形式，但是一般都會同時存在。這種存在宴會導(dǎo)致網(wǎng)頁在運行過程中流程逐漸加長，因此也就會影響運行速率。原因在于每一個HTTP 請求出現(xiàn)之后，都會導(dǎo)致內(nèi)部出現(xiàn)大量的數(shù)據(jù)。在運作的過程中，每一項數(shù)據(jù)的存在都會導(dǎo)致大量的網(wǎng)絡(luò)資源被侵占，主要的原因就是網(wǎng)絡(luò)資源存在著一定的有限性。一旦在運行的過程中網(wǎng)絡(luò)數(shù)據(jù)量大于瀏覽器的網(wǎng)絡(luò)資源，就會導(dǎo)致瀏覽器出現(xiàn)卡頓或者崩潰，因此在優(yōu)化的過程中，首先需要減少HTTP 的請求，從而進(jìn)行更加方便的前端開發(fā)。具體來說，本文主要的建議是能夠使用合并文件、CSSSprotes 以及內(nèi)聯(lián)圖像等等方式，將文件進(jìn)行壓縮，從而更好的打包HTTP 請求。在表層運行的過程中，需要注意能夠減少HTTP 請求，內(nèi)層請求則是需要將之成為另一隊列，在本質(zhì)上不會導(dǎo)致請求數(shù)量的降低。

2.5 文件夾大小控制

在Web 數(shù)據(jù)傳輸?shù)倪^程中，文件夾屬于最為常見的一種數(shù)據(jù)打包形式，一旦瀏覽器的內(nèi)部文件越多，就會導(dǎo)致文件夾的自身體積越大，這屬于正常邏輯，但是在現(xiàn)代數(shù)據(jù)傳輸條件的影響下，用戶使用文件夾進(jìn)行傳播的過程中，往往會由于文件夾過大，而導(dǎo)致傳輸速度和文件加載速度下降。除此之外，在傳輸?shù)倪^程中，往往還會對網(wǎng)頁相應(yīng)速度、交互性能產(chǎn)生一定的影響，在情況嚴(yán)重時，還會導(dǎo)致網(wǎng)頁出現(xiàn)崩潰。因此在前端開發(fā)的過程中，首先需要控制好文件夾的大小。在方法方面，本文首先建議的方式就是壓縮文件夾，現(xiàn)代壓縮技術(shù)十分先進(jìn)，能夠?qū)O大的文件夾壓縮成為極小的壓縮包。同時在壓縮的過程中，還能夠大大減少文件夾的大小，控制文件夾內(nèi)部的多余標(biāo)簽，使用CSS 文件、代碼處理等等方式來實現(xiàn)目的。

2.6 底部script

在本質(zhì)上來講，script 能夠被定義為一種腳本，主要的方向就是批量處理文件，并且還能夠保護(hù)文本，屬于功能的延伸。在正常情況下，未來script 還能夠?qū)W(wǎng)頁中的請求進(jìn)行處理，實現(xiàn)邏輯方面的分支。但是在邏輯分支的過程中，往往會出現(xiàn)一定的詢問流程，這些和分支一樣，都會導(dǎo)致網(wǎng)頁性能受到影響。在早期Web 開發(fā)的過程中，開發(fā)人員往往不會刻意的將script 放置在底部，這將會導(dǎo)致腳本對于網(wǎng)頁下載頁面進(jìn)行阻攔，長此以往將會導(dǎo)致無法響應(yīng)，因此需要對這方面的開放方式進(jìn)行優(yōu)化。而未來發(fā)展的過程中，將script 防止在底部，能夠更好的解決這一問題，提升頁面的組件下載速度，較少頁面加載時間，提升網(wǎng)站的前端性能。

3 結(jié)束語

本文主要針對于Web 前端開發(fā)技術(shù)進(jìn)行了研究和優(yōu)化，通過研究之后發(fā)現(xiàn)，當(dāng)下的Web 前端開發(fā)技術(shù)語言主要有三種，分別是HTML、CSS、Java，這三者存在著一定的差異，但是在開發(fā)的過程中各有各的好處。根據(jù)當(dāng)下現(xiàn)代的Web 前端開發(fā)方式來說，依舊存在著一定的不足，因此本文主要針對于各種問題提出了策略，主要對于各種策略的問題進(jìn)行了分析，對于策略的應(yīng)用方法也進(jìn)行了落實，這能夠更好的提升開發(fā)質(zhì)量。