Web前端開發(fā)技術(shù)在網(wǎng)頁制作環(huán)節(jié)中的運用,大學(xué)論文

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