基于網(wǎng)站制作的Web 前端開發(fā)技術(shù)與優(yōu)化

孫川钘 朱镕申 電子科技大學(xué)成都學(xué)院

Web 前端開發(fā)始于網(wǎng)頁制作。其中，網(wǎng)站制作包羅萬象，其中不僅涉及圖片的處理、頁面的布局，還涉及到數(shù)據(jù)庫的合理搭建等等。隨著時(shí)代的發(fā)展和科技的進(jìn)步，網(wǎng)站制作越來越精細(xì)化，滿足各種人群的各種需求。因此，了解Web 前端開發(fā)技術(shù)，就必須先了解網(wǎng)站制作。目前，網(wǎng)站網(wǎng)頁不僅拘泥于圖片和文字，不再只是信息的載體，網(wǎng)頁的內(nèi)容及設(shè)計(jì)也日新月異，為博取瀏覽用戶的眼球，取得用戶注意力，滿足了用戶的需求，從而達(dá)到營銷的目的。因此，在Web 前端開發(fā)上，涌現(xiàn)出大量的前端工程師，促使 Web 前端開發(fā)技術(shù)的革新和改進(jìn)，推動(dòng)時(shí)代的進(jìn)步。

1 簡(jiǎn)述Web 前端開發(fā)技術(shù)

在 Web 前端開發(fā)技術(shù)之中有三個(gè)“法寶”，這三個(gè)“法寶”有著至關(guān)重要的作用，它們分別是：HTML、Java Script、CSS。這三種語言各具特色并且對(duì)應(yīng)著相應(yīng)的職能，執(zhí)行標(biāo)準(zhǔn)也各有不同，但又彼此間相互聯(lián)系，缺一不可。三個(gè)“法寶”的分工協(xié)作有條不紊的確保了 Web 前端開發(fā)技術(shù)的優(yōu)化和提升。

目前，B/S 結(jié)構(gòu)是最常見的一種網(wǎng)絡(luò)環(huán)境，是一種較為簡(jiǎn)單并符合時(shí)代特征的結(jié)構(gòu)方式。人們對(duì)這種方式并不陌生，在瀏覽用戶打開瀏覽器輸入網(wǎng)址時(shí)，就要向 URL 發(fā)出請(qǐng)求，服務(wù)器會(huì)自動(dòng)分析其域名，核實(shí)后會(huì)獲取相應(yīng)的 IP 地址，最終實(shí)現(xiàn)瀏覽用戶的IP 地址和訪問網(wǎng)站的對(duì)接，這樣瀏覽用戶就可看到相關(guān)信息了。在此基礎(chǔ)上，打開瀏覽器的客戶端會(huì)發(fā)送 HITP 到服務(wù)器中，收到請(qǐng)求的服務(wù)器將通過 URL 的自動(dòng)確認(rèn)文件的相關(guān)信息并以網(wǎng)絡(luò)地址的形式反饋給瀏覽用戶，常見的有 ASP、JSP 文件等等。通常情況下，Web 服務(wù)器主要負(fù)責(zé)根據(jù)文件的內(nèi)容和 URL 的參數(shù)進(jìn)行資源的調(diào)用，有效的生成并傳遞HTML 頁面給瀏覽客戶，完成客戶的請(qǐng)求。在文件生成之后，HTTP 的請(qǐng)求會(huì)由服務(wù)器自主來完成，并且把生成后的 HTML 文件傳輸?shù)綖g覽器之中，瀏覽器負(fù)責(zé)文件的接收，當(dāng)然這一過程也是通過人工編程，設(shè)計(jì)好之后服務(wù)器可自主根據(jù)HTTP 的請(qǐng)求給出相關(guān)的指示。一般在接收文件后進(jìn)行文件分析，可向相關(guān)的服務(wù)器發(fā)送所需鏈接資源文件。常見有內(nèi)嵌網(wǎng)頁、CSS 等等。服務(wù)器在接收請(qǐng)求之后，詢問網(wǎng)絡(luò)分配資源文件。最后，隨著資源文件的成功發(fā)送，瀏覽器也將進(jìn)行數(shù)據(jù)統(tǒng)計(jì)和分析，最終展示合理的效果。每一個(gè)過程都需要參與的程序有條不紊的運(yùn)作，以保證效果的最佳化，當(dāng)然，隨著5G時(shí)代的到來，信息化的發(fā)展將更進(jìn)一步。

2 基于網(wǎng)頁設(shè)計(jì)Web 前端開發(fā)技術(shù)的優(yōu)化

