褚建萍

（德州職業(yè)技術(shù)學(xué)院 山東省德州市 253000）

互聯(lián)網(wǎng)技術(shù)在高速發(fā)展的社會(huì)中，無(wú)論是應(yīng)用范圍還是水平均獲得不同程度的提高，在日常工作生活中帶來(lái)更多便利?，F(xiàn)階段，已經(jīng)進(jìn)入到Web2.0時(shí)代，通過(guò)積極推廣與深度研發(fā)Web前端技術(shù)，大幅提高網(wǎng)頁(yè)制作的效率和質(zhì)量，而這項(xiàng)技術(shù)如何進(jìn)一步優(yōu)化改善網(wǎng)絡(luò)生活，成為重要的技術(shù)研究課題。

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

1.1 基本內(nèi)涵

其主要指的是Web頁(yè)面被建立的過(guò)程，也可指在APP前端頁(yè)面創(chuàng)建的基礎(chǔ)上向用戶呈現(xiàn)一個(gè)過(guò)程，憑借例如JavaScript、CSS、HTML多種技術(shù)，建立頁(yè)面框架并予以相應(yīng)的問(wèn)題處理方案，進(jìn)而建立起交互性特征明顯的頁(yè)面，為界面和用戶的交互創(chuàng)造條件[1]。當(dāng)前，互聯(lián)網(wǎng)技術(shù)已邁入發(fā)展的“快速路”，對(duì)比過(guò)去Web頁(yè)面僅是移動(dòng)設(shè)備或是PC瀏覽器中出現(xiàn)，當(dāng)前網(wǎng)頁(yè)能以豐富多元的模式出現(xiàn)，提供更優(yōu)質(zhì)的服務(wù)，而且不同的交互形式進(jìn)一步強(qiáng)化了用戶體驗(yàn)，而以上效果都是依靠應(yīng)用前端技術(shù)達(dá)成的?？傊?，Web前端開(kāi)發(fā)技術(shù)是以Web作為基礎(chǔ)的一項(xiàng)前端制作技術(shù)，通過(guò)對(duì)其有效應(yīng)用逐漸提高網(wǎng)頁(yè)瀏覽效率，優(yōu)化瀏覽體驗(yàn)，同時(shí)汲取本地原生的有關(guān)應(yīng)用技術(shù)精華，在頁(yè)面制作中廣泛使用，也是當(dāng)前頁(yè)面開(kāi)發(fā)人員的第一技術(shù)選擇[2]。

1.2 基本特征

因?yàn)镠TML編程語(yǔ)言屬于這項(xiàng)技術(shù)的典型語(yǔ)言，為此技術(shù)所表現(xiàn)的各項(xiàng)基本特征，則能由此出發(fā)進(jìn)行討論分析：

1.2.1 編寫簡(jiǎn)便

技術(shù)人員如果無(wú)法熟練應(yīng)用JavaScript語(yǔ)言，便可通過(guò)HTML進(jìn)行網(wǎng)頁(yè)制作和實(shí)際，僅將一些Tags加載文本即可。

1.2.2 語(yǔ)法較弱

在編寫HTML5時(shí)，能看到其沒(méi)有相對(duì)緊湊的語(yǔ)法結(jié)構(gòu)要求，但是瀏覽器中依舊具備相同的功能，不僅沒(méi)有大小寫的區(qū)分，還不需要嚴(yán)格管理控制標(biāo)記的結(jié)束[3]。

1.3 核心技術(shù)簡(jiǎn)介

1.3.1 JavaScript語(yǔ)言

