整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

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

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

如题，惯性思路很简单，就是直接撸上一个空内容的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

梦CMS系统后台出现了这种情况：每次更新首页，“选择主页模板”和“主页位置”两项都是空的，及时填写了也不会保存，下次更新网站首页时还是这样。

这种情况说明之前的数据备份不完整，dede_homepageset 项没有数据，所以现在这个更新动作没有数据被改变，就不会改变表的数据。


解决方法：

后台-系统-SQL命令行工具-执行

INSERT INTO `dede_homepageset` VALUES('{style}/index.htm','../index.html','1');

点击“执行”，出现提示“成功执行一条SQL语句”即完成对数据表的修改。

家好，很高兴又见面了，我是姜茶的编程笔记，我们一起学习前端相关领域技术，共同进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力

在 JavaScript 中，Array.prototype.reduce 是一个功能强大的方法，用于对数组中的每个元素执行一个给定的函数，并将其结果汇总为单个值。为了更好地理解其内部机制，今天我们将从零开始，实现一个自定义的 reduce 方法，并详细解析其实现步骤。

实现自定义 reduce 方法

首先，我们将自定义的 reduce 方法添加到 Array.prototype 上。这个方法接收一个回调函数和一个可选的初始值作为参数。

Array.prototype.myReduce = function(callback, initialValue) {
  // 将传入的数组转换为对象
  if (this == null) {
    throw new TypeError('Array.prototype.myReduce called on null or undefined');
  }

  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }

  const O = Object(this);
  const len = O.length >>> 0;

  let k = 0;
  let accumulator;

  // 判断是否传入初始值
  if (arguments.length >= 2) {
    accumulator = initialValue;
  } else {
    // 没有初始值时，找到第一个有效值
    while (k < len && !(k in O)) {
      k++;
    }

    if (k >= len) {
      throw new TypeError('Reduce of empty array with no initial value');
    }
    accumulator = O[k++];
  }

  while (k < len) {
    if (k in O) {
      accumulator = callback(accumulator, O[k], k, O);
    }
    k++;
  }

  return accumulator;
};

让我们逐步解析这个实现。

1. 检查数组是否为 null 或 undefined

首先，我们确保 this 不为空：

if (this == null) {
  throw new TypeError('Array.prototype.myReduce called on null or undefined');
}

2. 检查回调函数是否为函数类型

确保传入的回调函数有效：

if (typeof callback !== 'function') {
  throw new TypeError(callback + ' is not a function');
}

3. 初始化变量

将传入的数组转换为对象，并获取数组长度：

const O = Object(this);
const len = O.length >>> 0;

let k = 0;
let accumulator;

4. 判断是否传入初始值

如果传入了初始值，则将其赋值给 accumulator。否则，找到数组中的第一个有效值作为 accumulator：

if (arguments.length >= 2) {
  accumulator = initialValue;
} else {
  while (k < len && !(k in O)) {
    k++;
  }

  if (k >= len) {
    throw new TypeError('Reduce of empty array with no initial value');
  }
  accumulator = O[k++];
}

5. 遍历数组并执行回调函数

遍历数组中的每个元素，并调用回调函数来更新 accumulator：

while (k < len) {
  if (k in O) {
    accumulator = callback(accumulator, O[k], k, O);
  }
  k++;
}

6. 返回累积结果

最后，返回 accumulator 作为最终结果：

return accumulator;

实用小技巧：reduce 方法处理对象数组

你知道吗？你可以使用 reduce 方法轻松地处理对象数组。例如，计算一个对象数组中特定属性的总和：

const products = [
  { name: 'Apple', price: 10 },
  { name: 'Banana', price: 5 },
  { name: 'Cherry', price: 15 }
];

const total = products.myReduce((acc, product) => acc + product.price, 0);

console.log(total); // 输出 30

通过这种方式，我们可以快速计算出产品总价，大大简化了代码。

最后

通过实现自定义的 reduce 方法，我们深入理解了 JavaScript 中数组的操作方式。相信你也可以更好地掌握 reduce 方法的内部机制，并提升你的 JavaScript 编程技巧。如果你有任何问题或建议，欢迎在评论区留言交流！祝你编程愉快！


在线咨询
上一篇：html单选按钮默认选中怎么做？input标签的单选按钮实例
下一篇：HTML的入门及结构组成

您的项目需求

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

推荐阅读
友情链接 金川县 六枝特区 禹州市 谢通门县 杨浦区 津市市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服