閆志英

摘要：Web前端開發(fā)是近幾年興起的技術(shù)，其主要包括HTTL、CSS和JavaScript，可以在實(shí)際的應(yīng)用中促進(jìn)網(wǎng)站性能優(yōu)化，推動(dòng)SE和服務(wù)器終端基礎(chǔ)知識(shí)的普及，而且運(yùn)用各種工具進(jìn)行輔助開發(fā)以及理論層面的知識(shí)，進(jìn)行包括代碼的可維護(hù)性、組件的易用性、分層語(yǔ)義模板和瀏覽器分級(jí)進(jìn)行支持。文章主要針對(duì)Web前端開發(fā)技術(shù)進(jìn)行分析。

關(guān)鍵詞：Web；前端開發(fā)；技術(shù)分析

在當(dāng)前的信息環(huán)境下，互聯(lián)網(wǎng)對(duì)于整個(gè)社會(huì)生活的影響已經(jīng)到了不可忽視的地步，在技術(shù)的開發(fā)和經(jīng)濟(jì)的發(fā)展中占據(jù)重要的作用，甚至在特殊的環(huán)境下，有些活動(dòng)的開展完全依賴網(wǎng)絡(luò)技術(shù)，離開網(wǎng)絡(luò)技術(shù)的支持，許多工作無(wú)法展開。Web技術(shù)是展現(xiàn)網(wǎng)頁(yè)形態(tài)的主要技術(shù)手段，對(duì)網(wǎng)絡(luò)環(huán)境的信息開發(fā)展現(xiàn)出重要的作用，而其工作的狀況，對(duì)互聯(lián)網(wǎng)用戶的信息傳輸和獲得服務(wù)的體驗(yàn)產(chǎn)生—定的影響，進(jìn)而對(duì)整個(gè)信息環(huán)境價(jià)值的實(shí)現(xiàn)和整個(gè)社會(huì)的各項(xiàng)經(jīng)濟(jì)活動(dòng)的展開具有一定的促進(jìn)作用。因此，提升用戶的互聯(lián)網(wǎng)體驗(yàn)是現(xiàn)階段互聯(lián)網(wǎng)商業(yè)發(fā)展的重要方面，在今后的工作中應(yīng)該加強(qiáng)Web技術(shù)的開發(fā)。

1 Web前端技術(shù)概述

1.1 Web前端技術(shù)概念

Web前端技術(shù)包括三個(gè)主要的因素：HTTL、css、JavaScript.這三者之間雖然相互存在—定的關(guān)聯(lián)，但是在實(shí)際的運(yùn)用過(guò)程中都具有自身的特點(diǎn)，對(duì)代碼質(zhì)量的要求也存在—定的差異性。HTTL技術(shù)可以對(duì)超文本的結(jié)構(gòu)進(jìn)行—定的探索，使得超文本語(yǔ)言在結(jié)構(gòu)上更加完整，將—些過(guò)時(shí)的標(biāo)記及時(shí)取消，內(nèi)容和形式分離，進(jìn)行技術(shù)結(jié)構(gòu)的改進(jìn)之后，生成的網(wǎng)頁(yè)更加易于管理，可提升用戶體驗(yàn)。CSS，即層疊樣式表技術(shù)是用于增強(qiáng)網(wǎng)頁(yè)樣式的控制，為相關(guān)的信息和網(wǎng)頁(yè)的分析提供—定的允許條件，是一種標(biāo)記性的語(yǔ)言。這項(xiàng)技術(shù)的發(fā)展可以促進(jìn)網(wǎng)頁(yè)速度的提升，對(duì)板塊的維護(hù)和改善也具有一定的促進(jìn)作用。JavaScript技術(shù)則介于Java技術(shù)和HTTL技術(shù)之間，在web的頁(yè)面起著一定的嵌入作用，對(duì)頁(yè)面中的對(duì)象和事件進(jìn)行一定的編程。這種技術(shù)出現(xiàn)之后，信息和用戶之間的關(guān)系不僅僅是簡(jiǎn)單的顯示和瀏覽的關(guān)系，同時(shí)可以將實(shí)時(shí)、動(dòng)態(tài)的數(shù)據(jù)進(jìn)行一定的表達(dá)。JavaScript可以和HTML技術(shù)進(jìn)行結(jié)合通過(guò)其在文件中的嵌入，將不需要進(jìn)行整理的技術(shù)進(jìn)行—定的響應(yīng)，使得網(wǎng)頁(yè)可以更好的與客戶進(jìn)行分析，而不需要經(jīng)過(guò)web技術(shù)對(duì)客戶進(jìn)行交流，減少眼務(wù)器的壓力。