JavaScript語(yǔ)言屬于解釋型的腳本，最初使用目的在于處理表單中的輸入驗(yàn)證。當(dāng)前的JavaScript中心內(nèi)容主要包括ECMAScript、BOM、DOM，其具有讀取HTML頁(yè)面元素的能力，將文本以動(dòng)態(tài)的形式嵌入至HTML頁(yè)面中，使表單數(shù)據(jù)在提交前便可在瀏覽器中進(jìn)行驗(yàn)證操作，也具有控制瀏覽器Cookie寫入、修改的功能。伴隨Web前端技術(shù)的進(jìn)步，技術(shù)人員搭建了多種JavaScript的庫(kù)與框架，如以往流行的jQuery庫(kù)便是基于JavaScript的封裝庫(kù)，以封裝原生JavaScript語(yǔ)法的方式，簡(jiǎn)化了前端開(kāi)發(fā)的編程。近些年的技術(shù)人員更偏愛(ài)Angular、Vue、React框架，以操作虛擬Dom和數(shù)據(jù)驅(qū)動(dòng)的方式加以實(shí)現(xiàn)。

1.3.2 CSS樣式表

CSS主要作用在于定義HTML元素的表現(xiàn)形式，可制定元素的背景顏色、邊框形式、陰影、內(nèi)容位置等的樣式和布局描述。CSS技術(shù)在當(dāng)前已經(jīng)升級(jí)到了CSS3版本，新增了特殊效果，如元素漸變、透明、圓角等，以及利用彈性盒模型簡(jiǎn)化網(wǎng)頁(yè)彈性布局，便于網(wǎng)頁(yè)響應(yīng)式開(kāi)發(fā)工作等。而CSS3中的媒體查詢還能以不同客戶端的分辨率為中心，定義差異性的樣式布局，讓同一網(wǎng)頁(yè)可自適應(yīng)不同尺寸的設(shè)備。

1.3.3 HTML語(yǔ)言

該語(yǔ)言由一系列標(biāo)簽組成，最終呈現(xiàn)在瀏覽器中的頁(yè)面。利用這一語(yǔ)言可在網(wǎng)頁(yè)中添加文字、圖片、音頻、視頻、表格、超鏈接等元素，定義了網(wǎng)頁(yè)的布局和最終表現(xiàn)形式。目前主要使用的版本為HTML5，比前一個(gè)版本優(yōu)化了瀏覽器本地離線存儲(chǔ)功能，新增了表單控件，如url、search、number、date等。HTML頁(yè)面也在服務(wù)器、瀏覽器端中承載著傳輸HTTP請(qǐng)求的任務(wù)，負(fù)責(zé)向?yàn)g覽器請(qǐng)求資源鏈接，在瀏覽器收到腳本文件加以解析、執(zhí)行時(shí)，便可完成瀏覽器網(wǎng)頁(yè)中數(shù)據(jù)的動(dòng)態(tài)獲取和更新的任務(wù)。

2 Web前端技術(shù)的開(kāi)發(fā)方向

2.1 優(yōu)化開(kāi)發(fā)

在信息技術(shù)發(fā)展過(guò)程中，對(duì)Web前端技術(shù)的改善使提高技術(shù)應(yīng)用效果的重點(diǎn)。比如，使用SEO技術(shù)優(yōu)化Web前端運(yùn)行時(shí)間，可高效縮短Web前端的反應(yīng)時(shí)間，也能緩解帶寬資源占用較多的問(wèn)題，便于用戶以較快的速度進(jìn)入網(wǎng)頁(yè)中，使訪問(wèn)效率有所提升，也能使計(jì)算機(jī)的硬盤存儲(chǔ)空間得到優(yōu)化。在利用SEO技術(shù)開(kāi)展系統(tǒng)開(kāi)發(fā)工作之時(shí)，簡(jiǎn)化Web前端程序可對(duì)網(wǎng)頁(yè)加載中的無(wú)關(guān)問(wèn)題加以處理，使用戶進(jìn)入網(wǎng)頁(yè)時(shí)間有所降低。但SEO技術(shù)優(yōu)化Web前端開(kāi)發(fā)仍然處于探索階段，尚未大范圍投用到人們的生產(chǎn)、生活中，還有更長(zhǎng)的路要走。

2.2 兼容開(kāi)發(fā)

