胡鋒 吳多智

（瓊臺(tái)師范學(xué)院信息科學(xué)技術(shù)學(xué)院 海南省海口市 571100）

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

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

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

1.1 HTML

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

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

1.2 CSS

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

1.3 Java

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

1.4 DOM

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

1.5 AJAX

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

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

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

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

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

2.1.1 HTML 優(yōu)化

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

2.1.2 CSS 優(yōu)化

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

2.1.3 Java 優(yōu)化

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

2.2 減少HTTP的錯(cuò)誤

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

2.3 DNS查詢(xún)優(yōu)化

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

2.4 減少HTTP請(qǐng)求

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

2.5 文件夾大小控制

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

2.6 底部script

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

3 結(jié)束語(yǔ)

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