基于網(wǎng)站制作的Web前端開(kāi)發(fā)技術(shù)與優(yōu)化策略
2020-09-27 23:02:21曹艷琴
電腦知識(shí)與技術(shù) 2020年23期
關(guān)鍵詞：開(kāi)發(fā)技術(shù)優(yōu)化策略
曹艷琴
摘要：由于5G時(shí)代的來(lái)臨，互聯(lián)網(wǎng)也將更加深刻地改變?nèi)藗兊纳睢Ｗ鳛榛ヂ?lián)網(wǎng)底層基礎(chǔ)的網(wǎng)站建設(shè)，也必然會(huì)迎來(lái)新一波的建設(shè)浪潮。該文就以網(wǎng)站制作為切入點(diǎn)，首先分析了基于網(wǎng)站制作的Web前端開(kāi)發(fā)技術(shù)，以及網(wǎng)站制作與設(shè)計(jì)的基本思路。并詳細(xì)闡述了網(wǎng)站制作中Web前端開(kāi)發(fā)技術(shù)優(yōu)化問(wèn)題及優(yōu)化策略。
關(guān)鍵詞：網(wǎng)站制作;Web前端;開(kāi)發(fā)技術(shù);優(yōu)化策略
中圖分類號(hào)：TP393? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A
文章編號(hào)：1009-3044（2020）23-0059-02
1 基于網(wǎng)站制作的Web前端開(kāi)發(fā)技術(shù)分析
要進(jìn)行網(wǎng)站建設(shè)，首先離不開(kāi)基礎(chǔ)的Web前端開(kāi)發(fā)技術(shù)。主要包括HTML、CSS和JavaScript等三個(gè)方面的前端開(kāi)發(fā)技術(shù)語(yǔ)言[1]。此三種語(yǔ)言，雖然其各有不同特點(diǎn)，但在實(shí)際的應(yīng)用中也存在十分密切的聯(lián)系。
1.1 HTML及HTML5
HTML（HyperText? Markup? Language）超文本標(biāo)記語(yǔ)言是網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站建設(shè)中最基礎(chǔ)的語(yǔ)言之一。但在現(xiàn)實(shí)使用中，也逐步被一脈相承的HTML5所取代。由于HTML5添加了很多諸如
1.2 CSS
CSS（Cascading Style Sheets）層疊樣式表也是網(wǎng)頁(yè)設(shè)計(jì)及網(wǎng)站建設(shè)中不可或缺的一種語(yǔ)言。其能通過(guò)對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行美化，以達(dá)到優(yōu)化網(wǎng)站頁(yè)面的作用。同時(shí)，使用CSS語(yǔ)言還能有效將網(wǎng)頁(yè)的部分內(nèi)容，進(jìn)行標(biāo)簽化設(shè)置，并實(shí)現(xiàn)內(nèi)容與標(biāo)簽的分離，從而實(shí)現(xiàn)網(wǎng)站頁(yè)面的響應(yīng)速度提升。此外，對(duì)CSS語(yǔ)言的運(yùn)用，還能有利于對(duì)網(wǎng)頁(yè)內(nèi)容，進(jìn)行后續(xù)的更新、維護(hù)以及改版操作，避免網(wǎng)站一成不變而造成的用戶流失。
1.3 JavaScript
JavaScript是一種基于對(duì)象、事件驅(qū)動(dòng)解釋性的瀏覽器語(yǔ)言，也是Web前端開(kāi)發(fā)中的一種腳本語(yǔ)言。目前也被運(yùn)用于很多非瀏覽器環(huán)境中，但因網(wǎng)站多數(shù)需要瀏覽器支持，因此對(duì)非瀏覽器環(huán)境下的JavaScript語(yǔ)言不多贅言[3]。在網(wǎng)站建設(shè)中，JavaScript語(yǔ)言的作用，主要是為了拓展Netscape的相關(guān)功能，在HTML與Java中嵌入Web頁(yè)面，并進(jìn)一步解釋與編程相關(guān)對(duì)象。通過(guò)JavaScript語(yǔ)言的運(yùn)用，能確保用戶與信息之間，形成一種實(shí)時(shí)而動(dòng)態(tài)的表達(dá)，對(duì)提升網(wǎng)頁(yè)交互的效果，具有十分正面的意義。
2 以Web前端技術(shù)為基礎(chǔ)的網(wǎng)站制作與設(shè)計(jì)分析
在整個(gè)網(wǎng)站的制作中，用戶之所以能夠進(jìn)行網(wǎng)站訪問(wèn)，主要是通過(guò)HTML技術(shù)予以實(shí)現(xiàn)的。而對(duì)于網(wǎng)站的構(gòu)建與頁(yè)面的優(yōu)化，則通常使用CSS技術(shù)予以實(shí)現(xiàn)。具體來(lái)說(shuō)，網(wǎng)站制作與設(shè)計(jì)主要分為以下幾個(gè)方面的內(nèi)容。
2.1 網(wǎng)站框架制作與設(shè)計(jì)
網(wǎng)站一般分為單頁(yè)面網(wǎng)站和多頁(yè)面網(wǎng)站。所謂單頁(yè)面網(wǎng)站，就是一個(gè)網(wǎng)址對(duì)應(yīng)一個(gè)單一網(wǎng)頁(yè)所形成的網(wǎng)站，這種網(wǎng)站相對(duì)構(gòu)造簡(jiǎn)單，只需要進(jìn)行簡(jiǎn)單的頁(yè)面設(shè)計(jì)，用HTML及CSS語(yǔ)言能很快完成。而多頁(yè)面網(wǎng)站制作，則通常包括一個(gè)主頁(yè)面和若干個(gè)副頁(yè)面構(gòu)成[4]。以公司網(wǎng)站為例，在制作公司網(wǎng)站時(shí)，網(wǎng)站的主頁(yè)面一般用于介紹公司概況及經(jīng)營(yíng)業(yè)務(wù)等，并通過(guò)配圖的形式，讓用戶更直觀地理解公司概況。由于網(wǎng)站主頁(yè)是用戶打開(kāi)的第一個(gè)網(wǎng)頁(yè)，因此其代碼要求較為精簡(jiǎn)，避免冗余代碼和內(nèi)容影響用戶打開(kāi)速度，從而造成跳失率的提升。至于網(wǎng)站其他內(nèi)容，則可分別安排在“關(guān)于企業(yè)”“企業(yè)營(yíng)銷”“產(chǎn)品概況”“人力資源”等為基礎(chǔ)的副頁(yè)面中，主頁(yè)面通過(guò)CSS腳本對(duì)副頁(yè)面進(jìn)行調(diào)用。就目前的實(shí)際應(yīng)用來(lái)看，多數(shù)大型商業(yè)網(wǎng)站通常采取多行多列布局方式，如騰訊網(wǎng)、新浪、搜狐、淘寶等多采取多行三列模式，而58同城、趕集等網(wǎng)站，則多采取多行四列模式。
2.2 網(wǎng)站制作中的導(dǎo)航制作與設(shè)計(jì)
網(wǎng)站的導(dǎo)航部分，是一個(gè)網(wǎng)站的重要組成部分之一。除少數(shù)單頁(yè)面網(wǎng)站沒(méi)有網(wǎng)站導(dǎo)航外，導(dǎo)航都是網(wǎng)站中不可或缺的元素。網(wǎng)站導(dǎo)航的制作與設(shè)計(jì)，對(duì)網(wǎng)站整體的脈絡(luò)呈現(xiàn)及用戶體驗(yàn)，都有著十分重要的作用。網(wǎng)站導(dǎo)航的作用大同小異，但若能對(duì)導(dǎo)航進(jìn)行設(shè)計(jì)與優(yōu)化，也能進(jìn)一步提升網(wǎng)站整體形象和用戶體驗(yàn)的。網(wǎng)站導(dǎo)航菜單，可以通過(guò)整體的網(wǎng)站內(nèi)容進(jìn)行分類，并注意確保導(dǎo)航的脈絡(luò)清晰。技術(shù)方面，網(wǎng)站導(dǎo)航可采用樣式表、無(wú)序列表及超鏈接等多種元素相結(jié)合的方式實(shí)現(xiàn)。同時(shí)也可引入jQuery、Menu等第三方插件來(lái)予以實(shí)現(xiàn)。
2.3 網(wǎng)站的總體制作及設(shè)計(jì)規(guī)劃
在網(wǎng)站的制作規(guī)劃中，要注重對(duì)主題及版式的設(shè)計(jì)與制作水平，從而提升網(wǎng)站整體框架與結(jié)構(gòu)的完整性。網(wǎng)站主題的確立，不僅能避免無(wú)關(guān)內(nèi)容摻雜其中，也能提升網(wǎng)站整體的整潔度。其次，對(duì)網(wǎng)站版式也要進(jìn)行合理布局與編排，從而確保網(wǎng)頁(yè)設(shè)計(jì)效果的優(yōu)化，避免因頁(yè)面設(shè)計(jì)問(wèn)題造成的用戶體驗(yàn)下降。在網(wǎng)站的制作與設(shè)計(jì)方面，主要運(yùn)用JavaScript及調(diào)用jQuery庫(kù)，來(lái)實(shí)現(xiàn)網(wǎng)站W(wǎng)eb前端的開(kāi)發(fā)。
3 網(wǎng)站制作中Web前端開(kāi)發(fā)技術(shù)優(yōu)化所面臨的問(wèn)題分析
在基于網(wǎng)站制作的Web前端開(kāi)發(fā)工作中，要求技術(shù)人員能夠熟練掌握開(kāi)發(fā)工具和語(yǔ)言，以確保網(wǎng)站開(kāi)發(fā)效率與質(zhì)量。同時(shí)，也需要技術(shù)人員能夠站在用戶體驗(yàn)的角度上，不斷開(kāi)發(fā)出符合用戶和市場(chǎng)需求的新功能，從而保證網(wǎng)站用戶瀏覽訪問(wèn)的新需求。在確保網(wǎng)站訪問(wèn)快速穩(wěn)定的前提下，逐步實(shí)現(xiàn)瀏覽自動(dòng)化、檢索智能化等其他功能。但就目前的現(xiàn)實(shí)情況來(lái)看，許多網(wǎng)站的Web前端開(kāi)發(fā)技術(shù)優(yōu)化還面臨許多問(wèn)題，主要表現(xiàn)在以下幾個(gè)方面。
3.1 HTTP請(qǐng)求容易發(fā)生擁堵
為避免網(wǎng)站服務(wù)器產(chǎn)生擁堵。通常網(wǎng)站會(huì)根據(jù)HTTP協(xié)議，對(duì)客戶端與服務(wù)器進(jìn)行約束訪問(wèn)，而在此情況下，構(gòu)建的持續(xù)連接數(shù)往往會(huì)超過(guò)2個(gè)。這時(shí)，用戶在瀏覽網(wǎng)頁(yè)過(guò)程中，同時(shí)發(fā)送出多個(gè)請(qǐng)求，造成服務(wù)器無(wú)法有效響應(yīng)的狀況，也間接性地導(dǎo)致了HTTP請(qǐng)求發(fā)生擁堵。
3.2 網(wǎng)站前端服務(wù)器或?yàn)g覽器結(jié)構(gòu)被限制的情況
當(dāng)網(wǎng)站用戶在瀏覽頁(yè)面進(jìn)行跳轉(zhuǎn)請(qǐng)求時(shí)，頁(yè)面在呈現(xiàn)過(guò)程中，網(wǎng)站前端服務(wù)器或?yàn)g覽器就容易出現(xiàn)被限制的情況。特別是跳轉(zhuǎn)過(guò)程中IP地址解析或請(qǐng)求命令時(shí)，非常容易出現(xiàn)此類情況。這些都對(duì)網(wǎng)站W(wǎng)eb前端開(kāi)發(fā)設(shè)計(jì)的優(yōu)化工作提出了更高的要求。
3.3 當(dāng)前網(wǎng)站W(wǎng)eb前端的開(kāi)發(fā)標(biāo)準(zhǔn)并不完善
由于網(wǎng)站W(wǎng)eb前端開(kāi)發(fā)的規(guī)定及標(biāo)準(zhǔn)等并不完善。而5G時(shí)代的到來(lái)，伴隨一大批物聯(lián)網(wǎng)技術(shù)的接入會(huì)不斷涌現(xiàn)出新的技術(shù)和新的設(shè)備[5]。這些都給網(wǎng)站W(wǎng)eb前端開(kāi)發(fā)人員提出了更新更高的技術(shù)要求。需要相關(guān)技術(shù)人員不斷革新開(kāi)發(fā)技術(shù)，并從用戶角度進(jìn)行符合其體驗(yàn)的功能開(kāi)發(fā)。
4 基于網(wǎng)站W(wǎng)eb前端的開(kāi)發(fā)技術(shù)優(yōu)化策略
關(guān)于網(wǎng)站的建設(shè)，其目的就在于通過(guò)網(wǎng)站頁(yè)面向用戶傳遞信息和價(jià)值。在信息技術(shù)已經(jīng)較為普及并迅速發(fā)展的當(dāng)下，用戶對(duì)信息獲取和呈現(xiàn)速度的要求也越來(lái)越高。若通過(guò)訪問(wèn)網(wǎng)站來(lái)獲取信息的時(shí)間成本過(guò)高，網(wǎng)站打開(kāi)速度、跳轉(zhuǎn)速度等操作速度較慢，就會(huì)影響用戶對(duì)網(wǎng)站的整體印象，此外，網(wǎng)站設(shè)計(jì)混亂，頁(yè)面不整潔的情況，也會(huì)影響用戶對(duì)網(wǎng)站的整體評(píng)價(jià)。為避免上述影響，就需要對(duì)網(wǎng)站的Web前端的開(kāi)發(fā)設(shè)計(jì)進(jìn)行優(yōu)化，其主要優(yōu)化措施包括以下幾個(gè)方面的內(nèi)容。
4.1 整合網(wǎng)站文件，優(yōu)化用戶瀏覽器的訪問(wèn)效率
在網(wǎng)站的制作和構(gòu)建過(guò)程中，越是大規(guī)模的網(wǎng)站，其文件規(guī)模就相對(duì)更加龐大而復(fù)雜。這就要求相應(yīng)技術(shù)人員對(duì)網(wǎng)站文件進(jìn)行整合與優(yōu)化。通過(guò)運(yùn)用JavaScript和CSS語(yǔ)言對(duì)網(wǎng)站整體內(nèi)容進(jìn)行整合[6]。需要注意的是，由于網(wǎng)站文件中包含的代碼涉及很多信息，因此與用戶的瀏覽體驗(yàn)有著最直接的關(guān)聯(lián)，需要特別重視。具體來(lái)說(shuō)，可運(yùn)用HTML5的相關(guān)標(biāo)簽對(duì)網(wǎng)站進(jìn)行優(yōu)化與精簡(jiǎn)，在精簡(jiǎn)過(guò)程中，要確保其精簡(jiǎn)控制在有效范圍之內(nèi)，并在保證網(wǎng)站瀏覽穩(wěn)定性的前提之下，降低甚至避免內(nèi)聯(lián)情況的存在。此外，針對(duì)CSS代碼，技術(shù)人員可以在廣泛收集用戶意見(jiàn)的前提之下，進(jìn)行網(wǎng)站代碼的優(yōu)化，促進(jìn)其頁(yè)面的人性化，提升網(wǎng)站的用戶體驗(yàn)。
4.2 優(yōu)化調(diào)整網(wǎng)站前端內(nèi)容，促進(jìn)網(wǎng)站用戶體驗(yàn)提升
為了保證網(wǎng)站中網(wǎng)頁(yè)的穩(wěn)定運(yùn)行，并提升用戶體驗(yàn)，還可以對(duì)其內(nèi)容進(jìn)行優(yōu)化，并結(jié)合相應(yīng)的內(nèi)容優(yōu)化原則，通盤(pán)考慮各個(gè)方面的影響。主要分為以下幾個(gè)要點(diǎn)：首先，要合理利用樣式表內(nèi)容，進(jìn)行內(nèi)容的優(yōu)化。例如，若樣式居于頂部位置時(shí)，就需要將Script放置于網(wǎng)站底部。這樣不僅能避免混淆，對(duì)后期的修改及維護(hù)都具有積極意義。而關(guān)于CSS方面的內(nèi)容優(yōu)化，需要根據(jù)其覆蓋層疊的語(yǔ)言特點(diǎn)進(jìn)行具體優(yōu)化，避免胡亂修改對(duì)網(wǎng)站瀏覽和用戶體驗(yàn)造成的不良影響。其次，由于瀏覽器在打開(kāi)網(wǎng)站的過(guò)程中，會(huì)進(jìn)行對(duì)頁(yè)面內(nèi)容的渲染，因此相應(yīng)的優(yōu)化工作需要結(jié)合這一特點(diǎn)進(jìn)行。此外，部分用戶在瀏覽網(wǎng)站頁(yè)面的時(shí)候，還會(huì)存在一定的下載需求。為了保證用戶下載的流暢度，Web前端開(kāi)發(fā)人員還要針對(duì)性地進(jìn)行腳本語(yǔ)言優(yōu)化工作，避免其對(duì)頁(yè)面效果的影響，避免出現(xiàn)頁(yè)面反應(yīng)時(shí)間過(guò)長(zhǎng)、加載無(wú)效的情況。
4.3 對(duì)請(qǐng)求數(shù)量進(jìn)行控制，確保請(qǐng)求的有效性
在整個(gè)HTTP的請(qǐng)求響應(yīng)過(guò)程中，由于其每個(gè)請(qǐng)求都涉及了諸多環(huán)節(jié)，而每一個(gè)環(huán)節(jié)又都需要時(shí)間來(lái)判斷處理用戶信息，就容易造成用戶等待的情況。針對(duì)HTTP請(qǐng)求擁堵、請(qǐng)求重復(fù)情況的優(yōu)化工作，網(wǎng)站W(wǎng)eb前端開(kāi)發(fā)人員要進(jìn)行針對(duì)性的處理，并將HTTP請(qǐng)求的數(shù)量控制在合理范圍[7]。例如，可將多個(gè)不同請(qǐng)求文件進(jìn)行整合處理，這樣就能有效減少請(qǐng)求文件數(shù)量，減少不必要的打開(kāi)響應(yīng)操作。另一方面，部分用戶會(huì)出現(xiàn)請(qǐng)求頁(yè)面無(wú)反應(yīng)、甚至出現(xiàn)頁(yè)面崩潰的情況。這種現(xiàn)象主要有兩個(gè)方面的原因，其一是用戶打開(kāi)的頁(yè)面不存在;其二是處理速度過(guò)慢，服務(wù)器響應(yīng)出現(xiàn)問(wèn)題。針對(duì)上述問(wèn)題，需要Web前端人員降低網(wǎng)頁(yè)出錯(cuò)概率，并對(duì)不存在頁(yè)面進(jìn)行自動(dòng)跳轉(zhuǎn)操作。同時(shí)強(qiáng)化服務(wù)器與頁(yè)面的鏈接反應(yīng)速度，提升用戶體驗(yàn)度。
4.4 優(yōu)化DNS解析，縮短用戶等待時(shí)間
當(dāng)網(wǎng)站用戶打開(kāi)頁(yè)面時(shí)，需要DNS先期對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行解析，而DNS解析是需要一定時(shí)間的。若用戶較為頻繁的發(fā)送DNS解析請(qǐng)求，就會(huì)加大DNS解析壓力、延長(zhǎng)解析時(shí)間，對(duì)信息傳輸造成一定的影響。因此前端開(kāi)發(fā)人員要對(duì)DNS請(qǐng)求進(jìn)行控制，從而縮短用戶等待時(shí)間，提高用戶體驗(yàn)。其次，造成用戶等待時(shí)間過(guò)長(zhǎng)的因素，還有HTML頁(yè)面跳轉(zhuǎn)（重定向）這一問(wèn)題。
當(dāng)頁(yè)面進(jìn)行重定向操作時(shí)，其請(qǐng)求次數(shù)就會(huì)增加，所需響應(yīng)時(shí)間也會(huì)增加。用戶也因此需要更多時(shí)間進(jìn)行等待。因此前端開(kāi)發(fā)人員要從代碼著手，減少網(wǎng)站的重定向布局，避免用戶的無(wú)效等待。
5 結(jié)束語(yǔ)
眾所周知，網(wǎng)站頁(yè)面的制作離不開(kāi)相應(yīng)的Web前端開(kāi)發(fā)技術(shù)，而隨著技術(shù)的不斷發(fā)展和成熟，用戶對(duì)網(wǎng)站體驗(yàn)的要求也與日俱增。這也給網(wǎng)站W(wǎng)eb前端開(kāi)發(fā)人員提出了更高的要求，需要開(kāi)發(fā)人員不斷夯實(shí)基礎(chǔ)，理清思路，在提升Web前端開(kāi)發(fā)質(zhì)量的同時(shí)，滿足網(wǎng)站建設(shè)和用戶體驗(yàn)的各種要求。
參考文獻(xiàn)：
[1] 李曉薇.Web前端開(kāi)發(fā)技術(shù)以及優(yōu)化方向[J].電子技術(shù)與軟件工程，2019（19）：48-49.
[2] 高慧.Web前端開(kāi)發(fā)技術(shù)和其對(duì)網(wǎng)站性能的影響[J].河南科技，2019（28）：47-49.
[3] 陳洪雁，萬(wàn)俊偉.基于Web的企業(yè)網(wǎng)站性能優(yōu)化方案研究與應(yīng)用[J].物聯(lián)網(wǎng)技術(shù)，2018，8（2）：67-69，73.
[4] 王永紅.基于Web前端開(kāi)發(fā)的公司網(wǎng)站設(shè)計(jì)分析[J].河北農(nóng)機(jī)，2019（5）：67.
[5] 賀冰珝. 基于緩存的Web前端性能優(yōu)化研究與應(yīng)用[D].廣州：廣東工業(yè)大學(xué)，2019.
[6] 陳紅梅.基于Web前端開(kāi)發(fā)技術(shù)的兒童教育網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)[J].智能計(jì)算機(jī)與應(yīng)用，2017，7（6）：142-144，147.
[7] 阮曉龍.高校門(mén)戶建設(shè)中Web前端技術(shù)[J].中國(guó)科技信息，2015（2）：80-83.
【通聯(lián)編輯：張薇】
猜你喜歡
電子制作(2017年14期)2017-12-18 07:08:10
紡織科學(xué)研究(2017年6期)2017-07-03 12:14:22
知音勵(lì)志·社科版(2016年8期)2016-11-05 03:20:09
知音勵(lì)志·社科版(2016年8期)2016-11-05 03:02:58
現(xiàn)代經(jīng)濟(jì)信息(2016年19期)2016-10-20 19:05:57
商場(chǎng)現(xiàn)代化(2016年22期)2016-10-18 19:52:57
考試周刊(2016年76期)2016-10-09 08:49:15
科技視界(2016年20期)2016-09-29 11:56:40
中國(guó)煤層氣(2014年4期)2014-08-07 03:08:42
石油化工應(yīng)用(2014年4期)2014-03-11 17:39:16
