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