1.2 web技術(shù)的開發(fā)現(xiàn)狀

Web技術(shù)的入門較為容易，門檻較低，與計(jì)算機(jī)編程先難后易相反，因此在實(shí)際的工作中，技術(shù)人員可以通過(guò)自主學(xué)習(xí)掌握—定的知識(shí)，從事Web技術(shù)的研發(fā)工作。因此，IT技術(shù)人員從這—方面入門具有‘一定的優(yōu)越性，但是這樣的情況會(huì)造成技術(shù)人員停留在技術(shù)開發(fā)的初期階段，對(duì)于后續(xù)的各項(xiàng)系統(tǒng)的優(yōu)化技術(shù)能力存在嚴(yán)重的不足，造成Web技術(shù)的開發(fā)和使用不能很好的進(jìn)行。同時(shí)，因?yàn)樾滦图夹g(shù)不斷的出現(xiàn)，作為—種新型的技術(shù)，一些規(guī)范和規(guī)定還處在不斷的探索階段，總是有新型的技術(shù)和設(shè)備不斷的涌現(xiàn)出來(lái)，為Web技術(shù)的發(fā)展帶來(lái)巨大的活力，在這樣的背景下，對(duì)從業(yè)人員來(lái)講也面臨著巨大的挑戰(zhàn)。怎樣在進(jìn)行技術(shù)開發(fā)中維護(hù)保持創(chuàng)新性，在技術(shù)的研發(fā)工作中進(jìn)行一定的創(chuàng)新是現(xiàn)階段Web技術(shù)開發(fā)中需要面臨的問(wèn)題。在技術(shù)的革新和進(jìn)步方面技術(shù)人員需要進(jìn)行一定的自我完善。

2 Web技術(shù)開發(fā)注意事項(xiàng)

在進(jìn)行Web技術(shù)的開發(fā)中，需要對(duì)其的設(shè)計(jì)和服務(wù)更加完善的表現(xiàn)出來(lái)，但是僅僅是網(wǎng)頁(yè)的完善性還不能達(dá)到現(xiàn)階段經(jīng)濟(jì)的發(fā)展要求。因此，要采用—定的方式對(duì)技術(shù)進(jìn)行優(yōu)化。

2.1 減少HTTP的請(qǐng)求

在對(duì)Web技術(shù)進(jìn)行優(yōu)化的過(guò)程中.這個(gè)策略是最有效的。一個(gè)完整的請(qǐng)求包括DNS的尋址、建立和服務(wù)器的連接。發(fā)送相關(guān)的數(shù)據(jù)以及進(jìn)行服務(wù)器數(shù)據(jù)的等待。數(shù)據(jù)的接收和等待過(guò)程需要的時(shí)間較長(zhǎng)。用戶在等待的過(guò)程中對(duì)—些按鈕進(jìn)行點(diǎn)擊就會(huì)使服務(wù)器發(fā)送請(qǐng)求，這樣就會(huì)造成存儲(chǔ)空間的增加和后臺(tái)程序的超負(fù)荷運(yùn)作。而且瀏覽器在運(yùn)行的過(guò)程中發(fā)送請(qǐng)求的限額是一定的，如果用戶持續(xù)的發(fā)送請(qǐng)求，就會(huì)占用其他的寬帶空間，當(dāng)瀏覽器發(fā)送的請(qǐng)求超出最大的限額時(shí)，就需要分批的進(jìn)行處理，使用戶等待的時(shí)間延長(zhǎng)，造成惡性循環(huán)，將原本的請(qǐng)求覆蓋掉。因此需要對(duì)請(qǐng)求進(jìn)行減少，主要的方法是進(jìn)行合并文件的操作，將css文件和JavaScript文件進(jìn)行合并，節(jié)省空間。將圖片進(jìn)行分散處理，將不同的圖片進(jìn)行不同的連接，分散數(shù)據(jù)、將圖像進(jìn)行內(nèi)部的關(guān)聯(lián)，讓圖像和文字同時(shí)進(jìn)行顯示，節(jié)省請(qǐng)求的次數(shù)。

2.2 壓縮文件

進(jìn)行Web技術(shù)的開發(fā)，需要對(duì)數(shù)據(jù)進(jìn)行壓縮，包括對(duì)JavaScript壓縮和對(duì)CSS文件代碼進(jìn)行優(yōu)化。進(jìn)行數(shù)據(jù)的壓縮可以將文件數(shù)據(jù)的傳輸速度進(jìn)行加速，同時(shí)還可以保證文件整體的安全性和穩(wěn)定性，盡量避免出現(xiàn)文件丟失的情況。

