隨著Web技術(shù)的不斷發(fā)展,Web開發(fā)逐漸從簡單的頁面展示發(fā)展成功能豐富的Web應(yīng)用。更多的用戶交互,復(fù)雜的功能需求也逐漸給Web應(yīng)用帶來了更多的性能上的挑戰(zhàn)。傳統(tǒng)模式下前端開發(fā)中代碼沒有模塊化,復(fù)用率低;首頁加載速度過慢,導(dǎo)致用戶流失率過高;資源加載過多,導(dǎo)致頁面容易出現(xiàn)卡頓等無法滿足用戶流暢體驗(yàn)的問題急需解決。同時(shí)在前后端未分離的開發(fā)模式下,導(dǎo)致的前后端開發(fā)者出現(xiàn)交叉等待,系統(tǒng)維護(hù)和迭代的效率過低的情況也需要解決。因此,結(jié)合項(xiàng)目實(shí)際開發(fā)需求以及現(xiàn)有Web技術(shù)的發(fā)展,研究如何重構(gòu)現(xiàn)有項(xiàng)目,優(yōu)化性能瓶頸點(diǎn),對(duì)于增強(qiáng)產(chǎn)品競爭力,降低后續(xù)項(xiàng)目開發(fā)和維護(hù)難度具有重大的意義和重要性。本文首先指出了原有系統(tǒng)中性能方面的不足。隨后通過研究瀏覽器的渲染機(jī)制,并結(jié)合NodeJS技術(shù)、Vue.JS框架和Nginx負(fù)載均衡等技術(shù),對(duì)原有項(xiàng)目的不足逐一進(jìn)行了針對(duì)性的解決。設(shè)計(jì)了前后端分離的系統(tǒng)架構(gòu),并對(duì)前端部分進(jìn)行細(xì)致劃分,明確工作內(nèi)容,解決了開發(fā)耦合的問題。并提出了組件化開發(fā)的思想,對(duì)功能進(jìn)行劃分,以積木堆砌的思維進(jìn)行前端開發(fā),在生產(chǎn)過程中大大減少了前后端開發(fā)者工作量。結(jié)合NodeJS技術(shù),引入中間層的概念... 

【文章來源】： 潘文文 電子科技大學(xué)

【文章頁數(shù)】：83 頁

【學(xué)位級(jí)別】：碩士

【部分圖文】：

中國互聯(lián)網(wǎng)發(fā)展統(tǒng)計(jì)

電子科技大學(xué)碩士學(xué)位論文第二章相關(guān)技術(shù)介紹本章主要針對(duì)后文可能涉及到的技術(shù)點(diǎn)進(jìn)行簡要概述，為后文的設(shè)計(jì)與實(shí)現(xiàn)奠定理論基矗2.1瀏覽器渲染原理現(xiàn)有市面上存在著諸多種類的瀏覽器[20]，由于這些瀏覽器廠商在實(shí)現(xiàn)H5標(biāo)準(zhǔn)時(shí)的具體實(shí)踐不一致，會(huì)導(dǎo)致最終的實(shí)際效果有較多的不一致。這里將會(huì)以谷歌公司的Chrome為例對(duì)瀏覽器的渲染原理進(jìn)行描述。瀏覽器的組成結(jié)構(gòu)比較復(fù)雜，但是從整體上可以分成兩大部分：shell和瀏覽器內(nèi)核。其中shell相當(dāng)于皮，它是外殼部分，例如菜單欄，工具欄等部分。而內(nèi)核才是瀏覽器工作的核心部分。作為核心的內(nèi)核部分，其主要工作內(nèi)容由兩個(gè)部分完成：渲染引擎和JavaScript引擎。Webkit渲染引擎[21]主流程如圖2-1所示。下面將主要針對(duì)渲染引擎的工作內(nèi)容進(jìn)行介紹。圖2-1Webkit渲染引擎主要流程渲染引擎所做的工作很重要，頁面所呈現(xiàn)的內(nèi)容都是它所決定，包括解析HTML,CSS，并對(duì)解析后的內(nèi)容進(jìn)行布局，渲染等工作。渲染引擎的主要流程為：首先解析HTML文檔，然后會(huì)將其二進(jìn)制流數(shù)據(jù)轉(zhuǎn)換成字符類型的數(shù)據(jù)，從而經(jīng)過模式匹配等，將其轉(zhuǎn)換成一個(gè)個(gè)DOM節(jié)點(diǎn)，并根據(jù)其層級(jí)進(jìn)行解析，最終構(gòu)成一顆樹狀結(jié)構(gòu)（DOM樹）。在進(jìn)行HTML文檔解析的過程中，渲染引擎碰到外部CSS文件以及樣式元素中的樣式數(shù)據(jù)也會(huì)去一一解析。并且將這些CSS樣式信息用于創(chuàng)建另一個(gè)樹結(jié)構(gòu)：CSSOM。最終渲染引擎會(huì)將DOM樹和CSSOM樹合并6

NodeJS和Chrome的結(jié)構(gòu)組成

【參考文獻(xiàn)】：
期刊論文
[1]前后端分離式WEB應(yīng)用開發(fā)研究[J]. 孟祥雙.  電子元器件與信息技術(shù). 2019(06)
[2]首屏數(shù)據(jù)并行式預(yù)加載方案的研究與應(yīng)用[J]. 閆興亞,潘治穎,黃姝琦.  計(jì)算機(jī)與數(shù)字工程. 2019(05)
[3]高并發(fā)Web應(yīng)用系統(tǒng)的性能優(yōu)化分析與研究[J]. 王偉,譚松榮.  現(xiàn)代信息科技. 2019(03)
[4]組件化WEB前端架構(gòu)設(shè)計(jì)與實(shí)現(xiàn)[J]. 王萌,田楊,李寧寧.  電腦知識(shí)與技術(shù). 2018(30)
[5]基于NodeJS+Express框架的輕應(yīng)用定制平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 王伶俐,張傳國.  計(jì)算機(jī)科學(xué). 2017(S2)
[6]HTTP/2新特性與Web性能關(guān)系的研究與實(shí)驗(yàn)[J]. 許兆偉,王穎.  計(jì)算機(jī)技術(shù)與發(fā)展. 2017(11)
[7]基于Dom Diff算法分析React刷新機(jī)制[J]. 嚴(yán)新巧,白俊峰.  電腦知識(shí)與技術(shù). 2017(18)
[8]基于Node.js中間層Web開發(fā)的研究與實(shí)現(xiàn)——以微信圖書借閱平臺(tái)為例[J]. 仇晶,黃巖,柴瑜晗.  河北工業(yè)科技. 2017(02)
[9]Native App與Web App移動(dòng)應(yīng)用發(fā)展[J]. 王鑫.  計(jì)算機(jī)系統(tǒng)應(yīng)用. 2016(09)
[10]APP應(yīng)用程序開發(fā)模式探究[J]. 顧春來.  硅谷. 2014(05)



本文編號(hào)：2990869