隨著web應(yīng)用功能的豐富化,web終端的多元化發(fā)展,如何快速迭代產(chǎn)品以滿足市場(chǎng)需求,提升企業(yè)競(jìng)爭(zhēng)力,對(duì)于前端技術(shù)的發(fā)展提出了更高要求。傳統(tǒng)的B/S（Browser/Server,瀏覽器/服務(wù)器）模式下的web開發(fā)中存在前端代碼無法復(fù)用;移動(dòng)端性能表現(xiàn)不佳;單頁web應(yīng)用不能滿足用戶體驗(yàn)需求;最重要的是,傳統(tǒng)的開發(fā)模式下,網(wǎng)頁路由需要后端配合,導(dǎo)致前后端工作交叉等待,產(chǎn)品迭代和維護(hù)效率較低,無法滿足企業(yè)級(jí)應(yīng)用的迭代速度。因此,如何針對(duì)企業(yè)級(jí)的web應(yīng)用,研究如何優(yōu)化前后端分離開發(fā)技術(shù),提出一種解決多終端性能、組件化開發(fā)和打包部署的完整的開發(fā)模型,并進(jìn)行實(shí)踐應(yīng)用證明,對(duì)于企業(yè)級(jí)應(yīng)用的開發(fā)具有重要的意義和研究?jī)r(jià)值。本文通過研究前后端分離模型,研究前后端分離的開發(fā)模式,提出一種高效的前后端技術(shù)分離模型,設(shè)計(jì)了面向SaaS應(yīng)用的前后端分離模型,并提出了面向企業(yè)業(yè)務(wù)應(yīng)用場(chǎng)景的組件化開發(fā)技術(shù)框架,實(shí)現(xiàn)了前后端的并行開發(fā),減少了前后端開發(fā)的耦合性。為了減少后臺(tái)訪問壓力,本文在基于Nignx的負(fù)載均衡算法基礎(chǔ)上,實(shí)現(xiàn)web前端性能的優(yōu)化,大量的靜態(tài)頁面的訪問可以通過Nignx,后臺(tái)不再關(guān)心靜態(tài)頁面訪問帶... 

【文章來源】：西南科技大學(xué)四川省

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

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

【部分圖文】：

一個(gè)UI界面拆分成不同組件的關(guān)系圖

圖 2-3 webpack 功能架構(gòu)圖Fig.2-3 The functional architecture diagram of the webpack2.5 負(fù)載均衡組件負(fù)載均衡（Load Balance）是一種計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)，是由多臺(tái)服務(wù)器以對(duì)稱的方式組成一個(gè)服務(wù)器集群，其將請(qǐng)求均勻地分配到每臺(tái)服務(wù)器，實(shí)現(xiàn)每臺(tái)服務(wù)器對(duì)外提供服務(wù)時(shí)承擔(dān)相同的壓力，從而解決并發(fā)的問題并提高了業(yè)務(wù)處理能力。目前，負(fù)載均衡常用的應(yīng)用場(chǎng)景是服務(wù)器負(fù)載均衡和鏈路負(fù)載均衡，本文的應(yīng)用場(chǎng)景是服務(wù)器負(fù)載均衡。服務(wù)器負(fù)載均衡根據(jù)報(bào)文層次，目前主流的處理方式分為四層負(fù)載均衡和七層負(fù)載均衡。四層負(fù)載均衡通過報(bào)文中的目標(biāo)地址、端口以及負(fù)載均衡設(shè)備設(shè)置的服務(wù)器選擇方式，決定選擇真正的目標(biāo)服務(wù)器。七層負(fù)載均衡又稱為內(nèi)容交換，通過報(bào)文中真正有意義的應(yīng)用層內(nèi)容以及負(fù)載均衡設(shè)備設(shè)置的服務(wù)器選擇方式，決定選擇真正的目標(biāo)服務(wù)器。相較于四層負(fù)載均衡，七層負(fù)載均衡的優(yōu)點(diǎn)是可以實(shí)現(xiàn)更智能的效果，比如將圖片和文字類的請(qǐng)求分別轉(zhuǎn)發(fā)給圖片服

圖 3-1 Chrome 瀏覽器的結(jié)構(gòu)圖Fig.3-1 The structure of the Chrome browser1.1.1 渲染引擎渲染引擎（The Rendering engine）的作用是在瀏覽器窗口渲染所容，支持顯示 CSS、HTML、圖片等文件，渲染引擎的基本工作流程過網(wǎng)絡(luò)獲得所請(qǐng)求文檔的內(nèi)容，然后解析 HTML 并構(gòu)建 DOM 樹，然后der 樹，布局 render 樹，最后是繪制 render 樹。Chrome 瀏覽器使用 we引擎，webkit 渲染引擎在獲取到文檔內(nèi)容后的渲染主流程如下圖 3

【參考文獻(xiàn)】：
期刊論文
[1]基于前端的Web性能優(yōu)化[J]. 彭玲玲,李詩瑩,馮爽.  電子技術(shù)與軟件工程. 2017(24)
[2]基于Node.js中間層Web開發(fā)的研究與實(shí)現(xiàn)——以微信圖書借閱平臺(tái)為例[J]. 仇晶,黃巖,柴瑜晗.  河北工業(yè)科技. 2017(02)
[3]前后端解耦模式及開發(fā)[J]. 吳賀.  計(jì)算機(jī)系統(tǒng)應(yīng)用. 2017(02)
[4]響應(yīng)式快速開發(fā)框架研究與實(shí)現(xiàn)[J]. 周萌,姜增輝,吳際達(dá),吳海軍.  電子科學(xué)技術(shù). 2016(04)
[5]基于Nginx的Web服務(wù)器性能優(yōu)化研究[J]. 黃靜,李炳.  浙江理工大學(xué)學(xué)報(bào)(自然科學(xué)版). 2016(04)
[6]Web工程前端性能優(yōu)化[J]. 李曉峰.  電子科技. 2015(05)
[7]Web前端性能優(yōu)化方案與實(shí)踐[J]. 王成,李少元,鄭黎曉,緱錦,曾梅琴,劉慧敏.  計(jì)算機(jī)應(yīng)用與軟件. 2014(12)

碩士論文
[1]基于Nginx高并發(fā)Web服務(wù)器的改進(jìn)與實(shí)現(xiàn)[D]. 張堯.吉林大學(xué) 2016
[2]基于Nginx高性能Web服務(wù)器性能優(yōu)化與負(fù)載均衡的改進(jìn)與實(shí)現(xiàn)[D]. 王永輝.電子科技大學(xué) 2015
[3]SaaS平臺(tái)前端性能優(yōu)化的研究與實(shí)現(xiàn)[D]. 姚昌.北京郵電大學(xué) 2015
[4]移動(dòng)Web前端性能優(yōu)化方法及其應(yīng)用研究[D]. 陳秋實(shí).華中科技大學(xué) 2015
[5]基于Web前端的性能優(yōu)化方案研究[D]. 劉柳.華中科技大學(xué) 2015
[6]輕量級(jí)高并發(fā)Web服務(wù)器的研究與實(shí)現(xiàn)[D]. 楊小嬌.南京郵電大學(xué) 2014
[7]Web應(yīng)用程序的性能優(yōu)化研究[D]. 陳俊璘.電子科技大學(xué) 2014



本文編號(hào)：3014811