面试

在上一篇文章中，我们构建了一个神经网络，了解了前向传播是如何产生预测的，也知道了损失函数可以衡量预测有多差。但我们遗留了最核心的问题：那13,002个参数到底该怎么调整，才能让网络变得更好？ 这就是反向传播算法（Backpropagation）要回答的问题。它是神经网络学习的核心引擎，几乎所有现代深度学习的训练都建立在它之上。 一、梯度下降：从直觉开始 1.1 一个简单的类比 想象你站在一片浓雾中的山地上，看不到全貌，但你能感受到脚下地面的倾斜方向。你的目标是找到最低的山谷。最自然的策略是什么？ 顺着脚下最陡的下坡方向走一小步。 这就是**梯度下降（Gradient Descent）**的核心思想。 1.2 数学表述 假设损失函数 $L$ 取决于所有参数 $\theta = (w_1, w_2, ..., w_n, b_1, b_2, ..., b_m)$。 梯度是一个向量，指向损失增长最快的方向： $$\nabla L = \left(\frac{\partial L}{\partial w_1}, \frac{\partial L}{\partial w_2}, \cdots, \frac{\partial L}{\partial b_m}\right)$$梯度的每个分量告诉我们：如果微微增大某个参数，损失会增加多少。 要降低损失，我们朝梯度的反方向迈步： $$\theta_{\text{new}} = \theta_{\text{old}} - \eta \cdot \nabla L$$其中 $\eta$ 是学习率（learning rate），控制每一步的步长。 1.3 学习率的微妙之处 学习率 下降行为 结果 太小 每步挪动极小，到达局部最小值后就停住了，无法跳出 收敛极慢，可能困在局部最小值 太大 一步跨过了最低点，又跨回来，反复来回 在最低点附近震荡，甚至发散 合适 每步大小适中，沿着曲面稳步走向谷底 稳步下降，逐渐逼近最优解 1.4 梯度下降的关键问题 现在整个问题归结为一件事：怎么高效地计算 $\nabla L$，即损失对每一个参数的偏导数？ 你可能会想：对每个参数微微扰动一下，看看损失变化了多少。但如果有13,002个参数，每个参数都扰动一次，就需要做13,002次前向传播——太慢了。 ...

