HZFEStudio-CSDN博客

原创 JavaScript 异步编程：阻塞事件循环回调函数 web worker

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题JavaScript 异步编程方案有哪些JavaScript 异步编程方案各有什么优缺点回答关键点阻塞事件循环回调函数JavaScript 是一种同步的、阻塞的、单线程的语言，一次只能执行一个任务。但浏览器定义了非同步的 Web APIs，将回调函数插入到事件循环，实现异步任务的非阻塞执行。常见的异步方案有

2021-10-30 16:13:29 846

原创常见框架的 Diff 算法：Vue、React

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题虚拟 DOM 是什么虚拟 DOM 的作用讲一下 Vue 的 Diff 算法回答关键点虚拟 DOM 时间复杂度O(n)现代网站大多具有复杂布局，大量的节点和交互操作等特征，直接操作 DOM 方法不当带来的性能问题不可忽视。虚拟 DOM 的本质是 JavaScript 对象，它可以代表 DOM 的一部分特征，是

2021-10-30 16:12:16 195

原创 React Hooks 实现原理，实现一个简版React Hooks（闭包 Fiber 链表）

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题React Hooks 是什么React Hooks 是怎么实现的使用 React Hooks 需要注意什么回答关键点闭包 Fiber 链表Hooks 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hooks 主要是利用闭包来保

2021-10-30 16:10:56 465

原创如何定位内存泄露（垃圾回收 DevTools NodeJs）

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题垃圾回收机制回答关键点垃圾回收 DevTools内存泄漏是指不再使用的内存，没有被垃圾回收机制回收。当内存泄漏很大或足够频繁时，用户会有所感知：轻则影响应用性能，表现为迟缓卡顿；重则导致应用奔溃，表现为无法正常使用。为了避免内存泄漏带来的不良影响，需要对垃圾回收机制进行了解，掌握内存泄漏分析方法，完善线上相关监控

2021-10-30 16:08:08 663

原创浏览器事件循环、Node.js 事件循环（任务队列异步非阻塞、宏任务与微任务）

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题什么是浏览器事件循环浏览器为什么需要事件循环Node.js 中的事件循环回答关键点任务队列异步非阻塞浏览器需要事件循环来协调事件、用户操作、脚本执行、渲染、网络请求等。通过事件循环，浏览器可以利用任务队列来管理任务，让异步事件非阻塞地执行。每个客户端对应的事件循环是相对独立的。知识点深入1. 什么是浏

2021-10-30 16:05:15 301

原创多图站点性能优化：图片压缩、图片缩放、HTTP2、CDN、网络传输优化、图片懒加载预加载、响应式图片

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/回答关键点图片优化传输优化加载策略提高网站性能的一项重要指标是提高访问速度，这与用户留存率和转换率呈正相关。根据 HTTPArchive 的数据可知，图像是大多数网站需求最多的资源类型，通常比其他资源占用更多带宽。在多图站点中，图片资源对于页面的加载和整体的用户体验有更明显的影响。最常见的问题是图片加载慢。对应的优化策略包括：图片优

2021-10-06 22:20:35 798

原创前端开发常考的算法题：反转链表

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/题目描述定义一个函数，输入一个链表的头节点，反转该链表并输出反转后链表的头节点。示例：输入: 1->2->3->4->5->NULL输出: 5->4->3->2->1->NULL解法一：迭代（双指针）在线链接本方法是对链表进行遍历，然后在访问各节点时修改

2021-10-02 13:43:02 202