Web前端兼容開(kāi)發(fā)理念的提出，主要針對(duì)了當(dāng)前部分瀏覽器兼容性不足的問(wèn)題。在計(jì)算機(jī)實(shí)際應(yīng)用之時(shí)，用戶有時(shí)會(huì)同時(shí)使用多種不同類型、引擎的瀏覽器，如同時(shí)開(kāi)啟Google Chrome、Firefox、PaleMoon三個(gè)瀏覽器，可能會(huì)出現(xiàn)網(wǎng)頁(yè)加載速度明顯降低的現(xiàn)象。由于不同瀏覽器間Web前端的運(yùn)行模式、網(wǎng)絡(luò)速度上差異性較小，若想切實(shí)解決瀏覽器存在的兼容問(wèn)題，便要開(kāi)展對(duì)應(yīng)的兼容開(kāi)發(fā)工作。技術(shù)人員可采用CSS編程技術(shù)，對(duì)Web前端中的運(yùn)行程序進(jìn)行設(shè)定，從多個(gè)無(wú)關(guān)聯(lián)的反應(yīng)程序入手，縮小反應(yīng)速度、帶寬占用量等，彰顯了技術(shù)開(kāi)發(fā)的創(chuàng)新性和完整性。

2.3 多項(xiàng)開(kāi)發(fā)

Web前端技術(shù)的多項(xiàng)開(kāi)發(fā)，有利于提高Web前端的運(yùn)行能效。比如在開(kāi)發(fā)Web前端運(yùn)行網(wǎng)絡(luò)協(xié)議時(shí)，當(dāng)技術(shù)人員輸入完IP地址、DNS網(wǎng)址后，可達(dá)到減少IP地址確認(rèn)時(shí)間的目的，對(duì)于提高Web前端開(kāi)發(fā)水準(zhǔn)具有現(xiàn)實(shí)意義。但多項(xiàng)開(kāi)發(fā)的方向也存在一些問(wèn)題，如用戶對(duì)Web運(yùn)行會(huì)帶有懷疑的態(tài)度，降低了整體運(yùn)行速度，若想規(guī)避此類風(fēng)險(xiǎn)的發(fā)生，技術(shù)人員便要提高Web的更新進(jìn)程。

2.4 頁(yè)面結(jié)構(gòu)語(yǔ)義化

HTML頁(yè)面結(jié)構(gòu)的語(yǔ)義化有助于讓用戶明晰頁(yè)面的層次，在失去CSS樣式的條件下，仍能清楚判斷頁(yè)面的整體結(jié)構(gòu)和基礎(chǔ)性頁(yè)面的內(nèi)容布局。語(yǔ)義化也決定了技術(shù)人員要選擇運(yùn)用語(yǔ)義化的標(biāo)簽，可對(duì)網(wǎng)站的搜索引擎進(jìn)行改進(jìn)，便于網(wǎng)頁(yè)開(kāi)發(fā)中維護(hù)工作的有序進(jìn)行。最新HTML5技術(shù)標(biāo)準(zhǔn)規(guī)范中增加了較多類型的語(yǔ)義標(biāo)簽如main、article、header、footer、nav等，利用這些標(biāo)簽可較為明確地區(qū)分網(wǎng)頁(yè)中的主要內(nèi)容、引用、頭部、底部、超鏈接區(qū)域等布局結(jié)構(gòu)，方便在其他設(shè)備中進(jìn)行識(shí)別與解析，讓頁(yè)面的標(biāo)簽使用更為標(biāo)準(zhǔn)，提高了頁(yè)面代碼的可讀性。

2.5 MVVM開(kāi)發(fā)框架

MVVM即模型-視圖-視圖模型，本質(zhì)上由MVC改進(jìn)而來(lái)，其設(shè)計(jì)主旨是將網(wǎng)頁(yè)中的視圖邏輯、業(yè)務(wù)邏輯加以獨(dú)立，再經(jīng)由對(duì)數(shù)據(jù)和視圖綁定的方式，使更新視圖邏輯得到驅(qū)動(dòng)。該框架能夠解耦頁(yè)面UI和邏輯處理，提升視圖和邏輯代碼的重復(fù)使用能效。將頁(yè)面視圖和業(yè)務(wù)邏輯進(jìn)行單獨(dú)開(kāi)發(fā)，可細(xì)化技術(shù)人員的工作內(nèi)容，比如將頁(yè)面設(shè)計(jì)工作安排給專業(yè)設(shè)計(jì)人員完成，而邏輯問(wèn)題的處理交給其他技術(shù)人員。在測(cè)試環(huán)節(jié)中，技術(shù)人員也可根據(jù)“視圖模型”層面進(jìn)行編寫，能夠用來(lái)解決傳統(tǒng)界面測(cè)試中遇到的問(wèn)題。

