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

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