preface
“White screen”, I as a cut to cut the hand of the cut to the cub, listen to the operation side of the feedback is really a lot; Sometimes early in the morning Shouting: “That Cheto boy, our products again white screen.” ; At this point, MY mind is “WDNMD”. In fact, this problem is still quite disgusting, if detected in the test environment is ok, can be fixed in time; But in a production environment, that’s the f * * k; Because you don’t know when it happened, whether it happened yesterday, a week ago… This will cause unnecessary losses. In the production environment, our lovely users will think the “white screen” is loading, wait, wait until desperate, and then complain to the operation: “Your product is so rubbish, it hasn’t been loaded all day”. Finally, the operation of YY front-end. Laozi, fed up, Laozi must be in the “white screen” the first time, eliminate it; So how do you know it’s there? It’s time to “plant a mine.” So how do you bury it? And when?
How is buried?
Here should press own company’s product or own project to decide. Here are my three “burying points” for the company’s products that you might consider, but may not be right for you.
Vertical buried point
Because of our product, the main page is centered layout, so this “buried point” can meet 80% of our product pages. Vertical burial points, that is, along the X and Y axes. Look at the picture
Suppose you want to bury 10 points on the X axis and 10 points on the Y axis, each at the same distance, then the coordinates of the points on the X axis are (I /10 X the width of the screen, 1/2 X the height of the screen, and I represents the number of points. So the Y-axis is 1/2 the width of the screen, I / 10 the height of the screen, same thing with IT.
The coordinate formula of X and Y axis is obtained as follows:
Buried cross point
Because, the vertical buried point can solve the center layout of the page, but we have some news pages, sometimes only in the first quadrant of the content, then into the blind area of this buried point, will be misjudged as “white screen”. Look at the picture
Therefore, it is necessary to consider the cross-burying point scheme. The cross-burying point mainly involves burying “mines” on two diagonal lines of the screen. Look at the picture
These two diagonals are K1 and K2(X and Y are just auxiliary lines for easy understanding). We’re going to bury 10 points on each of them, and each point is the same distance apart, so how do we pick their coordinates? It’s really easy, we just take I /10 screen width, I /10 screen height. K1 = (I /10 screen width, I /10 screen height), K2 is also easy, just reverse the coordinates of K1, K2 = ((10-i)/10 screen width, 10-i /10 screen g height)
The coordinate formula of K1 and K2 is obtained as follows:
Vertical cross burial point
As mentioned above, most of our pages are centered layout, if the content is less, and will enter the blind area of the cross buried point, look at the picture
Therefore, based on the above situation, we finally adopted a buried point scheme combining the two. Look at the picture
The formula is a combination of the two
How to code it
The rules of the buried point, we have found out, so it is very simple to implement in code.
function blankWhite(){
let point = 10
let warpTag = ['HTML'.'BODY']
let empty = 0
function isWarp (ele){
if(warpTag.includes(ele[0].nodeName)){
empty+=1}}for (let i = 1; i < point; i++) {
let x = document.elementsFromPoint(i / point * window.innerWidth, window.innerHeight / 2)
let y = document.elementsFromPoint( window.innerWidth / 2, i / point * window.innerHeight)
let k2 = document.elementsFromPoint(i/point * window.innerWidth, i / point * window.innerHeight)
let k1 = document.elementsFromPoint( (point-i)/point * window.innerWidth, (point-i)/point*window.innerHeight)
isWarp(x)
isWarp(y)
isWarp(k2)
isWarp(k1)
}
if(empty === 36) {// doimg someThings ....
// If the screen is blank, you can do something you want to do on the screen. For example, we will upload the error to the management background monitoring module of our company, so that we can know the occurrence of the screen in time and fix it}}Copy the codeSo why is it empty === 36 instead of empty === 40? If you are careful, you will find that there are only 36 points buried (I < point). Why are there only 36 points buried instead of 40? Document. ElementsFromPoint will return an empty array.
Also have homecoming questions document. ElementsFromPoint is a what? Take a look at the MDN hash point here
So when do you bury it?
This is a key point that we’ll bury after AJAX or after DOM loads.
if(document.readyState === 'complete'){
blankWhite()
}else{
window.addEventListener('load'.function(){
blankWhite()
})
}
Copy the codeThe complete code
if(document.readyState === 'complete'){
blankWhite()
}else{
window.addEventListener('load'.function(){
blankWhite()
})
}
function blankWhite(){
let point = 10
let warpTag = ['HTML'.'BODY']
let empty = 0
function isWarp (ele){
if(warpTag.includes(ele[0].nodeName)){
empty+=1}}for (let i = 1; i < point; i++) {
let x = document.elementsFromPoint(i / point * window.innerWidth, window.innerHeight / 2)
let y = document.elementsFromPoint( window.innerWidth / 2, i / point * window.innerHeight)
let k2 = document.elementsFromPoint(i/point * window.innerWidth, i / point * window.innerHeight)
let k1 = document.elementsFromPoint( (point-i)/point * window.innerWidth, (point-i)/point*window.innerHeight)
isWarp(x)
isWarp(y)
isWarp(k2)
isWarp(k1)
}
if(empty === 36) {// doimg someThings ....
// If the screen is blank, you can do something you want to do on the screen. For example, we will upload the error to the management background monitoring module of our company, so that we can know the occurrence of the screen in time and fix it}}Copy the codeThe last
This is my solution and implementation for the needs of my own company. It may not be suitable for you. You may have a better implementation.
Maybe you like the above buried like this, ha ha ha (🐺 save your life).