3 Web前端技術(shù)的相關(guān)應(yīng)用

3.1 網(wǎng)站

有關(guān)制作網(wǎng)頁(yè)，如果想為用戶帶來(lái)更理想的瀏覽體驗(yàn)，則應(yīng)從前期工作、建設(shè)開(kāi)發(fā)、后期工作三個(gè)階段實(shí)現(xiàn)逐一優(yōu)化，基于實(shí)際應(yīng)用視角分析，這樣技術(shù)在網(wǎng)站設(shè)計(jì)與制作中應(yīng)用如下：

3.1.1 制作及完善網(wǎng)站的前期框架

基于網(wǎng)站形式劃分主要為單頁(yè)面、多頁(yè)面網(wǎng)站。針對(duì)單頁(yè)面形式而言，其以單一網(wǎng)址用作基礎(chǔ)形成“一對(duì)一”網(wǎng)站，因?yàn)榻Y(jié)構(gòu)相對(duì)簡(jiǎn)單，所以僅涉及頁(yè)面設(shè)計(jì)就能夠?yàn)g覽，通過(guò)HTML、CSS語(yǔ)言的合理搭配便會(huì)實(shí)現(xiàn)。至于多頁(yè)面網(wǎng)站，其建立基礎(chǔ)為單頁(yè)面，通過(guò)單一網(wǎng)址與若干頁(yè)面數(shù)據(jù)相對(duì)應(yīng)的形式搭建網(wǎng)站結(jié)構(gòu)，主要包含主、副兩類頁(yè)面。一般情況下，主頁(yè)面為網(wǎng)站主體的業(yè)務(wù)模式和相關(guān)經(jīng)營(yíng)概況，通過(guò)“文字+配圖”形式突出重點(diǎn)，設(shè)計(jì)主頁(yè)面時(shí)力求精簡(jiǎn)，對(duì)比單頁(yè)面網(wǎng)站存在一些相同點(diǎn)。對(duì)于多頁(yè)面攜帶的附屬網(wǎng)頁(yè)，需將主頁(yè)面作為基礎(chǔ)并通過(guò)代碼串聯(lián)，其中要防止復(fù)雜內(nèi)容、冗余代碼對(duì)瀏覽速度造成的影響[4]。

3.1.2 制作導(dǎo)航

導(dǎo)航系統(tǒng)的建立基礎(chǔ)為多頁(yè)面網(wǎng)站，用戶利用導(dǎo)航可獲得相應(yīng)的瀏覽指引，并且突顯網(wǎng)絡(luò)整體結(jié)構(gòu)的重點(diǎn)內(nèi)容與主要脈絡(luò)。對(duì)此，設(shè)計(jì)并優(yōu)化導(dǎo)航系統(tǒng)屬于提高網(wǎng)頁(yè)質(zhì)量，瀏覽可行性的一大分支，一般導(dǎo)航菜單依據(jù)網(wǎng)站內(nèi)容實(shí)現(xiàn)數(shù)據(jù)分類，一方面在分類時(shí)保證脈絡(luò)清晰，另一方面要不斷優(yōu)化技術(shù)體系。當(dāng)前，多數(shù)導(dǎo)航系統(tǒng)通過(guò)無(wú)序列表、樣式表來(lái)設(shè)計(jì)，然后以超鏈接的形式附加元素，或是將jQuery、Menu用作第三方插件引用相關(guān)數(shù)據(jù)。

3.1.3 規(guī)劃總體網(wǎng)站制作

