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

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

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

【學位級別】：碩士

【部分圖文】：

一個UI界面拆分成不同組件的關系圖

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

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

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

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



本文編號：3014811