刷刷题6iframe 标签有哪些优点和缺点？ <iframe> 标签是 HTML 中的内嵌框架元素，它具有一些优点和缺点

iframe 标签有哪些优点和缺点？

<iframe> 标签是 HTML 中的内嵌框架元素，它具有一些优点和缺点，如下所示：

优点：

分隔内容：<iframe> 允许将不同的 HTML 文档嵌入到当前文档中，实现内容的分隔和独立。每个 <iframe> 都有自己的文档上下文，可以在不同的 <iframe> 中加载和操作不同的内容。
并行加载：每个 <iframe> 是独立的，可以并行加载，这样可以提高页面加载速度和性能。
代码隔离：<iframe> 中的内容与主页面的内容相互隔离，可以避免一些 CSS 样式或 JavaScript 代码的冲突，提高代码的可维护性和可靠性。
安全性：由于 <iframe> 是独立的文档上下文，可以用于实现一些安全隔离的措施，例如加载来自不可信源的内容，可以将其放置在 <iframe> 中，以保护主页面的安全性。

缺点：

SEO 不友好：搜索引擎对 <iframe> 中的内容索引能力较弱，可能影响页面的搜索引擎优化。
高度难以控制：<iframe> 的高度默认会根据内容的高度自动调整，如果内容高度动态变化，可能导致页面布局出现问题。
页面性能：每个 <iframe> 都会增加页面的请求量和渲染成本，特别是当页面中存在大量的 <iframe> 时，会影响页面的性能。
安全性风险：如果在 <iframe> 中加载来自不受信任的源的内容，可能存在安全风险，例如跨域脚本攻击（XSS）。

## JS 创建对象的方式有哪些？

使用对象字面量创建对象。

var obj = { 
  name: "John", 
  age: 30 
};

使用 Object 构造函数创建对象。

var obj = new Object();
obj.name = "John";
obj.age = 30;

使用构造函数创建对象。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
var john = new Person("John", 30);

使用 Object.create() 方法创建对象。

var obj = Object.create(null);
obj.name = "John";
obj.age = 30;

使用类和继承创建对象。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
var john = new Person("John", 30);

如何判断dom元素是否在可视区域

getBoundingClientRect() 方法

该方法返回元素的大小及其相对于视口的位置，包括 top、right、bottom、left 四个属性。我们可以根据这四个属性来判断元素是否在可视区域内。

function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

// Example usage
const element = document.getElementById('my-element');
if (isInViewport(element)) {
  console.log('Element is in viewport');
} else {
  console.log('Element is not in viewport');
}

IntersectionObserver API

该 API 可以观察元素与其祖先元素或视口交叉的情况，并且可以设置回调函数，当元素的可见性发生变化时会调用该回调函数。

function callback(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is in viewport');
    } else {
      console.log('Element is not in viewport');
    }
  });
}

const observer = new IntersectionObserver(callback);

const element = document.getElementById('my-element');
observer.observe(element);

使用 IntersectionObserver API 的优点是可以减少不必要的计算和事件监听，提高了性能。

如何通过设置失效时间清除本地存储的数据？

要清除本地存储的数据，可以通过设置失效时间来实现。以下是一种常见的方法：

将数据存储到本地存储中，例如使用localStorage或sessionStorage。
在存储数据时，同时设置一个失效时间。可以将失效时间存储为一个时间戳或特定的日期时间。
在读取数据时，检查当前时间是否超过了失效时间。如果超过了失效时间，则认为数据已过期，需要清除。
如果数据已过期，则使用localStorage.removeItem(key)或sessionStorage.removeItem(key)方法删除该数据。

以下是一个示例代码：

// 存储数据
function setLocalStorageData(key, data, expiration) {
  var item = {
    data: data,
    expiration: expiration
  };
  localStorage.setItem(key, JSON.stringify(item));
}

// 读取数据
function getLocalStorageData(key) {
  var item = localStorage.getItem(key);
  if (item) {
    item = JSON.parse(item);
    if (item.expiration && new Date().getTime() > item.expiration) {
      // 数据已过期，清除数据
      localStorage.removeItem(key);
      return null;
    }
    return item.data;
  }
  return null;
}

// 示例用法
var data = { name: 'John', age: 30 };
var expiration = new Date().getTime() + 3600 * 1000; // 设置失效时间为当前时间后的1小时
setLocalStorageData('user', data, expiration);

var storedData = getLocalStorageData('user');
console.log(storedData);

# 如何实现网页加载进度条？

使用 window.performance 和 XMLHttpRequest 获取实际资源加载进度

这种方法通过使用浏览器的 window.performance API 和 XMLHttpRequest 对象来监控页面的实际资源加载状态，从而实现更精确的加载进度条。

实现步骤：

使用 window.performance 获取页面的性能数据。在 XMLHttpRequest 中监听加载事件，获取各个资源的加载状态。动态更新进度条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Loading Progress Bar</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        #progress-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #f3f3f3;
            z-index: 9999;
        }
        #progress-bar {
            width: 0;
            height: 100%;
            background-color: #4caf50;
        }
    </style>
</head>
<body>
    <div id="progress-container">
        <div id="progress-bar"></div>
    </div>

    <script>
        function updateProgress() {
            const performanceData = window.performance.getEntriesByType("resource");
            const totalResources = performanceData.length;
            let loadedResources = 0;

            performanceData.forEach((resource) => {
                if (resource.responseEnd > 0) {
                    loadedResources++;
                }
            });

            const progress = (loadedResources / totalResources) * 100;
            document.getElementById('progress-bar').style.width = progress + '%';

            if (loadedResources === totalResources) {
                clearInterval(progressInterval);
            }
        }

        const progressInterval = setInterval(updateProgress, 100);
    </script>
</body>
</html>

window.performance.getEntriesByType("resource") 获取页面加载的所有资源（如图片、CSS、JS 文件）。
通过遍历资源数据，计算已加载的资源数量，并根据此更新进度条。

优点：

精确反映页面资源加载的实际进度。
不依赖于人工设置的进度增量。

缺点：

需要浏览器支持 window.performance API。
代码较为复杂，可能对开发者的技术要求较高。

如果想快速实现一个高度自定义的进度条，或者需要更强的控制功能，可以使用现成的第三方库。常见的库如 `NProgress` 和 `pace.js` 提供了开箱即用的进度条功能，开发者只需要引入库并进行简单配置即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Loading Progress Bar</title>
    <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.css>">
</head>
<body>

    <script src="<https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.js>"></script>
    <script>
        NProgress.start(); // 开始进度条

        window.onload = () => {
            NProgress.done(); // 加载完成时结束进度条
        };
    </script>
</body>
</html>

优点：

使用第三方库，能快速实现专业级的进度条效果。
提供了丰富的自定义选项和事件回调，易于扩展。

缺点：

引入外部库可能增加页面加载时间。
依赖于第三方库，可能存在版本兼容性问题。

刷刷题6