1. Keywords
White screen, splash screen, freeze, page crash, abnormal rendering
2. Overview
During project development and delivery, occasional white screens, splash screens, and freezes may be encountered. There are many reasons for this kind of problem, such as insufficient memory, insufficient video memory, memory leak, etc., but if you want to pinpoint the specific cause of the performance problem, if you do not have relevant troubleshooting experience or a clear troubleshooting idea, then this Such problems are very difficult to troubleshoot, and time-consuming and labor-intensive.
White screens, splash screens, and freezing issues will lead to poor user experience. Customers generally have very low tolerance for such issues. Once they occur, they must hope to solve them as soon as possible, the sooner the better. Therefore, if such problems are encountered every time, there is no rule of thumb to investigate, the cost is too high, and the efficiency cannot be guaranteed. Therefore, we compiled a screening guide and summed up past experience, which not only reduces personnel requirements, but also reduces costs and increases efficiency, once and for all.
3. Abnormal Analysis
Summarize and analyze the common causes of white screen, splash screen and freezing, and the indicators that need to be checked when these problems occur.
Common Causes of a White Screen
Generally, the white screen phenomenon mainly observes the usage of memory and video memory. The browser's rendering process and the normal work of the GPU process are inseparable from memory and video memory. As long as one of these two processes fails, it will directly affect the display of the front-end page.
Tips: What is the relationship between the rendering process and the GPU process?
The rendering process of the browser sends the graphic elements in the page to the GPU process, and the GPU process renders the received graphic elements into a final image, then sends the rendered image back to the rendering process, and finally displays it on the screen. In other words, as long as one of the GPU process and the rendering process has a problem, the other will also be affected, and eventually the page cannot be displayed normally. Both memory and video memory can affect these two processes.
1. Memory overflow
The display of the front-end page is inseparable from the memory. Insufficient computer memory will have a negative impact on the browser rendering process/GPU process. In severe cases, the rendering process/GPU process will crash, which will lead to a white screen of the page, or more precisely, a page crash.
The rendering process, also known as the rendering engine, needs memory to store and process images or other page content. When the memory is insufficient, the page content cannot be loaded and rendered normally. The GPU process also needs memory to store and process graphics data in order to render graphics faster.
Small scenario: After the front-end service starts normally, it cannot be loaded, rendered, and displayed normally. You can first check whether the memory overflows. If it overflows, you need to upgrade the hardware configuration (increase the running memory).
Tips: What is memory overflow?
A memory overflow is when a program tries to use more memory than is available.
2. Memory leak
The white screen caused by memory leaks is caused by memory exhaustion, that is, the actual memory consumed by the page exceeds the expected memory. When there is a memory leak, as the leak continues, the page may freeze or flicker, and in severe cases, it may cause memory overflow, which may cause the rendering process/GPU process to crash, causing a white screen on the page (page crash). ·
Small scenario: Different from memory overflow, when the front-end service is just started, the page can be loaded, rendered and displayed normally, but as time goes by, the page gradually freezes, and the longer the running time, the more obvious the freeze, and even the page Crash, at this time, you can first check whether there is a memory leak (monitoring memory growth).
Tips: What is a memory leak?
A memory leak is when a program fails to release allocated memory correctly, resulting in a waste of system memory. If the memory leak continues to occur, it will eventually lead to memory overflow, which will affect the normal operation of the system.
3. Insufficient video memory, video memory overflow
The display of the front-end page is inseparable from the video memory. Insufficient video memory will lead to a decline in GPU performance, which will affect the rendering process/GPU process of the browser page, the page cannot load the required resources normally, and the display of the page will be affected. The most direct manifestation is that the rendering and display speed of the page will decrease, causing the card to In severe cases, it may cause a blank screen of the page, and even when the video memory overflows, it is very likely to cause the rendering process/GPU process of the page to crash, and then the page crashes.
Video memory overflow is more serious than video memory shortage. Depending on the degree of overflow, the page can be blanked or even crashed. If the overflow is minor, it may just cause a blank screen of the page. If the degree of overflow is heavy, it may cause the page to crash.
Small scenario: After the front-end service starts normally, it cannot be loaded, rendered, and displayed normally. After memory overflow is ruled out, you can first check whether the video memory is insufficient or has already overflowed. If the video memory is indeed insufficient, you need to upgrade the graphics card.
Small scene: When a WebGL-based 3D scene is displayed at a high resolution, a white screen is likely to appear. This is because in a large-resolution scene, memory overflow will cause WebGL to crash, which will cause the 3D scene to fail to load normally, which may lead to a white screen. Screen.
Tips: What is the difference between insufficient video memory and video memory overflow?
Insufficient video memory means that the video memory capacity is not enough to support the normal work of the browser process. Memory overflow is when a program tries to use more video memory than is available.
4. CPU utilization is fully loaded
When the CPU utilization reaches about 90%, or even fully loaded (100%), it may cause a white screen or even crash the page. Because the CPU utilization rate is at full load for a long time, the system resources are insufficient, which may cause the task on the page to be unable to be processed normally, resulting in a white screen or even a crash of the page.
Tips: There are many reasons for the full CPU utilization, such as too many running programs leading to insufficient resources, program failure/infinite loop/memory leak/cache pollution/network congestion, etc., which cause a large amount of CPU resources to be occupied.
5. GPU utilization is fully loaded
Full GPU utilization will lead to insufficient GPU resources, which will cause the page to fail to load normally, and may cause the page to go blank or even crash.
Tips: There are many reasons for the full utilization of the GPU, such as insufficient GPU memory, too long GPU running time\too many running tasks, GPU hardware problems, etc.
6. The browser kernel version is low
If the browser kernel version is too low, there may be incompatibility of webpage codes, which will cause the page to not be displayed normally, and seriously cause splash screen and white screen.
7. The browser does not enable hardware acceleration
If the browser does not enable hardware acceleration, it may also cause page freezes, flickering and white screen problems.
Turning on hardware acceleration allows the browser to render pages faster. Normally, the browser turns on hardware acceleration by default. However, if the computer graphics card is old or the driver is incompatible, hardware acceleration may not be turned on, resulting in freezes and flashes. Screen or even white screen problem. If these problems occur, you can try to upgrade your computer's graphics card driver or manually develop hardware acceleration in the browser settings.
Tips: How to manually enable hardware acceleration in Google Chrome?
- Step 1: Open Google Chrome and enter chrome://settings in the address bar
- Step 2: Under the "System" heading find "Use hardware acceleration mode (if available)" and enable it
- Step 3: Restart your browser for the changes to take effect
8. Other reasons
Of course, there are definitely more than the above seven reasons that can cause a white screen, such as network impact, bandwidth bottleneck, browser compatibility issues, server issues, script loading failure/script error reporting/script blocking, style sheet loading failure/style blocking, etc. resulting in a white screen.
Common Causes of Flicker Screens
A splash screen is a flicker of white or other colors on the screen. Splash screen and white screen can be classified into one category of problems. Splash screen is temporary and sporadic, so its severity is lighter than white screen. Any factor that can cause a white screen may cause a splash screen before it causes a white screen.
There are two types of factors that cause splash screens that have actually been encountered in recent projects.
1. The kernel of Google Chrome is too low
If the kernel version is too low, there may be incompatibility of the webpage code, which may cause the page to not be displayed normally, and may cause a splash screen.
2. The multimedia files in the page slow down the performance of the page
Multimedia files in the front-end pages, such as videos and dynamic pictures, will take up more memory and video memory, because they require more storage space to store and process images, audio and video files. In addition, multimedia files require more processing power to render and play, and more network bandwidth to transmit.
Tip: The size of the multimedia files on the page remains the same, the smaller the file, the smaller the consumption of memory and video memory. The size of the multimedia files on the page remains the same, the smaller the size, the smaller the consumption of memory and video memory.
Common causes of stuttering
Caton, splash screen, and white screen can be classified as one type of problem. The severity of freeze is lighter than that of splash screen. Any factors that can cause splash screen and white screen are possible before the splash screen and white screen are not caused. Causing Caton.
There are two types of factors that cause lag that have actually been encountered in recent projects.
1. There are multimedia chart components on the page (large number or large file size or large size, or both)
When the browser memory and video memory consumption is too large, it may cause page freeze. However, multimedia files such as videos and dynamic pictures consume a lot of memory and video memory, so when there are videos and dynamic pictures in the page, it is easy to appear stuck phenomenon.
Tip: Reduce memory and video memory consumption by controlling the size and dimensions of multimedia files
Tip: Temporarily remove multimedia resources for charts that do not need to be displayed in the current viewable area, thereby reducing resource resource expenditures
2. There are many and broken components in the page
There are many components in the page, very fragmented, and there are many interactions, which may cause the script to be bloated. When the browser loads the script, it will consume a lot of CPU and memory resources, causing the page to freeze.
Key indicators to check
When freezes, splash screens, and white screens occur, the following indicators need to be monitored emphatically.
| Testing Machine | collection time | memory usage | GPU memory (video memory) | CPU utilization | GPU utilization | FPS | Whether to enable hardware acceleration | Currently enabled graphics card |
|---|---|---|---|---|---|---|---|---|
| Tester 1 | 10:30 | xxx | xxx | xxx | xxx | xxx | xxx | xxx |
| 11:00 | xxx | xxx | xxx | xxx | xxx | xxx | xxx | |
| 11:30 | xxx | xxx | xxx | xxx | xxx | xxx | xxx | |
| Tester 2 | 10:30 | xxx | xxx | xxx | xxx | xxx | xxx | xxx |
| 11:00 | xxx | xxx | xxx | xxx | xxx | xxx | xxx | |
| 11:30 | xxx | xxx | xxx | xxx | xxx | xxx | xxx |
1. What is FPS? How to check?
FPS is the number of frames per second, that is, the number of images displayed per second. The higher the frame rate, the smoother the picture, and vice versa. Most of the front-end pages have a very smooth user experience of 60 frames and above, while those below 30 frames are prone to stuttering. Querying FPS is very simple. Open the F12 debugging tool, use the shortcut keys Ctrl+Shift+P, search for FPS, select the first item, and the real-time FPS will be displayed in the upper left corner of the page.
2. How to check memory, video memory, CPU utilization, and GPU utilization?
The above indicators can be queried by using the browser task manager or computer task manager.
The computer task manager is shown in the figure below, where you can observe CPU utilization, GPU utilization, and GPU memory usage (the usage of GPU memory can accurately reflect the usage of video memory).
The following figure shows the browser task manager, where you can observe the actual memory usage and GPU memory usage (video memory usage) of the page rendering process.
3. How to manually enable hardware acceleration in Google Chrome?
- Step 1: Open Google Chrome and enter chrome://settings in the address bar
- Step 2: Under the "System" heading find "Use hardware acceleration mode (if available)" and enable it
- Step 3: Restart your browser for the changes to take effect
4. Graphics card
When a computer has both an integrated graphics card and a discrete graphics card, the integrated graphics card is enabled by default, because the integrated graphics card can provide basic graphics processing capabilities and is more energy-efficient. If you need higher performance graphics processing capabilities, you need to manually switch to the discrete graphics card .
When the computer freezes, flickers or even goes blank, check the graphics card. If the integrated display is currently enabled, you can switch to the independent display and retest.
Tips: How to check whether the computer is currently using an integrated graphics card or an independent graphics card?
Press the "Win+X" key combination to open the "Task Manager", click the "Performance" tab, observe the sidebar on the left, if there are multiple graphics cards, you will see "GPU 0" and "GPU 1" (or more) tabs. Click on each GPU tab and observe the GPU usage in the right pane, if the graphics card is in use, you will see the GPU usage fluctuate.
As shown in the blue box in the figure below, the integrated graphics card is usually identified as Intel, and the discrete graphics card is usually identified as NVIDIA or AMD.
4. Case Analysis
Collect page freezes, splash screens, and white screen scenarios encountered during work, and list troubleshooting steps or solutions for reference.
Case 1
| project | illustrate |
|---|---|
| case description | The page does not contain any 3D scenes. When visiting, the initial loading of the page is normal, but as time goes by, the page freezes, flashes in turn, and finally the entire page is blank or even crashes |
| Determine the target | Can accurately locate the cause of the abnormality and narrow the scope of abnormal investigation as much as possible |
| Important information | Initial load works fine, issues over time, guess memory leak or VRAM leak |
| propose a hypothesis | Memory leaks (it is recommended to observe memory, video memory, CPU utilization, GPU utilization synchronously) |
Tools used: browser task manager, computer task manager
As shown in the figure below, you can observe CPU utilization, GPU utilization, and GPU memory usage (the usage of GPU memory can accurately reflect the usage of video memory)
As shown in the figure below, you can observe the actual memory usage of the page rendering process and the GPU memory usage (video memory usage).
Design experiments, test hypotheses, and target
- If possible, it is recommended to prepare multiple computers, control variables, perform simultaneous testing, and perform multiple rounds of testing until the hypothesis is verified and the target is positioned
- It is assumed that the experimenters are non-developers and do not have the capability of in-depth code layer detection.
- Take the recurrence of the problem as the primary goal, and then narrow the scope of investigation as much as possible after the recurrence (continuously eliminate interference items)
Assuming that two computers with the same hardware conditions participate in the test, the design information record table is as follows, and the information collection interval is set according to the actual situation.
| Testing Machine | collection time | memory usage | GPU memory (video memory) | CPU utilization | GPU utilization | other indicators |
|---|---|---|---|---|---|---|
| Tester 1 | 10:30 | xxx | xxx | xxx | xxx | xxx |
| 11:00 | xxx | xxx | xxx | xxx | xxx | |
| 11:30 | xxx | xxx | xxx | xxx | xxx | |
| Tester 2 | 10:30 | xxx | xxx | xxx | xxx | xxx |
| 11:00 | xxx | xxx | xxx | xxx | xxx | |
| 11:30 | xxx | xxx | xxx | xxx | xxx |
First round of testing:
Description: With the main goal of reproducing the problem, test machine 1 and test machine 2 deploy, run and access the same front-end service, observe and record information.
Conclusion: Assuming that a round of testing has reproduced the phenomenon of freezing and flickering, and it is obviously observed that the memory usage has increased, and other indicators are normal, it is determined to be a memory leak
Second round of testing:
Description: The main goal is to find the location of the memory leak, using the dichotomy method. Test machine 1 and test machine 2 respectively deploy a set of front-end services. It is required that test machine 1 delete half of the content of the page and keep half of the content, for example, keep the content on the left. Test machine 2 also deletes half and keeps half, for example, keep the content on the right side (do not repeat the content reserved by the two test machines). Observe and record information.
Conclusion: After the second round of testing, observe the data of the two test machines. If the memory does not increase, it means that the observation chart is normal. The observation chart of the test machine with abnormal memory continues to be divided into two, and the third round of testing is carried out.
Third round of testing: repeat the second round of steps
Coordinate development resources
After the above experiments, it was determined to be a memory leak, and the exception range can be delineated between several components or functions. At this time, you can apply for R&D intervention to further locate the problem at the code level and optimize it.
Case 2
| project | illustrate |
|---|---|
| case description | The page embeds 3D scenes through iframe, and there are videos and dynamic pictures at the same time. When accessing the page, there is a slight freeze and occasional splash screen, which is still the case after a long run |
| Important information | Very stable exception occurs, the exception is not affected by the running time or the impact is small and negligible |
| past projects | Insufficient memory, insufficient video memory, or both have been encountered |
Tools used: browser task manager, computer task manager (same as Case 1)
Solution 1: Minimize the file size and actual resolution of videos and motion pictures as much as possible
File size coordination designer handles.
Ensure that the display size remains unchanged, reduce the actual resolution, set a low resolution, and then use scale to zoom in to the original size.
Solution 2: Check the resolution of the 3D scene, and reduce the actual resolution as much as possible under the premise of ensuring the display effect
Reducing the resolution of the 3D scene can reduce the amount of calculation required for image processing and rendering, thereby effectively reducing the consumption of memory and video memory. Ensure that the display size remains unchanged, reduce the actual resolution, set a low resolution, and then use scale to zoom in to the original size.
Solution 3: Increase the level of video files and dynamic pictures in the page to reduce the impact on other components
Solution 4: Remove the video files and dynamic pictures that are not currently displayed, and add them dynamically when they need to be displayed
Solution 5: Upgrade RAM and VRAM
Abnormalities occur very stably, and the influence of time factors is negligible, indicating that there is no leakage problem of memory and video memory. Observe the usage of memory and video memory. If you find that the memory or video memory is not enough, and the above four solutions are not adopted, you can directly upgrade the hardware. configuration.
Case 3
| project | illustrate |
|---|---|
| case description | The page embeds a 3D scene through an iframe, and the initial access is normal. As time goes by, the page freezes and splashes, and finally the iframe window crashes, but the main page is normal |
| Determine the target | Can accurately locate the cause of the abnormality and narrow the scope of abnormal investigation as much as possible |
| Important information | 1. The abnormality occurs over time, and the abnormality gradually increases. 2. The iframe window crashes. 3. The main page is normal. |
| propose a hypothesis | There is a memory leak or a video memory leak in the 3D scene, but the main page itself is normal |
Tools used: browser task manager, computer task manager (same as case 1, no more details)
Design experiments, test hypotheses, and target
- If conditions permit, it is recommended to prepare multiple computers and test the main page and 3D scene separately
- Assume that the experimenter is a non-developer and does not have the ability to deeply detect the code layer
- The primary goal is to reproduce the problem
Assuming that three computers with the same hardware conditions participate in the test, the design information record table is as follows, and the information collection interval is set according to the actual situation.
| Testing Machine | Test content | collection time | memory usage | GPU memory (video memory) | CPU utilization | GPU utilization |
|---|---|---|---|---|---|---|
| Tester 1 | Main page + 3D scene | 10:30 | xxx | xxx | xxx | xxx |
| 11:00 | xxx | xxx | xxx | xxx | ||
| 11:30 | xxx | xxx | xxx | xxx | ||
| Tester 2 | Run the main page alone | 10:30 | xxx | xxx | xxx | xxx |
| 11:00 | xxx | xxx | xxx | xxx | ||
| 11:30 | xxx | xxx | xxx | xxx | ||
| Tester 3 | Run the 3D scene separately | 10:30 | xxx | xxx | xxx | xxx |
| 11:00 | xxx | xxx | xxx | xxx | ||
| 11:30 | xxx | xxx | xxx | xxx |
Test machine 1:
Goal: To reproduce the problem as the main goal, observe and record information.
Conclusion: After a period of time, freeze occurs, continue for a period of time, a splash screen appears, continues for a period of time, the iframe window crashes, and the main page is normal, then it is judged that there is indeed a resource leak. According to the record table, observe the occupation of memory and video memory, and determine whether it is a memory leak, a video memory leak, or both.
Test machine 2:
Goal: Remove the 3D scene and test the main page separately (according to the phenomenon of the problem, it can be preliminarily judged that there is no problem with the main page itself, but it still needs to be tested and verified again with data)
Conclusion: If there is no abnormality on the main page after continuous operation for a period of time, and the sampling data is stable without large fluctuations, it means that the main page is indeed normal
Test machine 3:
Goal: Remove the main page and test the 3D scene alone
结论：一段时间后，出现卡顿，继续一段时间，出现闪屏，继续一段时间，3D场景白屏或崩溃。观察记录表，你会发现，测试机3出现问题的时间要比测试机1晚，但仍会出现，这是因为单独访问3D场景，没有页面与之竞争资源，所以坚持的时间可能会更久。
协调开发资源
结合测试机123的情况，可得出结论，确定3D场景存在内存泄漏或显存泄漏，此时可以申请研发介入，进一步的定位代码层面问题，并优化。
小贴士：页面中通过iframe嵌入存在资源泄漏的3D场景，出现异常时，为什么会出现仅iframe窗口白屏或崩溃，而主页面正常的现象？
通过iframe嵌入第三方页面时，主页面和子页面是两个独立的页面，各自拥有独立的GPU进程和渲染进程，二者之间资源隔离，使用的内存和显存资源并非共享，它们之间的数据交互也是通过消息传递实现的，而非共享内存空间。
这种设定是出于安全考虑，因为iframe嵌入的第三方页面可能来自不可信的源，因此为了保护主页面安全，不允许它们直接共享内存和显存。主页面和子页面会竞争计算机的内存和显存资源,所以才会出现实验中测试机1可能会比测试机3更快出现问题的情况。
案例4
| 项目 | 说明 |
|---|---|
| 案例描述 | 页面通过iframe嵌入3D场景，初始访问正常，随时间推移，页面出现卡顿闪屏，慢慢的，最终整个浏览器页面崩溃 |
| 重要信息 | 1.随时间推移出现异常，且异常慢慢加重 2.整个浏览器页面崩溃 |
| 提出假设 | 主页面和3D场景均可能存在内存泄漏或显存泄漏 |
案例4与案例3相似，唯一区别是案例4并非是仅iframe窗口崩溃，而是整个页面崩溃。
此时，主页面和3D场景均可能存在资源泄漏情况。主页面崩溃不能直接断定是主页面单方面出现资源泄漏，因为子页面资源泄漏严重或脚本报错的时候，也是有可能造成主页面崩溃的。所以，主页面和3D场景需要分别单独测试。
案例5
| 项目 | 说明 |
|---|---|
| 案例描述 | 主页面通过iframe嵌入3D场景，在分辨率3840*2160的屏上投放，3D场景直接无法正常加载 |
原因解释
基于WebGL的3D场景对分辨率有要求，水平最高不要超过3840，垂直不要超过1080，超出范围后，资源消耗加大，不能保证正常显示。分辨率越小，资源消耗越低。所以在保证显示效果的前提下，应尽量降低分辨率。
小贴士：基于WebGL3D场景为什么不支持高分辨率下展示？
WebGL需要大量的内存和显存来存储和渲染高分辨率的图像，如果内存和显存不足，很容易发生溢出，导致页面崩溃。
解决方案1
pixelRatio属性默认值为1，可以直接通过减小该属性值来降低3D场景的分辨率。
pixelRatio=0.25 // 表示将分辨率缩小为原来的四分之一
pixelRatio=2 // 表示屏幕的分辨率是原来的两倍小贴士：pixelRatio是什么意思？
pixelRatio是设备像素比（物理像素/逻辑像素），表示屏幕上一个逻辑像素占用多少个物理像素，默认值为1。pixelRatio可以用来衡量屏幕的分辨率，以便确定图像的清晰度和显示效果。
同一个页面，pixelRatio数值越大，分辨率越高，渲染效果越清晰，内存和显存消耗越大。
同一个显示屏，同一个前端页面，我们通过代码降低分辨率，指的是降低物理分辨率，即减少屏幕上的物理像素数量，从而使图像变得模糊。
解决方案2
3D场景不做变动，主页面嵌入3D场景时，在保证展示效果的前提下，通过降低3D场景实际分辨率的方式，从而降低内存和显存的消耗（设置小的分辨率，然后通过scale放大）。
五、注意事项
方法论
- 遇到卡顿、闪屏、白屏问题时，不要上来就想着怎么解决，请首先保证能把问题稳定复现出来，用数据说话
- 要学会设计实验，控制变量，不断缩小排查范围
谷歌浏览器
- 确保浏览器开启硬件加速
电脑显卡
- 电脑同时拥有集显和独显，默认启用集显，当页面出现卡顿、闪屏甚至白屏时，检查显卡使用情况，确保独显开启