確定網(wǎng)站主題應(yīng)該突出重點(diǎn)，依據(jù)網(wǎng)站有關(guān)主體情況與附屬機(jī)構(gòu)規(guī)劃，不僅要言簡(jiǎn)意賅還應(yīng)做好字?jǐn)?shù)控制，旨在讓網(wǎng)站頁(yè)面更加整潔。然后是科學(xué)編排與合理布局網(wǎng)站排版，按照內(nèi)容體系各自的重要性再次規(guī)劃與排版，要保證頁(yè)面排版有條理且兼具秩序性，如果想通過(guò)排版的帶來(lái)良好的瀏覽體驗(yàn)，則可通過(guò)JavaScript、jQuery庫(kù)執(zhí)行規(guī)劃設(shè)計(jì)，一方面網(wǎng)站結(jié)構(gòu)更具連貫性，另一方面幫助網(wǎng)站主體提高影響力[5]。

3.2 在線學(xué)習(xí)平臺(tái)

3.2.1 前端應(yīng)用網(wǎng)頁(yè)

技術(shù)人員利用HTML5、Hybrid APP開(kāi)發(fā)技術(shù)展開(kāi)不同使用場(chǎng)景的響應(yīng)設(shè)計(jì)，在確保學(xué)習(xí)資源整體呈現(xiàn)效果的基礎(chǔ)上，讓終端平臺(tái)更具兼容性，由此為學(xué)生帶來(lái)良好的平臺(tái)使用體驗(yàn)。以制作平臺(tái)前端應(yīng)用網(wǎng)頁(yè)為例，利用HTML5技術(shù)設(shè)計(jì)前端應(yīng)用網(wǎng)頁(yè)，增強(qiáng)用戶和界面間、教師和學(xué)生間的交流互動(dòng)性，搜集整合豐富的網(wǎng)頁(yè)要素、多元的學(xué)習(xí)主題，從而創(chuàng)造理想的教學(xué)活動(dòng)外部環(huán)境。構(gòu)建前端網(wǎng)頁(yè)在為網(wǎng)頁(yè)設(shè)計(jì)提供便利的同時(shí)保證科學(xué)體現(xiàn)各項(xiàng)教學(xué)資源，還可以為實(shí)現(xiàn)后端及離線功能予以強(qiáng)有力的技術(shù)支持。技術(shù)人員利用jQuery Mobile等技術(shù)設(shè)置前端框架，讓前端網(wǎng)頁(yè)包含的應(yīng)用元素獲得有效、針對(duì)性設(shè)置。更重要的是，為后續(xù)修改網(wǎng)頁(yè)應(yīng)用元素創(chuàng)造便利條件[6]。

3.2.2 后端應(yīng)用功能

不僅要科學(xué)設(shè)置前端應(yīng)用網(wǎng)頁(yè)，也要重視離線和后端功能的有效設(shè)置。技術(shù)人員在具體操作中進(jìn)行代碼編寫，依托代碼具備的交互作用幫助前端頁(yè)面和后臺(tái)數(shù)據(jù)之間的交互，在做到動(dòng)態(tài)更新的同時(shí)建立完備的緩存機(jī)制，讓平臺(tái)擁有更強(qiáng)大的離線功能[7]。技術(shù)人員通過(guò)HTML緩存機(jī)制提高程序調(diào)用Web資源的速度，從而增強(qiáng)其獲取及共享后端數(shù)據(jù)的能力。刨除構(gòu)建緩存機(jī)制也能通過(guò)Web Storage功能，妥善保存緩存數(shù)據(jù)。

3.2.3 終端應(yīng)用程序

關(guān)于設(shè)置終端應(yīng)用程序，通過(guò)使用PhoneGap技術(shù)進(jìn)行封裝操作，從而豐富程序功能。例如Android平臺(tái)，設(shè)置應(yīng)用程序利用Eclipse建立文件夾，并在此基礎(chǔ)上設(shè)立2個(gè)獨(dú)立子文件夾/libs、/assets/www，再以PhoneGap壓縮相關(guān)文件并存儲(chǔ)。與此同時(shí)，將java程序啟動(dòng)進(jìn)行文件夾的運(yùn)行以及修改操作，從而形成apk文件[8]。

