Features
Features:

Product Tour >

Edraw AI >

Paid Plans:

Individuals >

Business >

Eduaction >
Resources
Blog

History

How-tos & Tips

Discovery

Biography

Business Analysis

Examples

AI concept Map

Free AI Mind Map Generator

Onenote Mind Map

Bcg Matrix Examples

Nike Marketing Strategy

Unilever SWOT Analysis

Make Mind Maps in Google Docs

Guide

FAQs

What's New

Resource Center
Templates
All Templates

Brain Storming Templates

Strategy and Planning Templates

Project Management Templates

Product Management Templates

Human Resources Templates

Agile Workflow Templates

Marketing Templates

Education Templates

Fun and Games Templates

User Gallery
Download
Pricing
Enterprise

MindMap Gallery Front-end full-link performance optimization and RD development process optimization

Front-end full-link performance optimization and RD development process optimization

Front-end full-link performance optimization: R

Edited at 2021-01-01 19:46:28

PlotWizard

Recent works View more works>>

Front-end full-link performance optimization and RD development process optimization

PlotWizard

Recent works View more works>>

Recommended to you
Outline

manajemen kinerja
- 17
Angelica Caroline
CDN network
- 38
rasflp
Slow SQL processing encyclopedia
- 38
PlotWizard
network layer
- 49
Reem Alfaifi

Front-end full-link performance optimization and R&D development process optimization

4. HTTP: How to reduce the number of HTTP requests?

CSS Sprites

Images use DataURL, Web Font

JS/CSS file merge

JS/CSS Request Combo

Interface merge

Interface storage LocalStorage

Static resource storage LocalStorage

5. Cookies: Strategies and benefits of reducing cookie size

Strategy

Set whitelist on main website homepage

Periodically delete non-whitelisted cookies

benefit

Reduce transfer size between pages

Effectively manage cookies

6. Server

Cache configuration and optimization solutions

Expires

definition

The response header contains the date/time after which the response expires

An invalid date, such as 0, represents a date in the past, that is, the resource has expired

If the "max-age" or "s-max-age" directive is set in the Cache-Control response header, the Expires header will be ignored.

grammar:

Expires: Tue, 17 Dec 2019 07:01:44 GMT

Example:

Expires: Tue, 17 Dec 2019 07:01:44 GMT

Cache-Control

definition

A general message header field that implements the caching mechanism by specifying instructions. Caching directives are one-way, meaning that directives set in the request are not necessarily included in the response.

grammar

Cache-Control: max-age=[Set the maximum period for cache storage. After this time, the cache is considered expired (in seconds). Contrary to Expires, the time is relative to the time of the request]

Example

Cache-Control:max-age=600

ETag

definition

An HTTP response header is an identifier for a specific version of a resource. This makes caching more efficient and saves bandwidth because the web server doesn't need to send a full response if the content hasn't changed. And if the content changes, using ETag helps prevent simultaneous updates of resources from overwriting each other.

If there is a voluntary change in a given URL, a new ETag value must be generated. Therefore ETags are similar to fingerprints and may also be used for tracking by some servers. Comparing ETags can quickly determine whether this resource has changed, but may also be persisted permanently by tracking servers

grammar:

ETag: "<etag_value>"

Example

ETag: "<5c6ccc12-1d45>"

Last-Modified

The Lat-Modified is a response header that contains the date and time that the resource identified by the source server was modified. It is often used as a validator to determine whether received or stored resources are consistent with each other. This is a fallback mechanism since it is less accurate than ETag. Conditional requests containing If-Modified-Since or If-Unmodified-Since headers will use this field

grammar

Last-Modified: <day-name>, <day>, <month>, <year>, <hour>: <minute>: <second> GMT

Example

Last-Modified：Web, 20 Feb 2019 03:40:02 GMT

Date

definition:

Date is a common header that contains the date and time when the message was created

grammar

Date: <day-name>, <day>, <month>, <year>, <hour>: <minute>: <second> GMT

Example

Date：Tue, 17 Feb 2019 03:40:02 GMT

Status

definition

HTTP response status codes indicate whether a specific HTTP request completed successfully. Responses are divided into five categories: informational responses (100 - 199), successful responses (200 - 299), redirects (300 - 399), client errors (400 - 499) and server errors (500 - 599)

Example

Status：200

How to enable and configure gzip compression

benefit

Compress text (HTML/CSS/JS)

No compression for non-text (jpg/gif/png)

Compression ratio about 50% - 70%

Configuration method

Nginx configuration: nginx.conf file adds gzip on

Apache configuration: AddOutputFilterByType and AddOutputFilter

Validity detection

Response header Check whether there is Content-Encoding: gzip, which means gzip is turned on on the server.

7. HTTPS: How to enable HTTPS for the entire site

basic concept

HTTPS, HyperText Transfer Protocol Secure, is a transfer protocol for secure communication over computer networks

HTTPS communicates over HTTP but uses SSL/TLS for data encryption

The main purpose of HTTPS is to provide server identity authentication and protect data privacy and integrity.

working principle

The browser initiates an HTTPS request

Transfer certificate

Browser parses certificate

Send encrypted information

Server decrypts information

Transfer encrypted information

Browser decrypts information

advantage

SEO

Safety

implement

Dealer purchase certificate

GoGetSSL

SSLs.com

SSLmate.com

Local test certificate

Local HomeBrew installation: brew install mkcert

Install the root certificate locally: $ mkcert --install

Generate signature locally: $mkcert 123.com //Generate certificate for 123.com

Local nginx configuration

8. HTTP-2: What are the benefits of upgrading HTTP-2? How to upgrade?

