一、基本信息
标题：基于Web前端的性能优化方案研究
时间：2017
来源：北京邮电大学
关键词：Web前端；模块化；JavaScript；Node.js；前端模板
二、研究内容
1.主要内容：
1.1研究背景与意义
当今互.联网飞速发展，网络用户的需求变化既快又大，大部分网站的更新周
期都是以日，小时甚至分钟为单位，在这种情况下，网站的前端就成了变化最频
繁的部分川。随着互联网公司对前端开发的逐渐重视，前端开发人数也越来越多，
但是技术人员的投入总是有限的，而前端开发领城并没有为开发者们提供一-种简
洁，有条理的方式来管理模块的方法，前端模块化问题经久不衰。
以JavaScript 模块化为例，其经历了无模块时代，即代码次序堆特的时代、
模块萌芽时代及当前的模块化组件化时代，ECMA2015 也将模块化纳入到规范
中，使模块化成为JavaScript规范，开发人员不断地在模块化领域进行摸索及探
求。模块化开发使得前端开发人员摆脱繁琐的文件依赖和命名冲突，增强代码复
用性，将代码划分模块管理，也方便开发人员的分工划分。每个人员对自己的模
块负责，考虑其复用性及可扩展性，从这个角度来看，模块化开发也提升了开发
人员的开发效率和代码质量。
本论文研究模块化技术，发现前端模块化在使用及应用场景等方面主要存在
以下问题，亟待进一步优化:
(1)前端开发因其特殊性，在模块化方面- -直没有统-的解决方案，因为
开发人员实现-一个页面功能需要依赖三种语言(HTML、CSS. JavaScript) 的相
互组织才能完成，而当前JavaScript有较成熟的模块化技术，如SeaJS. require js
等，可借助于它们来实现代码管理，HTML及Css则没有相应的代码组织规范，
代码冗余且难以管理。如果仅仅是某-一个语言实现了模块化而其他语言还处于原
始状态，那这种模块化方案则并不能被大家认为是一-套完整的模块化方案，所以
开发者真正需要的是一种可以将三种语言能同时组织，综合完成的模块化方案。
(2)在HTML模块化中可结合前端模板技术来实现，而将模板文件化并模
块化引用则是个问题，当前前端方面动态文件加载主要是异步AJAX或动态标
签来实现，而以上功能均需浏览器底层支持，这在无形之中大大增加了浏览器的
负担，需要引入同步的机制来解决这一问题。与此同时仅仅靠前端模板技术只能
解决动态字符串的问题，而页面模块化组织调用、增加页面代码可读性这些问题
则不是前端模板技术能够简单解决的，因此需要一套技术来打展页面语言，实现
页面的模块化调度。
本文从以上两个方面出发，以前端模块化为研究目标，旨在解决面对复杂
当今互.联网飞速发展，网络用户的需求变化既快又大，大部分网站的更新周
期都是以日，小时甚至分钟为单位，在这种情况下，网站的前端就成了变化最频
繁的部分川。随着互联网公司对前端开发的逐渐重视，前端开发人数也越来越多，
但是技术人员的投入总是有限的，而前端开发领城并没有为开发者们提供一-种简
洁，有条理的方式来管理模块的方法，前端模块化问题经久不衰。
以JavaScript 模块化为例，其经历了无模块时代，即代码次序堆特的时代、
模块萌芽时代及当前的模块化组件化时代，ECMA2015 也将模块化纳入到规范
中，使模块化成为JavaScript规范，开发人员不断地在模块化领域进行摸索及探
求。模块化开发使得前端开发人员摆脱繁琐的文件依赖和命名冲突，增强代码复
用性，将代码划分模块管理，也方便开发人员的分工划分。每个人员对自己的模
块负责，考虑其复用性及可扩展性，从这个角度来看，模块化开发也提升了开发
人员的开发效率和代码质量。
本论文研究模块化技术，发现前端模块化在使用及应用场景等方面主要存在
以下问题，亟待进一步优化:
(1)前端开发因其特殊性，在模块化方面- -直没有统-的解决方案，因为
开发人员实现-一个页面功能需要依赖三种语言(HTML、CSS. JavaScript) 的相
互组织才能完成，而当前JavaScript有较成熟的模块化技术，如SeaJS. require js
等，可借助于它们来实现代码管理，HTML及Css则没有相应的代码组织规范，
代码冗余且难以管理。如果仅仅是某-一个语言实现了模块化而其他语言还处于原
始状态，那这种模块化方案则并不能被大家认为是一-套完整的模块化方案，所以
开发者真正需要的是一种可以将三种语言能同时组织，综合完成的模块化方案。
(2)在HTML模块化中可结合前端模板技术来实现，而将模板文件化并模
块化引用则是个问题，当前前端方面动态文件加载主要是异步AJAX或动态标
签来实现，而以上功能均需浏览器底层支持，这在无形之中大大增加了浏览器的
负担，需要引入同步的机制来解决这一问题。与此同时仅仅靠前端模板技术只能
解决动态字符串的问题，而页面模块化组织调用、增加页面代码可读性这些问题
则不是前端模板技术能够简单解决的，因此需要一套技术来打展页面语言，实现
页面的模块化调度。
本文从以上两个方面出发，以前端模块化为研究目标，旨在解决面对复杂
第二章关键技术研究
2.1静态资源模块化技术
在页面设计中，开发人员一直追求着简洁、灵活、可维护的代码。简洁具体
于HIML即为以最少的且语义化的标签来实现所需要的结构:于CSS即为高复
用，低冗余的定义。灵活要求开发人员的代码能达到最少改动可实现最多效果的
目的。可维护指以最少的改动解决问题，以最快的速度定位到问题的能力。问题
归结于兼顾实际工作中的开发效率、沟通成本、发布风险、容错度、链接数及速
度问题的情况下，如何在HTML. CsS中实现脚本编程语言中的封闭、组件、可
移植等等特性。
几乎所有编程语言都会有类、对象、变量等概念，拥有完整的流程控制。而
HTML和CSS算不上是编程语言，HTML是超文本标记语言，是用于描述网页
文档的一种标记语言，而CsS是一种用来表现HTML.或XML等文件式样的计
算机语言。两者都没有程序语言所具备的流程控制能力，甚至不能定义变量，这
就要求课题从另一个角度来进行页面设计中的模块化。
2.1.1页面布局模块化
模块化主要是提供了一项分治的思想，让代码拥有重用性的同时，还可以进
行分模块管理，将一个功能划分成多个模块，层次清晰又简单易懂，这种思想一
直被当前各大主流编程语言如JAVA、PHP等所推崇，在其早期便拥有包引入机
制及能力，但是对于前端来讲尤其是静态资源这一块， 怎样制定划分规则并实现
比如何进行代码划分有时显得更为重要，因为缺少相应成熟的规范来规定这些规
则，在早期，页面都是依托后端模板来实现某种意义上的模块化，如PHP的
include等,但是这样使前端代码与后端代码耦合性提高，于是有很多解决方案出
现，但是方案大多都是依托服务器语言来实现，如Smarty模板继承等。而在纯
前端领域一直缺少--个类以上结合方案的解决办法。
页面模块化布局的出现，为提升项目开发效率，解决项目维护问题提供了一
个解决方案。模块与模块间不相互依赖，又拥有- -定共性，通过相应的模块化引
入规则而相互联系，由于拥有这些优势，页面模块化布局被广大网站所应用，它
的网络架构更需要的是在合理的嵌套中保持最好的健壮性，可拓展，易维护性。
一个完整的网页，需要划分为多个模块，例如头部、底部、列表、侧边栏、菜单
等等,他们独立为-个个模块,每个模块均有自已独立的功能，在开发的过程中
2.1静态资源模块化技术
在页面设计中，开发人员一直追求着简洁、灵活、可维护的代码。简洁具体
于HIML即为以最少的且语义化的标签来实现所需要的结构:于CSS即为高复
用，低冗余的定义。灵活要求开发人员的代码能达到最少改动可实现最多效果的
目的。可维护指以最少的改动解决问题，以最快的速度定位到问题的能力。问题
归结于兼顾实际工作中的开发效率、沟通成本、发布风险、容错度、链接数及速
度问题的情况下，如何在HTML. CsS中实现脚本编程语言中的封闭、组件、可
移植等等特性。
几乎所有编程语言都会有类、对象、变量等概念，拥有完整的流程控制。而
HTML和CSS算不上是编程语言，HTML是超文本标记语言，是用于描述网页
文档的一种标记语言，而CsS是一种用来表现HTML.或XML等文件式样的计
算机语言。两者都没有程序语言所具备的流程控制能力，甚至不能定义变量，这
就要求课题从另一个角度来进行页面设计中的模块化。
2.1.1页面布局模块化
模块化主要是提供了一项分治的思想，让代码拥有重用性的同时，还可以进
行分模块管理，将一个功能划分成多个模块，层次清晰又简单易懂，这种思想一
直被当前各大主流编程语言如JAVA、PHP等所推崇，在其早期便拥有包引入机
制及能力，但是对于前端来讲尤其是静态资源这一块， 怎样制定划分规则并实现
比如何进行代码划分有时显得更为重要，因为缺少相应成熟的规范来规定这些规
则，在早期，页面都是依托后端模板来实现某种意义上的模块化，如PHP的
include等,但是这样使前端代码与后端代码耦合性提高，于是有很多解决方案出
现，但是方案大多都是依托服务器语言来实现，如Smarty模板继承等。而在纯
前端领域一直缺少--个类以上结合方案的解决办法。
页面模块化布局的出现，为提升项目开发效率，解决项目维护问题提供了一
个解决方案。模块与模块间不相互依赖，又拥有- -定共性，通过相应的模块化引
入规则而相互联系，由于拥有这些优势，页面模块化布局被广大网站所应用，它
的网络架构更需要的是在合理的嵌套中保持最好的健壮性，可拓展，易维护性。
一个完整的网页，需要划分为多个模块，例如头部、底部、列表、侧边栏、菜单
等等,他们独立为-个个模块,每个模块均有自已独立的功能，在开发的过程中
第三章模块化前端开发框架的设计
本文将重点研究模块化前端开发框架的整体架构及设计，本文所提出的基于
模块化的前端开发框架为前端开发提供一套整体意义上的模块化开发方案，用来
解决前端开发过程中模块化管理及开发的问题。本章将框架具体分为两个方面:
页面模块化子系统和多文件处理工具，从总体架构的角度出发分析其功能性需求，
并在第四、五章分别进行架构设计与实现的详细阐述。
3.1系统功能需求分析
本文提出了基于模块化的前端开发框架的课题研究，目的在于为开发者提供
- -种模块化的开发方式，借助Nodejs的服务端能力，结合JavaScript 语言，构
建页面模块化开发环境，规范模块化开发工作。首先，本文就模块化开发中基本
设计思想进行分析。通过研究，本文得到了以下几项模块化基本设计思想。
●模块的封装性。 每个模块间互不干扰，在JavaScript可通过模块化技术
对代码进行封装，通过实例化模块引入进行创建对象。对于页面模块，
每个模块都具有独立性，拥有属于自身的样式与行为，互不干扰;
明确的数据流动性。这里是主要针对于组件模块和事件机制。页面模块
与组件模块间可进行数据流动，而事件机制可针对组件模块进行监听与
事件回调，页面可根据不同的事件做出不同响应，进行不同的渲染。
本文将从页面开发及生成过程来分析模块化框架功能点。总体来讲，开发者
完成对网站的开发后，页面的展示通过浏览器解析来完成，浏览器进行如下解析:
●浏览器通过URL来获取页面文件，进而去请求相应的静态资源文件:
●浏览器对页面文件进行分析， 并结合CSS、JavaScript及相应资源生成相
应渲染树，对页面资源进行渲染，最终呈现到用户面前。
以上整个过程通过浏览器解析及渲染来完成。传统意义上，由于影响网站展
示延迟的最重要的原因是传输时延,相比之下浏览器的解析及洁染所占时间比重
并不大，故前端开发者可以将大部分模块解析工作主要放在了浏览器端，相应解
决方案如JavaScript模块化解决方案SeaJS. requirejs 等，再如前端页面模板引
擎handbarsjs、mustachejs 等。但是这样做也有相应的缺点，如下所示:
●将模块的解析 与加载工作放在浏览器端，虽然可以实现模块化开发，但
是这样做将会加大浏览器的工作压力，对于复杂交互的页面，浏览器将
不堪重负:
本文将重点研究模块化前端开发框架的整体架构及设计，本文所提出的基于
模块化的前端开发框架为前端开发提供一套整体意义上的模块化开发方案，用来
解决前端开发过程中模块化管理及开发的问题。本章将框架具体分为两个方面:
页面模块化子系统和多文件处理工具，从总体架构的角度出发分析其功能性需求，
并在第四、五章分别进行架构设计与实现的详细阐述。
3.1系统功能需求分析
本文提出了基于模块化的前端开发框架的课题研究，目的在于为开发者提供
- -种模块化的开发方式，借助Nodejs的服务端能力，结合JavaScript 语言，构
建页面模块化开发环境，规范模块化开发工作。首先，本文就模块化开发中基本
设计思想进行分析。通过研究，本文得到了以下几项模块化基本设计思想。
●模块的封装性。 每个模块间互不干扰，在JavaScript可通过模块化技术
对代码进行封装，通过实例化模块引入进行创建对象。对于页面模块，
每个模块都具有独立性，拥有属于自身的样式与行为，互不干扰;
明确的数据流动性。这里是主要针对于组件模块和事件机制。页面模块
与组件模块间可进行数据流动，而事件机制可针对组件模块进行监听与
事件回调，页面可根据不同的事件做出不同响应，进行不同的渲染。
本文将从页面开发及生成过程来分析模块化框架功能点。总体来讲，开发者
完成对网站的开发后，页面的展示通过浏览器解析来完成，浏览器进行如下解析:
●浏览器通过URL来获取页面文件，进而去请求相应的静态资源文件:
●浏览器对页面文件进行分析， 并结合CSS、JavaScript及相应资源生成相
应渲染树，对页面资源进行渲染，最终呈现到用户面前。
以上整个过程通过浏览器解析及渲染来完成。传统意义上，由于影响网站展
示延迟的最重要的原因是传输时延,相比之下浏览器的解析及洁染所占时间比重
并不大，故前端开发者可以将大部分模块解析工作主要放在了浏览器端，相应解
决方案如JavaScript模块化解决方案SeaJS. requirejs 等，再如前端页面模板引
擎handbarsjs、mustachejs 等。但是这样做也有相应的缺点，如下所示:
●将模块的解析 与加载工作放在浏览器端，虽然可以实现模块化开发，但
是这样做将会加大浏览器的工作压力，对于复杂交互的页面，浏览器将
不堪重负:
四、参考文献
［１］基于Web前端的性能优化方案研究[D]. 刘柳.华中科技大学 2015