骚操作：如何让一个网页一直处于空白情况？

了，周末闲来无事，突然有个诡异想法！

如题，惯性思路很简单，就是直接撸上一个空内容的html。

注：以下都是在现代浏览器中执行，主要为**Chrome 版本 120.0.6099.217（正式版本）（64 位）和Firefox123.0.1 (64 位) **

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
</body>
</html>

؏؏☝ᖗ乛◡乛ᖘ☝؏؏~

但是，要优雅~咱玩的花一点，如果这个HTML中加入一行文字，比如下面这样，如何让这行文字一直不显示出来呢？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
<div>放我出去！！！</div>
</body>
</html>

思考几秒~有了，江湖一直传言，Javascrip代码执行不是影响Render树生成么，上循环！于是如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
<div>放我出去！！！</div>
<script>
    while (1) {
      let a;
    }
    // 或者这样
    /*(function stop() {
       var message = confirm("我不想让文字出来！");
 
       if (message == true) {
         stop()
       } else {
         stop()
       }
     })()*/
</script>
</body>

</html>
```一下一下
bingo，可以实现，那再换个思路呢？加载资源？

说干就干，在开发者工具上，设置上下载速度为1kb/s，测试了以下三种类型资源

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
  <!-- <link rel="stylesheet" href="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css" as="style"/> -->
  <!-- <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css"/> -->
  <div class="let-it-go">放我出去！！！</div>
  <script src="https://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect.js"></script>
  <style>
    .let-it-go {
      color: red;
    }
    </style>
</body>
</html>

总得来说，JS和CSS文件，需要排在.let-it-go元素前面或者样式前面，才会影响到渲染DOM或者CSSOM，图片或者影片之类的，不管放前面还是后面，都无影响。如果在css文件中，一直有import外部CSS，也是有很大影响！

但正如题目，这种只能影响一时，却不能一直影响，就算你在代码里写一个在头部不停插入脚本，也没有用，比如如下这么写，按，依旧无效：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
  <link rel="stylesheet" href="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css"
    as="style" />
  <!-- <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css"/> -->
  <script>
    // setInterval(()=>{
    // 不停插入script脚本 或者css文件
    let index = '';
    (function fetchFile() {
      var script = document.createElement('script');
      script.src = `https://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect${index}.js`;
      document.head.appendChild(script);
      script.onload = () => {
        fetchFile()
      }
      script.onerror = () => {
        fetchFile()
      }
      index+=1
      
      // 创建一个 link 元素
      //var link = document.createElement('link');
      // 设置 link 元素的属性
     // link.rel = 'stylesheet';
     // link.type = 'text/css';
     // link.href = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/app.f81e9f9${index}.css';
      // 将 link 元素添加到文档的头部
      //document.head.appendChild(link);
    })()
    // },1000)
  </script>
  <div class="let-it-go">放我出去！！！</div>
  <style>
    .let-it-go {
      color: red;
    }
  </style>
  <!-- <script src="https://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect.js"></script> -->
</body>

</html>

那么，还有别的方法吗？暂时没有啥想法了，等后续再在这篇上续接~

另外，在实验过程中，有一个方式让我很意外，以为以下代码也会造成页面一直空白，但好像不行。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
  <div id="appp"></div>
  <script>
    (function createElement() {
      var parentElement = document.getElementById('appp');
      // 创建新的子元素
      var newElement = document.createElement('div');
      // 添加文本内容（可选）
      newElement.textContent = '这是新的子元素';
      // 将新元素添加到父元素的子元素列表的末尾
      parentElement.appendChild(newElement);
      createElement()
    })()
  </script>
  <div class="let-it-go">放我出去！！！</div>
</body>
</html>

这可以很好的证明，插入DOM元素这个任务，会在主HTML渲染之后再执行。

祝周末愉快~

作者：大怪v
链接：https://juejin.cn/post/7344164779629985818

