云平台下Web前端的若干优化技术的研究与实现
发布时间：2021-01-21 09:01
随着Web技术的不断发展,Web开发逐渐从简单的页面展示发展成功能丰富的Web应用。更多的用户交互,复杂的功能需求也逐渐给Web应用带来了更多的性能上的挑战。传统模式下前端开发中代码没有模块化,复用率低;首页加载速度过慢,导致用户流失率过高;资源加载过多,导致页面容易出现卡顿等无法满足用户流畅体验的问题急需解决。同时在前后端未分离的开发模式下,导致的前后端开发者出现交叉等待,系统维护和迭代的效率过低的情况也需要解决。因此,结合项目实际开发需求以及现有Web技术的发展,研究如何重构现有项目,优化性能瓶颈点,对于增强产品竞争力,降低后续项目开发和维护难度具有重大的意义和重要性。本文首先指出了原有系统中性能方面的不足。随后通过研究浏览器的渲染机制,并结合NodeJS技术、Vue.JS框架和Nginx负载均衡等技术,对原有项目的不足逐一进行了针对性的解决。设计了前后端分离的系统架构,并对前端部分进行细致划分,明确工作内容,解决了开发耦合的问题。并提出了组件化开发的思想,对功能进行划分,以积木堆砌的思维进行前端开发,在生产过程中大大减少了前后端开发者工作量。结合NodeJS技术,引入中间层的概念...
【文章来源】： 潘文文 电子科技大学
【文章页数】：83 页
【学位级别】：硕士
【部分图文】：
中国互联网发展统计
电子科技大学硕士学位论文第二章相关技术介绍本章主要针对后文可能涉及到的技术点进行简要概述，为后文的设计与实现奠定理论基矗2.1浏览器渲染原理现有市面上存在着诸多种类的浏览器[20]，由于这些浏览器厂商在实现H5标准时的具体实践不一致，会导致最终的实际效果有较多的不一致。这里将会以谷歌公司的Chrome为例对浏览器的渲染原理进行描述。浏览器的组成结构比较复杂，但是从整体上可以分成两大部分：shell和浏览器内核。其中shell相当于皮，它是外壳部分，例如菜单栏，工具栏等部分。而内核才是浏览器工作的核心部分。作为核心的内核部分，其主要工作内容由两个部分完成：渲染引擎和JavaScript引擎。Webkit渲染引擎[21]主流程如图2-1所示。下面将主要针对渲染引擎的工作内容进行介绍。图2-1Webkit渲染引擎主要流程渲染引擎所做的工作很重要，页面所呈现的内容都是它所决定，包括解析HTML,CSS，并对解析后的内容进行布局，渲染等工作。渲染引擎的主要流程为：首先解析HTML文档，然后会将其二进制流数据转换成字符类型的数据，从而经过模式匹配等，将其转换成一个个DOM节点，并根据其层级进行解析，最终构成一颗树状结构（DOM树）。在进行HTML文档解析的过程中，渲染引擎碰到外部CSS文件以及样式元素中的样式数据也会去一一解析。并且将这些CSS样式信息用于创建另一个树结构：CSSOM。最终渲染引擎会将DOM树和CSSOM树合并6
NodeJS和Chrome的结构组成
【参考文献】：
期刊论文
[1]前后端分离式WEB应用开发研究[J]. 孟祥双. 电子元器件与信息技术. 2019(06)
[2]首屏数据并行式预加载方案的研究与应用[J]. 闫兴亚,潘治颖,黄姝琦. 计算机与数字工程. 2019(05)
[3]高并发Web应用系统的性能优化分析与研究[J]. 王伟,谭松荣. 现代信息科技. 2019(03)
[4]组件化WEB前端架构设计与实现[J]. 王萌,田杨,李宁宁. 电脑知识与技术. 2018(30)
[5]基于NodeJS+Express框架的轻应用定制平台的设计与实现[J]. 王伶俐,张传国. 计算机科学. 2017(S2)
[6]HTTP/2新特性与Web性能关系的研究与实验[J]. 许兆伟,王颖. 计算机技术与发展. 2017(11)
[7]基于Dom Diff算法分析React刷新机制[J]. 严新巧,白俊峰. 电脑知识与技术. 2017(18)
[8]基于Node.js中间层Web开发的研究与实现——以微信图书借阅平台为例[J]. 仇晶,黄岩,柴瑜晗. 河北工业科技. 2017(02)
[9]Native App与Web App移动应用发展[J]. 王鑫. 计算机系统应用. 2016(09)
[10]APP应用程序开发模式探究[J]. 顾春来. 硅谷. 2014(05)
本文编号：2990869
【文章来源】： 潘文文 电子科技大学
【文章页数】：83 页
【学位级别】：硕士
【部分图文】：
中国互联网发展统计
电子科技大学硕士学位论文第二章相关技术介绍本章主要针对后文可能涉及到的技术点进行简要概述，为后文的设计与实现奠定理论基矗2.1浏览器渲染原理现有市面上存在着诸多种类的浏览器[20]，由于这些浏览器厂商在实现H5标准时的具体实践不一致，会导致最终的实际效果有较多的不一致。这里将会以谷歌公司的Chrome为例对浏览器的渲染原理进行描述。浏览器的组成结构比较复杂，但是从整体上可以分成两大部分：shell和浏览器内核。其中shell相当于皮，它是外壳部分，例如菜单栏，工具栏等部分。而内核才是浏览器工作的核心部分。作为核心的内核部分，其主要工作内容由两个部分完成：渲染引擎和JavaScript引擎。Webkit渲染引擎[21]主流程如图2-1所示。下面将主要针对渲染引擎的工作内容进行介绍。图2-1Webkit渲染引擎主要流程渲染引擎所做的工作很重要，页面所呈现的内容都是它所决定，包括解析HTML,CSS，并对解析后的内容进行布局，渲染等工作。渲染引擎的主要流程为：首先解析HTML文档，然后会将其二进制流数据转换成字符类型的数据，从而经过模式匹配等，将其转换成一个个DOM节点，并根据其层级进行解析，最终构成一颗树状结构（DOM树）。在进行HTML文档解析的过程中，渲染引擎碰到外部CSS文件以及样式元素中的样式数据也会去一一解析。并且将这些CSS样式信息用于创建另一个树结构：CSSOM。最终渲染引擎会将DOM树和CSSOM树合并6
NodeJS和Chrome的结构组成
【参考文献】：
期刊论文
[1]前后端分离式WEB应用开发研究[J]. 孟祥双. 电子元器件与信息技术. 2019(06)
[2]首屏数据并行式预加载方案的研究与应用[J]. 闫兴亚,潘治颖,黄姝琦. 计算机与数字工程. 2019(05)
[3]高并发Web应用系统的性能优化分析与研究[J]. 王伟,谭松荣. 现代信息科技. 2019(03)
[4]组件化WEB前端架构设计与实现[J]. 王萌,田杨,李宁宁. 电脑知识与技术. 2018(30)
[5]基于NodeJS+Express框架的轻应用定制平台的设计与实现[J]. 王伶俐,张传国. 计算机科学. 2017(S2)
[6]HTTP/2新特性与Web性能关系的研究与实验[J]. 许兆伟,王颖. 计算机技术与发展. 2017(11)
[7]基于Dom Diff算法分析React刷新机制[J]. 严新巧,白俊峰. 电脑知识与技术. 2017(18)
[8]基于Node.js中间层Web开发的研究与实现——以微信图书借阅平台为例[J]. 仇晶,黄岩,柴瑜晗. 河北工业科技. 2017(02)
[9]Native App与Web App移动应用发展[J]. 王鑫. 计算机系统应用. 2016(09)
[10]APP应用程序开发模式探究[J]. 顾春来. 硅谷. 2014(05)
本文编号：2990869
本文链接：https://www.wllwen.com/guanlilunwen/ydhl/2990869.html