4 優(yōu)化Web前端技術(shù)相關(guān)措施

4.1 提高HTTP請(qǐng)求控制的合理性

例如使用協(xié)議等均是體現(xiàn)HTTP請(qǐng)求的常見(jiàn)形式。如果請(qǐng)求適當(dāng)減少會(huì)在一定程度上提升網(wǎng)頁(yè)靈敏度，這是由于減少HTTP請(qǐng)求會(huì)縮減資源具體的占用空間。由于完成HTTP存在較大難度并屬于作出系列反應(yīng)的一個(gè)過(guò)程，HTTP請(qǐng)求的合理控制顯得十分重要，比如通過(guò)文件合并來(lái)處理HTTP請(qǐng)求問(wèn)題[9]。

4.2 提高DNS查詢的合理性

如果執(zhí)行DNS查詢會(huì)導(dǎo)致網(wǎng)頁(yè)運(yùn)行速度下降，期間會(huì)經(jīng)歷較長(zhǎng)的解析過(guò)程，大約消耗20-120毫，且在DNS查詢?nèi)蝿?wù)完成之前，網(wǎng)站不會(huì)加載網(wǎng)址域名下的任何模塊?；谥饾u增大的訪問(wèn)量，會(huì)進(jìn)一步延長(zhǎng)網(wǎng)頁(yè)運(yùn)行所需時(shí)間，導(dǎo)致用戶體驗(yàn)感下降，網(wǎng)站的使用效果難以滿足用戶的需求。面對(duì)這樣的現(xiàn)實(shí)情況，因?yàn)橛脩粢蟮男畔o(wú)法及時(shí)加載，所以應(yīng)對(duì)DNS查詢次數(shù)嚴(yán)格控制，從而提升網(wǎng)頁(yè)的加載速度和反應(yīng)能力[10]。在加載網(wǎng)頁(yè)之時(shí)，技術(shù)人員應(yīng)規(guī)避較為繁瑣的設(shè)計(jì)，其會(huì)對(duì)頁(yè)面加載速度產(chǎn)生不良影響，還容易發(fā)生用戶審美疲勞的現(xiàn)象。決定了技術(shù)人員應(yīng)更多關(guān)注網(wǎng)頁(yè)的實(shí)用性，讓網(wǎng)頁(yè)的設(shè)計(jì)簡(jiǎn)潔明了、主體功能清晰明確，使網(wǎng)頁(yè)在符合用戶審美需求的條件下，也能確保網(wǎng)頁(yè)的加載效率。

4.3 對(duì)文件夾大小科學(xué)控制

實(shí)際上文件夾和加載速度之間為正比關(guān)系。即文件夾越大會(huì)使加載速度愈發(fā)緩慢，與此同時(shí)，加載速度的快慢直接影響網(wǎng)頁(yè)使用的體驗(yàn)感受。具體表現(xiàn)如下：較多文件數(shù)量、較大文件內(nèi)等情況會(huì)降低其實(shí)際運(yùn)行速度，網(wǎng)頁(yè)可能由于不堪重負(fù)而致使系統(tǒng)崩潰?；诖?，技術(shù)人員應(yīng)予以高度重視并采取有效的解決方法，以壓縮文件的手段提升網(wǎng)頁(yè)整體運(yùn)行水平，還可以通過(guò)處理代碼及CSS文件的方式，防止系統(tǒng)發(fā)生崩潰[11]。

4.4 降低HTTP錯(cuò)誤出現(xiàn)概率