原创实现节流去抖函数，初中级前端面试必考知识点

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/节流1. 基本概念throttle(func, wait)每 wait 毫秒内最多只调用一次 func。2. 应用场景搜索框输入时的实时联想。监听 scroll 事件计算位置信息。3. 流程图4. 编写代码function throttle(func, wait) { let&nbs

2021-10-02 13:24:55 114

原创谈下 webpack loader 的机制

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题webpack loader 是如何工作的如何编写 webpack loader回答关键点转换生命周期 chunkwebpack 本身只能处理 JavaScript 和 JSON 文件，而 loader 为 webpack 添加了处理其他类型文件的能力。loader 将其他类型的文件转换成有效的 webpack modules

2021-10-01 19:21:22 524

原创移动端自适应的常见手段：媒体查询、响应式布局、安全区域适配、响应式图片、视口元信息配置、相对单位

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题介绍 meta 的 viewport 值rem 和 vw 的值是根据什么计算的1px 显示问题如何适配刘海屏回答关键点viewport 相对单位媒体查询响应式图片移动端开发的主要痛点是如何让页面适配各种不同的终端设备，使不同的终端设备都拥有基本一致的视觉效果和交互体验。移动端常见的适配方案有以下几种，一般都是互相搭配使用。包

2021-10-01 18:37:25 280

原创 HTTP 缓存机制

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题了解浏览器的缓存机制吗谈谈 HTTP 缓存为什么要有缓存缓存的优点是什么回答关键点强缓存协商缓存HTTP 缓存主要分为强缓存和协商缓存。强缓存可以通过 Expires / Cache-Control 控制，命中强缓存时不会发起网络请求，资源直接从本地获取，浏览器显示状态码 200 from cache。协商缓存可以通过 Las

2021-09-28 11:37:38 438 2

原创谈谈 CSS 预处理器

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题CSS 主要有哪些预处理器为什么需要用预处理器各预处理器优缺点回答关键点Sass Less Stylus PostCSS 工程化提升效率CSS 本身不属于可编程语言，当前端项目逐渐庞大之后 CSS 的维护也愈加困难。CSS 预处理器所做的本质上是为 CSS 增加一些可编程的特性，通过变量、嵌套、简单的程序逻辑、计算、函数等特性

2021-09-26 17:23:12 179 2

原创 New 操作符的原理

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题new 操作符做了什么new 操作符的模拟实现回答关键点构造函数对象实例new 操作符通过执行自定义构造函数或内置对象构造函数，生成对应的对象实例。知识点深入1. new 操作符做了什么在内存中创建一个新对象。将新对象内部的 __proto__ 赋值为构造函数的 prototype 属性。将构造函数内部的 this 被赋值为新

2021-09-26 17:07:19 146

原创 ES5、ES6 如何实现继承

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题关于 ES5 和 ES6 的继承问题原型链概念回答关键点原型链继承构造函数继承 ES6 类继承继承是指子类型具备父类型的属性和行为，使代码得以复用，做到设计上的分离。JavaScript 中的继承主要通过原型链和构造函数来实现。常见的继承方法有：ES6 中 class 的继承、原型链继承、寄生组合式继承等。知识点深入1. 原型

2021-09-25 13:37:27 248

原创 React Fiber 的作用和原理

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题Fiber 是什么谈谈你对 Fiber 的了解Fiber 对 React 的使用带来了什么影响回答关键点调度深度优先遍历Fiber 是 React 16 中采用的新协调（reconciliation）引擎，主要目标是支持虚拟 DOM 的渐进式渲染。Fiber 将原有的 Stack Reconciler 替换为 Fiber Re

2021-09-25 12:51:15 467

原创 HOC vs Render Props vs Hooks

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题什么是 HOC / Render Props / Hooks为什么需要 HOC / Render Props / Hooks如何提高代码复用性Hooks 的实现原理Hooks 相比其他方案有什么优势回答关键点复用性HOC / Render Props / Hooks 三种写法都可以提高代码的复用性，但实现方法不同：HOC 是对传

2021-09-23 13:32:10 183

原创 Babel 的原理

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题Babel 是什么Babel 有什么用压缩代码如何实现回答关键点JS 编译器 AST 插件系统Babel 是 JavaScript 编译器：他能让开发者在开发过程中，直接使用各类方言（如 TS、Flow、JSX）或新的语法特性，而不需要考虑运行环境，因为 Babel 可以做到按需转换为低版本支持的代码；Babel 内部原理是将

2021-09-20 14:33:31 121

原创垃圾回收机制

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题什么是内存泄漏常见的垃圾回收算法如何排查内存泄漏回答关键点引用计数法标记清除法 Mark-Compact（标记整理） Scavenger（清道夫）GC（Garbage Collection，垃圾回收）是一种内存自动管理机制，垃圾回收器（Garbage Collector）可以自动回收分配给程序的已经不再使用的内存。常见的 G

2021-09-19 16:19:02 92

原创浏览器渲染机制

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题浏览器如何渲染页面有哪些提高浏览器渲染性能的方法回答关键点DOM CSSOM 线程互斥渲染树 Compositing GPU 加速当浏览器进程获取到 HTML 的第一个字节开始，会通知渲染进程开始解析 HTML，将 HTML 转换成 DOM 树，并进入渲染流程。一般所有的浏览器都会经过五大步骤，分别是：PARSE：解析 HTM

2021-09-19 14:54:53 241

原创浏览器从输入网址到页面展示的过程

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/回答关键点URL DNS TCP 渲染浏览器从输入网址到渲染页面主要分为以下几个过程URL 输入DNS 解析建立 TCP 连接发送 HTTP / HTTPS 请求（建立 TLS 连接）服务器响应请求浏览器解析渲染页面HTTP 请求结束，断开 TCP 连接知识点深入1. URL 输入URL地址URL（统一资源定位符，Uniform Res

2021-09-18 20:46:47 410

原创平衡二叉树

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/题目描述输入一棵二叉树的根节点，判断该树是不是平衡二叉树。如果某二叉树中任意节点的左右子树的深度相差不超过 1，那么它就是一棵平衡二叉树。示例 1:给定二叉树 [3, 9, 20, null, null, 15, 7] &nbsp

2021-09-18 17:58:51 78

原创实现一个 Promises/A+

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/这是一道有着成熟的业界规范的 coding 题，完成这道题的前置知识就是要了解什么是 Promises/A+。这道题的难点就在于它是有规范的，任何一个不满足所有规范条件的解答都是错误的。同时，成熟的规范也配套了成熟的测试用例，官方提供了 872 个测试用例针对规范中的所有条件一一进行检测，哪怕只有一条失败，那也是错误的解答。而这道题的答

2021-09-15 23:35:50 116

原创前端安全知识

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://hzfe.github.io/awesome-interview/相关问题如何防范 XSS / CSRF 攻击说说 HTTPS 中间人攻击，及其如何防范回答关键点XSS CSRF 中间人攻击XSS（跨站脚本攻击）是指攻击者利用网站漏洞将代码注入到其他用户浏览器的攻击方式。常见类型有：反射型（非持久性）存储型（持久性）DOM 型CSRF（跨站请求伪造）是指攻击者可以

2021-09-14 23:42:45 413 1

原创 BFC 的形成和作用

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://hzfe.github.io/awesome-interview/相关问题BFC 有什么用，如何触发谈谈你对 BFC 的理解回答关键点盒模型视觉格式化模型包含块正常流BFC 是什么BFC 全称为 block formatting context，中文为“块级格式化上下文”。它是一个只有块级盒子参与的独立块级渲染区域，它规定了内部的块级盒子如何布局，且与区域外部无

2021-09-13 23:20:01 143 1

原创前端模块化规范

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://hzfe.github.io/awesome-interview/相关问题JavaScript 主要有哪几种模块化规范AMD / CMD 有什么异同ESM 是什么模块化解决了什么问题/痛点回答关键点CommonJS AMD CMD UMD ESMCommonJS[1]: 主要是 Node.js 使用，通过 require 同步加载模块，exports 导出内容。AMD

2021-09-13 22:55:17 159

原创闭包的作用和原理

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://hzfe.github.io/awesome-interview/相关问题什么是闭包闭包的应用回答关键点作用域引用函数作用：能够在函数定义的作用域外，使用函数定义作用域内的局部变量，并且不会污染全局。原理：基于词法作用域链和垃圾回收机制，通过维持函数作用域的引用，让函数作用域可以在当前作用域外被访问到。知识点深入1. 作用域作用域：用于确定在何处以及如何查找变量（

2021-09-12 12:12:45 136

原创 Vue 的 computed 和 watch 的区别

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://hzfe.github.io/awesome-interview/相关问题computed 和 watch 的实现原理computed 和 watch 的适用场景回答关键点响应变化属性侦听computed 是模板表达式的声明式描述，会创建新的响应式数据。而 watch 是响应式数据的自定义侦听器，用于响应数据的变化。除此之外，computed 还具有可缓存，可依赖

2021-09-12 10:25:24 81

原创浏览器的重排重绘

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://hzfe.github.io/awesome-interview/相关问题如何提升页面渲染性能如何减少页面重排重绘哪些行为会引起重排/重绘回答关键点渲染性能 Layout Paint浏览器渲染大致分为四个阶段，其中在解析 HTML 后，会依次进入 Layout 和 Paint 阶段。样式或节点的更改，以及对布局信息的访问等，都有可能导致重排和重绘。而重排和重绘的过程在

2021-09-12 00:12:51 71

原创浏览器跨域

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://hzfe.github.io/awesome-interview/相关问题什么是跨域为什么会跨域为什么有跨域限制怎么解决跨域回答关键点CORS[1] 同源策略[2]跨域问题的来源是浏览器为了请求安全而引入的基于同源策略的安全特性。当页面和请求的协议、主机名或端口不同时，浏览器判定两者不同源，即为跨域请求。需要注意的是跨域是浏览器的限制，服务端并不受此影响。当产生跨域时

2021-09-11 22:45:45 65

HZFEStudio的博客