前端小知识-01

时间：2024-03-26 12:06:15 来源：网络cs 作者：纳雷武栏目：跨境风云阅读：

标签：知识

阅读本书更多章节>>>>

【01】主子页面

1、用iframe嵌入子页面，主页面和子页面能共享cookie吗？

不能。受到浏览器同源策略限制，不同域名的页面之间无法共享cookie，即使用iframe嵌入，也无法突破这个限制。

2、基于cookie实现的登录页面，通过iframe被嵌入到主页面后，子页面还能登录成功吗？

若主子页面跨域，则由于同源策略限制，子页面不但无法访问主页面的cookie，同时也无法操作自己域名下的cookie。所以子页面无法通过cookie进行登录验证。若主子页面同域，那么两个页面之间可以共享cookie，子页面可以正常实现登录功能。

3、在基于cookie的登录技术中，cookie扮演什么角色？

cookie用来存储用户登录信息。当用户在登录页面输入正确的用户名和密码后，服务器会生成一个包含用户身份信息的cookie，并将其发送给浏览器保存。

4、cookie会自动附加到每次的请求头中吗？

是的。浏览器发送请求时会检查当前域名下是否存在对应的cookie，如果存在，则自动将cookie附加到请求头中发送给服务器。

服务器接收到请求后，会从请求头中获取cookie，并进行解析，以获取相应的用户信息等数据，借此验证身份。因此，基于cookie实现的登录机制，可以在用户访问多个页面时自动保持用户登录状态，无需重复输入用户名和密码。

5、页面正准备登录，为什么还要获取cookie中的登录状态，明明正准备登录呢？

页面登录时，需要获取cookie中的登录状态，是为了避免用户重复登录。如果用户已经在该网站登录过，并且浏览器中保存了该网站登录状态的cookie，那么再次登录时，就可以直接使用cookie中保存的登录状态了，而无需再次输入用户名和密码。

通过获取cookie中的登录状态，可以判断当前用户是否处于登录状态，如果是，则可以直接跳转到已登录的页面，如果不是，则需要进行登录操作，这样可以提高用户体验，并避免用户重复登录带来的不便。

因此，即使页面正准备登录，获取cookie中登录状态，仍是一个必不可少的步骤。

6、域名不同时，子页面无法操作自己域名下的cookie吗

当子页面和主页面的域名不同时，会受到浏览器同源策略的限制，子页面无法直接访问主页面的cookie，也无法访问自己域名下的cookie。

7、子页面为什么要获取主页面的登录状态，获取自己的登录状态不就行了

子页面是否需要获取主页面的登录状态，取决于主页面和子页面的关系及具体业务需求。有些场景下子页面只需要获取自己的登录状态即可，而有些场景下，则需要获取主页面的登录状态。

8、子页面基于cookie实现登录，若通过iframe被嵌入到主页面，子页面登录失败怎么解决

方案1：将主子页面放在同一域名下，即可实现cookie共享。

方案2：将登录功能放在主页面，通过postMessage将登录信息传递给子页面，子页面接收到消息后，可以将登录信息存储在localStorage或sessionStorage中，以便后续使用。

localStorage是浏览器提供的一种存储数据的方式，是基于同源策略的。因此不同源的页面，无法共享同一个localStorage。即使两个页面都使用localStorage存储了同样的数据，但实际上是存储在不同的空间中，彼此之间互不干扰。

方案3：常用方法：利用nginx反向代理，将主子页面设置为同域。使用nginx可以将两个不同域的页面设置为同域，具体实现方式是使用nginx的反向代理功能，将两个不同的页面都代理到同一域名下，这样两个页面就可以共享cookie了，从而实现同域访问。

方案4：主子页面都设置CORS，即可实现跨域共享cookie。CORS是一个浏览器的安全策略，需要后端进行处理，主要通过在HTTP请求头中添加跨域资源共享相关信息来实现，因此只有后端服务器能控制HTTP响应头，才能够实现CORS。

9、除了cookie，还可以基于哪些技术实现身份验证

可以通过token实现身份验证。如下步骤所示，可以在主子页面不同域的情况下，实现基于token的身份验证和登录功能。避免了因为cookie跨域问题导致的登录失败。

备注：token的生成和验证需要在服务端进行，以保证安全性。

备注：当子页面和主页面的域名不同时，子页面依旧可以访问自己的localStorage和sessionStorage，但是cookie不行。

1、在服务端生成cookie，并在响应中返回给客户端2、将token存储在客户端的localStorage或sessionStorage中3、子页面中读取localStorage或sessionStorage中的token，并将其作为身份验证信息发送给服务端4、服务端接收请求后，验证token的有效性，并根据验证结果返回响应

【02】文件流和BLOB

文件流本身不是BLOB类型，但是可以被存储为BLOB类型。从接口中返回的二进制文件流通常是BLOB类型。

BLOB是一种数据类型，它代表二进制数据。

【03】postcss是什么

postcss一种css编译工具, 类似babel对js的处理。

【04】Vue项目规范前端代码

使用EditorConfig + Prettier + ESLint组合的。

- EditorConfig：跨编辑器和IDE编写代码，保持一致的简单编码风格- Prettier：专注于代码格式化的工具，美化代码- ESLint：专注于代码质量检测、编码风格约束等

其它工具。

- Git Hooks：可以设置在Git生命周期的在某些事件下运行的脚本，这些事件包括提交的不同阶段，例如提交之前/之后- Husky: 是一种工具，可以轻松的接入Git hooks, 并在需求的某些阶段运行脚本- GitLab CI：是一套配合GitLab使用的集成系统- GitLab-Runner：是配合GitLab CI进行使用的，是一个用来执行软件集成脚本的东西。

