一、html中rel属性的值 preload和prefetch 的作用是什么?

在HTML中 rel属性用于定义与连接的关系。用于 a 、area、form和link 标签上。
rel属性值比较多，具体相信内容可以看 MDN

详细说两个值 preload 和 prefetch

1. preload(预加载)

preload指示浏览器在加载页面时，提前请求资源，以便在之后的页面加载过程中能够更快地获取到这些资源。通过预加载，可以在浏览器完成解析和渲染之前，尽早获取所需资源，从而减少页面加载时间。

平时使用：

<link rel="stylesheet" href="main.css">

示例：

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">
// preload 指示浏览器预加载 href上指定的资源。
// as 属性用于指定资源类型，以便浏览器正确处理。

2. prefetch(预获取)

prefetch指示浏览器在空闲时间提前获取指定资源，以备将来用。它用于预加载不是当前页面所必须但可能用户进入到其他页面时需要的资源。通过获取这些资源，可以减少未来页面的加载时间。 示例：

<link rel="prefetch" href="image.jpg">
<link rel="prefetch" href="data.json">

// prefetch指示浏览器预获取`image.jpg`和`data.json`这两个资源。当用户导航到需要这些资源的页面时，浏览器将能够更快地获取到它们。

参考资料 HTML rel属性值释义大全

二、属性 crossorigin 的作用是什么?

1.crossorigin是什么?

crossorigin属性用于指定如何处理跨域请求中的资源加载问题。它可以应用于、、

2.anonymous(匿名) 和 use-credentials(使用凭据)

1.anonymous(匿名)：默认值。表示浏览器会在跨域请求中发送资源请求，但不会包含凭据(如：cookies、HTTP认证或客户端SSL证书)。
2.use-credentials(使用凭据)：表示浏览器在跨域请求中发送资源请求时，会包含凭据。着需要服务器在响应中设置适当的CORS头来允许使用凭据。

示例用法

<link href="https://example.com/styles.css" rel="stylesheet" crossorigin="use-credentials" >
<img src="https://example.com/image.jpg" crossorigin="anonymous" alt="Image">
<script src="https://example.com/script.js" crossorigin="anonymous"></script>

注意 crossorigin属性只在加载跨域资源时才起作用。对于同域的资源不会有任何影响。使用crossorigin属性时，服务器还需要设置适当的CORS头来与浏览器进行通信。以允许跨域资源的加载。这包含设置Access-Control-Allow-Origin头来指定允许访问的资源域。

参考资料
HTML 属性：crossorigin

三、什么是可枚举属性？什么是可迭代属性？

1.可枚举属性：

可枚举属性是指对象中可以通过迭代（例如，使用for...in循环）访问的属性。当遍历对象属性时，只有可枚举属性会被包括在内。在 JavaScript 中，对象的属性默认情况下是可枚举的。你可以使用属性描述符中的enumerable属性来显式控制属性的可枚举性。如果enumerable属性设置为false，则该属性被认为是不可枚举的。

const obj = {
    name: 'John',
    age: 30
};

Object.defineProperty(obj, 'country', {
    value: 'USA',
    enumerable: false // 可以修改这个值看看效果
});

for (const key in obj) {
    console.log(key); // 输出：'name' 和 'age'，'country' 不可枚举
}
console.log(Object.keys(obj)); // ['name', 'age']

Object.keys(obj)；返回一个包括对象自身可枚举属性的健名的数组。但不包括原型中的属性。

2. 可迭代属性：

可迭代属性是指对象具有一个用于定义迭代行为的特殊方法。当使用for...of循环遍历对象时，会调用这个特殊方法来获取要迭代的值。
在 JavaScript 中，可迭代属性是通过在对象的Symbol.iterator属性上定义一个迭代器方法来实现的。迭代器方法应该返回一个迭代器对象，该对象具有一个next方法，用于在每次迭代中返回一个包含value和done属性的对象。

示例：

let myObject = {
    a: 1,
    b: 2,
    [Symbol.iterator]() { // 加这个

        let index = 0;
        const keys = Object.keys(this);
        const _this = this;

        return {
            next() {
                if(index < keys.length) {
                    return {
                        value: _this[keys[index++]],
                        donw: false
                    }
                } else {    
                    return {
                        done: true
                    }
                }
            }
        }
    }
};

for (let item of myObject) {
    console.log(item);
}

在上述示例中，myObject对象具有一个Symbol.iterator方法，返回一个迭代器对象。通过在myObject对象上实现迭代器方法，我们可以使用for...of循环遍历myObject对象，并输出每个元素的值。需要注意的是，可迭代属性与可枚举属性是不同的概念。一个对象可以同时具有可枚举属性和可迭代属性，它们在对象的使用和遍历方式上有不同的影响。

参考资料
迭代协议

四、实现一个可以用for...of遍历的对象?

const myObject = {
    a: 1,
    b: 2,
    c: 3
}

// 方法 一  
myObject.__proto__[Symbol.iterator] = function* () {
    for(let key in this) {
        if(this.hasOwnProperty(key)) {
            yield this[key];
        }
    }
}

for(let item of myObject) {
    console.log('item = ', item);
}

// 方法二、用上面的 next()那种实现

五、标签属性 src 和 href 有什么区别?

src 属性的全称是 Source。目的是要把文件下载到html页面中。用于 script、img、video、iframe等标签中。

<script src="a.js">
<img src="a.png" alt="">
<video src="a.mp4"></video>

href 属性的全称是 Hypertext Reference。表示超文本引用，指向网络资源所在位置。用于 a、link标签中

<a href="www.text.com">跳过到 href的地址中</a>
<link rel="stylesheet" href="./a.css">

区别	src属性	href属性
适用标签	script、img、video等	a、link
加载时间	标签加载时	用户和标签交互时
资源类型	脚本、媒体资源、文件等	css文件、外部地址
作用	加载嵌入到页面中	指向其他页面或资源

六、单点登录是什么，具体流程是什么

SSO 一般都需要一个独立的认证中心（passport），子系统的登录均得通过 passport，子系统本身将不参与登录操作，当一个系统成功登录以后，passport 将会颁发一个令牌给各个子系统，子系统可以拿着令牌会获取各自的受保护资源，为了减少频繁认证，各个子系统在被 passport 授权以后，会建立一个局部会话，在一定时间内可以无需再次向 passport 发起认证。

具体流程是：

用户访问系统 1 的受保护资源，系统 1 发现用户未登录，跳转至 sso 认证中心，并将自己的地址作为参数。
sso 认证中心发现用户未登录，将用户引导至登录页面
用户输入用户名密码提交登录申请
sso 认证中心校验用户信息，创建用户与 sso 认证中心之间的会话，称为全局会话，同时创建授权令牌
sso 认证中心带着令牌跳转会最初的请求地址（系统 1）
系统 1 拿到令牌，去 sso 认证中心校验令牌是否有效
sso 认证中心校验令牌，返回有效，注册系统 1
系统 1 使用该令牌创建与用户的会话，称为局部会话，返回受保护资源
用户访问系统 2 的受保护资源
系统 2 发现用户未登录，跳转至 sso 认证中心，并将自己的地址作为参数
sso 认证中心发现用户已登录，跳转回系统 2 的地址，并附上令牌
系统 2 拿到令牌，去 sso 认证中心校验令牌是否有效
sso 认证中心校验令牌，返回有效，注册系统 2
系统 2 使用该令牌创建与用户的局部会话，返回受保护资源

issue-01