preface

Interviewer: What happens from URL input to page presentation? This is a very classic interview question, including most of the basic knowledge of the front.

  • Step 1 The browser uses DNS to find the IP address of the domain name
  • Step 2 The browser establishes a TCP connection with the server based on the resolved IP address
  • Step 3 After the TCP connection is established, the browser sends an HTTP request to the server
  • Step 4 The server receives the HTTP request and returns a response
  • Step 5 The browser decodes the response and parses the HTML to generate a DOM tree
  • Step 6 If the page has CSS, parse the CSS to generate the CSSOM tree
  • Step 7 Combine DOM Tree + CSSOM Tree to generate render tree
  • Step 8 layout.
  • Step 9: Draw.
  • Step 10 Close the TCP connection

This article from the first 9 steps to the front-end performance optimization means to do a comprehensive summary and summary of the article.

  1. Step 1 to Step 4: mainly involves the optimization of the network layer
  2. Steps 4 to 9: Mainly involves optimization of the rendering layer

The overview

Performance optimization overview diagram

Network layer performance optimization

  • HTTP/2 and WEB Performance Optimization (PART 1)
  • HTTP/2 and WEB Performance Optimization (PART 2)
  • HTTP/2 and WEB Performance Optimization (PART 3)

DNS Resolution optimization

  • What is the process of DNS resolution?
  • Front-end performance optimization -DNS resolution optimization
  • The DNS resolution beforehand
  • DNS Prefetch for performance optimization

TCP Connection Optimization

The number of TCP connections was optimized

  • A brief explanation of http2 multiplexing
  • Analysis of HTTP/2 multiplexing
  • What are the major improvements in HTTP/2 over 1.0?
  • Introduction to HTTP/2
  • Dig deep: What is the true performance of HTTP2
  • How to upgrade to HTTP /2
  • Fundebug website updates HTTP/2 and gets really fast!

The TCP connection process was optimized

  • Interviewer: Someone else! He doesn’t even know the parameters of TCP
  • Taobao two face, the interviewer incredibly TCP three handshake asked so detailed

Optimize the request sending and response process

Static resource

Reduce the request packet volume size

  • Didi Chuxing mini program volume optimization practice
TreeShaking
  • Webpack:Tree Shaking
  • Reduce JavaScript Payloads with Tree Shaking
  • Tree-Shaking Performance Optimization Practices
  • Tree-Shaking Performance Optimization Practices – Principles
  • Your tree-shaking is not good for eggs
  • Does your tree-shaking really work?
  • Tree-shaking multi-platform Web code packaging practices
  • CSS Tree Shaking
  • Tree shaking CSS Modules
The code segment
In actual combat
  • Webpack:Code Splitting
  • Code-Splitting
  • Webpack (v4) Code Splitting using SplitChunksPlugin
  • Code Splitting for Webpack
  • Optimize React code packaging with React.lazy and Suspense
  • The project doesn’t know how to do performance tuning? Try code splitting
  • How to use splitChunks to fine-control code segmentation
  • Webpack Bundle Split and Code Split differences and applications
  • Webpack understand the Chunk
  • CSS code segmentation: MiniCssExtractPlugin
The principle of
  • Webpack:Under The Hood
  • Relearn webpack4 principle analysis
  • How does Webpack packaging work? You will understand after reading this article!
  • Easy to understand the principle of webpack plug-in analysis
  • [10,000 words summary] One article thoroughly understand the core principle of Webpack
Code compression confusion
  • CompressionWebpackPlugin
  • webpack: optimization.minimizer
  • CssMinimizerWebpackPlugin

API

Request data on demand

  • What made me give up Restful apis? With that in mind, I fully embrace GraphQL!
  • Direct Kill RESTful: GraphQL is really sweet!
  • Deep parsing of GraphQL: Clear up your misconceptions about GraphQL
  • Backend server! This made the interface 60 percent faster

Network link optimization