2.3 對(duì)樣式表進(jìn)行改善

在進(jìn)行層疊樣式的覆蓋中，后面的數(shù)據(jù)自動(dòng)的覆蓋到前面的數(shù)據(jù)中，高級(jí)別的CSS可以對(duì)低級(jí)別的進(jìn)行覆蓋，對(duì)瀏覽器進(jìn)行渲染，因此在進(jìn)行使用的過(guò)程中需要將數(shù)據(jù)進(jìn)行整體的控制，盡量的在數(shù)據(jù)全部加載完成以后進(jìn)行操作，這樣可以獲得最新的數(shù)據(jù)，并將數(shù)據(jù)進(jìn)行合理的分析，減少頁(yè)面中—些空白頁(yè)面的出現(xiàn)，讓用戶可以看到準(zhǔn)確完整的信息，減少刷新的次數(shù)。

2.4 將script放在底部

在進(jìn)行Web優(yōu)化的過(guò)程中需要將script放在底部進(jìn)行操作，這樣可以規(guī)避腳本執(zhí)行中的問(wèn)題，防止腳本進(jìn)行阻塞的下載，從而提升頁(yè)面組建的下載速度和頁(yè)面的加載時(shí)間，對(duì)于不能下載的頁(yè)面直接不進(jìn)行加載，減少不必要的請(qǐng)求，提升加載速度。

2.5 減少DNS查詢

一次DNS的解析過(guò)程會(huì)消耗20-120毫秒的時(shí)間，在DNS查詢結(jié)束之前，瀏覽器不會(huì)下載該域名下的任何東西。所以減少DNS查詢的時(shí)間可以加快頁(yè)面的加載速度。

2.6 避免重定向，杜絕http 404錨誤endprint

進(jìn)行頁(yè)面的重新加載需要—定的時(shí)間。在發(fā)生重定向的過(guò)程中需要耗費(fèi)一定的時(shí)間，發(fā)生重定向的因素較多，每一次重定向的增加都會(huì)增加此Web請(qǐng)求，因此在進(jìn)行Web技術(shù)開發(fā)的過(guò)程中，應(yīng)該將重定向的的請(qǐng)求進(jìn)行減少。

404錯(cuò)誤是因?yàn)槲凑业轿募鸬?。HTTP請(qǐng)求會(huì)消耗很多時(shí)間，所以用HTTP請(qǐng)求來(lái)獲得一個(gè)無(wú)用的響應(yīng)（例如404未找到頁(yè)面）毫無(wú)必要，只會(huì)降低用戶體驗(yàn)。對(duì)頁(yè)面鏈接的充分測(cè)試和對(duì)Web服務(wù)器error日志的不斷跟蹤可以有效減少404錯(cuò)誤。

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

3.1 HTTP請(qǐng)求的優(yōu)化措施

在進(jìn)行請(qǐng)求優(yōu)化的過(guò)程中，需要技術(shù)開發(fā)人員對(duì)DNS信息尋找、瀏覽器的開發(fā)和服務(wù)器之間的連接以及數(shù)據(jù)的傳輸和數(shù)據(jù)的傳輸?shù)确矫孢M(jìn)行分析，因?yàn)槊恳粭l技術(shù)的實(shí)現(xiàn)都會(huì)占據(jù)—定的時(shí)間和空間，如果占據(jù)的空間太多，就會(huì)給網(wǎng)頁(yè)的使用帶來(lái)不便，使得網(wǎng)頁(yè)的反映速度和反映時(shí)間過(guò)長(zhǎng)，導(dǎo)致網(wǎng)頁(yè)的使用效果大打折扣。因此進(jìn)行Web技術(shù)革新的過(guò)程中需要將請(qǐng)求進(jìn)行優(yōu)化的管理，通過(guò)_定的技術(shù)手段將文件和內(nèi)容進(jìn)行合并整理，對(duì)于一個(gè)請(qǐng)求就能實(shí)現(xiàn)的數(shù)據(jù)搜索絕對(duì)不能讓其通過(guò)幾個(gè)請(qǐng)求完成。工程師對(duì)這一方面的技術(shù)要進(jìn)行嚴(yán)格的控制，盡量的將頁(yè)面進(jìn)行優(yōu)化，是頁(yè)面完整有效餓的出現(xiàn)在客戶的使用中而不是出現(xiàn)亂碼或者是頁(yè)面無(wú)法顯示的現(xiàn)象，造成用戶請(qǐng)求的增加，增加用戶的負(fù)擔(dān)。

