Web前端開發技術在網頁制作環節中的運用,大學論文

Web前端開發技術在網頁制作環節中的運用,大學論文內容摘要：在現有的Web前端開發中，開發技術與優化措施成為影響開發效果的關鍵，本文將以網站制作為背景，分別從DOM、CSS兩方面介紹了前端開發技術，之后對相關優化方案進行具體研究，包括針對文件規模的優化、針對內容的優化、針對查詢次數的優化等，希望為進一步提高網頁開發質量提供新的技術解決思路。本文關鍵詞語：Web前端；開發技術；優化措施；網站制作；Abstract:IntheexistingWebfront-enddevelopment,developmenttechnologyandoptimizationmeasuresbecomethekeytoaffectthedevelopmenteffect.Thispaperwillintroducethefront-enddevelopmenttechnologyfromDOMandCSStwoaspects,andthenstudytheoptimizationschemeindetail,includingfilesizeoptimization,contentoptimization,querytimesoptimization,etc.Hopetoprovidenewtechnicalsolutionsforfurtherimprovingthequalityofwebpagedevelopment.Keyword:Webfrontend;developmenttechnology;optimizationmeasures;websiteproduction;0引言當前，Web平臺前端開發技術已經被廣泛地應用在網頁制作環節中，成為完善網頁功能的關鍵。從現有的技術發展情況來看，網頁制作技術水平顯著提高，網頁所要顯示的內容愈加多樣化，動態的信息展示成為網頁的關鍵，這一技術發展態勢，決定了Web前端開發技術也需要進行相應的改良，爭取縮短頁面響應時間，知足用戶使用要求。1Web前端開發技術研究1.1DOM技術DOM技術在前端開發中占據重要位置，可為Web前端提供API,通過將XML文件抽象為由節點構成的樹形數據構造，強化了頁面交互性。虛擬DOM技術的關鍵思想，就是根據新舊頁面之間的差異將差異具體表現出在舊頁面上，因而整個技術可分為3個部分：①經過JS模擬DOM;②比擬不同DOM虛擬樹的差異性；③將差異應用到舊頁面上。具有愈加完好的技術體系與施行方案。1.1.1用JS對象模擬DOM從技術層面來看，虛擬DOM主要通過JS對象表示DOM節點的基本構造與信息，能夠有效保存不同節點之間的基本屬性、節點類型以及層次關系等。這種方式方法比開創建立真實DOM節點的成本更低，并且當前的虛擬DOM技術中包含了真實DOM所牽涉的所有信息，因而在技術應用階段可基于JS對象構建一個DOM樹，華而不實的關鍵技術流程如此圖1所示。圖1開創建立JS的技術流程1.1.2DOM-Diff算法研究在網頁制作期間，大部分頁面在變更前后，其DOM樹構造基本一樣，并且在技術應用中較少發現跨級層DOM元素移動情況。所以本文采用DOM-Diff算法進行分析，華而不實的技術內容包括下面兩方面。一方面，單純比照DOM樹中層級節點的差異，并針對不同層級節點做新建或刪除等操作。此時在發現某個節點被刪除后，則與該節點相對應的子節點一同會被刪除，并且此時不會再對被刪除的節點進行差異比照[1].另一方面，針對同一層的一樣組子節點，可經過唯一的Key值完成定位，在相對應的列表中完成各類操作，此時在明確新元素順序后即可恢復DOM元素。1.1.3DOM算法的實現根據DOM算法的思想，基于Web中有唯一key的情況，算法的實現途徑包括下面幾種。第一，通過對所有新集合節點完成遍歷循環后，經key判定舊幾何中有無一樣節點。第二，若發現存在一樣的節點后則可做移動操作，但在移動前需要根據目的節點在舊集合中的位置，并與訪問過的節點在集合中的位置進行比照分析，并完成節點的移動操作；若無一樣節點則能夠直接完成插入操作。第三，完成現有集合節點中的循環遍歷后，剔除新集合中無對應的節點。1.1.4將差異補丁應用到舊頁面上在DOM技術中，將差異補丁應用到舊頁面上是虛擬DOM技術的重要環節，此時當系統遍歷新舊頁面之間的差異補丁后，可根據補丁的不同類型進行調整，并將其運用到相應的就業面上。此時可針對DOM元素做移動、修改、增添等操作，最終在差異補丁的作用下可將舊頁面轉變為新頁面，網頁的圖像更新完成，華而不實的技術流程如此圖2所示。圖2差異補丁的應用經過1.2CSS技術在Web前端開發技術中，CSS技術可表示XML與的文件樣式，作為一種計算機語言技術，可支持不同字體樣式處理要求，最終完成網頁排版的精準控制。在技術優化環節，借助CSS技術可優化寫法，并且CSS代碼具有精簡的優勢，在Web前端開發經過中能夠顯著降低調整頁面布局的難度，保證了Web前端的開發效率。1.2.1兼容性處理方案當前，我們國家用戶使用的閱讀器可有效支持CSS自定義屬性的比例較低，而從現有的技術現在狀況來看，Web前端開發環節使用CSS技術是一種必然的發展趨勢，在將來的普及范圍將會越來越廣。所以在技術應用環節，針對當下Web前端開發的現在狀況，可在開發環節完成CSS自定義屬性兼容處理，例如@supports可檢測現有閱讀器中能否支持CSS的功能，所以在本文方案中，可先通過該軟件檢測閱讀器的屬性，并根據最終的檢測結果確定詳細的CSS代碼方案，直至完成兼容處理。1.2.2技術應用經過在CSS技術中，可根據Web前端的功能要求，根據用戶的使用要求做頁面的個性化設置，以優化用戶的使用體驗為目的，并實現個性化加載CSS形式。根據CSS技術具有的自定義屬性，整個技術實現經過在客戶端的功能支持下實現，并在技術應用環節經5實現本地數據存儲。以調整頁面顏色為例，首先需要在CSS代碼中創設自定義屬性-fontColor,確定網頁背景字體的顏色。之后當網頁的加載經過結束后，可從Local中讀取字體與背景顏色的存儲數據，并設置CSS自定義屬性-fontColor參數，在無其他命令數據的情況下，網頁默認選擇初始值。最后，在代碼創設相應的顏色選擇框，并設置為txt形式，添加事件指令，再將所要調整的背景顏色存儲到Local中后，更新CSS屬性中的-fontColor值。除此之外，為了能夠更好地適應Web前端開發技術要求，在使用CSS技術中，可根據網頁詳細的業務要求，完成不同的功能設置。隨著云計算技術的發展，該方式方法可逐步打破本地數據存儲的限制，可在不影響網站性能的基礎上實現不同的主題，保證了用戶對網頁的使用體驗。2Web前端的優化思路從網頁的技術應用要求來看，作為一種傳遞信息的重要載體，在網頁設計中應該主動契合用戶的各種功能需求。從互聯網使用的現在狀況來看，考慮到互聯網環境的復雜性，很多因素都會對用戶的使用體驗產生影響，例如網頁不能高質量呈現信息、網頁獲取信息的效率低下等，這些問題都會降低網頁的服務體驗。因而在Web前端的優化方案中，需要結合詳細的網頁功能要求尋找技術優化方案。2.1針對HTTP請求的優化從網頁功能界定的角度看，在信息傳遞經過中，網頁是實現信息交互的重要載體，這一功能也往往是證明網頁價值的重要內容，因而在技術優化經過中，應根據網頁的不同形式為用戶提供獲取信息的不同方式。當前，隨著大數據技術的發展，各類信息的體量不斷增加，并且數據的更新換代速度較快，網頁信息為了能夠更好地吸引用戶，就需要將各類信息控制在最佳值范圍內，減少無用信息的數量，使用戶可更高層次效地閱讀數據，最終保證網頁對用戶的吸引力。根據該特征，在Web前端設計中可做HTTP請求優化，而考慮到HTTP請求復雜，華而不實涵蓋的內容復雜，包括建立閱讀器連接、處理不同層次的數據發送經過等，并且隨著Web前端開發環境的變化，HTTP請求所對應的時間也有明顯的差異。隨著不同請求互相疊加，則會造成時間成本變化，導致各類資源無法得到有效利用，所以要想提升響應速度就必須減少組件數量，進而降低HTTP請求數量。為了對HTTP請求進行優化，能夠利用CSSSprite對網頁中比擬松懈的小圖片進行整合，進而得到一張圖片文件，并利用CSS的background-image屬性插入圖片，之后利用background-position屬性對圖片中所需要的部分進行精到準確定位，進而減少服務器的請求次數。當前，新的閱讀器會使用緩存來減少http次數，并減少http響應的大小。主流的Web服務器，比方tomcat,能夠使用Expires頭來告訴閱讀器能夠使用一個組件的當下副本，直到指定的時間為止。這樣在第二次試圖請求某個資源時，便能夠從閱讀器的緩存中讀取，避免了網絡傳輸，進而能加快頁面的加載速度，當然，一般針對圖像、樣式、腳本等靜態文件增加響應頭，詳細參數設定根據更新頻率、用戶使用頻率等進行設定。2.2優化文件規模，提高傳輸效率由于在Web前端優化文件規模比擬復雜，決定了文件優化也比擬復雜。根據前文介紹的方式方法，在優化文件規模時可采用CSS文件，但是并不意味著能夠徹底優化所有的文件規模，此階段需要優化的文件還具體表現出在很多方面，包括代碼優化、文件瘦身等。李廣宏以為，在當下網絡環境下，隨著網頁中涵蓋的信息量不斷增加，各類文件中涵蓋的信息豐富多樣，而這也是影響用戶體體驗的重要因素[2].因而針對這一要求，本文提出了設置標簽的方式方法，通過增設標簽的方式方法能夠剔除不合理或重復的內容，在特定的范圍內優化CSS代碼，將文件規模控制在理想水平?！?〕代碼壓縮。當前，壓縮javascript和css是常用的手段，借助工具它會分析JavaScript代碼語法樹，理解代碼的含義，進而能實現諸如去掉無效代碼、去掉日志輸出代碼、縮短變量名等優化，大大縮小文件體積?！?〕服務器開啟壓縮策略。絕大多數閱讀器支持Gzip格式，開啟后一般能夠將數據傳輸體積縮小50%,能夠有效提高網絡傳輸速度。〔3〕優化Cookie.當前，大部分應用都會用到Cookie技術，當Cookie里的信息越多體積就越大，每次請求都會增大傳輸數據量，嚴重拖慢網頁的加載速度。對此能夠采取下面措施：①減少不必要的Cookie,甚至能夠禁止使用；②減少Cookie存儲的信息，減少報文大小，進而提升響應速度；③設定過期時間，退出刪除Cookie,下次訪問能夠避免發送給服務器。2.3對內容的優化Web前端設計的主要功能就是網站制作，其內容優化效果與網頁的后期運行存在相關性，需要重點關注下面內容?！?〕避免重定向。在Web前端設計環節，重定向問題是不能完全避免的，而是要通過各種方式方法盡量減少這種問題，尤其是各種不必要的重定向問題。例如，在Web站點子目錄后添加/〔Slash〕就可有效降低一次重定向的發生率。〔2〕實現Ajax的可緩存。從網頁功能的角度來看，響應時間對Ajax而言特別重要，長時間的響應必然會影響用戶體驗。當前，控制響應時間的方式方法就是Cache,通過高速緩沖儲存器來解決CPU與主存之間的速度不匹配問題。例如，可在處理器外增設一個cache,將其作為高速緩沖數據與指令的核心。〔3〕懶加載組件。懶加載的主要目的是減少請求數或延遲請求數，實現主要有3種方式：①直接設定延遲加載，使用setTimeOut或setInterval;②條件加載，當符合了設定的條件才進行加載；③可視區域加載，即當用戶看到該區域才進行加載，手機端是屏幕移動到可視區域加載。預加載能夠講是犧牲服務器前端性能，換取更好的用戶體驗，這樣能夠使用戶獲得更好的操作體驗。〔4〕預加載組件。預加載的方式方法很多，如：CSS和JavaScript實現、僅使用JavaScript加載、使用Ajax實現預加載?！?〕減少iframe的數量。iframe提供了一個簡單的方式把一個網站的內容嵌入另一個網站中，但其開創建立速度比其他包括JavaScript和CSS的DOM元素的開創建立慢了1~2個數量級，盡量減少或者禁止使用iframe技術。〔6〕切分組件到不同的域。使用該方式方法的主要目的是強化頁面組件的性能，強化下載能力。但是在Web前端設計中要注意避免跨越過多的域名，這種方式方法能夠降低第二條數據沖突的發生率?！?〕杜絕出現Http404問題。HTTP請求消耗很大，應盡量減少無效的請求，在網頁頁面鏈接測試上，應增加對Web服務器中關于error日志不斷跟蹤的功能。這種處理方式方法可降低404錯誤的發生率，保證用戶的使用體驗。2.4使用內容分發網絡〔CDN〕把網站內容分散到多個、處于不同地域位置的服務器上能夠加快下載速度。閱讀器是根據域來緩存內容資源的，只要域不一樣，即便是用一個資源仍然需要重復下載，并使用同樣的方式緩存起來，這就需要占用網絡帶寬以及本地緩存空間。要將CDN用于前端性能優化能夠通過以下方式方法進行：第一，將靜態資源緩存到距離用戶很近的一樣網絡運營商的CDN節點上，不同位置的用戶在訪問同一個域名時得到不同CDN節點的IP地址；通過智能DNS服務獲取近期的運營商CDN節點IP地址后，不同用戶會向近期的運營商發送CDN節點請求，CDN節點會判定自個的內容緩存能否有效，當一個區域內某個用戶預先加載資源后，就會在CDN中建立緩存，進而方便后續用戶直接讀取。2.5對DNS查詢次數的優化網頁時間成本的增