网页开发过程中，我们有时会遇到HTML页面白屏的问题，即打开网页时页面显示空白，没有任何内容。这不仅令用户困惑，也使开发者头疼不已。本文将分享一些常见的HTML页面白屏问题解决方法，帮助你快速解决这个问题，让你的网页焕然一新！

第一步：检查HTML代码

首先，我们需要检查HTML代码是否正确。常见的错误包括标签未闭合、标签嵌套错误等。这些错误可能会导致页面无法正常显示。因此，仔细检查HTML代码，确保没有语法错误是解决白屏问题的第一步。

第二步：检查CSS文件

HTML页面的样式通常由CSS文件控制。如果CSS文件中存在错误或者无法正常加载，可能会导致页面白屏。我们可以通过以下步骤检查CSS文件是否存在问题：

1、检查CSS文件路径是否正确：确保CSS文件的路径正确，并且文件存在于指定的位置。可以通过浏览器开发者工具查看网络面板，检查CSS文件是否被成功加载。

2、检查CSS文件语法错误：使用CSS验证工具，如W3C CSS验证服务，检查CSS文件是否存在语法错误。如果存在错误，及时修复。

3、检查CSS选择器和样式规则：检查CSS文件中的选择器和样式规则是否正确。可能存在选择器与HTML元素不匹配或样式规则冲突的情况。可以通过逐个注释掉样式规则，逐步排查问题。

第三步：检查JavaScript代码

JavaScript代码也可能导致页面白屏。以下是检查JavaScript代码的步骤：

1、检查JS文件路径是否正确：与CSS文件类似，确保JS文件的路径正确，并且文件存在于指定的位置。通过浏览器开发者工具查看控制台面板，检查是否有JS文件加载错误的提示信息。

2、检查JS代码语法错误：使用JS语法检查工具，检查JS代码是否存在语法错误。如果有错误，及时修复。

3、检查JS代码逻辑错误：检查JS代码中的逻辑是否正确。可能存在变量未定义、函数未调用或者逻辑错误等问题。可以通过调试工具，如浏览器开发者工具中的调试器，逐步排查问题。

第四步：排查网络请求问题

如果前面的步骤都没有发现问题，那么可能是网络请求出现了问题。以下是一些排查网络请求问题的方法：

1、检查网络连接：确保你的设备已连接到互联网，并且网络连接稳定。

2、检查资源加载状态：通过浏览器开发者工具的网络面板，检查页面中的资源加载状态。可能存在资源加载失败或者超时的情况，导致页面白屏。

3、检查服务器配置：如果你使用了服务器端脚本语言，如PHP，检查服务器配置是否正确。可能存在服务器配置问题导致页面无法正确渲染。

第五步：优化页面性能

如果以上方法都没有解决问题，那么可能是页面性能问题导致白屏。以下是一些优化页面性能的方法：

1、压缩和合并文件：将CSS和JS文件进行压缩和合并，减少文件的大小和数量，提高页面加载速度。

2、使用缓存：利用浏览器缓存机制，将静态资源进行缓存，减少服务器的请求次数，提高页面加载速度。

3、异步加载资源：使用异步加载技术，如异步加载JS文件或使用延迟加载，减少页面加载时间。

4、减少HTTP请求：减少页面中的HTTP请求次数等。

结语：

通过以上五个步骤，我们可以逐步排查HTML页面白屏问题，并解决它们。不同的问题可能需要不同的解决方法，因此需要耐心和细心地分析和排查。在开发过程中，我们也要时刻关注页面性能，优化页面加载速度，提高用户体验。

于空链接的通常会有两种方式，第一种模式是直接的HTML的空链接。

第二模式是使用JavaScript动态的设置src属性。

var img = new Image();

img.src = "";

这两种模型写出来的空链接的影响是一样的，但是对于不同的浏览器来说会有所不同。

