#
Basic procedures#
1. Check the terminal to see the possible mistakes.#
2. Check the console for any errors, warnings, or failures.#
3. Carefully observe the current web page following the rendering process:#
%%{init: {'theme': 'neutral'}}%%
graph TD
%% Server Side
S1[Receive HTTP Request] --> S2[Process Request]
S2 --> S3[Generate HTML]
S3 --> S4[Fetch CSS/JS/Assets]
S4 --> S5[Send HTTP Response]
style S1 fill:#C8E6C9
style S2 fill:#C8E6C9
style S3 fill:#C8E6C9
style S4 fill:#C8E6C9
style S5 fill:#C8E6C9
%% Client Side
A[User Enters URL] --> B[Send HTTP Request]
B --> S1
S5 --> C[Receive HTML/CSS/JS]
C --> D[HTML Parsing]
D --> E[Tokenization]
E --> F[DOM Tree Construction]
F --> G[DOM Node Creation]
G --> N[DOM Ready]
C --> H[CSS/JS Download]
H --> I[CSSOM Construction]
I --> J[Style Calculation]
J --> O[CSSOM Ready]
H --> K[JS Execution]
K --> L{DOM/CSSOM Modified?}
L -->|Yes| D
L -->|No| M[Continue]
N --> P[Render Tree]
O --> P
P --> Q[Layout/Reflow]
Q --> R[Layer Compositing]
R --> S[Paint]
S --> T[GPU Rasterization]
T --> U[Display Pixels on Screen]
style A fill:#B3E5FC
style B fill:#B3E5FC
style C fill:#B3E5FC
style D fill:#B3E5FC
style E fill:#B3E5FC
style F fill:#B3E5FC
style G fill:#B3E5FC
style H fill:#B3E5FC
style I fill:#B3E5FC
style J fill:#B3E5FC
style K fill:#B3E5FC
style L fill:#B3E5FC
style M fill:#B3E5FC
style N fill:#B3E5FC
style O fill:#B3E5FC
style P fill:#B3E5FC
style Q fill:#B3E5FC
style R fill:#B3E5FC
style S fill:#B3E5FC
style T fill:#B3E5FC
style U fill:#81D4FA,stroke:#01579B
Identify the process which possibly goes wrong and then check the corresponding function.
Note! This step makes sure the rendering of the virtual server on the local machine is working well. If the issue persists, we have to dig into the deployment process.
Check the deployment process files:
%%{init: {'theme': 'neutral'}}%% graph TD A[Project Size] -->B[Snowpack + esbuild] A --> C[Snowpack + Webpack Plugin] C --> D[Enable Code Splitting] D --> E[Configure Caching] E --> F[CI/CD Integration]