First, the basic information
Title: Scheme of optimizing the performance of Web-based front-end
Time: 2017
Source: Beijing University of Posts and Telecommunications
Keywords: Web front-end; modular; JavaScript; Node.js; front-end templates
Second, research
1. Contents:
1.1 Background and significance
of today's mutual Networking rapid development, changes in demand network users fast and large, most weeks to update the site
on a daily all, hours or even minutes, in this case, the front end of the site on change has become the most frequently
complicated part of Sichuan. As Internet companies increasingly focus on front-end development, the number of front-end development more and more,
but the technical staff input is always limited, and front-end development led the city does not provide one for developers - kind of simple
clean, orderly the method of approach to the management module, front-end modular enduring problem.
Modular in JavaScript, for example, it has experienced no module era, that the code sequence heap special era,
module budding era and the current era of modular components, ECMA2015 will also be incorporated into a modular specification
, the modular become the norm JavaScript developers continue to carry out exploration and exploration in the field of modular
seeking. Modular development allows front-end developers get rid of the cumbersome paper-dependent and naming conflicts, enhance code reuse
versatility, dividing the code module management, but also facilitate the division of labor division of developers. Each module own personnel
responsible block, consider the reusability and extensibility, from this point of view, but also enhance the development of modular development
development efficiency and code quality personnel.
In this paper, modular technology research and found that the front end modular exist in the use and application scenarios and other major
following issues in urgent need of further optimization:
(1) front-end development for its peculiarities in terms of modularity - - straight no system - Solutions because
developers to implement - a page function relies on three languages (. HTML, CSS JavaScript) phase
Mutual tissue to complete, and the current modular JavaScript a more mature technologies, such as SeaJS. Require js
the like, which can be implemented code management, HTML and Css is no corresponding specification code organization, by means of the
code redundancy and difficult to manage. If only one - a modular language and other languages still in the original
initial state, this modular approach is that we are not to be considered a - a complete set of modular solutions so
developers really need is a more may be organized simultaneously in three languages, integrated modular approach completion.
(2) in HTML modular may be incorporated distal template technology to achieve, and the template file of and molded
block of reference is a problem, the current distal aspect of the dynamic document loaded primarily asynchronous AJAX or dynamic scaling
tab to achieve, and the above functions required browser underlying support, which greatly increased in the invisible browser's
burden, the synchronization mechanism needs to be introduced to solve this problem. At the same time relying only on front-end template technology can only
solve the problem of dynamic strings, page modular organization and calls to increase the readability of the code page of these problems
is not a front-end template technology can be easily resolved, it is necessary to fight a technology exhibition page language to achieve
modular scheduling page.
From the above two aspects starting to modular front end as the research target, aimed at resolving the face of complex
of today's mutual Networking rapid development, changes in demand network users fast and large, most weeks to update the site
on a daily all, hours or even minutes, in this case, the front end of the site on change has become the most frequently
complicated part of Sichuan. As Internet companies increasingly focus on front-end development, the number of front-end development more and more,
but the technical staff input is always limited, and front-end development led the city does not provide one for developers - kind of simple
clean, orderly the method of approach to the management module, front-end modular enduring problem.
Modular in JavaScript, for example, it has experienced no module era, that the code sequence heap special era,
module budding era and the current era of modular components, ECMA2015 will also be incorporated into a modular specification
, the modular become the norm JavaScript developers continue to carry out exploration and exploration in the field of modular
seeking. Modular development allows front-end developers get rid of the cumbersome paper-dependent and naming conflicts, enhance code reuse
versatility, dividing the code module management, but also facilitate the division of labor division of developers. Each module own personnel
responsible block, consider the reusability and extensibility, from this point of view, but also enhance the development of modular development
development efficiency and code quality personnel.
In this paper, modular technology research and found that the front end modular exist in the use and application scenarios and other major
following issues in urgent need of further optimization:
(1) front-end development for its peculiarities in terms of modularity - - straight no system - Solutions because
developers to implement - a page function relies on three languages (. HTML, CSS JavaScript) phase
Mutual tissue to complete, and the current modular JavaScript a more mature technologies, such as SeaJS. Require js
the like, which can be implemented code management, HTML and Css is no corresponding specification code organization, by means of the
code redundancy and difficult to manage. If only one - a modular language and other languages still in the original
initial state, this modular approach is that we are not to be considered a - a complete set of modular solutions so
developers really need is a more may be organized simultaneously in three languages, integrated modular approach completion.
(2) in HTML modular may be incorporated distal template technology to achieve, and the template file of and molded
block of reference is a problem, the current distal aspect of the dynamic document loaded primarily asynchronous AJAX or dynamic scaling
tab to achieve, and the above functions required browser underlying support, which greatly increased in the invisible browser's
burden, the synchronization mechanism needs to be introduced to solve this problem. At the same time relying only on front-end template technology can only
solve the problem of dynamic strings, page modular organization and calls to increase the readability of the code page of these problems
is not a front-end template technology can be easily resolved, it is necessary to fight a technology exhibition page language to achieve
modular scheduling page.
From the above two aspects starting to modular front end as the research target, aimed at resolving the face of complex
Chapter Two key technologies
2.1 static resource modular technology
in page design, developers have been pursuing a simple, flexible, and maintainable code. DETAILED simple
to HIML is the minimal semantic tags and to achieve the desired structures: CSS is the high multiplexed
with, the definition of low redundancy. Flexibility required to achieve the developer's code changes can be achieved up to a minimum of effect
object. Maintainable refers to the minimal changes to solve the problem as quickly as the ability to locate the problem. The problem
is due to the efficiency of development taking into account the practical work, communication costs, risks release, fault tolerance, speed and number of links
in the case of the question of how to achieve scripting language closed components in HTML. CsS, you can
transplant etc. characteristic.
The concept almost all programming languages, there will be classes, objects, variables, etc., with complete process control. The
HTML and CSS is not really a programming language, HTML is HTML, is used to describe a web page
markup language document, while CsS is an expression used such as HTML. XML file or style meter
computer language . Neither process control programming language included, can not even define variables, which
requires the subject to modular page design from another angle.
2.1.1 Page Layout Modular
Modular mainly provides an ideological divide and conquer, so have both the code reuse, you can also enter
the line management sub-module, a function will be divided into multiple modules, the level of clear and simple and easy understand, this idea a
straight by the current major mainstream programming languages like JAVA, PHP and other respected, we have introduced the package in its early machine
System and ability, but in terms of front-end for static resources, especially this one, how to develop and implement division rule
is sometimes more important than how to divide the code, because of the lack of maturity corresponding to the provisions of these rules regulate
it, in the early pages relying on the back-end template is to achieve a sense of modularity, such as PHP's
include and so on, but this is the front-end code and back-end code to improve the coupling, so many solutions out there
now, but mostly rely on server language program to achieve, such as Smarty template inheritance. In the pure
front end of the field it has been missing - a class above in connection with settlement programs.
The modular layout of the page appears, providing a project to enhance development efficiency, problem solving project maintenance
solutions. No interdependence between the module and the module, but also has - - set common, cited by the corresponding modular
into the rules interrelated With these advantages, the page layout is modular applied the majority of the site, it
's a greater need for network architecture at a reasonable nest best robustness, scalability, ease of maintenance.
A full page, need to be divided into multiple modules, such as header, footer, lists, sidebars, menus
and so on, they independently - all modules, each module has its own independent function, in the development process in
2.1 static resource modular technology
in page design, developers have been pursuing a simple, flexible, and maintainable code. DETAILED simple
to HIML is the minimal semantic tags and to achieve the desired structures: CSS is the high multiplexed
with, the definition of low redundancy. Flexibility required to achieve the developer's code changes can be achieved up to a minimum of effect
object. Maintainable refers to the minimal changes to solve the problem as quickly as the ability to locate the problem. The problem
is due to the efficiency of development taking into account the practical work, communication costs, risks release, fault tolerance, speed and number of links
in the case of the question of how to achieve scripting language closed components in HTML. CsS, you can
transplant etc. characteristic.
The concept almost all programming languages, there will be classes, objects, variables, etc., with complete process control. The
HTML and CSS is not really a programming language, HTML is HTML, is used to describe a web page
markup language document, while CsS is an expression used such as HTML. XML file or style meter
computer language . Neither process control programming language included, can not even define variables, which
requires the subject to modular page design from another angle.
2.1.1 Page Layout Modular
Modular mainly provides an ideological divide and conquer, so have both the code reuse, you can also enter
the line management sub-module, a function will be divided into multiple modules, the level of clear and simple and easy understand, this idea a
straight by the current major mainstream programming languages like JAVA, PHP and other respected, we have introduced the package in its early machine
System and ability, but in terms of front-end for static resources, especially this one, how to develop and implement division rule
is sometimes more important than how to divide the code, because of the lack of maturity corresponding to the provisions of these rules regulate
it, in the early pages relying on the back-end template is to achieve a sense of modularity, such as PHP's
include and so on, but this is the front-end code and back-end code to improve the coupling, so many solutions out there
now, but mostly rely on server language program to achieve, such as Smarty template inheritance. In the pure
front end of the field it has been missing - a class above in connection with settlement programs.
The modular layout of the page appears, providing a project to enhance development efficiency, problem solving project maintenance
solutions. No interdependence between the module and the module, but also has - - set common, cited by the corresponding modular
into the rules interrelated With these advantages, the page layout is modular applied the majority of the site, it
's a greater need for network architecture at a reasonable nest best robustness, scalability, ease of maintenance.
A full page, need to be divided into multiple modules, such as header, footer, lists, sidebars, menus
and so on, they independently - all modules, each module has its own independent function, in the development process in
Chapter III modular front-end development framework for the design of
this article will focus on modular front-end development framework of the overall architecture and design, based on the proposed
offer modular development program on a holistic sense as a modular front-end development front-end development framework , to
solve the problem of modular management and development of front-end development process. This chapter is divided into two specific aspects of the framework:
page modular subsystems and multi-file processing tool, from the point of view of the overall architecture of its functional requirements,
and in the fourth and fifth chapters were elaborated design and implementation of the architecture.
3.1 System functional requirements analysis
in this paper based on the research topic modular front-end development framework, aims to provide developers
- - kind of modular development approach, with the ability Nodejs server, combined with the JavaScript language, structure
built modular page development environment, standardized modular development work. Firstly, it is the development of basic modular
design concept for analysis. Through research, this paper obtained the following several basic modular design concept.
● encapsulation module. Interfere with each other between each module, may JavaScript modular technique
for encapsulating code, by way of example for the introduction of the module to create objects. For page modules,
each module has independent, have their own style and behavior, without disturbing each other;
explicit data mobility. Here is the main target in the component modules and event mechanism. Page module
between modules and components for data flow, and event mechanism can listen to the component modules for
event callbacks, the page may respond differently to different events, different rendering.
This article from the page generation process to analyze and develop a modular framework function point. In general, developers
completed the development of the site, showing the pages analyzed by the browser to complete, the browser parses the following:
● browser to get the page file by its URL, and then to request the corresponding static resource files:
● Browse pair page file for analysis, combined with CSS, JavaScript and the corresponding resource generation phase
should render tree, a page of resources for rendering, the final presentation to the user.
Over the whole process is done through the browser parsing and rendering. Traditionally, due to the impact site show
the most important reason for the delay is shown in the transmission delay, compared to parse browser and clean stained percentage proportion of time
is not large, so the front-end module developers can resolve most of the work primarily on a browser, the appropriate solution
must program such as JavaScript modular solutions SeaJS. requirejs etc. Another example is the front page template lead
engine handbarsjs, mustachejs and so on. But this also has corresponding disadvantages, as follows:
● The parsing and loading operation of the module in the browser, although you can achieve modular development, but
to do so would intensify pressure browser, for the complex interaction page, the browser will
be overwhelmed:
this article will focus on modular front-end development framework of the overall architecture and design, based on the proposed
offer modular development program on a holistic sense as a modular front-end development front-end development framework , to
solve the problem of modular management and development of front-end development process. This chapter is divided into two specific aspects of the framework:
page modular subsystems and multi-file processing tool, from the point of view of the overall architecture of its functional requirements,
and in the fourth and fifth chapters were elaborated design and implementation of the architecture.
3.1 System functional requirements analysis
in this paper based on the research topic modular front-end development framework, aims to provide developers
- - kind of modular development approach, with the ability Nodejs server, combined with the JavaScript language, structure
built modular page development environment, standardized modular development work. Firstly, it is the development of basic modular
design concept for analysis. Through research, this paper obtained the following several basic modular design concept.
● encapsulation module. Interfere with each other between each module, may JavaScript modular technique
for encapsulating code, by way of example for the introduction of the module to create objects. For page modules,
each module has independent, have their own style and behavior, without disturbing each other;
explicit data mobility. Here is the main target in the component modules and event mechanism. Page module
between modules and components for data flow, and event mechanism can listen to the component modules for
event callbacks, the page may respond differently to different events, different rendering.
This article from the page generation process to analyze and develop a modular framework function point. In general, developers
completed the development of the site, showing the pages analyzed by the browser to complete, the browser parses the following:
● browser to get the page file by its URL, and then to request the corresponding static resource files:
● Browse pair page file for analysis, combined with CSS, JavaScript and the corresponding resource generation phase
should render tree, a page of resources for rendering, the final presentation to the user.
Over the whole process is done through the browser parsing and rendering. Traditionally, due to the impact site show
the most important reason for the delay is shown in the transmission delay, compared to parse browser and clean stained percentage proportion of time
is not large, so the front-end module developers can resolve most of the work primarily on a browser, the appropriate solution
must program such as JavaScript modular solutions SeaJS. requirejs etc. Another example is the front page template lead
engine handbarsjs, mustachejs and so on. But this also has corresponding disadvantages, as follows:
● The parsing and loading operation of the module in the browser, although you can achieve modular development, but
to do so would intensify pressure browser, for the complex interaction page, the browser will
be overwhelmed:
IV References
[1] study [D] Web-based front-end performance optimization. Liu Liu Huazhong University of Science and Technology 2015
First, the basic information
Title: Scheme of optimizing the performance of Web-based front-end
Time: 2017
Source: Beijing University of Posts and Telecommunications
Keywords: Web front-end; modular; JavaScript; Node.js; front-end templates
Second, research
1. Contents:
1.1 Background and significance
of today's mutual Networking rapid development, changes in demand network users fast and large, most weeks to update the site
on a daily all, hours or even minutes, in this case, the front end of the site on change has become the most frequently
complicated part of Sichuan. As Internet companies increasingly focus on front-end development, the number of front-end development more and more,
but the technical staff input is always limited, and front-end development led the city does not provide one for developers - kind of simple
clean, orderly the method of approach to the management module, front-end modular enduring problem.
Modular in JavaScript, for example, it has experienced no module era, that the code sequence heap special era,
module budding era and the current era of modular components, ECMA2015 will also be incorporated into a modular specification
, the modular become the norm JavaScript developers continue to carry out exploration and exploration in the field of modular
seeking. Modular development allows front-end developers get rid of the cumbersome paper-dependent and naming conflicts, enhance code reuse
versatility, dividing the code module management, but also facilitate the division of labor division of developers. Each module own personnel
responsible block, consider the reusability and extensibility, from this point of view, but also enhance the development of modular development
development efficiency and code quality personnel.
In this paper, modular technology research and found that the front end modular exist in the use and application scenarios and other major
following issues in urgent need of further optimization:
(1) front-end development for its peculiarities in terms of modularity - - straight no system - Solutions because
developers to implement - a page function relies on three languages (. HTML, CSS JavaScript) phase
Mutual tissue to complete, and the current modular JavaScript a more mature technologies, such as SeaJS. Require js
the like, which can be implemented code management, HTML and Css is no corresponding specification code organization, by means of the
code redundancy and difficult to manage. If only one - a modular language and other languages still in the original
initial state, this modular approach is that we are not to be considered a - a complete set of modular solutions so
developers really need is a more may be organized simultaneously in three languages, integrated modular approach completion.
(2) in HTML modular may be incorporated distal template technology to achieve, and the template file of and molded
block of reference is a problem, the current distal aspect of the dynamic document loaded primarily asynchronous AJAX or dynamic scaling
tab to achieve, and the above functions required browser underlying support, which greatly increased in the invisible browser's
burden, the synchronization mechanism needs to be introduced to solve this problem. At the same time relying only on front-end template technology can only
solve the problem of dynamic strings, page modular organization and calls to increase the readability of the code page of these problems
is not a front-end template technology can be easily resolved, it is necessary to fight a technology exhibition page language to achieve
modular scheduling page.
From the above two aspects starting to modular front end as the research target, aimed at resolving the face of complex
of today's mutual Networking rapid development, changes in demand network users fast and large, most weeks to update the site
on a daily all, hours or even minutes, in this case, the front end of the site on change has become the most frequently
complicated part of Sichuan. As Internet companies increasingly focus on front-end development, the number of front-end development more and more,
but the technical staff input is always limited, and front-end development led the city does not provide one for developers - kind of simple
clean, orderly the method of approach to the management module, front-end modular enduring problem.
Modular in JavaScript, for example, it has experienced no module era, that the code sequence heap special era,
module budding era and the current era of modular components, ECMA2015 will also be incorporated into a modular specification
, the modular become the norm JavaScript developers continue to carry out exploration and exploration in the field of modular
seeking. Modular development allows front-end developers get rid of the cumbersome paper-dependent and naming conflicts, enhance code reuse
versatility, dividing the code module management, but also facilitate the division of labor division of developers. Each module own personnel
responsible block, consider the reusability and extensibility, from this point of view, but also enhance the development of modular development
development efficiency and code quality personnel.
In this paper, modular technology research and found that the front end modular exist in the use and application scenarios and other major
following issues in urgent need of further optimization:
(1) front-end development for its peculiarities in terms of modularity - - straight no system - Solutions because
developers to implement - a page function relies on three languages (. HTML, CSS JavaScript) phase
Mutual tissue to complete, and the current modular JavaScript a more mature technologies, such as SeaJS. Require js
the like, which can be implemented code management, HTML and Css is no corresponding specification code organization, by means of the
code redundancy and difficult to manage. If only one - a modular language and other languages still in the original
initial state, this modular approach is that we are not to be considered a - a complete set of modular solutions so
developers really need is a more may be organized simultaneously in three languages, integrated modular approach completion.
(2) in HTML modular may be incorporated distal template technology to achieve, and the template file of and molded
block of reference is a problem, the current distal aspect of the dynamic document loaded primarily asynchronous AJAX or dynamic scaling
tab to achieve, and the above functions required browser underlying support, which greatly increased in the invisible browser's
burden, the synchronization mechanism needs to be introduced to solve this problem. At the same time relying only on front-end template technology can only
solve the problem of dynamic strings, page modular organization and calls to increase the readability of the code page of these problems
is not a front-end template technology can be easily resolved, it is necessary to fight a technology exhibition page language to achieve
modular scheduling page.
From the above two aspects starting to modular front end as the research target, aimed at resolving the face of complex
Chapter Two key technologies
2.1 static resource modular technology
in page design, developers have been pursuing a simple, flexible, and maintainable code. DETAILED simple
to HIML is the minimal semantic tags and to achieve the desired structures: CSS is the high multiplexed
with, the definition of low redundancy. Flexibility required to achieve the developer's code changes can be achieved up to a minimum of effect
object. Maintainable refers to the minimal changes to solve the problem as quickly as the ability to locate the problem. The problem
is due to the efficiency of development taking into account the practical work, communication costs, risks release, fault tolerance, speed and number of links
in the case of the question of how to achieve scripting language closed components in HTML. CsS, you can
transplant etc. characteristic.
The concept almost all programming languages, there will be classes, objects, variables, etc., with complete process control. The
HTML and CSS is not really a programming language, HTML is HTML, is used to describe a web page
markup language document, while CsS is an expression used such as HTML. XML file or style meter
computer language . Neither process control programming language included, can not even define variables, which
requires the subject to modular page design from another angle.
2.1.1 Page Layout Modular
Modular mainly provides an ideological divide and conquer, so have both the code reuse, you can also enter
the line management sub-module, a function will be divided into multiple modules, the level of clear and simple and easy understand, this idea a
straight by the current major mainstream programming languages like JAVA, PHP and other respected, they have a package in its early introduction of machine
system and ability, but in terms of front-end for static resources, especially this one, how to develop division rule and achieve
Sometimes even more important than how to divide the code, because the lack of rules corresponding to the provisions of these specifications mature
then, in the early pages are relying on back-end templates to achieve a sense of modularity, such as PHP's
include and so on, but this allows front-end code and back-end code to improve the coupling, so many solutions out there
now, but mostly rely on server language program to achieve, such as Smarty template inheritance. In the pure
front end of the field it has been missing - a class above in connection with settlement programs.
The modular layout of the page appears, providing a project to enhance development efficiency, problem solving project maintenance
solutions. No interdependence between the module and the module, but also has - - set common, cited by the corresponding modular
into the rules interrelated With these advantages, the page layout is modular applied the majority of the site, it
's a greater need for network architecture at a reasonable nest best robustness, scalability, ease of maintenance.
A full page, need to be divided into multiple modules, such as header, footer, lists, sidebars, menus
and so on, they independently - all modules, each module has its own independent function, in the development process in
2.1 static resource modular technology
in page design, developers have been pursuing a simple, flexible, and maintainable code. DETAILED simple
to HIML is the minimal semantic tags and to achieve the desired structures: CSS is the high multiplexed
with, the definition of low redundancy. Flexibility required to achieve the developer's code changes can be achieved up to a minimum of effect
object. Maintainable refers to the minimal changes to solve the problem as quickly as the ability to locate the problem. The problem
is due to the efficiency of development taking into account the practical work, communication costs, risks release, fault tolerance, speed and number of links
in the case of the question of how to achieve scripting language closed components in HTML. CsS, you can
transplant etc. characteristic.
The concept almost all programming languages, there will be classes, objects, variables, etc., with complete process control. The
HTML and CSS is not really a programming language, HTML is HTML, is used to describe a web page
markup language document, while CsS is an expression used such as HTML. XML file or style meter
computer language . Neither process control programming language included, can not even define variables, which
requires the subject to modular page design from another angle.
2.1.1 Page Layout Modular
Modular mainly provides an ideological divide and conquer, so have both the code reuse, you can also enter
the line management sub-module, a function will be divided into multiple modules, the level of clear and simple and easy understand, this idea a
straight by the current major mainstream programming languages like JAVA, PHP and other respected, they have a package in its early introduction of machine
system and ability, but in terms of front-end for static resources, especially this one, how to develop division rule and achieve
Sometimes even more important than how to divide the code, because the lack of rules corresponding to the provisions of these specifications mature
then, in the early pages are relying on back-end templates to achieve a sense of modularity, such as PHP's
include and so on, but this allows front-end code and back-end code to improve the coupling, so many solutions out there
now, but mostly rely on server language program to achieve, such as Smarty template inheritance. In the pure
front end of the field it has been missing - a class above in connection with settlement programs.
The modular layout of the page appears, providing a project to enhance development efficiency, problem solving project maintenance
solutions. No interdependence between the module and the module, but also has - - set common, cited by the corresponding modular
into the rules interrelated With these advantages, the page layout is modular applied the majority of the site, it
's a greater need for network architecture at a reasonable nest best robustness, scalability, ease of maintenance.
A full page, need to be divided into multiple modules, such as header, footer, lists, sidebars, menus
and so on, they independently - all modules, each module has its own independent function, in the development process in
Chapter III modular front-end development framework for the design of
this article will focus on modular front-end development framework of the overall architecture and design, based on the proposed
offer modular development program on a holistic sense as a modular front-end development front-end development framework , to
solve the problem of modular management and development of front-end development process. This chapter is divided into two specific aspects of the framework:
page modular subsystems and multi-file processing tool, from the point of view of the overall architecture of its functional requirements,
and in the fourth and fifth chapters were elaborated design and implementation of the architecture.
3.1 System functional requirements analysis
in this paper based on the research topic modular front-end development framework, aims to provide developers
- - kind of modular development approach, with the ability Nodejs server, combined with the JavaScript language, structure
built modular page development environment, standardized modular development work. Firstly, it is the development of basic modular
design concept for analysis. Through research, this paper obtained the following several basic modular design concept.
● encapsulation module. Interfere with each other between each module, may JavaScript modular technique
for encapsulating code, by way of example for the introduction of the module to create objects. For page modules,
each module has independent, have their own style and behavior, without disturbing each other;
explicit data mobility. Here is the main target in the component modules and event mechanism. Page module
between modules and components for data flow, and event mechanism can listen to the component modules for
event callbacks, the page may respond differently to different events, different rendering.
This article from the page generation process to analyze and develop a modular framework function point. In general, developers
After the completion of the development of the site, showing the page to complete parse through the browser, the browser follows resolved:
● browser to get the page file through the URL, and then to request the corresponding static resource files:
● browser page file for analysis , combined with CSS, JavaScript and the corresponding resource generation phase
should render tree, a page of resources for rendering, the final presentation to the user.
Over the whole process is done through the browser parsing and rendering. Traditionally, due to the impact site show
the most important reason for the delay is shown in the transmission delay, compared to parse browser and clean stained percentage proportion of time
is not large, so the front-end module developers can resolve most of the work primarily on a browser, the appropriate solution
must program such as JavaScript modular solutions SeaJS. requirejs etc. Another example is the front page template lead
engine handbarsjs, mustachejs and so on. But this also has corresponding disadvantages, as follows:
● The parsing and loading operation of the module in the browser, although you can achieve modular development, but
to do so would intensify pressure browser, for the complex interaction page, the browser will
be overwhelmed:
this article will focus on modular front-end development framework of the overall architecture and design, based on the proposed
offer modular development program on a holistic sense as a modular front-end development front-end development framework , to
solve the problem of modular management and development of front-end development process. This chapter is divided into two specific aspects of the framework:
page modular subsystems and multi-file processing tool, from the point of view of the overall architecture of its functional requirements,
and in the fourth and fifth chapters were elaborated design and implementation of the architecture.
3.1 System functional requirements analysis
in this paper based on the research topic modular front-end development framework, aims to provide developers
- - kind of modular development approach, with the ability Nodejs server, combined with the JavaScript language, structure
built modular page development environment, standardized modular development work. Firstly, it is the development of basic modular
design concept for analysis. Through research, this paper obtained the following several basic modular design concept.
● encapsulation module. Interfere with each other between each module, may JavaScript modular technique
for encapsulating code, by way of example for the introduction of the module to create objects. For page modules,
each module has independent, have their own style and behavior, without disturbing each other;
explicit data mobility. Here is the main target in the component modules and event mechanism. Page module
between modules and components for data flow, and event mechanism can listen to the component modules for
event callbacks, the page may respond differently to different events, different rendering.
This article from the page generation process to analyze and develop a modular framework function point. In general, developers
After the completion of the development of the site, showing the page to complete parse through the browser, the browser follows resolved:
● browser to get the page file through the URL, and then to request the corresponding static resource files:
● browser page file for analysis , combined with CSS, JavaScript and the corresponding resource generation phase
should render tree, a page of resources for rendering, the final presentation to the user.
Over the whole process is done through the browser parsing and rendering. Traditionally, due to the impact site show
the most important reason for the delay is shown in the transmission delay, compared to parse browser and clean stained percentage proportion of time
is not large, so the front-end module developers can resolve most of the work primarily on a browser, the appropriate solution
must program such as JavaScript modular solutions SeaJS. requirejs etc. Another example is the front page template lead
engine handbarsjs, mustachejs and so on. But this also has corresponding disadvantages, as follows:
● The parsing and loading operation of the module in the browser, although you can achieve modular development, but
to do so would intensify pressure browser, for the complex interaction page, the browser will
be overwhelmed:
IV References
[1] study [D] Web-based front-end performance optimization. Liu Liu Huazhong University of Science and Technology 2015