Nginx：高性能的Web服务器
Web 服务器就那么几款，目前市面上主流的只有两个：Apache 和 Nginx，两者合计占据了近 90% 的市场份额。 今天我要说的就是其中的 Nginx，它是 Web 服务器的“后起之秀”，虽然比 Apache 小了 10 岁，但增长速度十分迅猛，已经达到了与 Apache“平起平坐”的地位，而在“Top M…
阅读全文文章归档
文章与笔记
关于前端、工程与日常思考的记录。找到一个主题，开始阅读。
OpenResty：更灵活的Web服务器
Nginx 的服务管理思路延续了当时的流行做法，使用磁盘上的静态配置文件，所以每次修改后必须重启才能生效。 这在业务频繁变动的时候是非常致命的（例如流行的微服务架构），特别是对于拥有成千上万台服务器的网站来说，仅仅增加或者删除一行配置就要分发、重启所有的机器，对运维是一个非常大的挑战，要耗费很多的时间和精力，成本…
阅读全文HTTPS性能优化方案
HTTPS 连接大致上可以划分为两个部分，第一个是建立连接时的非对称加密握手，第二个是握手后的对称加密报文传输。 由于目前流行的 AES、ChaCha20 性能都很好，还有硬件优化，报文传输的性能损耗可以说是非常地小，小到几乎可以忽略不计了。所以，通常所说的“HTTPS 连接慢”指的就是刚开始建立连接的那段时间。…
阅读全文HTTPS与SSL/TLS
问什么会有HTTP，因为HTTP不安全，是明文，可伪造。 如果通信过程具备了四个特性，就可以认为是“安全”的，这四个特性是：机密性、完整性，身份认证和不可否认。 机密性（Secrecy/Confidentiality）是指对数据的“保密”，只能由可信的人访问，对其他人是不可见的“秘密”，简单来说就是不能让不相关的…
阅读全文TLS1.2连接过程解析
HTTPS 协议，它需要再用另外一个“握手”过程，在 TCP 上建立安全连接，之后才是收发 HTTP 报文。 TLS 协议的组成 记录协议（Record Protocol）规定了 TLS 收发数据的基本单位：记录（record）。它有点像是 TCP 里的 segment，所有的其他子协议都需要通过记录协议发出。但…
阅读全文函数组件设计模式
所谓设计模式，就是针对特定场景，提供一种公认的最佳实践。 容器模式：实现按条件执行 Hooks Hooks 必须在顶层作用域调用，而不能放在条件判断、循环等语句中，同时也不能在可能的 return 语句之后执行。换句话说，Hooks 必须按顺序被执行到。 这个规则存在的原因就在于，React 需要在函数组件内部维…
阅读全文前端路由原理：vue-router源码剖析
vue-router 入口分析 vue-router 提供了 createRouter 方法来创建路由配置，我们传入每个路由地址对应的组件后，使用 app.use 在 Vue 中加载 vue-router 插件，并且给 Vue 注册了两个内置组件，router-view 负责渲染当前路由匹配的组件，router-…
阅读全文数据流原理：Vuex & Pinia
如何使用Vuex设计你的数据流 前端数据管理 首先，我们需要掌握前端的数据怎么管理，现代 Web 应用都是由三大件构成，分别是：组件、数据和路由。 有一些数据组件之间需要共享的时候,专门定义一个全局变量，任何组件需要数据的时候都去这个全局变量中获取。一些通用的数据，比如用户登录信息，以及一个跨层级的组件通信都可以…
阅读全文自定义事件
在 React 中，父子组件的交互是通过 props。这个机制其实是双向的，父组件通过 props 把值传递给子组件，而子组件则通过暴露一些事件，给父组件反馈到一些状态或数据，这两个环节是组件之间通信的基础。 在 React 中使用原生事件 在 React 中进行事件监听的语法，和原生 DOM 事件的写法是非常类…
阅读全文React 面试
React 面试知识点 什么是声明式编程 声明式编程是一种编程范式，它关注的是你要做什么，而不是如何做。它表达逻辑而不显式地定义步骤。这意味着我们需要根据逻辑的计算来声明要显示的组件。它没有描述控制流步骤。声明式编程的例子有HTML、SQL等 HTML file SQL file 声明式编程 vs 命令式编程 声…
阅读全文React 实现按需加载
如何控制好整个应用的大小，以及如何提升加载性能，才能确保应用的打开速度够快。 照此来看，为了提高首屏加载速度，我们就需要对应用进行分包。首先，在打开某个页面时，只加载这个页面相关的内容，也就是按需加载。同时，为了提升后续应用的打开速度，就需要采用高效的缓存策略，避免前端资源的重复下载。 如何实现按需加载？ 使用 …
阅读全文React 项目优化
打包体积分析 本节目标: 能够分析项目打包体积 分析说明通过分析打包体积，才能知道项目中的哪部分内容体积过大，才能知道如何来优化 使用步骤 1. 安装分析打包体积的包：yarn add source-map-explorer 2. 在 package.json 中的 scripts 标签中，添加分析打包体积的命令…
阅读全文没有找到相关文章
试试其他关键词，或重置筛选条件。