随笔分类 - 前端
摘要：基础问答 问：HTTP 和 HTTPS 有什么区别？ 答：1. HTTPS 是 HTTP + SSL/TLS 协议的一个组合，使用 SSL/TLS 加密，相对更安全。2. 端口使用不同，HTTP 使用 80 端口，HTTPS 使用 443 端口。3. HTTPS 由于加密设计需要多次握手，HTTP
阅读全文
摘要：基础问答 问：什么是 Webpack Plugin？它的核心作用是什么？ 答：Webpack Plugin 是 Webpack 插件系统，本质是一个实现了 apply 方法的 JavaScript 类或函数。Plugin 通过 Webpack 提供的构建生命周期的回调钩子介入构建全流程（如初始化配置
阅读全文
摘要：概述 作用域（Scope）与作用域链（Scope Chain）是 JavaScript 的核心概念，它们决定了变量的可访问范围、生命周期，以及代码运行时变量查找的规则，理解这两个概念，可以回答我们 “变量在这里为什么能访问”，“为什么这里访问到的变量值是 undefined” 等诸多疑问，同时还能帮
阅读全文
摘要：基础问答 问：有没有遇到过内存泄漏？怎么排查处理的 答：前端页面上出现内存泄露，使用 Chrome devtools -> memory 工具排查，选择时间轴分配（Allocations on timeline）功能后开始录制操作，在页面上进行相关组件的操作，停止录制后，查看内存曲线，重点关注内存曲
阅读全文
摘要：基础问答 问：webpack 的 loader 了解吗，有什么作用？为什么 webpack 会需要 loader？ 答：webpack 本身仅能够识别 JavaScript 和 JSON 文件，但实际项目开发中会用到 CSS、Less、图片、Vue 组件等多种格式资源，Loader 就是用来解决这个
阅读全文
摘要：BOM 是什么 基础问答 问：了解过 BOM 吗？他和 DOM 有什么差异？ 基础问答 问：了解过 BOM 吗？它和 DOM 有什么差异？ 答：BOM 是浏览器对象，指的是如 window ，location ，history ，screen 等由浏览器提供的操作对象，是提供给开发人员操作浏览
阅读全文
摘要：装饰器原理 基础问答 问：什么是装饰器？有什么作用？ 答：装饰器是一种元编程语法，可以在不修改原有代码的前提下，动态地为类、方法、属性等添加一些能力，本质上还是一个函数，它接收目标对象、属性名、属性描述符（或类本身）作为参数，返回修改后的目标对象或属性描述符。 在使用的时候，是声明式的使用，在装饰
阅读全文
摘要：概述 在 Web 应用架构设计中，单页应用（SPA）与多页应用（MPA）是目前两种主流的前端架构，他们各自适用于不同的业务场景。 作为一个前端开发，理解这两种模式的核心原理、技术实现及优劣势，对于我们未来选择合适的架构方案、优化应用性能有着非常重要的参考价值。 应用架构 单页和多页两种架构的差异，主
阅读全文
摘要：基础问答 问：知道浅拷贝和深拷贝吗？为什么要用深拷贝？ 答：拷贝，可以认为是赋值，对于 JavaScript 中的基础类型，如 string, number, null, boolean, undefined, symbol 等，在赋值给一个变量的时候，是直接拷贝值给变量，而对于引用类型，如 obj
阅读全文
摘要：概述 在 JavaScript 模块化发展历程中，为解决全局变量污染，代码依赖管理等问题，先后出现了 CommonJS（CJS）、AMD、CMD、UMD、ES6 Module（ESM）五大主流方案。不同方案因设计目标、运行环境（浏览器 / Node）的差异，形成了各自的语法特性与生态定位。 其中ES
阅读全文
摘要：基础问答 问：Proxy 是什么？怎么使用的？ 答：Proxy 是用于创建 “对象代理” 的构造函数，它能封装目标对象（target），并通过 “拦截器对象（handler）” 自定义目标对象的基础操作（如属性读取、赋值），实现对对象行为的 “劫持”，手写使用方式。 // 语法：new Proxy(
阅读全文
摘要：基础问答 问：有使用过 Promise.race 吗，说说他的作用。 答：Promise.race 接收一个 Promise 数组（或者一个具有迭代器的对象）作为参数，返回一个新的Promise，这个新的 Promise 结果是数组中第一个状态变更的Promise对象，无所谓这个状态是否是成功（fu
阅读全文
摘要：基础问答 问：async/await 的原理是什么？ 答：关键字本身就是 Promise 的语法糖，依托于生成器函数 （Generator） 函数能力实现的。async 关键字标志这个函数为异步函数，并且将返回结果封装为一个 Promise，await 则是暂停当前执行，等待后续的异步操作完成后再恢
阅读全文
摘要：基础问答 问题：你在写代码的过程中，在什么时候才会设置 setTimeout 的延时为 0？ 回答：有如下几种情况 避免同步任务阻塞 UI，即在渲染较多数据的时候，可以通过 setTimeout 分批渲染。 const data = new Array(1000).fill(1).map((x, i
阅读全文
摘要：基础问答 问题：谈一谈你对 React Hook的闭包陷阱的理解。 产生问题的原因：JavaScript 闭包特性 + Hooks 渲染机制 闭包的本质：函数能够访问其定义时所在的词法作用域，即使函数在作用域外执行，也可以记住定义时的词法作用域的内容，后续执行时，使用这些信息。 function c
阅读全文
摘要：概述 沙箱可以简单的理解为一个虚拟机，是一个和宿主机隔离的环境，在这个环境中去运行一些不受信任的代码或者应用程序，防止不安全的代码对系统造成损害。 比如我们现在知道某个应用是诈骗软件或者病毒软件，但是我们依旧想要运行，想逆向分析他，那么我们就可以选择在电脑上安装一个虚拟机，在这个虚拟机中，我们将对摄
阅读全文
摘要：简洁版 代码如下： /** * 创建用于获取文字宽度的 DOM，全局唯一 * @returns */ const createTextDom = (fontSize?: number): HTMLElement => { let dom = document.getElementById('get-
阅读全文
摘要：简洁版 CSS 只需要使用 css 属性 position: sticky 即可，但是这个属性的使用有很多约束条件，有时可能并不能生效。 JavaScript 这里简化一些代码，使用 React 写了一个 hooks，使用了 ahooks 库去维护 event 和 React 生命周期。 impor
阅读全文
摘要：第一次看到 ws:// 和 wss:// 时候，感觉好高级啊，还有这种协议。 Websocket 历史 WebSocket是在2008年6月诞生的1。经由IEFT标准化后，2009年chrome 4第一个提供了该标准支持，并默认启用。于2011年由IEFT标准化为RFC 6455。 现在的浏览器均已
阅读全文
摘要：又是一个有关安全的问题。 一般情况下，我们说的水印是指图片角落上的平台用户名水印。类似于下方图片上的这种，通常只要将图片上传到平台上，平台就会在图片上嵌入水印，当然，有些平台也会提供设置是否需要显示这种水印的开关，或者设置保存的时候才会加上水印。 明水印 这种水印的实现其实是比较简单的，就是将两张图
阅读全文
浙公网安备 33010602011771号