Web前端開發技術以及優化策略分析

摘要：本文探討了Web前端開發語言，分析了目前Web前端開發技術應用存在問題，研究了優化Web前端技術的策略，以及AJAX工作原理及開發應用。

關鍵詞：互聯網;Web;技術;優化策略

中圖分類號：TP393.0? ? 文獻標識碼：A? ? 文章編號：1007-9416（2020）04-0000-00

1 Web前端開發語言

一般來說，JavaScript、 HTML、CSS是應用較為廣泛的Web前段開發語言，這三種語言的應用有著不同的適用范圍，以及不同的開發任務。JavaScript的應用，主要是為了能夠在進行語言匯編時，將內容與代碼準確地分隔開來，以此來避免出現兼容性問題。HTML技術的應用則主要是對各類圖形展開合適地修整，據相關專家預測，HTML技術將有可能取代flash在Web網頁中的應用。CSS的應用主要是對網頁外觀進行設計與效果化，網頁中的陰影、透明，以及其他炫酷效果都是基于CSS技術的應用實現的。

2 目前Web前端開發技術應用存在問題分析

2.1 瀏覽器兼容性不高問題

相關調查數據顯示，IE瀏覽器、360瀏覽器、百度瀏覽器、火狐瀏覽器是目前我國互聯網用戶使用較為頻繁的瀏覽器，由于在技術方面存在缺陷，導致在同一操作系統中，這幾個瀏覽器的之間的應用存在較明顯的兼容性問題，影響著用戶的使用體驗與使用效率，這是當前急需解決的問題。此外，在互聯網快速發展的背景下，瀏覽器種類也在不斷增加，也出現了較為嚴重的兼容性問題，即便是面對同樣的代碼，不同瀏覽器執行效果也有著較大區別。因此，為了有效解決這種兼容性不足的問題，必須結合實際情況進行具體分析，對瀏覽器進行研發、調試[1]。

2.2 Web加載速度過慢

文件大小在極大程度上決定了互聯網加載速度快慢，文件越大，互聯網的加載速度越慢。因此若是無法提升寬帶，文件的大小決定了網頁運行速度的效果。在實際中，在Web網頁設計中存在文件過大導致加載速度慢的問題，而在縮減加載文件的大小過程中對于代碼優化整合方面的水平不足，甚至出現核心結構被刪除的現象，大幅降低了用戶的體驗感受。

2.3 HTTP請求數量過多

在對網頁進行開發時，由于程序員過于追求視覺效果，對于代碼優化重視程度不高，導致了HTTP的請求數量過多才能獲得較好的網頁體驗效果，以及由于程序設計人員缺乏實踐經驗，無法實現對相應代碼的優化和結構調整，導致了網頁加載過慢的問題。基于這種現狀，用戶必須進行多次繁瑣的網頁跳轉，才能打開目標網頁，降低了用戶的滿意度體驗。

3 優化Web前端技術的策略

3.1 在優化HTML頁面方面

總體而言，HTML頁面反映了一個瀏覽器的特點，HTML技術的有效應用不但可以使用戶獲得較好的視覺體驗，而且能夠保證網頁較為完整的基本性能。在優化HTHL頁面時需要綜合考慮多個角影響作用，不但要實現單一頁面呈現內容的較高質量，而且要確保所有頁面內容在整體上的高度統一，最大限度地提升頁面在設計與內容上的吸引力，避免用戶出現興趣索然的感覺，降低對網頁使用的粘性[2]。

3.2 在減小文件大小方面

在上文提到，網頁加載速度會受到文件的小的影響，而且網頁文件越大，其加載的速度也就越慢。除了通過更換更大的寬帶之外，也只有不斷縮小文件大小，才能達到加快網頁加載速度的效果。通過對設計邏輯、設計功能進行組件化設計，例如在具體Web設計中把if做成組件、把一個倒計時做成組件、把一段動畫做成組件、把路由做成組件、把數據架構做成組件，提高設計結構的單個可移植性，便于后期進行設計優化。在此過程中注意保護代碼實現的核心功能結構，避免出現誤刪，或者調整錯誤等導致文件無法打開。目前，應用較為廣泛就是借助JavaScript應用程序，或者是采用CSS文件進行代碼壓縮、適當刪減多余代碼，進而達到縮小文件大小的目的[3]。

