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

姜立

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

1 引言

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

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

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

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

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

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

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

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

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

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

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

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

3.2 將外部腳本置底

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

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

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

3.4 降低DNS的查詢時間

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

3.5 正確加載JavaScript

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

4 結(jié)語

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

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

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