前端面试之道
安全防范知识点这一章我们将来学习安全防范这一块的知识点。总的来说安全是很复杂的一个领域，不可能通过一个章节就能学习到这部分的内容。在这一章节中，我们会学习到常见的一些安全问题及如何防范的内容，在当下其实安全问题越来越重要，已经逐渐成为前端开发必备的技能了。
XSS
涉及面试题：什么是 XSS 攻击？如何防范 XSS 攻击？什么是 CSP？
XSS 简单点来说，就是攻击者想尽一切办法将可以执行的代码注入到网页中。
XSS 可以分为多种类型，但是总体上分为两类：持久型和非持久型。
持久型也就是攻击的代码被服务端写入进数据库中，这种攻击危害性很大，因为如果网站访问量很大的话，就会导致大量正常访问页面的用户都受到攻击。
举个例子，对于评论功能来说，就得防范持久型 XSS 攻击，因为我可以在评论中输入以下内容
这种情况如果前后端没有做好防御的话，这段评论就会被存储到数据库中，这样每个打开该页面的用户都会被攻击到。
非持久型相比于前者危害就小的多了，一般通过修改 URL 参数的方式加入攻击代码，诱导用户访问链接从而进行攻击。
举个例子，如果页面需要从 URL 中获取某些参数作为内容的话，不经过 ...
理解Webpack打包过程
webpack 的作用是根据入口文件将源代码编译（构建、打包）成最终代码。中间经过webpack打包，打包的过程就是编译 。整个过程大致分为三个步骤：初始化、编译（最重要）、输出
初始化
在初始化这个阶段webpack会将CLI参数、配置文件、默认配置进行融合，形成一个最终的配置对象。
CLI参数：使用命令行工具，可能会加一些参数进去，比如：
1npx webpack --mode=development --config xxx
配置文件：webpack.config.js文件里面的配置
默认配置：比如入口entry，默认为 ./src/index.js
对配置的处理过程是依托一个第三方库yargs完成的，yargs库就是融合配置的。初始化阶段相对比较简单，主要是为接下来的编译阶段做必要的准备。目前，可以简单的理解为：_初始化阶段主要用于产生一个最终的配置_。
编译
1. 创建chunk
chunk是webpack在内部构建过程中的一个概念，译为块，它表示通过某个入口找到的所有依赖的统称，比方说：入口模块（./src/index.js）依赖a模块（. ...
TypeScript面试题
为什么推荐使用TypeScript？TypeScript是微软公司开发和维护的一种面向对象的编程语言。它是JavaScript的超集，包含其所有元素。
其中，强类型和弱类型、静态类型和动态类型是两组不同的概念。
类型强弱是针对类型转换是否显示来区分，静态和动态类型是针对类型检查的时机来区分。
TS对JS的改进主要是静态类型检查，静态类型检查有何意义？标准答案是“静态类型更有利于构建大型应用”。
推荐使用TypeScript的原因有：
TypeScript为JavaScript ide和实践（如静态检查）提供了高效的开发工具。
TypeScript使代码更易于阅读和理解。
使用TypeScript，我们可以大大改进普通的JavaScript。
TypeScript为我们提供了ES6（ECMAScript 6）的所有优点，以及更高的生产率。
TypeScript通过对代码进行类型检查，可以帮助我们避免在编写JavaScript时经常遇到的令人痛苦的错误。
强大的类型系统，包括泛型。
TypeScript代码可以按照ES5和ES6标准编译，以支持最新的浏览器。
与ECMAScript对齐以 ...
Node Webpack 性能优化
一、NodeNode是什么?Node.js是一个基于 Chrome V8 引擎的JavaScript运行环境，这个环境就好比是服务器上的浏览器，但正是因为有了它才使得 js 变成了一门后台语言。
Node解决了哪些问题?Node在处理高并发,I/O密集场景有明显的性能优势
高并发,是指在同一时间并发访问服务器
I/O密集指的是文件操作、网络操作、数据库,相对的有CPU密集,CPU密集指的是逻辑处理运算、压缩、解压、加密、解密
Web主要场景就是接收客户端的请求读取静态资源和渲染界面,所以Node非常适合Web应用的开发。
Node 的应用场景一般来说，node 主要应用于以下几个方面：
自动化构建等工具
中间层
小项目
第一点对于前端同学来说应该是重中之重了，什么工程化、自动构建工具就是用 node 写出来的，它是前端的一大分水岭之一
请介绍一下Node事件循环的流程
在进程启动时，Node便会创建一个类似于while(true)的循环，每执行一次循环体的过程我们成为Tick。
每个Tick的过程就是查看是否有事件待处理。如果有就取出事件及其相关的回调函 ...
SVG的理解
概述SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。
1234567891011121314<!DOCTYPE html><html><head></head><body><svgid="mysvg"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 800 600"preserveAspectRatio="xMidYMid meet"><circle id="mycircle" cx="400" cy="300" r=&quo ...
LeetCode 精选算法 200 题
上下翻转二叉树
给你一个二叉树的根节点 root ，请你将此二叉树上下翻转，并返回新的根节点。
你可以按下面的步骤翻转一棵二叉树：
原来的左子节点变成新的根节点
原来的根节点变成新的右子节点
原来的右子节点变成新的左子节点
1234567891011121314151617181920212223var upsideDownBinaryTree = function(root) { if (root && root.left === null) return root; return fn(root, null);};function fn(node, pre) { if (node === null) return pre; if (node.left === null) return pre; const currNode = { val: node.left.val, left: node.right ? generateTree(node.rig ...
性能优化
当后端一次性返回10万条数据, 前端要怎么处理？
懒加载+分页：
一般用于做长列表优化，类似于表格的分页功能,，具体思路就是用户每次只加载能看见的数据，当滚动到底部时再去加载下一页的数据。
虚拟滚动技术：
虚拟滚动技术也可以用来优化长列表，其核心思路就是每次只渲染可视区域的列表数，当滚动后动态的追加元素并通过顶部padding来撑起整个滚动内容，实现思路也非常简单。
Web Workers
利用Web Workers进行数据处理和准备，可以避免阻塞UI线程。这意味着用户界面可以保持响应，同时后台线程处理大量数据。
CDNCDN的概念CDN（Content Delivery Network，内容分发网络）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。
典型的CDN系统由下面三个部分组成：
分发服务系统： 最基本的工作单元就是Cache设备，cache（边缘cache）负责直接响应最终用户的访问请求，把缓存在本地的内容快速地提供给用户 ...
计算机网络
计算机网络的各层协议及作用计算机网络体系可以大致分为一下三种，OSI七层模型、TCP/IP四层模型和五层模型。
OSI七层模型：大而全，但是比较复杂、而且是先有了理论模型，没有实际应用。
TCP/IP四层模型：是由实际应用发展总结出来的，从实质上讲，TCP/IP只有最上面三层，最下面一层没有什么具体内容，TCP/IP参考模型没有真正描述这一层的实现。
五层模型：五层模型只出现在计算机网络教学过程中，这是对七层模型和四层模型的一个折中，既简洁又能将概念阐述清楚。
七层网络体系结构各层的主要功能：
应用层：为应用程序提供交互服务。在互联网中的应用层协议很多，如域名系统DNS，支持万维网应用的HTTP协议，支持电子邮件的SMTP协议等。
表示层：主要负责数据格式的转换，如加密解密、转换翻译、压缩解压缩等。
会话层：负责在网络中的两节点之间建立、维持和终止通信，如服务器验证用户登录便是由会话层完成的。
运输层：有时也译为传输层，向主机进程提供通用的数据传输服务。该层主要有以下两种协议：
TCP：提供面向连接的、可靠的数据传输服务；
UDP：提供无连 ...
微前端
什么是微前端？微前端（Micro Frontends）是前端领域中的一种架构思想，类似于微服务（Microservices）在后端的应用。微前端的主要目标是将一个大的前端应用拆分成若干个独立的、可部署的、技术栈不同的子应用（微应用），这些子应用可以独立开发、测试、部署和运行，最终通过某种机制集成到一个统一的用户界面上。
微前端的核心思想：
独立开发、独立部署：每个微应用可以独立开发和部署。
技术栈无关：每个微应用可以使用不同的技术栈，比如 Vue、React、Angular 可以混合使用。
解耦与模块化：通过微前端架构，解耦大型应用，提升可维护性。
独立运行：每个微应用可以独立运行，不依赖其他微应用。
常用的微前端框架及技术方案常见的微前端框架有：
Single-SPA
Qiankun
Module Federation（Webpack 5）
Iframe-Based
Single-SPA简介：Single-SPA 是最早流行的微前端框架之一，它的核心理念是将不同的前端应用（如 React、Vue、Angular）注册为子应用，并且基于路由来动态加载这些子应用。Single-SP ...
事件循环机制
深入理解JS事件循环机制同步任务和异步任务（微任务和宏任务）JavaScript是一门单线程语言
分为同步任务和异步任务
同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务。
异步任务指的是，不进入主线程、而进入”任务队列”的任务；只有等主线程任务全部执行完毕，”任务队列”的任务才会进入主线程执行。
异步任务分为宏任务和微任务
new promise()、console.log()属于同步任务
宏任务（macrotask）
微任务（microtask）
谁发起的
宿主（Node、浏览器）
JS引擎
具体事件
1. script (可以理解为外层同步代码) 2. setTimeout/setInterval 3. UI rendering/UI事件 4. postMessage，MessageChannel 5. setImmediate，I/O（Node.js）
1. Promise 2. MutaionObserver 3. Object.observe（已废弃；Proxy 对象替代） 4. proce ...