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

【文章來源】： 潘文文 電子科技大學

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

【學位級別】：碩士

【部分圖文】：

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

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

NodeJS和Chrome的結構組成

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



本文編號：2990869