網(wǎng)頁的本質(zhì)意義時(shí)傳遞和呈現(xiàn)相關(guān)信息，來滿足瀏覽客戶的需求，隨著互聯(lián)網(wǎng)的快速發(fā)展和時(shí)代的飛速進(jìn)步，不論是信息獲取的時(shí)間還是網(wǎng)頁呈現(xiàn)的效果都將對(duì)瀏覽用戶的體驗(yàn)產(chǎn)生重大影響。因此，信息本身的內(nèi)容及價(jià)值沒有發(fā)生變化，但是在獲取信息的角度來看，瀏覽用戶的體驗(yàn)程度對(duì)信息的獲取產(chǎn)生極大的影響，甚至對(duì)社會(huì)行為產(chǎn)生影響，例如，網(wǎng)絡(luò)媒體吸睛的標(biāo)語以及社會(huì)輿論的倒向在網(wǎng)絡(luò)中的映射。所以，這些都將成為 Web 前端開發(fā)技術(shù)優(yōu)化的目標(biāo)和方向。

2.1 優(yōu)化HTTP 的請(qǐng)求

首先要對(duì)相應(yīng)的 HTTP 請(qǐng)求進(jìn)行技術(shù)的優(yōu)化，確保內(nèi)容的嚴(yán)格篩選，選擇必要的請(qǐng)求，合理的管理和優(yōu)化互聯(lián)網(wǎng)體系，以便從根本上提升前端開發(fā)技術(shù)的整體水平。其中完善HTTP 的請(qǐng)求內(nèi)容較多，例如數(shù)據(jù)的發(fā)送、服務(wù)器和瀏覽器鏈接的建立等等。不同的環(huán)境的請(qǐng)求會(huì)占用相應(yīng)的時(shí)間，累計(jì)這些請(qǐng)求將會(huì)導(dǎo)致時(shí)間成本的大幅增加，從而進(jìn)一步的浪費(fèi)大量的寬帶資源。因此，在HTTP 的優(yōu)化過程中，控制其請(qǐng)求的數(shù)量和相應(yīng)的時(shí)間成本是必不可少的。一般情況可采用文件合并的方式進(jìn)行時(shí)間的節(jié)??；圖片的請(qǐng)求可以采用不同鏈接映射在不同區(qū)域的方式對(duì)HTTP 進(jìn)行有效的管理。

2.2 優(yōu)化文件規(guī)模

文件規(guī)模的優(yōu)化相比HTTP 的優(yōu)化更加復(fù)雜，它不僅要優(yōu)化 CSS 文件、Java Script 文件，還要對(duì)相應(yīng)的代碼進(jìn)行優(yōu)化。尤其是 CSS 代碼的優(yōu)化，時(shí)優(yōu)化文件規(guī)模中重要的組成部分。在后期的內(nèi)容優(yōu)化中，CSS 代碼優(yōu)化也占據(jù)著重要地位，這是由于CSS 具備覆蓋疊成的特殊性，使得瀏覽器在加載完成后會(huì)進(jìn)行渲染工作，因此，要想獲得優(yōu)質(zhì)的Web 效果，就一定要經(jīng)過 CSS 加載的優(yōu)化。而在內(nèi)容優(yōu)化的過程中，將script 置于底部，是為了避免腳本在執(zhí)行的過程中影響到頁面下載，使得下載速度過慢，延長(zhǎng)頁面加載的時(shí)間，降低瀏覽用戶的體驗(yàn)效果。

2.3 優(yōu)化DNS 的查詢次數(shù)

DNS 的詢問次數(shù)過多也會(huì)導(dǎo)致時(shí)間成本過高，例如，如果 DNS 每解析一次需要 20-120 毫秒，過于頻繁的解析將直接導(dǎo)致信息傳輸速度或呈現(xiàn)速度減緩，從而降低用戶的瀏覽體驗(yàn)效果。所以對(duì) DNS 的查詢次數(shù)進(jìn)行優(yōu)化和控制是 Web 前端開發(fā)技術(shù)優(yōu)化的重要環(huán)節(jié)。

除上述之外，重定向也是Web 前端開發(fā)技術(shù)優(yōu)化的重要環(huán)節(jié)，因重定向容易受到各種不同因素的影響，總的而言，重定向增加一次， Web 請(qǐng)求就會(huì)增加一次，將直接導(dǎo)致訪問過程中時(shí)間成本的直線增加。所以，在站點(diǎn)目錄之后添加“/”可以有效避免重定向目標(biāo)的重復(fù)出現(xiàn)。降低時(shí)間成本，提高用戶體驗(yàn)效率。

3 結(jié)語

綜上所述，Web 前端開發(fā)技術(shù)的優(yōu)化需要從多個(gè)方面著手，它需要對(duì)HTTP 的請(qǐng)求進(jìn)行優(yōu)化、對(duì)文件規(guī)模以及內(nèi)容進(jìn)行優(yōu)化、對(duì)DNS 的查詢次數(shù)進(jìn)行優(yōu)化，這樣才能保證瀏覽用戶的體驗(yàn)感受，同時(shí)它也是網(wǎng)站制作水平提升的技術(shù)保障。