Web front-end modularization and performance optimization

This time I will bring you web front-end modularization and performance optimization. What are the precautions for web front-end modularization and performance optimization? The following is a practical case, let’s take a look. one time.

1. Do you understand componentization and modularization?

Several principles
Concept
Single responsibility means that a module or component only does one thing and never more.
Orthogonality means no duplication. The responsibilities of one module and another module are orthogonal and there is no overlap. The same is true for components.
One-way dependency, there is at most one-way dependence between modules. If A depends on B, and B also depends on A, then either A and B should belong to the same module, or there is a problem with the overall split. The module dependencies of a complete software system should be a directed acyclic graph.
Compactness, modules and components should have as few interfaces and attributes exposed to the outside world as possible, and the number of interface parameters should also be as small as possible.
Interface-oriented, modules and components are best interface-oriented when providing services to the outside world, so that they can be flexibly changed and implemented later.
Summary:

The most important attribute of modules is that they should be as independent and self-contained as possible; modules should be designed to provide a complete set of functions so that other parts of the program interact clearly with it; The functionality provided by a module must be complete so that its callers can get what they need.

Modularization is to reduce cyclic dependencies, reduce coupling, and improve the efficiency of design and development. In order to do this, we need to have a design rule under which all modules are designed. Good design rules will classify densely coupled design parameters as a module and divide work tasks accordingly. The modules interact with each other through a fixed interface, and other internal implementations are left to the module's development team to perform freely.

The last but also important point: the standardization of method naming is very important, and comments are very important. If there are no comments, only developers will know it clearly, so necessary comments will facilitate later code maintenance work. It also improves efficiency. What each interface is mainly used for can be explained appropriately in the header file

The difference between componentization and modularization:
Take vue as an example:
A .vue file can be called a component, which is composed of template style script; multiple components can form a page;
Modules generally refer to js modules; for example, js in a vue component can be composed of various modules; currently through import Bring it in.
For example, the time display component will call the formatted time module.

ard.png](/img/bV9XzS)

For in-depth understanding, please click on Front-end Engineering - Basics https://github.com/fouber/blo ...

What exactly is front-end engineering, modularization, and componentization

nodeJS

1. node core understanding

Framework

1. Understanding of Vue angular react

2.vueLife cycle

For understanding of life cycle, see My understanding of vue life cycle https://segmentfault.com/a/11...

3. Understanding of vue virtual dom

Vue principle analysis of Virtual Dom
https://segmentfault.com/a/11...
Or see my collection
4. Understanding of bootstrap and Element UI?

5.vue two-way data binding Understanding of

Analysis of Vue principles & implementation of two-way binding MVVMhttps://segmentfault.com/a/11...
Or see my collection

6. Regarding the MVC framework MVVM framework; as well as their advantages, disadvantages and usage scenarios

Concept: Mainly the difference between c and vm;
mvc
is one-way.
The controller layer completes the business logic, then changes the model state, and then the model sends data to the view, and the user gets feedback.
Mainly controlled through events, etc.
The View will not perform any operations on the Model, and the Model will not output anything for presentation, such as HTML code or some effect, etc. It is just point data. The Controller is used to decide which Models to use, what operations to perform on the Models, and what data to prepare for the views. It is the bridge of communication in MVC.
The browser sends a request--->Contorller and Model interact to obtain data--->Contorller calls View--->View renders data and returns
v-->c-->m- ->c—v

mvvm
is a bidirectional driver.
There is no direct connection between View and Model, but they interact through ViewModel.
vm is the abstraction of View and is responsible for information conversion between View and Model. Send the View's Command to the Model;
means changes in the view layer are automatically displayed on the viewModel; vice versa.
is an architectural pattern based on front-end development
m vm v

Advantages and Disadvantages:
Front-end The complexity of applications is not what it used to be. At this time, front-end development exposed three pain points:
Developers call a large number of the same DOM API in the code, which makes the processing cumbersome and redundant, making the code difficult to maintain.
A large number of DOM operations reduce the page rendering performance and slow down the loading speed, affecting the user experience.
When the Model changes frequently, developers need to actively update to the View; when user operations cause the Model to change, developers also need to synchronize the changed data to the Model. This kind of work is not only cumbersome, but also difficult to maintain and complex. Changing data status.

Advantages and disadvantages of mvc:
jquery solves the first problem.
Developers call a large number of the same DOM API in the code, which makes the processing cumbersome and redundant, making the code difficult to maintain.

mvvm:
ViewModel connects the View layer and Model layer through two-way data binding, and the synchronization between View and Model is completely automatic without human intervention, so developers only need Focusing on business logic, there is no need to manually operate the DOM, and there is no need to pay attention to the synchronization of data status. Complex data status maintenance is completely managed by MVVM.

Usage scenarios:
mvvm’s framework is vue react angular; mvc framework is bootstrap
mvc framework is jquery

mvc mvvm details

7. Let’s talk about it Understanding of jquery

1. Understanding of vue components

---

##Security

1. What is web injection attack? Let’s talk about the two most common attacks (xss csrf)

Tools

Engineering tools

WebPack is a module packaging tool, you can use WebPack to manage your module dependencies, and compile and output the static files required by the modules. It can well manage and package HTML, JavaScript, CSS and various static files (images, fonts, etc.) used in web development, making the development process more efficient. For different types of resources, webpack has corresponding module loaders. The webpack module packager analyzes the dependencies between modules and finally generates optimized and merged static resources.

Two major features of webpack:

1.code splitting, which can be

automatically completed

2.loader can handle various types of static files, It also supports serial operations.

Webpack writes scripts in the form of commonJS, but it also has comprehensive support for AMD/CMD, which facilitates code migration of old projects.

Webpack has the functions of requireJs and browserify, but it still has many new features of its own:

Webpack implements performance optimization

3. The difference between plunges and lodash in webpack

4.The difference between Gulp webpack?

4.js library, js tool?

5. Project management tools

svn git

6. Debugging tools

7. Development tools

sublime webstorm vsCode

http

1. Understand http

https://segmentfault.com/a/11...

2. Talk about the three-way handshake and four-way wave strategy of TCP transmission

TCP’s three-way handshake (establishing a connection) and four-way wave (closing the connection) http://www.cnblogs.com/Jessy/ ...

Performance Optimization

Talk about the performance optimization that the front-end can do (can be described in multiple dimensions, such as pictures, loading order, user experience, html css js, etc.) (10 points )
 Refer to Yahoo’s 14 performance optimization principles:

（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比p+css布局慢。

 Start from the loading order:

减少http请求：
减少下载内容（页面组件（合并）、元素（DOM结构）图片）
利用缓存（静态内容，expires永不过期、恰当的文件头进行请求）
DNS查询： 减少查询（少DOM和缓存） 缩短时间：no404
减少主机名数量
预加载 GZIP
DOM的渲染（重棑与重构） 
 图片：
适用css sprite 、 base64 、 滚动加载 、 默认图 、不在html中缩放 、favicon小且缓存

Code Level optimization

用hash-table来优化查找    
少用全局变量    
用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能    
用setTimeout来避免页面失去响应    
缓存DOM节点查找的结果    
避免使用CSS Expression    
避免全局查询    
避免使用with(with会创建自己的作用域，会增加作用域链长度)    
多个变量声明合并
避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率    
尽量避免写在HTML标签中写Style属性

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to set cookies in the front-end

How to prevent event propagation in the front-end

The above is the detailed content of Web front-end modularization and performance optimization. For more information, please follow other related articles on the PHP Chinese website!