CDN optimization

  • Overseas business performance optimization practice
  • How to gracefully use CDN optimization blog
  • [Issue 119] CDN brings these performance optimizations
  • CDN cache optimization for site performance improvement
  • CDN practice | optimization CDN don’t worry, will find the answers from the whole link
  • Super explanation analysis | CDN HTTPS optimization practice, so effective in a minute
  • The principle of CDN acceleration is thoroughly understood in this paper
  • What the hell is CDN? CDN is discussed in detail

Automated Deployment Practices

  • CDN deployment for front-end engineering
  • How do you develop and deploy front-end code in large companies?
  • How do you develop and deploy front-end code in large companies? (Attached with practice plan)
  • Necessary engineering skills, front-end Jenkins automatic deployment continuous integration
  • The history of front-end deployment
  • How do big companies develop and deploy front-end code? Taobao 8 years of case interpretation
  • Front-end enabling service – Node provides an automatic deployment platform
  • A step-by-step guide to deploying front-end projects using Github Actions
  • Implement front-end automatic deployment of Nodes from scratch
  • Deep practice in front end automation deployment
  • Automated deployment of front-end projects you didn’t know about

Reduced number of requests

Static resource

  • Goose factory original | Web front end on the pit – remember the static resource optimization
Cache optimization
The principle of
  • Thoroughly understand the browser caching mechanism
  • Have an in-depth understanding of the browser caching mechanism
  • Browser Cache policy
  • New browser cache policy changes: sacrifice performance for security
  • Figure out how HTTP caching works
In actual combat
  • Thoroughly understand strong and negotiated caching through the Node.js practice
  • Learn about browser caching strategies with the Node.js sample
  • Front-end caching best practices
  • Webpack persistent caching practices
  • Persistent caching based on WebPack
  • [Issue 835] Static resource persistence for Webpack
  • Service Worker: Make your Web application awesome
  • Realize front-end performance optimization with Service Worker
  • Webpack Code Splitting with Browser Persistent caching
  • How does front-end caching help improve performance
  • Mobile web cache, optimized second access speed
Merger of resources
  • How to use WebPack to generate CSS Sprites
Lazy loading & preloading

JS

  • React 16.6 Lazily loading (and preloading) components
  • Optimize React code packaging with React.lazy and Suspense
  • The Future of React: Dancing with Suspense
  • [Field] Plug-in loading scheme for dynamic form components
  • How to Build a billion apps in JavaScript
  • Asynchronous loading principle and subcontracting strategy of Webpack
CSS
  • There’s an optimization called Preload
  • Preload page resources with preload
  • Boy, don’t you know about these new CSS postures?
  • Css-in-js in detail
  • Css-in-js: A controversial technical solution
  • Explain how CSS-IN-JS works
The picture
  • Lazy loading and preloading
  • Lazy loading of pictures of past life
  • Antd icon library on demand plug-in implementation
  • How do lazy loading and preloading work in JavaScript

API

API result cache
  • Five scenarios for the front-end API to request caching
  • React hooks SWR
  • SWR: The most promising Library for React Hooks data requests
  • LocalStorage /indexedDB
  • Goose factory original | front-end persistence – evercookie
  • H5 page list caching scheme
  • Caching APIS in JavaScript
  • Cache API – Cache control for asynchronous requests
  • How does Axios cache request data?
  • Keep-alive for Multiple tabs in React
  • React cache page from requirements to open source
  • React automatic state saving
If the throttle
  • Watch the scene of the interview crash caused by React Hooks
  • Shock!!! Pull the size of the console, the number of background requests exploded, but did not do a good anti-shake and throttling!!
  • Tear code series (three) : two birds with one stone to explore a variety of anti – shake and throttling implementation ideas
  • How are Lodash anti-shake and throttling implemented
  • Talk about anti-vibration and throttling from search systems
  • 7 angles fully understand the principle of Lodash anti-shake throttling
  • Function anti – shake and throttle is what??

Render layer performance optimization

  • 【 Dry stuff 】 Ten minutes to read the browser rendering process
  • Simple browser rendering principles
  • Simple browser rendering principles
  • Browser rendering: Process and Rationale
  • Browser rendering principle, rendering blocking, frame principle said in one time

DOM Construction optimization

Dom build blocking optimization