如果HTTP錯(cuò)誤出現(xiàn)，則會(huì)發(fā)生頁(yè)面崩潰的問(wèn)題，用戶無(wú)法順利訪問(wèn)網(wǎng)頁(yè)。通過(guò)對(duì)這種現(xiàn)象出現(xiàn)的原因分析，在網(wǎng)頁(yè)中無(wú)法找出查詢內(nèi)容的情況下，很容易引發(fā)網(wǎng)頁(yè)問(wèn)題，或是由于過(guò)長(zhǎng)的處理時(shí)間而產(chǎn)生網(wǎng)頁(yè)問(wèn)題，為此應(yīng)提高網(wǎng)頁(yè)處理效率，避免出現(xiàn)類似的問(wèn)題[12]。降低HTTP錯(cuò)誤的思路在于減少無(wú)用響應(yīng)，比如在網(wǎng)頁(yè)訪問(wèn)中會(huì)常見(jiàn)404錯(cuò)誤、拒絕訪問(wèn)錯(cuò)誤等，這些錯(cuò)誤發(fā)生的主要原因在于網(wǎng)站未能找到用戶提出需求的文件ID。在具體操作中，用戶的HTTP請(qǐng)求耗時(shí)較長(zhǎng)，在長(zhǎng)時(shí)間的等待中會(huì)出現(xiàn)無(wú)用的響應(yīng)頁(yè)面，而用戶需求的內(nèi)容則沒(méi)有被及時(shí)找出，使得用戶的體驗(yàn)感有所降低?？茖W(xué)設(shè)置Web服務(wù)器與頁(yè)面間的連接，對(duì)頁(yè)面鏈接進(jìn)行測(cè)試，以及跟蹤Web服務(wù)器的錯(cuò)誤日志等，均可達(dá)成減少HTTP錯(cuò)誤發(fā)生幾率的目標(biāo)。

4.5 規(guī)避重定向風(fēng)險(xiǎn)

網(wǎng)頁(yè)的重定向會(huì)消耗較多的時(shí)間，增加了用戶在網(wǎng)頁(yè)使用時(shí)的等待實(shí)踐。網(wǎng)頁(yè)重定向中還會(huì)發(fā)生各種類型的問(wèn)題，當(dāng)重定向次數(shù)增加一次后，也會(huì)相應(yīng)地增加一次對(duì)Web的請(qǐng)求。為規(guī)避這一風(fēng)險(xiǎn)，技術(shù)人員可在Web站點(diǎn)子目錄后增加root目錄“/”，可減少網(wǎng)頁(yè)發(fā)生重定向操作的頻率。

4.6 完善HTML頁(yè)面

在技術(shù)人員對(duì)Web前端頁(yè)面進(jìn)行開(kāi)發(fā)的過(guò)程中，若想保證同一網(wǎng)頁(yè)在不同客戶端的顯示，便要讓網(wǎng)頁(yè)同設(shè)備的屏幕大小具有較高契合性，使用戶的體驗(yàn)度也能得到同步提升。在部分網(wǎng)站解決此類問(wèn)題時(shí)，通常會(huì)結(jié)合移動(dòng)端設(shè)備設(shè)置不同版本的網(wǎng)頁(yè)，但這種做法會(huì)造成技術(shù)人員維護(hù)網(wǎng)頁(yè)工作量的增多，也會(huì)加大開(kāi)發(fā)難度。在前端頁(yè)面設(shè)計(jì)中想要對(duì)HTML頁(yè)面加以完善，技術(shù)人員可考慮借助HTML5技術(shù)的力量，達(dá)到自適應(yīng)設(shè)計(jì)的目的，用以解決同一網(wǎng)頁(yè)在不同客戶端屏幕中的適應(yīng)性問(wèn)題。在具體操作上，技術(shù)人員的首要任務(wù)是在HTML文檔中的標(biāo)簽屬性中輸入指令和設(shè)置其寬度，維持與設(shè)備屏幕寬度的一致，再設(shè)置“用戶禁止操作網(wǎng)頁(yè)”項(xiàng)目。之后要對(duì)Web前端網(wǎng)頁(yè)寬度、字體字號(hào)等進(jìn)行調(diào)整，應(yīng)結(jié)合相對(duì)參數(shù)的百分比進(jìn)行設(shè)置，字號(hào)設(shè)置上可利用相對(duì)值rem，能夠輔助調(diào)整字號(hào)比例。技術(shù)人員或可使用媒體查詢的方法執(zhí)行CSS樣式，讓查詢可結(jié)合實(shí)際客戶端類型加以執(zhí)行。由此可見(jiàn)，HTML5技術(shù)在Web前端開(kāi)發(fā)中應(yīng)用效果良好，與以往的同類型技術(shù)相比，該技術(shù)可為開(kāi)發(fā)工作提供便捷，也提高了網(wǎng)頁(yè)設(shè)計(jì)的適應(yīng)性和穩(wěn)定性。