HTTP/2 concepts

HTTP/2 (Hypertext Transfer Protocol version 2, originally named HTTP 2.0), referred to as h2 (encrypted connection based on TLS/1.2 or above) or h2c (unencrypted connection), is the second major version of the HTTP protocol Version

HTTP/2 Advantages

Transfer data in binary format

Multiplexing, allowing multiple requests to be made over a single HTTP/2 connection

Header Compression, small transmission volume

Server Push, the server can push resources to the client faster

Advantages of HTTP/2 Sites

Can reduce server pressure

Improve website access speed

Keep your website safe

Enable HTTP/2 on Nginx

Upgrade OpenSSL: $ openssl version

Recompile

$ cd nginx-xxx

$ ./configure --with-http_ssl_module --with-http_v2_module

$ make && make install

Verify HTTP/2

Check in the browser to see if there is a little green lock

Browser request screenshot

3. DNS: What are the mainstream DNS optimization methods?

definition

Domain Name System is a distributed database that maps website domain names and IP addresses to each other, making it easier to access the Internet.

Client processing

Android DNS module (okhttp)

Supports HTTP/2. HTTP/2 supports concurrency on a single TCP connection by using multiplexing technology to send or receive data by sending multiple requests at once on a single connection.

If HTTP/2 is not available, connection pool reuse technology can also greatly reduce latency

Supports GZIP to compress download size

Corresponding caching can completely avoid repeated network requests

If the server is configured with multiple IP addresses, when the first IP connection fails, OkHttp will automatically try the next IP

iOS DNS module (self-developed)

When the app starts, it caches all domain names and IPs that may be used and processes them asynchronously. The client does not need to get the cached results.

If there is a cache for this domain name in the Cache, the cached IP will be returned directly.

If this domain name is not in the cache, apply again to the HTTPDNS SERVER, and the result will be returned in this callback.

Front-end processing

Browser concurrency limit, distribution set to multiple domain names

User access: Java, PHP and other API interfaces

Pages and styles: HTML/CSS/JS

Pictures: jpg, png, gif, etc.

2. CDN: How to properly configure CDN cache?

definition

Content Delivery Network (CDN) uses the server closest to each user to send files to the user distribution network faster and more reliably.

advantage

Speed up: Users will be assigned closer and smoother server nodes to transmit data to users.

Low cost: servers are placed in different locations, reducing interconnection traffic and reducing bandwidth costs.

High availability: When a server fails, servers in nearby areas are automatically called

CDN back to origin

Back-to-origin means that when the browser accesses static files on the CDN cluster, the file cache expires and directly penetrates the CDN cluster to access the origin machine.

CDN cache

Level 3 cache: browser local cache, CDN edge node cache, CDN origin site cache

Cache settings: If the cache time is set too short, the CDN edge node cache often fails, resulting in frequent origin returns, increasing the load on the origin site, and access is slow; if the cache time is set too long, file updates are slow, and the user's local cache cannot be updated in time. ; So it depends on the business situation.

Cache time of different static resource types

HTML: 3 minutes

JS, CSS: 10 minutes, 1 day, 30 days

CDN grayscale release

Principle: In some regions and some operators in some regions, static resources will be released first. After verification, they will be released in full.

Implementation: In terms of domain names, set up special VIPs to resolve to the cities and operators that need to be grayscaled; in terms of origin site machines, configure separate origin site machines for grayscale cities and operators; grayscale cities and operators to resolve to these unique machines

CDN prepares for big promotion

Increase computer room bandwidth

Increase operator traffic

Disaster recovery: The CDN application cache time is set from 10 minutes to 1 hour, and will be restored after the major promotion.

1. Hybrid development

Introduction to the core and advantages of mini programs

Vision

At your fingertips: users can open the app by scanning or searching

Use it and go: don’t worry about installing too many apps

Technical advantages

H5 has a lower development threshold than App development

Better than H5, close to Native experience

Rich native capabilities such as camera, location, network, storage, etc.

The top drop-down, search, QR code and other entrances are easy to use and go away after use, which is simple and convenient.

No need to download like an app, just open and exit directly, support hot update

underlying kernel

business background

App platform side

Traffic monetization

Mini program ecology

Class application distribution market

Enterprise application side

Mobile traffic is drying up, new traffic is a bonus

Solve some of the problems of difficulty in acquiring customers and reduce the cost of attracting new customers

Dramatically reduce development costs

More opportunities for trial and error in business

Selection suggestions

First released: January 2017 (WeChat mini program)

Github Starts: Closed Source

Community active: OK

Components: very rich

Learning curve: very low

Native performance: OK

Comprehensive suggestions: platform products now have traffic output to merchants; multiple apps enable business interoperability; compared with RN and Flutter, small programs are more recommended

Introduction to Flutter core and advantages

Vision

A handy toolkit for a beautiful building experience that lets you draw pixels anywhere on the screen

Technical advantages

Write once and deploy to each terminal: Web, Android/iOS, Mac/Linux/Windows, Fuchsia OS

The bottom layer uses the Skia graphics engine, and the graphics performance is comparable to native applications.

Interface like a full screen app or 2D game

Fast, uses native ARM binaries, compiles ahead of time, no JVM required

underlying principles

Selection suggestions

May 2017

Github Starts: 8.16w (end of 2019)

The community is generally active

Components are specialized widgets and are not rich enough

The learning curve is relatively high, getting familiar with the Dart language again

Native performs best

Comprehensive suggestions: Considering performance, the business is multi-terminal oriented, and the App team has enough people, it is recommended to choose