The native DOM

The principle of
  • From the perspective of JS blocking browser rendering principle
  • Deciphering the Critical Rendering Path
  • After all these years of front-end development, do you really understand browser page rendering? | technology headlines
  • critical-rendering-path
  • Block rendered CSS
  • The execution sequence relationship between Async, defer and DOMContentLoaded
  • async vs defer attributes
  • Speed up DOM building: use pre-parsing, Async, defer, and preload
In actual combat
  • Browser rendering principle (2) HTML CSS, javascript, DOM between the parsing and mutual blocking relationship
  • CSS and JS block DOM parsing and rendering in this way
  • Loading js and CSS blocks
  • How the browser renders a web page? — DOM, CSSOM, and Rendering

Virtual DOM

  • React introduces concurrent mode: interrupts rendering, specifies load order, and handles multiple states in parallel
  • What exactly is the virtual DOM?
  • How does the virtual DOM evolve into the real DOM
  • The Virtual DOM is not required
  • The Virtual DOM is pure extravagance
  • [Issue 1365] Talk about front-end performance and React Application bottlenecks
  • How to Understand the “fast” of Virtual DOM
  • React history: Virtual DOM and its value
  • Cross-platform technology aside, do we really need the virtual DOM?
  • Incremental DOM versus virtual DOM
  • Dry stuff: Learn more about React rendering principles and performance optimization
  • React Fiber Architecture
  • React: Fiber & Algebraic Effects
  • React Fiber
  • Step into the React Fiber world
  • 6 Questions to understand React Fiber
  • This is probably the most popular way to open React Fiber
  • Rambling the React Fiber
  • The new front-end framework Svelte goes from basics to principles

On-demand rendering

  • Talk about the realization of the front end virtual list
  • Briefly explain the implementation principle of virtual list
  • When the back end throws you 100,000 pieces of data at once, what do you do as a front end engineer?
  • Hand-hold encapsulates React on-demand rendering components
  • React is a lightweight loading component that can be used when using ice ice
  • How to implement a highly adaptive virtual list
  • The realization principle of front-end virtual list
  • “Front-end Advanced” high performance rendering of 100,000 pieces of data (virtual list)
  • Start from scratch and thoroughly understand server-side rendering
  • How to achieve high performance online PDF preview
  • Long list performance optimization practices
  • Ali-react-table: high-performance React table component
  • react-virtualized

SSR(Server-side rendering)

  • Review the isomorphism (SSR) principle in React
  • Start from scratch and thoroughly understand server-side rendering
  • In the big front-end era, how to do React SSR under C-terminal business?
  • Rax SSR gets a 6-fold React rendering performance boost!
  • React server rendering SSR, you are not missing a tutorial, is the product level complete case
  • [Issue 1560] Thinking and practice of isomorphic rendering in front end
  • [Issue 2102] Optimization practice of Vue SSR performance
  • Quickly implement SSR (server rendering) in your Vue/React application
  • React server rendering and isomorphism practices
  • Why do I need to use server rendering, SSR project combat text
  • React server render: How do I transparently pass cookies to the backend? How do I set cookies on the backend
  • The trend: streaming server rendering
  • The Future of React: Server-side components
  • Six render modes you need to know about
  • CSR, SSR, NSR, ESR silly not clear, one article to help you clear up the front-end rendering scheme!

CSSOM build optimization

  • How to speed up page rendering using ONLY CSS
  • CSS rendering principles and optimization strategies
  • A CSS property that can make your page render several times faster

Redraw reflow optimization

  • Performance issues caused by Reflow and Repaint
  • A drag and drop lag problem led to the exploration of setTimeOut
  • Classic performance optimization interview question: Deep thinking about browser rendering from a Transform animation
  • The ultimate browser Performance Tuning – browser composition and rendering layer optimization

React

  • React: A problem no one can explain — why use the Virtual DOM
  • React project performance analysis and optimization
  • React performance optimization from Context source code implementation
  • What did I learn writing React in Dachang? Performance Optimization
  • From setState to React performance optimization
  • React Performance Optimization complete guide, summed up over the years of my efforts!