動(dòng)態(tài)網(wǎng)頁前端開發(fā)技術(shù)以及優(yōu)化策略研究

姜立

(遼寧軌道交通職業(yè)學(xué)院,遼寧沈陽 110023)

1 引言

互聯(lián)網(wǎng)信息技術(shù)的發(fā)展,是人類文明史的創(chuàng)新,縮短了人與人之間的距離,通過手機(jī)APP實(shí)現(xiàn)實(shí)時(shí)的聊天通話,比如微信、MSN等。在互聯(lián)網(wǎng)技術(shù)日益成熟的過程中,網(wǎng)絡(luò)成為了人類生活生產(chǎn)不可缺少的部分,實(shí)現(xiàn)了在戶不出門,盡知天下事。移動(dòng)支付、網(wǎng)購成為了中國新四大發(fā)明,方便了人們的生活,提高了人們的生活品質(zhì)。互聯(lián)網(wǎng)行業(yè)在發(fā)展的同時(shí),需要網(wǎng)絡(luò)提供信息資源,建立并遵守信息安全機(jī)制,保證維護(hù)安全綠色的網(wǎng)絡(luò)環(huán)境。Web前端開發(fā)技術(shù)主要用于網(wǎng)頁信息的開發(fā)、設(shè)置網(wǎng)頁形態(tài)等。它對(duì)互聯(lián)網(wǎng)用戶的信息傳輸和服務(wù)體驗(yàn)都具有不可替代的作用,也是促進(jìn)信息價(jià)值的體現(xiàn)和互聯(lián)網(wǎng)商業(yè)化進(jìn)行的基礎(chǔ)。Web前端開發(fā)技術(shù)應(yīng)該得到加強(qiáng),優(yōu)化技術(shù)不斷創(chuàng)新,從而促進(jìn)信息網(wǎng)絡(luò)的可持續(xù)發(fā)展。

2 Web前端開發(fā)技術(shù)的綜述

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

Web前端開發(fā)技術(shù)主要由HTML、CSS、JavaScript、DOM以及AJAX五部分組成。這五部分分別具有屬于自己的特征,承擔(dān)著不同的任務(wù)要求,尤其是代碼質(zhì)量方面存在一定的差異性,且五者之間又存在一定的聯(lián)系。HTML是常用制作的方式,研究且調(diào)整超文本結(jié)構(gòu),進(jìn)行圖案修正,渲染網(wǎng)頁的動(dòng)靜態(tài)效果,也同時(shí)便于管理網(wǎng)站,提升用戶的應(yīng)用體驗(yàn)。CSS是一種標(biāo)記性語言,更傾向于控制網(wǎng)頁的外觀,將內(nèi)容和格式隔離,便于維護(hù)和更新網(wǎng)頁,加快網(wǎng)頁的瀏覽速度。JavaScript可以進(jìn)行實(shí)時(shí)的表達(dá),減小服務(wù)器端的壓力,提高了用戶使用效率,降低排斥效應(yīng)。DOM發(fā)揮著特別重要的作用,是一種與瀏覽器等相關(guān)的接口組件,增強(qiáng)網(wǎng)頁之間的聯(lián)系。AJAX可實(shí)現(xiàn)異步通信,減少請(qǐng)求信息量,提高網(wǎng)絡(luò)運(yùn)行的穩(wěn)定性。

2.2 Web前端開發(fā)技術(shù)模塊功能

Web前端開發(fā)技術(shù)擁有的模塊具有改善開發(fā)功能、多向開發(fā)功能、兼容開發(fā)功能。改善開發(fā)功能包括降低了反應(yīng)時(shí)間,提高網(wǎng)頁的運(yùn)行穩(wěn)定性,節(jié)省內(nèi)存容量,提高了瀏覽網(wǎng)頁的速度等功能。多向開發(fā)功能包括縮短運(yùn)行的反應(yīng)時(shí)間,加快了網(wǎng)頁的更新速度,提高運(yùn)行的效率,網(wǎng)絡(luò)協(xié)議、IP和DNS得到了優(yōu)化效果。兼容開發(fā)功能首先解決了系統(tǒng)與瀏覽器的兼容問題,實(shí)現(xiàn)了技術(shù)的修正,改善了系統(tǒng)程序運(yùn)行的穩(wěn)定效果,優(yōu)化執(zhí)行程序的反應(yīng)過程,更加便捷的完成系統(tǒng)的指令,彌補(bǔ)了Web前端技術(shù)的不足。

2.3 Web前端開發(fā)技術(shù)體系的工作分析

B/S結(jié)構(gòu)是現(xiàn)階段常采用的結(jié)構(gòu),符合當(dāng)前的網(wǎng)絡(luò)環(huán)境技術(shù)特點(diǎn)。用戶利用網(wǎng)頁輸入查詢地址時(shí),請(qǐng)求URL執(zhí)行,DNS服務(wù)器開始工作,分析當(dāng)前的網(wǎng)址域名并獲取相應(yīng)的IP地址信息,實(shí)現(xiàn)用戶可以直接對(duì)地址內(nèi)容瀏覽,與此同時(shí),瀏覽器發(fā)送HTTP請(qǐng)求指令,服務(wù)器接受HTTP請(qǐng)求,目標(biāo)文件得到確定,也將以網(wǎng)址的形式傳送過來,例如ASP、PHP或者JSP文件等,而Web服務(wù)器在此進(jìn)行中負(fù)責(zé)依據(jù)相應(yīng)頁面文件的具體內(nèi)容以及URL相關(guān)參數(shù),調(diào)用數(shù)據(jù)資源,生成HTML對(duì)應(yīng)的數(shù)據(jù)并傳遞給瀏覽器,然后對(duì)HTML數(shù)據(jù)進(jìn)行分析,最終將資源文件整理之后展現(xiàn)到網(wǎng)頁上。

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

