Front-end performance optimization-basic cognition

Base: 1. Local storage 2. Back-end logic

DNS Addressing and IP parsing
Access to this site is as accessible under Network Headers, Remote Address

The thing behind WebServer.

Performance optimizations include front-end, back-end, network, and hardware machines

Page Rendering Process
HTML page Request
The JS engine of the browser

Minimize the reflow of the page
Prevent JS drawing DOM nodes from blocking other tags parsing or even downloading, such as document.write

The JS engine of the browser

Webpagetest Analyzing network performance

Performance optimization: Yahoo!

The starting point of technology optimization

Write a reusable module

Load mode (improve user experience):
1. Synchronous loading
are loaded to show the user what they want to see.
A few TCP connections can be done to load the page

2. Tiered loading
Combination of synchronous loading and asynchronous loading
First load important information such as logo/core function, and then load the non-important

3. Load on Demand
The user does not trigger the feature and we do not load
The user does not trigger the feature, but the bandwidth is idle, or the main elements of the page are loaded

Important things synchronous loading, unimportant things asynchronous loading

Disadvantages of Bigpipe:
More asynchronous requests
SEO engine more difficult to crawl
Mutual communication between modules reference
Module engine repeated rendering

Technical terminology:
1. First screen load time (without sliding)
2. White screen time
3. Time to be manipulated
4. Connectivity Rate

Product Terminology:
1. PV Once access PV
2. UV multiple access to the same person once UV
3. Day active number of users
4. Mau month active number of users
5. Bounce rate (/PV of the person who left the time)

Front-end performance optimization-basic cognition