一般GitLab里面每个工程都会定义一个属于这个工程的软件集成脚本，用来自动化的完成一些软件集成工作。当这个仓库的代码发生变动时，例如有人push代码，GitLab就会将这个变动通知GitLab-CI，此时GitLab-CI会找出与该工程相关的Runner，并通知Runner把代码更新到本地并执行预定于好的执行脚本。Runner就像一个个的工人，而GitLab-CI就是这些工人的一个管理中心，所有工人都要在GitLab-CI里面登记注册，并且表明自己是为哪个工程服务的。当相应的工程发生变化时，GitLab-CI就会通知相应的工人执行软件集成脚本。

【05】谷歌浏览器查看FPS

加载页面打开F12后，使用快捷键ctrl+shift+p，搜索FPS，左上角会显示实时FPS。

【06】4K分辨率有哪些

标准4K分辨率3840*2160, 16:94096* 2160（不多见）, 16:103840*1632（不多见）

【07】带宽是什么

带宽是指传输带宽，也称为网络带宽，是指在特定时间内，网络能够传输的最大数据量。它是衡量网络传输速度的重要指标，单位是比特每秒（bps）。

【08】摄像头和麦克风权限相关

结论：http协议的地址默认不能打开浏览器摄像头和麦克风权限

基于安全性的考虑，现代浏览器对于摄像头和麦克风的访问有一定的限制。HTTP协议的网站是不被信任的，无法直接打开浏览器的摄像头和麦克风权限。
要访问摄像头和麦克风权限，通常需要使用HTTPS协议打开网站，并且网站必须经过用户的明确授权才能访问这些设备。

当然，默认不支持也就代表有办法能支持。具体解决方法直接搜索"http协议的网站如何开启摄像头和麦克风权限"即可，很轻松就能搜索解决方案。

如下代码所示就是一种解决方案，在浏览器快捷方式右键--属性--快捷方式--目标中添加如下标志，重启浏览器即可。备注：在原目标内容后面，先添加一个空格，然后再添加下面的标志。

--unsafely-treat-insecure-origin-as-secure="http://example"

上述代码有什么作用？

答：可以用于某些浏览器（如Chrome）的命令行启动选项，以将特定的不安全来源（如HTTP）视为安全来源。使用此参数后，不安全的来源将被视为安全，摄像头和麦克风权限可能会由于浏览器认为是安全来源而被自动授权。这种方法可能会绕过浏览器对安全性和隐私的保护机制，并且不能保证在所有浏览器中都有效。推荐在测试或特定开发环境中使用。但在正式环境中，仍然强烈建议将网站迁移到HTTPS，并遵循浏览器的安全策略。

除此之外，直接在浏览器地址栏预览下面地址，按照下图所示配置也可以。

chrome://flags/#unsafely-treat-insecure-origin-as-secure

【09】主页面打开子页面的方式

【10】chrome最大内存限制

chrome 104及之后的版本不支持手动设置堆内存限制。32位系统最大2G，64位系统最大4G。备注：物理内存太低时，浏览器的内存限制也有可能随之降低，但最高不会超过2G或4G。

怎么查询浏览器的最大内存限制：window.performance.memory

【11】谷歌两个特殊的访问地址

地址1：chrome://version/

谷歌浏览器中的chrome://version/页面提供了关于安装的浏览器版本、操作系统信息以及其他相关详细信息。

地址2：chrome://flags/

谷歌浏览器中的chrome://flags/是一个特殊网址，用于访问谷歌浏览器开发者选项的功能列表。在这个页面上，您可以启用或禁用实验性功能，更改浏览器的行为，并对其进行调优。

【12】清空iframe+内存控制

如下代码尝试清空iframe内容，移除iframe节点，并尽可能的解除内存占用。备注：只能是尝试，并不完全有用，具体问题还有具体排查。

function handleClear(id) {    let el = document.getElementById(id);    let iframe = el.contentWindow;    if (el) {        el.src = "about:blank";        try {           iframe.document.write("");           iframe.document.clear();        } catch(e) {};        document.body.removeChild(el);    }}

【13】子场景中弹窗全屏可否

问题：iframe嵌入子场景，浏览器默认不允许子场景里面的弹窗全屏吗？

回答：出于安全考虑，大多数浏览器会在子场景中的弹窗上应用安全策略，包括限制弹窗的大小和位置，我们经常遇到的就是限制子场景中弹窗的全屏操作，因此，即使我们在子场景中使用代码尝试弹窗设置为全屏，也很可能被浏览器阻止。

解决方案：如果确实需要在子场景中实现全屏弹窗，可以在弹窗的打开方式上添加allowfullscreen属性。然而，请注意，这并不能保证全屏弹窗在所有浏览器和设备上都能正常工作，因为浏览器在允许全屏弹窗之前可能会进行用户交互确认或给出警告。备注：不能保证百分百可行，所以需要经过测试。

<a href="popup.html" target="_blank" allowfullscreen>打开全屏弹窗</a><iframe src="child.html" allowfullscreen></iframe>

【14】浏览器右下角加载提示

浏览器加载页面时，会默认添加一个加载提示（通常在右下角）。具体实现方式可能因浏览器的不同而有所差异。一些浏览器可能会显示一个旋转的加载图标，而其他浏览器可能会显示一个进度条或一段文本，指示网页的加载进度。这些提示通常自动在需要加载的内容完全加载完毕后消失。

浏览器自动添加的加载提示是由浏览器的呈现引擎实现的，由浏览器的用户界面自动显示和管理。开发者无法通过自己的代码直接控制或修改浏览器自带的加载提示，也无法遮盖。

浏览器加载提示是由浏览器内部逻辑控制的，而不是通过 JavaScript 或开发人员代码进行手动添加，并不能通过开发者面向网页的代码进行操作。