3.2 對(duì)文件進(jìn)行規(guī)?；奶幚?/p>

在進(jìn)行文件的規(guī)?；幚碇?，需要對(duì)文件進(jìn)行一定的歸檔和—定的梳理，這—方面主要是對(duì)JavaScript和CSS文件以及對(duì)應(yīng)的代碼展開優(yōu)化。優(yōu)化的過(guò)程是對(duì)不必要的html標(biāo)簽進(jìn)行剔除優(yōu)化，以及避免內(nèi)聯(lián)式樣式存在，此外，對(duì)于css代碼優(yōu)化同樣也是這一方面工作的重點(diǎn)內(nèi)容。

3.3 對(duì)內(nèi)容進(jìn)行優(yōu)化

對(duì)于這一方面的工作來(lái)講，其主要是根據(jù)CSS自身具有的覆蓋功能來(lái)實(shí)現(xiàn)的，將樣式表放在項(xiàng)部的同時(shí)將腳本放在底部，這樣的形式可以把網(wǎng)頁(yè)中一些不需要的數(shù)據(jù)進(jìn)行—定的覆蓋。在數(shù)據(jù)加載完成以后，出現(xiàn)一些數(shù)據(jù)優(yōu)化的項(xiàng)目，在網(wǎng)速不好的情況下可以將重要的數(shù)據(jù)進(jìn)行顯示，用戶對(duì)于數(shù)據(jù)的重視程度是超過(guò)相關(guān)網(wǎng)頁(yè)的美化項(xiàng)目的。如果重要的數(shù)據(jù)出現(xiàn)了，那么用戶對(duì)其他的信息的關(guān)注度就較低，可以避免出現(xiàn)重復(fù)刷新的情況。因此要將文件源的連接方式進(jìn)行改進(jìn)，避免出現(xiàn)重定向的現(xiàn)象，重定向耗費(fèi)大量的時(shí)間，其主要是因?yàn)閷?duì)文件的分類不合理而造成，在進(jìn)行網(wǎng)頁(yè)的使用中，如果進(jìn)行重定向就會(huì)浪費(fèi)大量的時(shí)間。

3.4 加強(qiáng)對(duì)工程師的技術(shù)提升

工程師是進(jìn)行網(wǎng)頁(yè)管理的重要組成部分，Web技術(shù)工程師在現(xiàn)代社會(huì)具有較多的資源，但是自學(xué)成才的占據(jù)較大部分，前期的學(xué)習(xí)也較為簡(jiǎn)單。但是要想在實(shí)際的工作中進(jìn)行完善的設(shè)計(jì)和技術(shù)性較高的設(shè)計(jì)則會(huì)遇到—定的困難，造成—定的問(wèn)題，導(dǎo)致對(duì)質(zhì)量較高的Web設(shè)計(jì)無(wú)法完成。因此在進(jìn)行工作的過(guò)程中需要對(duì)技術(shù)人員的基本素質(zhì)進(jìn)行提升，定期進(jìn)行技術(shù)培養(yǎng)。提升技術(shù)人員自身專業(yè)素質(zhì)，對(duì)于Web的設(shè)計(jì)具有重要的促進(jìn)作用。

4 結(jié)語(yǔ)

從計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò)的發(fā)展到現(xiàn)在各項(xiàng)先進(jìn)技術(shù)的發(fā)展，Web技術(shù)已經(jīng)成為人們?nèi)粘Ｉ钪斜夭豢缮俚囊徊糠郑诮换サ氖褂煤拖到y(tǒng)調(diào)節(jié)能力以及富媒體技術(shù)的研發(fā)方面具有重要的作用，使得用戶在不用安裝插件的情況下就能對(duì)Web進(jìn)行瀏覽。Web前端技術(shù)在使用中涵蓋的知識(shí)面較為廣泛，既包括—定的抽象思維和理念，又包括現(xiàn)實(shí)的數(shù)據(jù)分析，對(duì)技術(shù)有—定的要求，同時(shí)還要給用戶的使用帶來(lái)全新體驗(yàn)。在今后的發(fā)展中，應(yīng)該將Web技術(shù)和原生應(yīng)用都進(jìn)行—定的發(fā)展，使其共同的對(duì)互聯(lián)網(wǎng)的應(yīng)用系統(tǒng)進(jìn)行運(yùn)用。隨著未來(lái)科技不斷進(jìn)步，技術(shù)人員應(yīng)該積極的應(yīng)對(duì)和解決Web前端開發(fā)中面臨的問(wèn)題，使其更陜的發(fā)展。endprint