4.7 改進(jìn)頁(yè)面設(shè)計(jì)工作

在技術(shù)人員開(kāi)展頁(yè)面設(shè)計(jì)工作之時(shí)，應(yīng)保證頁(yè)面布局的科學(xué)性，內(nèi)容表達(dá)和布局明晰、文字圖片清楚，也是提高頁(yè)面加載速度的一項(xiàng)可行之計(jì)。因此，在基于Web前端開(kāi)發(fā)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，應(yīng)更加體現(xiàn)出網(wǎng)頁(yè)主旨明確、大方得體的特點(diǎn)，對(duì)于文件數(shù)量、大小，以及圖片的規(guī)格等加以改進(jìn)。比如，在對(duì)CSS和JavaScript文件數(shù)量和大小改進(jìn)時(shí)，技術(shù)人員可選擇外聯(lián)式模式，考慮到頁(yè)面設(shè)計(jì)中包含多種內(nèi)容的可能性，此時(shí)頁(yè)面設(shè)計(jì)中便會(huì)需要更多的CSS或JavaScript文件，也會(huì)讓頁(yè)面設(shè)計(jì)的復(fù)雜性更高。要求技術(shù)人員對(duì)于CSS或JavaScript的應(yīng)用事先進(jìn)行規(guī)劃，多使用縮寫模式以防占用更多空間。以這種規(guī)劃的方式可降低CSS或JavaScript的使用量，顯著降低了HTTP的請(qǐng)求數(shù)量。技術(shù)人員還應(yīng)當(dāng)減少重復(fù)代碼的使用，比如在網(wǎng)頁(yè)背景圖進(jìn)行設(shè)計(jì)改進(jìn)時(shí)，可對(duì)與背景圖進(jìn)行靜態(tài)設(shè)置，若網(wǎng)頁(yè)中對(duì)于內(nèi)容中有圖片需求，可事先對(duì)其進(jìn)行優(yōu)化處理后再予以上傳。較多的網(wǎng)頁(yè)中對(duì)于背景圖片數(shù)量有較多要求，容易增加服務(wù)器的運(yùn)行壓力，無(wú)形中增加了HTTP的請(qǐng)求數(shù)量。技術(shù)人員在CSS定義背景時(shí)可將有關(guān)背景加以聯(lián)合，對(duì)圖片質(zhì)量進(jìn)行控制，使其尺寸大小最為適宜。圖片占用空間小可提高網(wǎng)頁(yè)的加載速度，也便于用戶快速下載，對(duì)于服務(wù)器帶寬發(fā)揮良性作用也大有裨益。

5 結(jié)語(yǔ)

網(wǎng)絡(luò)信息技術(shù)的進(jìn)步發(fā)展，致使用戶提出更多的技術(shù)服務(wù)需求。有關(guān)這一技術(shù)的使用及創(chuàng)新，會(huì)盡可能滿足多樣化的用戶使用需求?；诖?，有關(guān)技術(shù)人員在靈活運(yùn)用技術(shù)的同時(shí)，應(yīng)有效解決目前存在的技術(shù)問(wèn)題，例如以對(duì)無(wú)用響應(yīng)、HTTP請(qǐng)求量等方面的優(yōu)化控制，進(jìn)一步強(qiáng)化網(wǎng)頁(yè)交互能力、提升加載效率，從而為網(wǎng)頁(yè)運(yùn)行提供保障，也由于提供可靠方便的技術(shù)服務(wù)，助力我國(guó)互聯(lián)網(wǎng)產(chǎn)業(yè)的良好發(fā)展。