1) Internet Explorer向页面所在的目录发出请求。例如，如果您运行的页面http://192.168.40.128:8091/ECShop_V2.7.3_UTF8_release0411/upload/test1.html，由于空链接找不到图片，所以会向http://192.168.40.128:8091/ECShop_V2.7.3_UTF8_release0411/upload发送请求来查找图片。HTTP请求如图所示。

2) Firefox和Chrome会向实际页面提出请求。例如运行的页面http://192.168.40.128:8091/ECShop_V2.7.3_UTF8_release0411/upload/test1.html，如果使用Firefox或Chrome浏览器就只会向这个页面发送请求，请求的是test1.html文档，图片的请求会被忽略，如图所示。

所以当页面中存在图片空链接时，可能会导致以下两个问题：

第一：可能出现流量峰值。例如上面的例子，访问http://192.168.40.128:8091/ECShop_V2.7.3_UTF8_release0411/upload/test1.html页面，如果这个页面中包含空图片链接，那么就会对根目录进行再次发送请求，这样相当于访问服务的流量增加了一位。

如果是一个小型网站，访问量不是很多的话，请求从1000变成2000这样服务器也不会出现太大问题，但如果网站每天的流量很大时，上百万的流量时，那么由于图片空链接导制流量成倍增长时，那么对服务器的的性能就会产生很大的影响。

第二：用户状态可能受损。如果您通过cookie或其他方式跟踪请求中的状态，则可能会破坏数据。即使图像请求未返回图像，浏览器也会读取并接受所有标头，包括所有cookie。虽然其余的响应被丢弃，但可能已经造成了损害。

正常情况下不会写出图片空链接的情况，但是如果出现以下情况就可能出现图片空链接的情况，如以下代码：

如果$imageUrl是由其它代码调用而已来，并且$imageUrl的代码存在问题，那么就会出现图片空链接的现象。

当然要解决图片空链接带的问题，那么最好的方法显然是完善代码，在代码中消除页面中的违规代码。如果我们不能保证代码中是否会出现图片空链接的情况，那么可以尝试在服务器上检测空链接并中止任何进一步的执行。下面是一个PHP的检测代码。

<?php

$referrer = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : '';

$url = "http://" . $_SERVER['HTTP_HOST']Â . $_SERVER['REQUEST_URI'];

if ($referrer == $url){

exit;

}

上面代码的目的是检测页面是否引用自身，如果有引用自身，那么就立即退出，并阻止服务器执行任何其他操作。另一种选择，就是记录已发生的情况，并进行分析。

尝试在服务器上检测此类请求的另一种方法是查看HTTP Accept标头。除IE之外的所有浏览器都会Accept为图像请求发送不同的HTTP 标头，而不是HTML请求。例如，Chrome会Accept为HTML请求发送以下标头，如以下Accept请求。

Accept: application/xml,application/xhtml+xml,text/html;q=0.7,text/plain;q=0.3,image/png,*/*;q=0.6

Firefox和Chrome浏览器都会使用Accept为HTML请求发送一些内容以上面大致相同的标头，这样可以去判断我们要的内容是否存在，例如判断“image/png”的内容，但是对于IE浏览器只会发送所有请求中最后一个请求的Accept头的内容，这样就无法在服务器上区分它。对于IE以外的浏览器，您可以使用以下内容：

<?php

if (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false){

exit;

}

之所以会出现图片空链接的问题是由于浏览器中执行URI解析方式引起的，在RFC3986统一资源标识中定义，当遇到空字符串作为URI时，浏览器解析时会认为是相对URI。

这其实是浏览器的一个严重缺陷，当然浏览器都在尝试不断的解决这个问题。在HTML5中添加了<imag>标记src属性的描述，以指示不要再额外的增加其它的请求。

在线咨询

上一篇：HTML编码规范
下一篇：HTML 表格

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

骚操作：如何让一个网页一直处于空白情况？

您的项目需求