前端八股大全
发送两次的原因浏览器发送两次 POST 请求通常是因为 预检请求（Preflight Request） 的原因，这是由于跨域请求时浏览器执行的一种预检操作。跨域请求是指请求的目标地址与当前页面的地址不同源，即协议、域名或端口号至少有一个不同。在跨域请求中，如果请求是带有自定义头部（例如 Content-Type）或使用了非简单请求方法（例如 POST、PUT、DELETE）的情况下，浏览器会先发送一个预检请求给目标服务器，以确定是否允许实际的请求。预检请求通常是一个 OPTIONS 请求，用于向服务器确认实际请求是否安全。服务器收到预检请求后，会返回一组响应头，指示浏览器是否允许实际请求...
参考链接：在浏览器输入 URL 回车之后发生了什么（超详细版）当在浏览器的地址栏中输入 URL 并按下回车键后，浏览器会执行一系列步骤来处理该请求：URL 解析：浏览器首先会解析输入的 URL，提取出其中的协议（如 HTTP、HTTPS）、主机名、端口号、路径和查询参数等信息。DNS 解析：浏览器会根据主机名（域名）部分进行 DNS 解析，将域名解析成对应的 IP 地址。如果浏览器有缓存或者操作系统 hosts 文件中有对应的 DNS 记录，则会直接使用缓存的 IP 地址；否则，会向本地 DNS 服务器发送 DNS 查询请求，获取域名对应的 IP 地址。建立 TCP 连接：浏览器通过解析...
JS的垃圾回收JavaScript 的垃圾回收是一种自动管理内存的机制，用于在程序运行过程中自动释放不再使用的内存，以避免内存泄漏和提高性能。JavaScript 使用垃圾回收器来监视变量的使用情况，并定期清理不再使用的内存。垃圾回收器通常使用以下几种技术来确定哪些内存可以被释放：引用计数：垃圾回收器跟踪每个值被引用的次数。当值的引用次数变为零时，即没有任何变量指向该值时，该值所占用的内存就可以被回收。然而，引用计数无法处理循环引用的情况，因为即使值之间存在循环引用，它们的引用计数也不会降为零。标记-清除：垃圾回收器首先将所有的变量标记为“活动的”，然后遍历所有的变量和引用，将被引用的变...
Web Worker 的使用场景主要用于处理耗时的任务、大型数据的处理、实时通信等。以下是一些常见的使用场景和限制：使用场景：计算密集型任务：例如大量的数据处理、复杂的算法计算等。图片处理：对图片的解码、缩放、裁剪等操作。数据处理：对大型数据集的处理、数据加密解密、压缩解压缩等操作。网络请求：在 Web Worker 中进行网络请求，可以避免阻塞主线程。实时通信：处理 WebSocket 连接、接收服务器推送的数据等。计时器：使用计时器执行定时任务，避免主线程被占用。多线程协作：多个 Web Worker 之间相互通信和协作。限制：无法访问 DOM：Web Worker 无法直接访问主线...
结论：不能，但是可以通过 window.open() 或者 a 标签（target 不为_blank）的形式打开新标签，这时候可以共享sessionStorage。
大文件上传和断点续传的流程前端大文件上传和断点续传的流程通常包括以下步骤：选择文件： 用户在前端界面选择要上传的大文件。计算文件哈希： 为了唯一标识文件并实现断点续传，前端通常会使用文件内容的哈希值作为文件的标识符。通过计算文件内容的哈希值，可以确保同一文件内容生成的哈希值是相同的，从而方便后续的断点续传。查询已上传的文件块： 在继续上传之前，前端会发送一个查询已上传文件块的请求到后端。这个请求用于获取已经上传成功的文件块列表，以便在继续上传时跳过已上传的部分。分块上传： 前端将大文件分割成多个块，并逐个上传到后端。通常情况下，每个文件块的大小是固定的，并且文件块的数量根据文件大小来确定...
基本原理远程桌面的实现原理基本上是将被控制端的屏幕图像和用户输入传输到控制端，并在控制端模拟用户的操作，从而实现远程控制的目的。具体实现原理取决于所使用的远程桌面协议和技术，以下是一般的工作流程：1. 图形渲染和捕获被控制端的桌面环境会不断渲染图像，并且需要定期捕获并发送这些图像到控制端。这一过程通常由一个特定的软件或驱动程序来完成，用于捕获屏幕上的图像并将其编码为适合传输的格式。2. 用户输入捕获控制端需要捕获用户在控制端的输入，例如键盘输入、鼠标移动和点击等。这些输入需要通过网络传输到被控制端，并模拟成真实的用户操作。3. 数据传输被控制端捕获的图像数据和控制端的用户输入会通过网络传...
Web Components 是什么Web Components 是一组现代的 Web 平台 API，用于在 Web 应用程序中创建可重用的自定义组件。它由一系列技术组成，包括自定义元素、Shadow DOM、HTML Templates 和 HTML Imports 等，这些技术结合在一起可以让开发者创建独立、可重用、可移植的 Web 组件。具体来说，Web Components 的核心技术包括：Custom Elements（自定义元素）： 允许开发者定义自己的 HTML 元素，以及定义这些元素的行为和样式。通过自定义元素，开发者可以创建属于自己的、具有特定功能的 HTML 元素，使...
什么是JWT?JWT（JSON Web Token）是一种开放标准（RFC 7519），用于在网络上以JSON对象的形式安全地传输信息。JWT由三部分组成，分别是头部（Header）、载荷（Payload）和签名（Signature）。1. 头部（Header）： 头部通常由两部分组成，标识该JWT的类型（typ）和使用的签名算法（alg）。例如：{"alg": "HS256", "typ": "JWT"}。头部使用Base64编码进行序列化，但不进行加密。2. 载荷（Payload）： 载荷包含了JWT的声...
Image Beacon（图片信标）是一种基于Image标签的技术，用于在浏览器中发送HTTP请求到服务器。它通常用于跟踪和监测用户行为，以及收集网页性能数据等用途。Image Beacon的工作原理很简单，开发者创建一个新的Image对象，并将其src属性设置为要发送请求的URL，然后将该Image对象添加到文档中。浏览器在加载文档时会自动发送GET请求到指定的URL，触发服务器端的相应逻辑。Image Beacon的优势主要包括：1. 轻量级： Image Beacon使用简单，只需要创建一个Image对象并设置src属性，不需要额外的JavaScript代码。2. 异步请求： Im...
from memory cache 和 from disk cache 是浏览器缓存资源的两个位置，其依据主要取决于资源在缓存中的存储位置。1. From Memory Cache（来自内存缓存）： 浏览器会将一些频繁访问的资源保存在内存缓存中，以加快资源的获取速度。资源存储在内存中可以更快地被读取，因此当浏览器发起请求时，如果请求的资源存在于内存缓存中且未过期，浏览器就会直接从内存中读取资源，从而加快页面加载速度。2. From Disk Cache（来自磁盘缓存）： 如果资源在内存缓存中不存在或者内存缓存已满，浏览器会将资源存储在磁盘缓存中。磁盘缓存虽然速度相对较慢，但可以存储更大容...
浏览器的缓存机制是为了优化页面加载速度和减少网络流量而设计的。它主要分为强缓存和协商缓存两种方式。强缓存：强缓存是通过设置HTTP响应头来实现的，常见的头部字段有：Expires： 过期时间，是一个绝对时间，告诉浏览器缓存的有效期。Cache-Control： 控制缓存的行为，常用的指令有：max-age：缓存的最大有效时间，单位为秒。no-cache：需要重新验证缓存，不直接使用缓存。no-store：禁止缓存。当浏览器发送请求时，会先检查本地缓存中的响应是否存在并且是否过期，如果满足缓存条件，则直接从本地缓存中读取响应，不会发送请求到服务器。协商缓存：协商缓存是通过与服务器进行通信来...
虽然 Cookie 和 Token 都可以存放在 HTTP 请求的 Header 中，但它们的机制和安全性不同，因此劫持的风险也不同。Cookie:Cookie 是由服务器发送给客户端的一小段数据，客户端在本地保存，每次请求都会自动携带到服务器端。Cookie 存储在客户端的浏览器中，并且会随着每次 HTTP 请求自动发送到服务器端。由于 Cookie 是存储在客户端的浏览器中，因此容易受到 XSS（跨站脚本攻击）和 CSRF（跨站请求伪造）等攻击。Token:Token 是一种身份验证的机制，通常使用 JSON Web Token (JWT) 进行实现。它是由服务器生成的一串加密的字符...
什么是CSRF？下面是一个简单的 CSRF 攻击示例，以及使用 CSRF Token 进行防御的流程：1. 攻击者创建恶意网站，其中包含一个自动提交表单的页面，用于发起 CSRF 攻击：<!-- 恶意网站页面 --> <html> <body> <h1>恶意网站</h1> <form id="csrfForm" action="http://victim-site.com/change-password" method="post"> <...
重绘（Repaint）和回流（Reflow）是浏览器渲染页面时的两个重要概念：1. 重绘（Repaint）：当页面中的元素样式（如颜色、背景等）发生改变，但不影响其在文档流中的位置和大小时，浏览器会重新绘制（Repaint）该元素，将新的样式绘制到屏幕上。重绘不会影响页面的布局，只是改变了元素的外观。2. 回流（Reflow）：当页面中的元素布局发生改变，导致其他元素的位置、大小或者结构发生改变时，浏览器会重新计算元素的布局，重新构建渲染树，并进行回流（Reflow）。回流会触发页面的重新布局，会影响到页面的所有元素，包括其子元素和祖先元素。由于回流涉及到页面的整体布局计算，其性能开销较...
使用gif图片或者svg，每个页面需要手动定制用css+html实现一个骨架屏的元素，当数据加载完成后替换掉这个元素，也是需要定制。使用自动化插件 page-skeleton-webpack-plugin,通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架屏的页面，在等待页面加载 渲染完成之后，在保留页面布局样式的前提下，通过对页面中元素进行删减或增添，对已有元素通过层叠样 式进行覆盖，这样达到在不改变页面布局下，隐藏图片和文字，通过样式覆盖，使得其展示为灰色块。然后 将修改后的 HTML 和 CSS 样式提取出来，这样就是骨架屏了。
前端加密在前端开发中有许多常见的场景，涉及到用户数据的安全传输、存储以及保护等方面。下面是前端加密常见的场景和方法的详细介绍：常见场景用户密码存储：在用户注册或登录时，前端通常需要对用户密码进行加密后再传输到后端，以保护用户密码在传输过程中的安全性。敏感数据传输：前端与后端的数据传输过程中，可能涉及到用户的敏感数据（如个人信息、支付信息等），需要对这些数据进行加密保护。本地存储数据：前端常常需要在客户端存储一些数据（如用户偏好设置、Token 等），为了防止数据泄露，需要对这些数据进行加密存储。数据完整性校验：前端需要确保从后端获取的数据在传输过程中没有被篡改，因此需要使用哈希算法或数字...
没有更多了
最近评论