定义 责任链模式（Chain of Responsibility Pattern）是一种行为型设计模式，它将请求的发送者和接收者解耦，让多个对象都有机会处理请求。将这些对象连成一条链，并沿着这条链传递请求，直到有一个对象处理它为止。 责任链模式的核心思想是：避免请求发送者与接收者耦合在一起，让多个对象都有可能接收请求，将这些对象组成一条链，并沿着这条链传递请求，直到有对象处理它为止。 为什么需要责任链模式 问题场景：假设我们正在开发一个审批系统，不同金额的报销需要不同级别的人员审批。 最直接的方式可能是这样： class ExpenseApproval { func approve(amount: Double) { if amount <= 1000 { // 组长审批 teamLeaderApprove(amount) } else if amount <= 5000 { // 部门经理审批 departmentManagerApprove(amount) } else if amount <= 10000 { // 总监审批 directorApprove(amount) } else { // CEO审批 ceoApprove(amount) } } func teamLeaderApprove(_ amount: Double) { ... } func departmentManagerApprove(_ amount: Double) { ... } func directorApprove(_ amount: Double) { ... } func ceoApprove(_ amount: Double) { ... } } 这种方式有什么问题？ ...

背景 不知道你有没有遇到过以下场景: 页面逻辑越来越多,代码越来越庞大,写到后面难以 hold 住所有逻辑,很容易牵一发而动全身. 你负责的页面好好的突然出现问题,查到最后是别人代码影响. 同样的逻辑在多个地方重复书写,每次一改要改一批文件 随着前端项目复杂度的急剧增加, 上面列出的几种场景就是传统开发中会出现的问题. 也是前端组件化出现的原因. 项目复杂度增加, 一个页面一个文件需要处理的内容过多. 重复性劳动多, 效率低 质量差, 不可控 组件化初探 正是由于出现了这样的问题, 为了在越来越复杂的前端项目中提高开发效率和保证开发质量, 各路大神们开始通过各种方式来尝试解决问题. 曾经非常火的 jQuery 就基于自己建立了 jQuery 插件机制. 你可以将一些常用逻辑进行封装变成 jQuery 插件, 还可以将插件开源进行共享. 比如纯手写会吐血的日期时间选择器,轮播, 多级菜单等等. 你可以在这里浏览更多jQuery插件. jQuery 插件的用法通常是: $(".select").pluginName(config) 除了 jQuery 插件模式, 还有一种常见模式是对象模式. 这种模式现在仍然有很多优秀的库在被我们直接或者间接使用. 比如: swiper 对象模式的写法: <!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> </div> <script src="path/to/swiper.min.js"></script> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', loop: true, }) </script> 对象模式通过配置创建对象, 通常创建对象的参数中有一项是元素/元素选择器, 通过js代码将逻辑与这个元素紧密绑定. ...

CDN CDN 即内容分发网络（Content Delivery Network）的简称，是建立在承载网基础上的虚拟分布式网络，能够将源站内容（包括各类动静态资源）智能缓存到全球各节点服务器上。这样不仅方便了用户就近获取内容，提高了资源的访问速度，也分担了源站压力。 CNAME、A 记录、NS 记录 DNS ( Domain Name System，域名系统)提供了将域名转换为 IP 地址的服务。为了完成这个转化工作，DNS 的数据库中需要维护相关的数据，这些数据被叫做 RR（Resource Record，资源记录）。资源记录有很多种类型，比如 A、NS、SOA、CNAME 和 PTR 记录。 大家接触最多的就是 A（Address）记录。A 记录是一条从域名到 IP 地址的映射记录。而 CNAME（Canonical Name）记录是一条从域名到域名的映射记录。它在 CDN 技术中有举足轻重的作用，很好地实现了业务域名与 CDN 系统域名的解耦。简单理解，如果一个域名配置了 A 记录，DNS 就会把它解析成 A 记录指定的 IP 地址；如果一个域名配置了 CNAME 记录，DNS 就会把它解析成 CNAME 记录指定的另外一个域名；A 记录和 CNAME 记录是互斥的，不能同时存在。 NS （Name Server）记录是和 DNS 服务器相关的一条记录，它指定该域名应该由哪一台 DNS 服务器进行解析。一般把通过 NS 记录指定的 DNS 服务器叫做该域名的权威 DNS 服务器。 加速域名 加速域名指需要使用 CDN 加速的域名。加速域名也是一个域名。加速域名一般配置 CNAME 记录，指向 CDN 网络节点。普通域名一般配置 A 记录，指向提供服务的业务服务器。 ...

一、Portals 某些情况下，我们希望渲染的内容独立于父组件，甚至独立于当前挂在的DOM元素（默认都是挂载到id为root的DOM元素上的） Portal提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀的方案： ReactDOM.createPortal(child, container) 第一个参数：是任何可渲染的React子元素，例如一个元素、字符串或fragment 第二个参数：是一个DOM元素 通常来讲，当你从组件的 render 方法返回一个元素时，该元素将被挂载到 DOM 节点中离其最近的父节点： render() { // React 挂载了一个新的 div，并且把子元素渲染其中 return ( <div> {this.props.children} </div> ); } 然而，有时候将子元素插入到 DOM 节点中的不同位置也是有好处的： render() { // React 并没有创建一个新的 div。它只是把子元素渲染到 `domNode` 中。 // `domNode` 是一个可以在任何位置的有效 DOM 节点。 return ReactDOM.createPortal( this.props.children, domNode ); } 一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框 案例 比如将h2挂在到id为zs的节点下 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <div id="zs"></div> </body> </html> App.jsx ...

浏览器安全性是前端开发中的重要考察点之一，主要指浏览器在访问网站过程中如何防止攻击者利用漏洞或机制实施攻击、窃取数据、破坏用户体验等。 一、常见的浏览器安全威胁 1. XSS（跨站脚本攻击） 原理：攻击者注入恶意脚本到网页中，在用户浏览页面时执行。 危害：窃取 cookie、伪造操作、传播蠕虫。 防御： 对输出进行HTML转义； 使用 Content Security Policy（CSP）； 严格控制用户输入（白名单）； 使用框架自动防御（如 React 的 JSX 自动转义）。 2. CSRF（跨站请求伪造） 原理：用户登录目标网站后，被诱导访问恶意链接，触发网站上的有状态请求。 危害：修改密码、转账等敏感操作被伪造。 防御： 使用 CSRF Token； Referer 验证； SameSite Cookie 属性限制第三方请求。 3. 点击劫持（Clickjacking） 原理：攻击者在页面上嵌入透明 iframe，引诱用户点击。 防御： 禁止网页被嵌入 iframe：X-Frame-Options: DENY / SAMEORIGIN； 使用 CSP 中的 frame-ancestors 指定允许嵌入的来源。 4. 恶意文件上传 原理：上传可执行脚本，触发服务端或客户端执行。 防御： 严格限制文件类型与大小； 不在上传目录下执行脚本； 设置 CDN 或存储桶只读访问权限。 5. 恶意第三方脚本（供应链攻击） 原理：攻击者污染 CDN 或依赖源，注入恶意代码。 防御： 使用子资源完整性校验（Subresource Integrity, SRI）； 只信任可靠的依赖源； 上线前锁定依赖版本。 二、浏览器原生安全机制 1. 同源策略（Same-Origin Policy） 限制不同源之间访问 Cookie、DOM、LocalStorage 等。 同源指：协议、域名、端口号都相同。 2. CORS（跨域资源共享） 浏览器通过预检请求和响应头判断是否允许跨域访问。 3. Content Security Policy（CSP） 通过设置 HTTP Header 控制资源加载策略，防止 XSS 和数据泄露。 示例： Content-Security-Policy: default-src 'self'; script-src 'self' https://trust.cdn.com; 4. HTTP-only & Secure Cookie HttpOnly: 防止 JavaScript 读取 Cookie； Secure: 仅在 HTTPS 下传输 Cookie； SameSite: 限制第三方请求携带 Cookie。 5. Sandbox（iframe 安全沙箱） <iframe sandbox> 属性限制 iframe 的行为； 可防止脚本执行、表单提交等危险操作。 三、前端开发中的安全实践 安全措施 说明 输入校验 客户端和服务端都要做，优先使用白名单策略 输出编码 HTML、JavaScript、URL 编码避免 XSS 注入 HTTPS 加密传输防止中间人攻击（MITM） 使用现代框架 React/Vue/Angular 等框架天然防御 XSS 限制权限 用户行为应严格授权与验证 CSP 策略 强制资源加载来源、禁止内联脚本 四、总结 浏览器安全是前端必须掌握的重要基础知识，核心目标是 防止前端受到攻击者控制或操纵。它涉及浏览器机制、HTTP协议、安全头部、数据验证等多个维度，需要前端开发者在日常开发中养成良好安全意识与编码习惯。 ...

什么是跨域 在了解跨域之前，我们必须要了解一下同源策略。 跨域问题其实就是浏览器的同源策略造成的。 同源策略 同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。同源指的是：协议、端口号、域名必须一致。 跨源资源共享（[CORS]，或通俗地译为跨域资源共享）是一种基于 [HTTP] 头的机制，该机制通过允许服务器标示除了它自己以外的其他[源] （域、协议或端口），使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。 为什么会产生跨域 下表给出了与 URL wmq.com/dir/page.ht… 的源进行对比的示例: URL 是否跨域 原因 wmq.com/dir/page.ht… 同源 完全相同 wmq.com/dir/inner/a… 同源 只有路径不同 wmq.com/secure.html 跨域 协议不同 wmq.com:81/dir/etc.htm… 跨域 端口不同 ( http:// 默认端口是80) news.company.com/dir/other.h… 跨域 主机不同 同源策略：protocol（协议）、domain（域名）、port（端口）三者必须一致。 同源政策主要限制了三个方面： 当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。 当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。 当前域下 ajax 无法发送跨域请求。 源政策的目的主要是为了保证用户的信息安全，它只是对 js 脚本的一种限制，并不是对浏览器的限制，对于一般的 img、或者script 脚本请求都不会有跨域的限制，这是因为这些操作都不会通过响应结果来进行可能出现安全问题的操作。 有哪些解决跨域的办法 CORS CORS: 通过设置服务器端的响应头来允许跨域请求。这需要在服务器端进行配置，以允许特定的来源访问资源。例如，在Node.js的Express框架中，可以使用以下代码来设置CORS： const express = require('express'); const app = express(); app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); // 允许所有来源访问 res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); // 允许的请求头 res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); // 允许的请求方法 next(); }); // 其他路由和中间件 app.listen(3000, () => { console.log('Server is running on port 3000'); }); 减少OPTIONS请求次数 在跨域请求中，浏览器会自动处理一些非简单请求的预检流程，这包括"预检请求"（也被称为CORS预检请求）和"OPTIONS请求"。预检请求是发起一个HTTP OPTIONS请求到服务器，以确认目标资源是否支持跨域。这种机制是为了兼容同源策略而产生的，但有时这种额外的请求会导致性能问题。 ...

Grid 布局是什么？ Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址 Grid 布局和 flex 布局 讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。 Grid 布局远比 flex 布局强大！ flex布局示例: Grid 布局示例： Grid 的一些基础概念 我们使用 Grid 实现一个小例子，演示 Grid 的一些基础概念，演示地址 <div class="wrapper"> <div class="one item">One</div> <div class="two item">Two</div> <div class="three item">Three</div> <div class="four item">Four</div> <div class="five item">Five</div> <div class="six item">Six</div> </div> .wrapper { margin: 60px; /* 声明一个容器 */ display: grid; /* 声明列的宽度 */ grid-template-columns: repeat(3, 200px); /* 声明行间距和列间距 */ grid-gap: 20px; /* 声明行的高度 */ grid-template-rows: 100px 200px; } .one { background: #19CAAD; } .two { background: #8CC7B5; } .three { background: #D1BA74; } .four { background: #BEE7E9; } .five { background: #E6CEAC; } .six { background: #ECAD9E; } .item { text-align: center; font-size: 200%; color: #fff; } ...

一、DOM 事件流 想必看过《红宝书》的前端 er 对标题都不会特别陌生，我们来看看定义：当一个 HTML 元素产生一个事件时，该事件会在树形结构的 DOM 上面沿着元素节点路径进行传播，事件所经过的路径结点都会收到该事件，这个传播过程可称为 DOM 事件流。 二、DOM 事件流模型 DOM 事件流分为 捕获型事件流 和 冒泡型事件流。两种事件流分别对应三阶段 DOM 事件流模型中的捕获阶段和冒泡阶段： 捕获阶段：事件从最外面的祖先节点依次传递到最里面的后代节点 目标阶段：真正的目标节点正在处理事件的阶段 冒泡阶段：事件又从最里面的后代节点逐层传出到最外面的祖先节点 三、Vue 之事件处理 Vue 中提供了事件绑定的语法糖，我们可以很简单地在标签中直接使用 @click="handleClick($event)" 就可以绑定点击事件。 而且在 Vue 里面，Vue 的事件触发默认为冒泡过程监听，意思就是上面 @click="handleClick($event)" 中点击事件的执行是冒泡过程触发的。 四、Vue 之事件修饰符 4.1 .capture 捕获监听器 <div @click="log(1)" @click.capture="log(1)" style="background-color: #00f"> <div @click="log(2)" @click.capture="log(2)" style="background-color: #66f"> <div @click="log(3)" @click.capture="log(3)" style="background-color: #ccf"> <div @click="log(4)" @click.capture="log(4)" style="background-color: #fff"> 点击这里 </div> </div> </div> </div> 控制台打印结果为：1 2 3 4 4 3 2 1 ...

每当去学习ES6的时候，我都会不由自主的打开阮一峰老师的《ES6入门》去学习和查找用法，相信大多数同学也都和我一样看过阮老师写的文章。 当然大家也都知道ES6里常用的API就那么些，不多不少，用在项目中也是刚刚好。 不过在每次读到Set和Map数据结构那一章的时候，总是有点不知所措，因为我不明白实现这样的数据结构，目的是什么，意义又是什么呢 Set和Map主要的应用场景在于数组去重和数据存储，幸运的是在读了关于数据结构和算法之类的书籍后，恍然大悟的发现 原来Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构 那么下面就来了解下这两种数据结构，最后来亲手实现的一个ES6中的Set和Map吧 集合 集合是由一组无序且唯一(即不能重复)的项组成的，可以想象成集合是一个既没有重复元素，也没有顺序概念的数组 ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值 Set 本身是一个构造函数，用来生成 Set 数据结构 这里说的Set其实就是我们所要讲到的集合，先来看下基础用法 const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); for (let i of s) { console.log(i); // 2 3 5 4 } // 去除数组的重复成员 let array = [1,2,1,4,5,3]; [...new Set(array)] // [1, 2, 4, 5, 3] 具体用法如果还有不清楚的，这里我会在后面一一细说。现在还是来看一下以ES6中Set类(数据结构)为基础实现的集合吧 Set实例的属性和方法 Set的属性： size：返回集合所包含元素的数量 Set的方法： 操作方法 add(value)：向集合添加一个新的项 delete(value)：从集合中移除一个值 has(value)：如果值在集合中存在，返回true,否则false clear(): 移除集合里所有的项 遍历方法 keys()：返回一个包含集合中所有键的数组 values()：返回一个包含集合中所有值的数组 entries：返回一个包含集合中所有键值对的数组(感觉没什么用就不实现了) forEach()：用于对集合成员执行某种操作，没有返回值 创建一个集合 function Set(arr = []) { // 可以传入数组 let items = {}; this.size = 0; // 记录集合中成员的数量 } module.exports = Set; 这里用{}对象来表示集合，也是因为对象不允许一个键指向两个不同的属性，保证了集合里的元素都是唯一的 ...