3.3 在減少HTTP請求方面

設計人員在對網頁進行設計過程中，添加了一些較為繁瑣的操作步驟，以達到較好的視覺效果，進而導致HTTP請求過多。但是由于缺乏經驗，沒能實現對這些繁瑣步驟的有效精簡，進而使網站運行承受了更大負荷，甚至會在不必要的時候彈出許多可有可無的窗口，降低了網頁加載速度。為了有效預防此類狀況，就需要加強對設計人員的培訓力度，通過轉變設計思路，在確保設計功能的同時化繁為簡，確保網頁功能齊全、操作流暢。

3.4 在縮短DNS查詢次數與時間方面

在目前的Web設計運行過程中，DNS的查詢時間長的缺陷較為普遍，甚至是有時經過長時間加載仍舊不能順利地進入網站，也因此喪失很多用戶，大幅降低了網頁的用戶訪問量，不利于網站的提升發展。有時即便是通過長時間的加載依然無法順利進入網站，很多用戶會由于長時間的等待而放棄進入網頁，這樣-來就會大大減少網頁的整體訪問量，阻礙網站的進一步發展。因此，必須要采取一系列有效措施來縮短DNS的查詢次數與時間，例如使用Keep-Live和較少的域名來減少DNS查找，以此提高網站性能，使用戶獲得更好的體驗效果，提高對網站訪問的意愿。

3.5 在加強頁面優化設計方面

好的網站頁面布局能夠吸引大量的用戶瀏覽，提升網站熱度。然而就目前的網頁設計而言，大部分難以起到吸引效果。主要原因在于設計人員設計理念創新水平不足受固有設計框架影響，或者是過于重視網頁視覺效果，對網站實用性關注力度不夠，使得網站的運行喪失了整體性效果。這就要求設計人員在確保網站實用性的前提下，分析對象用戶心理，通過吸收一些新鮮元素對設計理念、設計框架進行創新，提升網站的服務性。只有基于客戶需求，將網站內容做到精簡濃縮又能吸引眼球，從而使用戶快速找到目標內容，才能提升用戶的體驗感受。

4 AJAX工作原理及開發應用

5 結語

信息化時代背景下，互聯網的應用發展正在不斷加速，人們的生產、生活對于網絡的依賴性越來越高，所以，加強對Web前端開發技術及其應用優化研究極具現實意義。相關研發單位在開展Web研發之前，需要全面了解JavaScript、HTML、CSS等設計語言，切實掌握了其應用特性，進而才能有效地應對當前Web前端開發遇到的問題，并且注意不斷提升設計開發人員的專業素質，才能不斷優化Web前端開發的方法和策略。

參考文獻

[1] 王赫.Web前端開發技術以及優化方向分析[J].科技傳播，2016（8）：70+77.

[2] 劉柳.基于Web前端的性能優化方案研究[D].武漢：華中科技大學，2015.

[3] 陳秋實.移動Web前端性能優化方法及其應用研究[D].武漢：華中科技大學，2015.

收稿日期：2020-03-12

作者簡介：單斌（1984—），男，天津人，碩士，工程師，研究方向：軟件工程領域。

Web Front end Development Technology and Optimization Strategy Analysis

SHAN Bin

（Ruijie Network Co.， Ltd， Fuzhou Fujian? 350000）

Abstract： This paper discusses the web front-end development language， analyzes the existing problems in the application of Web front-end development technology， studies the strategy of optimizing Web front-end technology， and the working principle and development application of Ajax.

Keywords： Internet; Web; technology; optimization strategy