предисловие
«Пустой экран», как детёныш Чету, порезавший руку, я слышал много отзывов со стороны оператора; иногда я кричал рано утром: «Этот детёныш-рубящий, у нашего продукта снова белый экран. "; в этот момент я думаю о "WDNMD". На самом деле эта проблема довольно неприятная, если ее обнаружить в тестовой среде, то ее можно вовремя исправить, а в производственной среде это TMD, потому что вы не знаете, когда появилась эта проблема, она только появилась, Это еще вчера, это еще неделя назад... Это приведет к ненужным потерям. В производственной среде наши милые пользователи будут думать, что "белый экран" загружается, ждать до отчаяния, а потом жаловаться на эксплуатацию: "Ваш продукт действительно дрянь, его уже сутки не грузят". Наконец, операция является интерфейсом YY. Лао-цзы, хватит, Лао-цзы должен уничтожить «белый экран», как только он появится, так как же вы узнаете, что он появился? Затем «заложите мину» (широко известную как место захоронения). Так как хоронить? Когда его похоронят?
Как закопать?
Это зависит от продуктов вашей компании или ваших собственных проектов. Ниже приведены три «решения точки покупки», которые я предложил для продуктов компании, которые можно использовать для справки, но они могут не подойти вам.
вертикальное захоронение
Из-за наших продуктов все главные страницы располагаются по центру, поэтому эта «скрытая точка» может удовлетворить 80% страниц наших продуктов. Вертикальная «закопанная точка», то есть зарытая по оси X, Y, см. рисунок
Если предположить, что по осям X и Y нужно закопать 10 точек, а расстояние между точками равно, то координаты точки по оси X равны (i/10 * ширина экрана, 1/2 * высота экрана, я представляет первые несколько точек, тогда координаты по оси Y (1/2 * ширина экрана, я / 10 * высота экрана), и то же самое верно для Это.
Получите формулу координат оси X, Y следующим образом:
погребенный под крестом
Поскольку вертикальное захоронение может решить центрированную компоновку страниц, но некоторые из наших новостных страниц иногда имеют контент только в первом квадранте. В настоящее время мы вошли в слепую зону такого захоронения и будем ошибочно расценены как «белый экран». . посмотрите на картинку
Поэтому необходимо рассмотреть схему перекрестной заглубленной точки. Точка перекрестного захоронения предназначена в основном для того, чтобы закопать «мины» на двух диагональных линиях экрана. посмотрите на картинку
Две диагональные линии — это K1, K2 (оси X, Y — вспомогательные линии для простоты понимания). Мы хотим закопать по 10 точек на каждой из них, и расстояние до каждой точки одинаковое, так как же получить их координаты точек? На самом деле, это тоже очень просто, нам нужно взять только ширину экрана i/10 и высоту экрана i/10. Тогда координатная точка K1: K1 = (i/10 * ширина экрана, i/10 * высота экрана), K2 также очень просто, просто поменяйте координатную точку K1, K2 = ((10-i)/10 * ширина экрана, 10-i)/10 * высота экрана g)
Координатные формулы осей К1 и К2 получаются следующим образом:
вертикальное крестовое захоронение
Как упоминалось выше, большинство наших страниц расположены по центру.Если содержание относительно небольшое, оно попадет в слепую зону перекрестной погребенной точки, см. рисунок
Поэтому, основываясь на описанной выше ситуации, мы, наконец, приняли комбинацию двух скрытых точек. посмотрите на картинку
Формула представляет собой комбинацию двух
Как кодировать
Мы уже выяснили правила закапывания точек, так что это слишком просто для реализации в коде.
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 ....
// 如果为白屏，可以对白屏做一些你自己要干的事情，比如我们会把错误上传到自己公司的管理后台监测模块，方便我们及时知道白屏出现，以及修复
}
}
Так почемуempty === 36нетempty === 40 , очевидно, зарыто 40 точек, внимательные студенты обнаружат, что закопано только 36 точек (i < point), почему зарыто только 36, а не 40, ведь если он будет заполнен, некоторые точки будут зарыты снаружи,document.elementsFromPointвернет пустой массив.
У выпускников тоже есть вопросыdocument.elementsFromPointэто что? Проверьте это на MDN для себякликните сюда
Так когда его похоронят?
Это очень важный момент, мы должны похоронить его после AJAX или после загрузки DOM.
if(document.readyState === 'complete'){
blankWhite()
}else{
window.addEventListener('load',function(){
blankWhite()
})
}
полный код
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 ....
// 如果为白屏，可以对白屏做一些你自己要干的事情，比如我们会把错误上传到自己公司的管理后台监测模块，方便我们及时知道白屏出现，以及修复
}
}
наконец
Это мой план и реализация для нужд моей компании.Вам он может не подойти.Может у вас есть реализация получше.Добро пожаловать в общение.
Может быть, вам нравится, когда вас вот так хоронят, хахаха (🐺 спасение жизни).