跨窗口（标签页）通信方法
一、前言 最近需求有跨标签页操作，借此总结跨窗口（标签页）通信的常用方法，包括同源和跨域两种情况，给出的示例代码能让你快速上手。 二、同源 localStorage 配合 storage 事件：简单、兼容性好 Broadcast Channel API：功能全 三、跨域 利用 iframe 的 postmessage 接口 （注意修改子页面的 iframe 地址） 启动示例： 如果帮到你了，可以点个赞，欢迎交流沟通。
浮动与BFC容器
浮动布局是面试中的一个考点，且大多数面试官在考你css时，问的最多的知识点就是浮动，所以我们不仅要会用浮动去布置页面，还要深入理解其原因，知其然，又要知其所以然，只有这样，你才能在面试官面前如鱼得水般的谈笑自如。下面我会引导你去理解浮动布局究竟有啥知识点和细节需要去理解和注意。 1\. 实现文字环绕效果和脱离文档流 在以前的网站上，有着这么一种典型布局方式（文字环绕图片），如图： 你写着写着，突然想插入一张图片，然后图片后面继续写字，这...
数据量太大，DOM节点加载过多，怎么保证前端在渲染的时候页面不会卡（性能优化）
一、定时器分批渲染 既然一次渲染10万条数据会造成页面加载速度缓慢，那么我们可以不要一次性渲染这么多数据，而是分批次渲染， 比如一次10000条，分10次来完成， 这样或许会对页面的渲染速度有提升。 然而，如果这13次操作在同一个代码执行流程中运行，那似乎不但无法解决糟糕的页面卡顿问题，反而会将代码复杂化。 类似的问题在其它语言最佳的解决方案是使用 ，JavaScript虽然没有多线程，但是setTimeout和setInterval两...
构建浏览器工作原理知识体系（开篇）
本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！ 作为一个前端工程师，浏览器是我们密不可分的朋友，想要深耕前端，就必须和浏览器“交心”💞。 为什么你觉得偶尔看浏览器的工作原理，但总是忘呢😵💫，因为你没有形成一个完整的知识网络，你的记忆是碎片化的。正如人的神经网络，只有当你的记忆相互依赖，相互链接，才能形成长期稳定的记忆。 所以本文我将用一条知识线将浏览器工作原理的知识串联起来，因为本文的...
构建浏览器工作原理知识体系（浏览器内核篇）
本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！ 书接上回～ 系列文章目录： 1. 2. 3. ✊构建浏览器工作原理知识体系（网络协议篇） 待更新 4. ✊构建浏览器工作原理知识体系（网页加载超详细全过程篇） 待更新 为什么你觉得偶尔看浏览器的工作原理，但总是忘呢😵💫，因为你没有形成一个完整的知识网络，你的记忆是碎片化的。正如人的神经网络，只有当你的记忆相互依赖，相互链接，才能形成长期稳定...
纯 CSS 实现文字换行环绕效果
⌛ 三年前。。。 🧔♂️ 一同事问我：“你说用 css 能不能直接实现这个效果，不想用 js 写，好麻烦啊” 我回答道：“应该不行吧，好像没什么好用的方法。。。” ✅ 现在，三年之约已到，我终于找到了纯 css 实现的方法 省流，实现代码 起源 前几天在翻 chrome 的博客时偶然看到了这么一个东西 Chrome 110 年初登陆， 属性是一个小而强大的 CSS 功能，它为首字母的位置设置样式。您可以将字母放置在下降或上升状态。该...
你了解js的沙箱环境吗
去年的面试了，最近复盘了一下，发现菜的一批，有些问题一下子就答出来了，现在答的话，那时候还在瞎鸡儿答我也不知道答的什么。。。。 在 JavaScript 中，沙箱（sandbox）是一个安全机制，用于隔离运行代码，以防止代码对其它部分的应用程序或系统造成不必要的影响或安全风险。沙箱提供了一个受控环境，在这个环境中，代码可以被执行而不影响外部环境，从而保护用户数据和系统安全。 在浏览器中，沙箱通常指的是浏览器为每个标签页提供的隔离环境。这...
常用HTTP请求编码格式之x-www-form-urlencoded、json_application编码
HTTP请求的编码方式 | Content Type 种类 | 说明 | | | | | application/x www form urlencoded | 数据类型： ，把form数据转换成一个字串 ，然后把这个字串append到url后面，用 分割，加载这个新的url。 当action为post时候，浏览器把form数据封装到http body中，然后发送到server | | application/json | 以纯文本形式...
2024 最新 React 面试题
1\. React18 新特性 18 不在支持 IE 批处理 18 之前，批处理 的更新。 18 中，批处理支持处理的操作范围扩大了： 等这些非 React 原生事件。 Transitions ：用于标记非紧急的更新，用 starTransition 包裹起来就是告诉 React，这部分代码渲染的优先级不高，可以优先处理其它更重要的渲染。 ：除了能提供 startTransition 以外，还能提供一个变量来跟踪当前渲染的执行状态。 S...