Articles
Articles copied to clipboard
pfan123
经验文章
## 1 WebSocket 是什么 WebSocket 是 HTML5 新增的在单个 TCP 连接上进行 **全双工通讯**（不受限的双向通信）的协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。 > 全双工（Full Duplex）的通讯传输允许数据在两个方向上同时传输，相当于两个单工通信方式的结合。发送和接收分别由两根不同的传输线传送，通信双方既是发送器也是接收器。 Websocket 使用和 HTTP 相同的 TCP 端口，可以绕过大多数防火墙的限制。默认情况下，Websocket 协议使用 80 端口；运行在 `TLS` 上则使用 443 端口。 > 常见问题： >...
## 什么是 monorepo？ `monorepo` 是一种将多个 `package` 放在一个 `repo` 中的代码管理模式，摒弃了传统的多个 `package`多个 `repo`的模式。 目前 `Babel`， `React`， `Angular`， `Ember`， `Meteor`， `Jest` 等许多开源项目都使用该种模式来管理代码。 #### 解决的问题 1. 多个 `repo` 难以管理，编辑器需要打开多个项目； 2. 某个模块升级，依赖改模块的其他模块需要手动升级，容易疏漏； 3. 公用的 npm...
# 前端开发工作流 ## 工具 ### 文档工具 - Typora - Quiver - Tick Tick ### 流程设计工具 - MindNode - OmniGraffle - XMind - Sketch - [Flowkit](https://www.zcool.com.cn/article/ZOTUxNjIw.html) - 用Sketch定制你的流程图 - Craft -...
>HTTP/2 相比于 HTTP/1.1，确实大幅度提高了网页的安全性与性能，但 HTTP/2 推出也存在传输的队头阻塞、多路复用超时导致服务器压力上升的问题，因此出现了 HTTP/3 解决推出出现的问题。 ## HTTP的演化历程  ### 1.HTTP/0.9、HTTP/1.0 1996年 HTTP/0.9 规范 、1996年 [HTTP/1.0规范](https://tools.ietf.org/html/rfc1945) 的发布，该规范定义了基本 **超文本传输协议**。在 HTTP/1.0 中，客户端和服务器之间的每次请求/响应交换都会创建一个新的 TCP 连接，这意味着在每个请求 TCP 和 TLS 都要完成握手连接成本很高，所有请求都会产生延迟。  ### 2.HTTP/1.1...
## **CDN回源** ### **回源原理** - 回源是指浏览器在发送请求报文时，响应该请求报文的是源站点的服务器，而不是各节点上的缓存服务器（比如 Nginx 开启缓存），那么这个过程相对于通过各节点上的缓存服务器来响应的话就称作为回源。回源的请求或流量太多的话，有可能会让源站点的服务器承载着过大的访问压力，进而影响服务的正常访问。 - 回源域名一般是 CDN 领域的专业术语，通常情况下，是直接用 IP 进行回源的，但是如果客户源站有多个 IP，并且 IP 地址会经常变化，对于 CDN 厂商来说，为了避免经常更改配置（回源 IP ），会采用回源域名方式进行回源，这样即使源站的 IP 变化了，也不影响原有的配置。 - 常规的 CDN 都是回源的。即：当有用户访问某一个 URL 的时候，如果被解析到的那个 CDN...
# 浏览器缓存知识 ## web缓存 缓存是指存储指定资源的一份拷贝，并在下次请求该资源时提供该拷贝的技术。当 web 缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载。 - 1.减少网络延迟，加快页面响应速度，增强用户体验 - 2.减少网络带宽消耗 - 3.缓解服务器端压力 ## Web缓存类型 在Web应用领域，Web缓存大致可以分为以下几种类型： **数据库缓存** Web应用，特别是SNS类型的应用关系比较复杂、数据库表繁多，需频繁进行数据库查询，很容易导致数据库不堪重荷。为了提高查询的性能，将查询后的数据放到内存中进行缓存，方便下次查询直接从内存缓存返回，快速响应。比如常用的缓存方案 [memcached](https://www.mysql.com/why-mysql/memcached/)，[redis](http://redis.js.org/)。 **服务器端缓存** - 代理服务器缓存 代理服务器是浏览器和源服务器之间的中间服务器，浏览器先向这个中间服务器发起Web请求，经过处理后（比如权限验证，缓存匹配等），再将请求转发到源服务器。代理服务器缓存的运作原理跟浏览器的运作原理差不多，只是规模更大。可以把它理解为一个共享缓存，不只为一个用户服务，一般为大量用户提供服务，因此在减少相应时间和带宽使用方面很有效，同一个副本会被重用多次。常见代理服务器缓存解决方案有 [Squid](http://www.squid-cache.org/) 等。 - CDN缓存 CDN（Content delivery networks）缓存，也叫网关缓存、反向代理缓存。CDN缓存一般是由网站管理员自己部署，为了让他们的网站更容易扩展并获得更好的性能。浏览器先向CDN网关发起Web请求，网关服务器后面对应着一台或多台负载均衡源服务器，会根据它们的负载请求，动态将请求转发到合适的源服务器上。虽然这种架构负载均衡源服务器之间的缓存没法共享，但却拥有更好的处扩展性。从浏览器角度来看，整个CDN就是一个源服务器。...
## 前言 `React` 项目中，很常见遇到页面由于某个 `React` 组件渲染错误（代码书写错误不规范或后端接口字段调整出错），导致整个应用被挂载出现白屏，且可能无法追踪造成影响极大，究其原因觉得是`React` 设计的坑点 **自 React 16 起，任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载。** 针对此类问题，我们如何来进行**感知上报以及应急兜底**呢🤔️？ `Error Boundaries` 是 React16 提出来用来捕获渲染时错误的概念，`Error Boundaries` 是一种 React 组件，这种组件**可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，且会渲染出兜底 UI**。 ## Error Boundaries `Error...
Blob对象
一直以来，JS都没有比较好的可以直接处理二进制的方法。而Blob的存在，允许我们可以通过JS直接操作二进制数据。 # Blob对象 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 [File](https://developer.mozilla.org/zh-CN/docs/Web/API/File) 接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件。 > 数据类型 Blob 对象是在HTML5中，新增了File API。 ## 构造Blob对象 生成Blob对象有两种方法：一种是使用Blob构造函数，另一种是对已有的Blob对象使用slice()方法切出一段。 ### Blob构造函数 ``` var blob = new Blob(data[, options])) ``` 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。...
对于前端开发者来说，[ESLint](https://eslint.org/) 是比较常用的代码规范和错误检查工具，ESLint 非常强大不仅提供了大量的常用 [rules](https://eslint.org/docs/rules/)，还有许多实用的 ESLint 插件可以满足各样需求。但随着项目不断迭代发展，可能会遇到已有 ESLint 插件不能满足现在团队开发的情况。那么这时候，我们就需要自定义 Eslint 开发 `ESLint Shareable Config`、`ESLint Plugins`。 - [ESLint Shareable Config](https://cn.eslint.org/docs/developer-guide/shareable-configs)，**可分享的扩展配置（`eslint-config-`）**。 - [ESLint Plugins](https://cn.eslint.org/docs/developer-guide/working-with-plugins)，**插件（`eslint-plugin-`）** 。 ## ESLint Shareable Config 开发 **可分享的扩展配置（`eslint-config-`）** 是一个 ESLint...
## 什么是 Service Worker W3C 组织早在 2014 年 5 月就提出过 Service Worker 这样的一个 HTML5 API ，主要用来做持久的离线缓存。 浏览器中的 javaScript 都是运行在一个单一主线程上的，在同一时间内只能做一件事情。随着 Web 业务不断复杂，我们逐渐在 js 中加了很多耗资源、耗时间的复杂运算过程，这些过程导致的性能问题在 WebApp 的复杂化过程中更加凸显出来。 Service Worker 是在新开 Web Worker进程脱离在主线程之外,...