雖然Web前端開發(fā)技術(shù)可以在順利傳遞相應(yīng)的網(wǎng)絡(luò)信息,但是隨著消費(fèi)者需求要求的提高,已不能滿足消費(fèi)者的標(biāo)準(zhǔn),此時(shí)就需要對(duì)Web前端開發(fā)技術(shù)進(jìn)行優(yōu)化,提高網(wǎng)頁的加載速度,增強(qiáng)網(wǎng)頁瀏覽的兼容性和安全性,改善自身存在的不足,從以下幾點(diǎn)做起。

3.1 減少HTTP的請(qǐng)求數(shù)

減少HTTP的請(qǐng)求數(shù)是優(yōu)化Web技術(shù)最重要最有效的方式之一。一個(gè)完整的請(qǐng)求都需要經(jīng)過DNS尋址、與服務(wù)器建立連接、發(fā)送數(shù)據(jù)、等待服務(wù)器響應(yīng)、接收數(shù)據(jù)這樣一個(gè)“漫長”而復(fù)雜的過程。由于瀏覽器進(jìn)行并發(fā)請(qǐng)求的請(qǐng)求數(shù)是有上限的,當(dāng)請(qǐng)求數(shù)增多時(shí),瀏覽器需要分批進(jìn)行,會(huì)增加用戶的等待時(shí)間。其主要的途徑有從設(shè)計(jì)實(shí)現(xiàn)層面簡(jiǎn)化頁面,保證運(yùn)行時(shí)所占的內(nèi)存減小;合理設(shè)置HTTP緩存,提高瀏覽器的緩存量和緩存時(shí)間。比如,很少變化的圖片資源可以直接通過HTTP Header中的Expires設(shè)置一個(gè)較長的過期時(shí)間,使變化不頻繁而又可能會(huì)變的資源可以使用Last-Modifed來做請(qǐng)求驗(yàn)證,盡可能地讓資源能夠在緩存中待得更;資源合并與壓縮,可以是節(jié)省空間資源;Inline Images使用數(shù)據(jù),采用URL scheme的方式將圖片嵌入到頁面或CSS中,建議不考慮資源管理時(shí)使用;CSS Sprites和Lazy Load Images也可以減少HTTP請(qǐng)求。

3.2 將外部腳本置底

在瀏覽器加載資源的過程中,將腳本放置于靠前位置,會(huì)影響加載速度從而影響用戶的體驗(yàn)。比如,在腳本加載完成之前,它后面 的圖片、樣式以及其他腳本都處于阻塞狀態(tài),直到腳本加載完成后才會(huì)開始加載。因此,將外部腳本置地,會(huì)提高瀏覽器加載項(xiàng)的速度。

3.3 異步執(zhí)行Inline腳本

Inline腳本在執(zhí)行的時(shí)候一樣會(huì)阻塞并發(fā)請(qǐng)求,當(dāng)腳本在頁面渲染之前執(zhí)行時(shí),由于瀏覽器處理頁面的方式是單線程,頁面渲染的工作會(huì)被推遲,影響程序加載的速度,因此將Inline腳本異步執(zhí)行。

3.4 降低DNS的查詢時(shí)間

DNS解析是造成時(shí)間等待的重要因素之一,過度頻繁的請(qǐng)求解析,必然會(huì)導(dǎo)致傳輸信息的時(shí)間加長,并且在解析的過程中無法下載任何資源,從而用戶體驗(yàn)效果會(huì)降低。適當(dāng)?shù)目刂艱NS的解析次數(shù)也會(huì)提高加載的速度。

3.5 正確加載JavaScript

隨著JavaScript框架的流行,越來越多的站點(diǎn)也使用起了框架。但不是每個(gè)頁面都需要加載腳本,下載了不需要的腳本既浪費(fèi)時(shí)間又浪費(fèi)資源。在設(shè)置JavaScript框架時(shí),只需要加載核心模塊,其他腳本需要使用時(shí)加載即可。

4 結(jié)語

網(wǎng)絡(luò)技術(shù)已經(jīng)打破了人們傳統(tǒng)的思想觀念,與學(xué)習(xí)生活工作產(chǎn)生了密切的聯(lián)系,成為人類生活中不可缺少的部分。在國家教育部門的大力支持下,促使高校重視Web前端技術(shù)技能課程的發(fā)展,在教學(xué)中貫徹H-C-J模式,培養(yǎng)出適應(yīng)于社會(huì)市場(chǎng)需求的高質(zhì)量人才。Web前端技術(shù)在網(wǎng)絡(luò)發(fā)展的進(jìn)程中發(fā)揮了不可替代的作用,在不斷地應(yīng)用此技術(shù)的過程中,應(yīng)積極創(chuàng)新發(fā)展,優(yōu)化Web前端技術(shù),改善其不足之處,提高網(wǎng)頁設(shè)計(jì)的加載速度,提高網(wǎng)絡(luò)資源的利用率,達(dá)到良好用戶體驗(yàn)的效果,促使我國互聯(lián)網(wǎng)產(chǎn)業(yè)創(chuàng)新發(fā)展,實(shí)現(xiàn)網(wǎng)絡(luò)強(qiáng)國的重要目標(biāo)。

[1]王靖.Web前端開發(fā)技術(shù)及優(yōu)化策略[J].產(chǎn)業(yè)與科技論壇,2017,16(16):44-45.

[2]周康.Web前端開發(fā)技術(shù)以及優(yōu)化方向探究[J].電腦迷,2017,(11).